Customize an invoice in the playground¶

Start with the Northstar invoice in the free playground. Change its recipient and heading color, download the PDF, then take the editable project into your own workflow. No account is needed to try it.

A silent walkthrough with on-screen instructions and optional English captions. Read the transcript or download the MP4.

Transcript¶

The recording uses the fictional Northstar invoice example.

Open the playground and wait for the first PDF preview.
In the HTML editor, change Maple & Finch to Willow & Finch.
Select CSS and add this rule at the end:
```
.invoice h1 { color: #b14d2e; }
```
Choose Render PDF. The preview now shows the new recipient and a terracotta INVOICE heading.
Choose Download PDF to save the finished invoice.
Expand Files and projects, select Node.js, and choose Download project. You can also choose Python when exporting your own project.

Continue locally¶

Use Node.js 22 or newer. Extract the Node.js project ZIP and open a terminal in the extracted folder. Run:

npm ci --ignore-scripts
npm run render

The renderer writes output/document.pdf and output/preview/page-1.png. Edit input.html or style.css, then run npm run render again. The ZIP includes the fonts, licenses, dependency lockfile, and renderer.

For application data and reusable templates, continue with the Node.js quickstart. For a Python export, follow the commands in Keep building.