Get started with the visual editor

This walks one template from a starter to a PDF your application renders. You need a Studio sign-in to a workspace, and a role that can create API keys for the last step.

1. Create a template

In a new workspace, Studio’s Home page shows Get started: click the Invoice starter under Create a template.

Anywhere else, open Editor in the sidebar and choose Add template. Enter Invoice as the Template name, set Start with to Ready-made starter, pick Invoice and click Create template.

The template opens in the visual editor, drawn with the starter’s sample data, and in your workspace’s brand kit when it has one. The sample data is saved beside it as sample.json.

2. Change the text

Double-click the heading on the page and type over it; Enter finishes. Or select a block and change its Text in the right panel. In either, type { to put in a field of the data, as in Invoice {invoice.number}.

Add a block from the Add blocks tab, and drag blocks to move them. See lay out the page.

3. Fit it to your data

Your application sends its own data, so make the sample look like it. Open sample.json from the editor’s explorer and give it the fields your data has, or choose another file under Sample data in the Data tab. Then drag fields from the Data tab onto the page to bind blocks to them. A block still bound to a field your data lacks shows under Problems. See show your data.

4. Style it

In the Style tab, change a colour such as accent, and every block that uses it changes. Apply brand kit brings in your workspace’s colours, fonts and logo. See style and brand kit.

5. Check it

The Problems tab lists what would go wrong, such as values the data does not have or images without alt text, and the stress test tries the page with awkward data. More actions → Download PDF saves the draft as it renders. See check a template.

6. Publish

Click Publish in the header. The header then shows Published v1: renders by name now use this version, and later edits stay in the draft until you publish again.

7. Render it from your code

1. Create a key under Developers → API keys in the Studio sidebar.
2. In the editor’s explorer, open the template’s ⋯ menu and choose Use from code. In a new workspace, Show code under Render from your code on the Home page does the same.
3. Pick your language, copy the Render it request, and run it with your key in API_KEY. It sends the template’s sample data; send your own data in its place.

See the Reports API for the rest of what a render can ask for.

The starters

Ready-made starter offers twelve documents. Each comes with sample data, is tagged for accessible PDF/UA, and takes its colours and fonts from the template style, so a brand kit restyles it.

Starter	What it holds
Invoice	Lines, VAT and totals, a Factur-X e-invoice and a payment QR code
Receipt	A till receipt on an 80 mm roll, with a barcode for returns
Ticket	Journeys, seats and passengers, with a QR code checked on board
Voucher	A gift voucher with its value, a message and a code to redeem
Event badge	A name badge coloured by role, with a check-in QR code
Passenger manifest	A row per passenger over as many pages as it takes, with counts
Report	Key figures, a chart and a table with totals
Contract	Parties, numbered clauses and a signature for each party
Letter	An address for a window envelope, paragraphs and a signature
Certificate	A framed certificate with signatures and a QR code to check it
Shipping label	A 4 × 6 inch label with the address and a tracking barcode
Packing slip	What is in the parcel, what follows later, and an order barcode