App Canvas · Open source · Voor coding agents · v0.12.0

Je hele UI. Eén canvas. Echte code.

Name: App Canvas
Author: Tom Tang

Verken echte schermen, toestanden en interactieve flows op een zoombaar canvas, gebouwd en onderhouden met je coding agent.

Open de demo ↗Voeg toe aan je repo →

Synthetische data · geen app-backend · geen account · geen API-sleutel

App Canvas Cloud →

TL;DR

Bekijk volledige geïmplementeerde schermen, benoemde toestanden en verbonden flows samen.
Onderhoud één UI-implementatie. Je agent maakt fixtures, adapter en dekkingscontroles.
Probeer 77 toestanden en 44 flows met synthetische data, zonder account of API-sleutel.

Echte StoolSense-toestanden op het App Canvas-overzicht — Echte demo: 77 toestanden, 44 flows en 121 afspeelbare items. Daaronder losse cases, geen 121 E2E-flows.

Bekijk, gebruik en speel af

Zoom uit om de app te begrijpen

Volledige schermen per pagina, zoeken, filters en inklapbare panelen. Flowlinks verplaatsen de camera naar hun bestemming.

Zoom in om de echte UI te gebruiken

Browse vergrendelt bediening tijdens het schuiven. Kies een scherm en Interact om de oorspronkelijke code met tijdelijke data te bedienen.

Druk op Demo om een flow uit te leggen

Speel succes, fouten en herstel af in één doorlopende appsessie, met actieaanwijzingen, bijschriften, pauze, snelheid en tijdlijn.

Echte toestandsgraaf van opslagfout, bewaard concept en geslaagde herhaling — Kies een flow voor volledige schermen en benoemde overgangen. Een link verplaatst de camera naar de bestemming.

Echte weergave na mislukte offline opslag met behoud van het concept — Echte fout- en herstel-UI. Afspelen voert vastgelegde acties en controles uit; een getekende verbinding is geen test.

Van bestaande repo naar interactief canvas

Geef de integratie aan een agent die bestanden kan lezen, wijzigen en opdrachten uitvoeren. Bestaand Storybook of een handmatige schermlijst is niet nodig. Installatie alleen vult het canvas niet.

Voeg toe aan je repo →

App Canvas Cloud · wachtlijst

Wil je een gehoste werkruimte? Meld je interesse. Cloud is nog niet beschikbaar; de MIT-tool en openbare demo kun je al gebruiken.

Wachtlijst verlaten

Privacy en telemetrie

Optionele minimale gebeurtenissen via Cloudflare naar PostHog. Geen inhoud, code, namen, paden, e-mail of IP worden doorgestuurd naar PostHog. Je kunt dit uitzetten.

Privacy en telemetrie ↗

Reikwijdte en beperkingen

Web gebruikt echte HTML/CSS en oorspronkelijke JavaScript voor interacties. UIKit, SwiftUI en Android vereisen harnesses en bewijs uit de oorspronkelijke runtime; een opname is geen interactieve native app.
Dekking verbindt beoordeelde broncode met cases en ontdekt niet automatisch elke bedrijfsconditie. UI-controles kwalificeren geen productiebackend, klinische juistheid of modelprecisie.
Viewer: standaard Engels, met 11 talen. De openbare demo is een vast synthetisch frontend; lokale integraties volgen je broncode. Prestaties op een fysieke iPad zijn niet gemeten.

App Canvas in Safari op een fysieke iPhone — Safari-opname op een fysieke iPhone. Het technische artikel beschrijft de weg van crash naar werkende app en de meetgrenzen.

Safari-techniekartikel

Safari-opname op een fysieke iPhone. Het technische artikel beschrijft de weg van crash naar werkende app en de meetgrenzen.

Safari-techniekartikel →