pdfnative-react playground

Edit the JSX on the left, click Render PDF, and a real PDF is produced in your browser by pdfnative-react. A custom React reconciler compiles the component tree into pdfnative blocks — no DOM, no headless browser, no upload. See the React guide for the full component reference.

How this demo loads. React 19, pdfnative-react, and pdfnative are imported from the esm.sh CDN, and JSX is transpiled in-page with Babel standalone — purely to make a zero-install browser demo. In a real project you install the packages from npm and your bundler handles JSX. This CDN tooling does not affect the published packages: the core pdfnative engine stays zero-dependency, and React is a peer dependency of pdfnative-react only.

Preset:

JSX source

Loading React + pdfnative-react from CDN…

PDF preview

Prefer tokens over JSX? Use a DocSpec

For AI agents and token-frugal authoring, pdfnative-react ships a compact DocSpec — plain data compiled by compileSpec() / renderSpecToBytes() with a published JSON Schema. The same invoice above becomes:

import { renderSpecToBytes } from 'pdfnative-react';

const bytes = renderSpecToBytes({
  title: 'Invoice #1024',
  footerText: 'Acme Inc',
  blocks: [
    ['h1', 'Invoice #1024'],
    ['p', 'Thank you for your business.'],
    ['table', { h: ['Item', 'Total'], r: [['Pro plan', '$49.00']], zebra: true }],
  ],
});

See the React guide for the full component and DocSpec reference.