Local preview
Run the `useprint` CLI locally and wire `render()` into a PDF pipeline in code.
The useprint CLI is the local workflow layer for the library. It helps you preview documents in the browser.
Start the preview app
npx useprint devBy default, this reads from ./documents and starts the preview app on port 3000.
To point at a different directory or port:
npx useprint dev --dir ./templates --port 4000Render to PDF in code
For server-side PDFs, the typical flow is: render(<YourDocument />) → HTML string → headless Chromium print-to-PDF. The HTML is the same shape the preview app uses; only the last step changes (on-screen vs. page.pdf).
Install what you need for Node (Playwright is one common Chromium driver):
npm install @useprint/render @useprint/components playwrightEnd-to-end example:
import { writeFile } from 'node:fs/promises';
import { render } from '@useprint/render';
import { Body, Document, Head, Page } from '@useprint/components';
import { chromium } from 'playwright';
function Quote() {
return (
<Document>
<Head />
<Body>
<Page style={{ padding: 40 }}>
<h1>Quote</h1>
<p>Render this tree to HTML, then print that HTML in Chromium.</p>
</Page>
</Body>
</Document>
);
}
export async function renderQuoteToPdf(outputPath: string) {
const html = await render(<Quote />);
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.setContent(html, { waitUntil: 'networkidle' });
const pdf = await page.pdf({ format: 'A4', printBackground: true });
await writeFile(outputPath, pdf);
} finally {
await browser.close();
}
}Swap Playwright for Puppeteer or another stack if you prefer—the boundary is always HTML from render, then your PDF backend.
Where PDFs fit in
Useprint focuses on React authoring and HTML rendering. After render, you hand the HTML to Chromium (as above), a hosted HTML-to-PDF API, or any other print pipeline.