Introduction

What this package is, in plain words, and the one rule that explains every decision inside it.

@storvexa/pdf-builder Chapter 1 of 14
Documentation

What it is

It is a screen you put inside your own application. On that screen, your users build a document — an invoice, a quotation, a report — by dragging pieces onto a page and typing into them.

You get two things out of it:

1 · A small data object
{ page: { size: 'A4' }, tokens: { currency: 'INR' }, rows: [ … your blocks … ], }

Store it in your database. It describes the document; it is not the document.

2 · A PDF, when asked
INVOICE
INV-0042 · 12 March
Bill to Priya Sharma
Total ₹1,23,456.00

Made in the browser, when the user clicks Export.

What it is not

  • Not a website builder. It builds documents that get printed — with pages, margins and page breaks.
  • Not an invoicing system. It will lay an invoice out beautifully. It will not add up your tax or chase the payment.
  • Not something you call from a script. There is a person, looking at a screen, dragging things.

The one rule

The package never talks to the internet by itself. No saving. No uploading. No AI calls. Not even error reporting. Whenever it needs something from the outside world, it calls a function you wrote and waits for you.

Why that matters to you, practically:

  • It cannot leak your data, because it cannot send anything anywhere.
  • It works with your login, your database and your cloud — because it never assumes any of them.
  • Nothing is stored in the browser behind your back.

This is why you will see the word callback everywhere. A callback is just a function you hand over so the package can ask you to do something:

<PdfBuilder onSave={(doc) => myApi.save(doc)} // "please save this" onUploadImage={(file) => myApi.upload(file)} // "please store this file" />
The trade-off, stated honestly. It means you write a few small functions instead of filling in a config file. In return, nothing in the package breaks when your infrastructure is not what it expected.

Who does what

Most "how do I make it…" questions are answered by finding which column the thing lives in.

The package does thisYou do this
Shows the editorAnything involving the internet
Keeps the document valid, and keeps old ones openingLogging users in, and deciding who may do what
Undo and redoYour database, and browser storage
The blocks, and the drag-and-dropStoring and deleting uploaded files
Splitting content across pagesTurning a stored file into a web address
Ready-made designs and templatesCalling an AI provider
Formatting money, dates and numbersExchange rates, and any maths on money
Making the PDF in the browserMaking it on a server, if you would rather
Preview, import and exportPutting real customer details into a template

What a document looks like

You will meet this object constantly — it is what you save and what you load. It has five parts, and none of them are complicated.

{ version: 3, page: { … }, tokens: { … }, rows: [ … ], header: { … } | null, footer: { … } | null, coverPage: { … } | null, }
In plain words

version — so old saved documents keep opening. Do not touch it.

page — paper size, portrait or landscape, margins, page numbers.

tokens — the document's colours, font, spacing, language and currency.

rows — the actual content, top to bottom.

header / footer / coverPage — the repeating bits, or null if unused.

And rows is just this

rows: [ { columns: [ { block: logo }, // one row, two columns, { block: invoiceMeta }, // side by side ]}, { columns: [ { block: lineItemsTable }, // the next row, full width ]}, ]
The same thing, on the page
ACME
INV-0042
12 March
Line items table

Dashed outer box = a row. Dashed inner box = a column.

A row is a stripe across the page. A column is a share of that stripe. A column holds exactly one block. That is the entire layout system, and it does not get more complicated later — stacking two things vertically means two rows, not two blocks in a column.

What we promise

Documents you saved will keep opening. Even after we release new versions. The document remembers which version it was made with, and gets updated quietly when it loads.
Changing how something looks never deletes what someone wrote. Users can try every design on a paragraph and their words survive all of them.
Nothing leaves the browser unless you sent it.
What we do not promise: a PDF identical to the screen, down to the pixel. Positions, spacing and page breaks are exact — those are measured from the real page. But fonts get swapped for close standard ones, and gradients become a single colour. Preview & PDF says exactly which is which. Read it before promising anything to a client.

Next: install it, or go straight to the step-by-step quick start.