Exemplos

Três apps de exemplo vivem em examples/ no repositório, cada um com seu próprio README, e cada um rodável ao vivo no Playground:

report-builder

Abrir no playground →

O designer completo — fontes de dados JSON, um explorador de campos, 6 templates prontos, abas de página (Template.pages — cada aba com seu próprio design, um PDF combinado com numeração contínua) — usando os componentes de UI prontos do pacote (Button/Card/Input/ PdfPreviewModal). O caminho mais rápido: usa os componentes que a lib já distribui.

custom-ui

Abrir no playground →

As mesmas funcionalidades do report-builder, mas a casca inteira (header, sidebar, cards, árvore de campos, modais) é CSS puro escrito à mão — zero Button/Card/Input/ícone importado do pacote. Prova que o próprio <Designer> funciona com qualquer design system, ou nenhum.

headless-designer

Abrir no playground →

Sem o componente <Designer> nenhum. Um canvas montado à mão — a própria lógica de arrastar/redimensionar (mousedown/mousemove/ mouseup puro, sem react-rnd) sobre generatePdf + tipos de json-pdf-designer/server, e o PdfPreview da entrada principal. Prova que o modelo de dados e o motor de PDF funcionam sozinhos, independente do editor de arrastar/soltar — a mesma ideia que um backend Node usa (ver Uso só no servidor e Integração com backend), só que rodando no navegador aqui pra demonstração.

Rodando localmente

Nenhum dos três é workspace do npm — cada um aponta pro pacote via "json-pdf-designer": "file:../.." no próprio package.json. A partir da raiz do repositório:

npm run build          # builda o pacote raiz uma vez, pra dist/ existir
cd examples/report-builder   # ou custom-ui, ou headless-designer
npm install
npm run dev