App Canvas · Open Source · Für Coding-Agenten · v0.12.0

Deine ganze UI. Eine Zeichenfläche. Echter Code.

Name: App Canvas
Author: Tom Tang

Erkunde echte App-Seiten, Zustände und interaktive Abläufe auf einer zoombaren Fläche, erstellt und gepflegt mit deinem Coding-Agenten.

Demo öffnen ↗Zum Repository hinzufügen →

Synthetische Daten · kein App-Backend · keine Anmeldung · kein API-Schlüssel

App Canvas Cloud →

TL;DR

Sieh vollständige implementierte Seiten, benannte Zustände und verbundene Abläufe zusammen.
Eine UI-Implementierung. Dein Agent erstellt Fixtures, Adapter und Abdeckungsprüfungen.
Teste 77 Zustände und 44 Abläufe mit synthetischen Daten, ohne Anmeldung oder API-Schlüssel.

Echte StoolSense-Zustände in der App-Canvas-Übersicht — Echte Demo: 77 Zustände, 44 Abläufe, 121 abspielbare Einträge. Darunter einzelne Fälle, nicht 121 E2E-Abläufe.

Überblicken, bedienen, abspielen

Herauszoomen und die App verstehen

Vollständige Seiten, nach Seite gruppiert, mit Suche, Filtern und einklappbaren Panels. Ablauf-Links bewegen die Kamera zum Ziel.

Hineinzoomen und die echte UI bedienen

Browse sperrt Bedienelemente zum Verschieben. Wähle eine Seite und Interact, um ihren Originalcode mit Wegwerfdaten zu bedienen.

Mit Demo einen Ablauf erklären

Erfolg, Fehler und Wiederherstellung laufen in einer fortlaufenden App-Sitzung, mit Aktionshinweisen, Texten, Pause, Tempo und Schritt-Zeitleiste.

Echter Zustandsgraph für Speicherfehler, erhaltenen Entwurf und erfolgreichen Wiederholungsversuch — Wähle einen Ablauf für vollständige Seiten und benannte Übergänge. Ein Link bewegt die Kamera zum Ziel.

Echte Wiedergabe nach fehlgeschlagenem Offline-Speichern mit erhaltenem Entwurf — Echte Fehler- und Wiederherstellungs-UI. Die Wiedergabe führt definierte Aktionen und Prüfungen aus; eine gezeichnete Kante ist kein Test.

Vom vorhandenen Repository zur interaktiven Übersicht

Beauftrage einen Agenten, der Dateien lesen, ändern und Befehle ausführen kann. Vorhandenes Storybook oder manuelle Seitenlisten sind nicht nötig. Die Installation allein füllt die Übersicht nicht.

Zum Repository hinzufügen →

App Canvas Cloud · Warteliste

Interesse an einem gehosteten Arbeitsbereich? Cloud ist noch nicht verfügbar; das MIT-Tool und die öffentliche Demo kannst du bereits nutzen.

Warteliste verlassen

Datenschutz und Telemetrie

Optionale minimale Ereignisse über Cloudflare an PostHog. Keine Inhalte, Codes, Namen, Pfade, E-Mails oder IPs werden an PostHog weitergeleitet. Du kannst dies deaktivieren.

Datenschutz und Telemetrie ↗

Umfang und Grenzen

Web-Vorschauen nutzen echtes HTML/CSS und Original-JavaScript bei Interaktionen. UIKit, SwiftUI und Android brauchen Harnesses und Nachweise aus der ursprünglichen Laufzeit; ein Bild ist keine interaktive native App.
Abdeckung ist eine geprüfte Zuordnung von Quellen zu Fällen, keine automatische Erkennung jeder Geschäftsbedingung. UI-Prüfungen qualifizieren weder Produktions-Backends noch klinische oder Modellgenauigkeit.
Viewer: standardmäßig Englisch, 11 Sprachen. Die öffentliche Demo ist ein eingefrorenes synthetisches Frontend; lokale Integrationen folgen dem Quellcode. Physische iPad-Leistung wurde nicht gemessen.

App Canvas in Safari auf einem echten iPhone — Safari-Aufnahme auf einem echten iPhone. Der Technikartikel erklärt den Weg vom Absturz zur nutzbaren App und die Messgrenzen.

Safari-Technikartikel

Safari-Aufnahme auf einem echten iPhone. Der Technikartikel erklärt den Weg vom Absturz zur nutzbaren App und die Messgrenzen.

Safari-Technikartikel →