JDFJDF/ docs

Live examples

Every embed below is a real <jdf> tag in this page — view source to confirm. Each demonstrates a different option combination.

Minimal

Just src. The default is a 600px-tall toolbar-only viewer.

<jdf src="hello-world.jdf"></jdf>
live

With sidebar

Adds a thumbnail sidebar for page navigation. Best for multi-page documents.

<jdf src="article.jdf" sidebar="true"></jdf>
live · sidebar enabled

Custom dimensions

width and height accept any CSS length: "100%", "600px", "80vh", etc. Numbers are interpreted as pixels.

<jdf src="invoice.jdf" width="100%" height="500"></jdf>
live · custom size

Initial zoom

Use zoom to set the starting magnification. 1 = 100%.

<jdf src="hello-world.jdf" zoom="0.7"></jdf>
live · zoom 0.7

Fit-to-width

fit="fit-width" auto-zooms so the page fills the container width. Resizes responsively.

<jdf src="hello-world.jdf" fit="fit-width"></jdf>
live · fit-width

Force dark mode

By default the viewer follows OS preference. Force it explicitly with dark-mode.

<jdf src="hello-world.jdf" dark-mode="dark"></jdf>
live · forced dark

No toolbar (clean embed)

For embedding inside a card or showcase where you want just the page, no chrome.

<jdf src="hello-world.jdf" toolbar="false"></jdf>
live · toolbar hidden

Start on a different page

page="N" jumps to page N (0-based) on initial load.

<jdf src="article.jdf" page="1"></jdf>
live · starts on page 2

Cross-origin example (CDN-style)

Point at a JDF file hosted anywhere — the browser fetches it as long as CORS allows. The same files embedded above are also served from this site at:

Try them in your own page:

<jdf src="https://uurtech.github.io/jdf/examples/invoice.jdf"></jdf>

What about PDFs?

jdf.js is a JDF renderer — it doesn't parse PDF in the browser. The desktop reader does PDF→JDF conversion (PDF.js + canvas + image extraction); pulling that into the web library would push the bundle past 300 kB.

The recommended flow:

  1. Open the PDF in JDF Reader (desktop) — drag & drop, double-click in Finder, or Cmd+O.
  2. Edit if you want, then Cmd+S → save as .jdf.
  3. Host that .jdf next to your site assets and embed with <jdf src="...">.

A real test PDF is included in this repo so you can try the round-trip yourself: examples/sample.pdf (85 KB, public LinkedIn profile). Download → drop on the desktop reader → save as JDF → embed.