← Playground index

Invoice editor

A small but real-feeling app that uses every AjaxSlim element together. Edit it like real software: pick products, change quantities, add/remove lines, save. The grand total is the canary - it sums values you edit through several different elements at once, so almost any cross-element glitch makes it visibly wrong. (Integration scenario - the whole point is that the parts work together.)



Customer details

Editing Acme Corp.

A dialog with its own update container - proves ajax works inside a native <dialog>.

Touch (save + refresh)

Saves so far: 0

Lines

+ Add line

ProductQtyUnitLine total
1000 remove
1200 remove
300 remove
3 line(s) · Grand total: 2500

Status: Draft toggle

Saved 0 time(s) - press Enter to save too

Summary

Draft · 3 lines · total 2500

Background

Server time 16:51:46 · refresh #0 (a background self-update every 10s; the clock proves a real round-trip, and it should never disturb your editing)

A ping checks the invoice cache key every 15s and refreshes the summary only when it actually changed.

Rendered invoice

INVOICE
Bill to: Acme Corp
Draft
ProductQtyUnitAmount
Widget 2 500 1000
Gadget 1 1200 1200
Sprocket 4 75 300
Total2500