Write it. Watch it draw.

Edit any spec and the real engine redraws as you type. No model runs on this site: connect your own, or paste the model guide into any chat assistant and drop its answer here.

Split the bill

No problems

state bill=86 percent=18 people=2derive tip={bill * percent / 100}derive total={bill + tip}derive perPerson={total / people}card  text "Tip calculator" style=title  text "Change any input and every figure updates." tone=muted  stepper "Bill ($)" bind=bill min=0 max=2000 step=2  slider "Tip: {percent}%" bind=percent min=0 max=30  row    button "15%" variant={percent == 15 ? 'primary' : 'secondary'} on=set:percent:15    button "18%" variant={percent == 18 ? 'primary' : 'secondary'} on=set:percent:18    button "20%" variant={percent == 20 ? 'primary' : 'secondary'} on=set:percent:20  stepper "People" bind=people min=1 max=20  divider  grid min=130 gap=10    stat label="Tip" value={money(tip)}    stat label="Total" value={money(total)}    stat label="Each person pays" value={money(perPerson)} tone=accent

Preview

Your color

Elements: 0
Parse: 0.00 ms
Layout: 0.00 ms
Paint: 0.00 ms

Layout boxes Hit regions Inspect

Problems

No problems. The parser accepted every line.

State

sayshape.state.snapshot()

Events sent to the page

None yet. emit:, go: and notify: actions show up here; nothing is sent anywhere.

Inspector

Turn on Inspect and click something in the preview, or put the cursor on a spec line.

Model guide

The instructions a model gets, generated from the component definitions: the compact guide the development playground sends. Paste it into a chat assistant, describe a screen, and paste the reply into the editor. Results depend on the model.

Loading…

Theme code for this style

TypeScript that sets the preview's style in your own app, using extendTheme and sayshape.setTheme.