@pdfsbuild/react

Embeddable React editor UI for pdfs.build. Drop the editor into your React app as composable components.

Quick start

npm install @pdfsbuild/core @pdfsbuild/react

import { PdfReportProvider, PdfReportEditor } from '@pdfsbuild/react'
import '@pdfsbuild/react/styles.css'

function ReportDesigner({ token }: { token: string }) {
  return (
    <PdfReportProvider sessionToken={token}>
      <PdfReportEditor />
    </PdfReportProvider>
  )
}

apiUrl defaults to https://backend.pdfs.build; only set it to target a non-production environment.

The emb_ token must be created server-side with your pdfs.build API key; see docs/embedded-integration.md. The session is already scoped to one template, so no templateId is needed here.

Composable parts

<PdfReportProvider ...>
  <EditorToolbar />
  <EditorChat>
    <EditorChat.Messages />
    <EditorChat.Input />
  </EditorChat>
  <EditorPreview>
    <EditorPreview.Tab value="preview" />
    <EditorPreview.Tab value="data" />
  </EditorPreview>
</PdfReportProvider>

Or use the convenience layout with chat, toolbar, and previewTabs props. preview is the centre canvas; every other tab (data, history, dev, code) lives in the right-hand inspector. dev only appears when you supply a pane for it via components.PreviewTabContent.dev:

<PdfReportEditor chat={false} previewTabs={['preview', 'data']} />
<PdfReportEditor components={{ PreviewTabContent: { dev: MyApiSnippets } }} />

Theming

<PdfReportProvider theme={{ primary: '#6366f1' }} dark={isDarkMode}>

All styles live in @layer pdfs and use CSS variables scoped to .pdfs-root, so host styles override by default.

Headless hooks

Build your own UI with useEditor, usePreview, useEditorChat, useTemplateData, useCheckpoints, and useUsage.

Documentation

Full guide: docs/embed-react-sdk.md.

Example app: examples/embed-react.