# Invoice builder with live preview

> A split-screen invoice builder: details are typed on the left while the printed invoice builds line by line on the right and gets a PAID stamp.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

One prompt builds the form and the invoice preview.

Prompt:

```text
Build a single-file HTML invoice builder, 1280x720, soft grey-blue background #eceef4, two white rounded panels (22px radius) with a large soft shadow. Accent indigo #4f46e5. System fonts, no libraries.
Left panel "Invoice details": a Client field and a Project field styled as inputs (44px tall, 1.5px border, 12px radius), then a "Line items" group with three rows (description, quantity, price): Brand strategy 1 $1,800 / Logo system 1 $1,480 / Guidelines PDF 1 $1,000, and an indigo "Send invoice" button.
Right panel is the invoice document: large heading "Invoice #0142" with the number in indigo, "Billed to Harbor & Finch" and "Due Dec 1, 2026" on a meta row, a table of the three items that appear one at a time (fade and rise), and a big "Total due" figure (44px) that counts from $0 to $4,280.00 using a CSS @property integer animation.
Motion (8 second loop): the Client field types "Harbor & Finch" with a steps() width animation and a blinking indigo caret, then the Project field types "Brand identity refresh". The invoice rows appear, the total counts up, the Send button does a press animation (scale .94), and finally a green rotated "PAID" stamp scales from 2.2 to 1 at the bottom right. Fade everything out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Check the typing

The two fields should type themselves with a caret.

### 3. Check the invoice

Rows should appear, the total should count to $4,280.00 and the PAID stamp should land.

Done when: You can see it working in the browser.

### 4. Wire it up

Connect the inputs to the preview with a few lines of JavaScript when you make it real.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/index-html/ (Complete code of the result in the video.)

## About

A form and a live invoice preview side by side. Client and project fields type themselves, three line items appear on the invoice, the total counts up to $4,280.00 and a green PAID stamp slams down. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/?format=json
MCP server: https://ownlyplans.com/mcp