Getting started
Five minutes from "what is JDF" to "I have a document on my website".
1. See it in your browser
Below is a real <jdf> tag pointing at a file. The page you're reading right now uses jdf.js to embed it.
2. Embed one in your site
Three lines of HTML, no build step:
<link rel="stylesheet" href="https://unpkg.com/@uurtech/jdf@0.1.8/dist/jdfjs.css">
<script type="module" src="https://unpkg.com/@uurtech/jdf@0.1.8"></script>
<jdf src="/whitepaper.jdf"></jdf>
That's the whole thing. The script auto-detects every <jdf> tag, fetches the URL, and renders the document in place. Full embed docs →
3. Or install the desktop reader
To read, edit, import PDFs, and export — install the macOS app:
brew tap uurtech/jdf
brew install jdf
Then double-click any .jdf in Finder, or drop a PDF onto the welcome screen and it converts to JDF on the fly. Desktop Reader docs →
Try it now: download sample.pdf (85 KB), drop it on the JDF Reader window, and it opens as an editable JDF in <1 second.
4. Or generate JDF from code
A JDF file is just JSON, so generating one is one line:
const doc = {
$jdf: "1.0.0",
meta: { title: "My Report" },
pages: [{
elements: [
{ type: "text", content: "Hello", heading: 1 },
{ type: "text", content: "World" }
]
}]
};
await fs.writeFile("out.jdf", JSON.stringify(doc, null, 2));
No PDF library, no font dictionaries, no encoding rules. Full schema reference ↗
5. Validate it in CI
npx @uurtech/jdf-cli validate my-doc.jdf
Reports path-level errors against the JSON Schema, with warnings vs hard failures separated. CLI usage ↗
What's next
Pick a path:
- Embedding JDF on the web with jdf.js — for putting a document on your site.
- Why JDF is AI-friendly — LLMs read JSON, not binary blobs.
- The format spec — for understanding every element and style property.
- The desktop Reader — for reading and editing on your Mac.
- The CLI — for validating and converting documents.