Skip to main content

Ready-made UI components

If you don't want to (or can't) build your own visual shell around <Designer>, the package also exports the ready-made components it uses internally (Button, Card, Input, Checkbox, icons, etc — same look as the property panel, since they are what the property panel uses) and a complete PdfPreviewModal:

import { Button, Card, CardHeader, CardTitle, Badge, Input, ColorInput, Textarea, Select } from "json-pdf-designer";
import "json-pdf-designer/theme.css";

<Card>
  <CardHeader>
    <CardTitle>Data sources</CardTitle>
    <Button variant="ghost" size="icon"><IconX /></Button>
  </CardHeader>
  <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
</Card>

PdfPreviewModal​

A full modal wrapping <PdfPreview> — fit-to-container scale (recalculated on window resize), top-aligned scrollable multi-page layout, download and close buttons.

It comes from the json-pdf-designer/preview entry point, not the main one, because it (and PdfPreview) is the only part of the package that uses pdf.js — an optional peer dependency, so install it first:

npm install pdfjs-dist
import { PdfPreviewModal } from "json-pdf-designer/preview";

{previewBytes && (
  <PdfPreviewModal
    bytes={previewBytes}
    page={template.page}
    onClose={() => setPreviewBytes(null)}
  />
)}

The same entry point exports PdfPreview (the bare canvas renderer, if you want your own modal) and configurePdfWorker (self-host pdf.js's worker instead of the default CDN). That's all of it — the preview is the only thing pdf.js is used for, so skipping pdfjs-dist costs you no other feature.

None of this is required​

The custom-ui example builds its entire shell with its own CSS, without importing any of these components, to prove <Designer> works either way. The headless-designer example goes one step further and doesn't use <Designer> at all.

Styling them​

Their appearance comes from theme.css; without that import they render bare and you style the .jpd-* classes from scratch. All of them accept className/style/...rest, and the ones that render more than one element expose the inner ones through parts, by role — see Customizing components, which also covers putting your Button inside the editor rather than only around it.