Tag 10. Ich habe nach einem Miro-Klon gefragt. Ein vollständiges Infinite-Canvas mit Formen, Verbindern, Ebenen und einem Präsentationsmodus.
Der Prompt#
“Bau eine Whiteboard-App mit unendlichem Canvas wie Miro. Local-first, TypeScript, HTML5 Canvas.”
Das war der Ausgangspunkt. Alles andere kam aus dem Task-Breakdown.
Wie Es Gebaut Wurde#
Dieses hier war groß. Watchfire hat es in 27 Tasks aufgeteilt, das ist das Maximum, was ich bisher in dieser Challenge gesehen habe. Das Breakdown deckte ab:
- Formen und Zeichenwerkzeuge (Rechtecke, Ellipsen, Linien, Pfeile)
- Freihand-Stift-Werkzeug
- Textelemente
- Haftnotizen mit Farbcodierung
- Intelligente Verbinder zwischen Formen
- Raster und Snap-to-Grid
- Undo/Redo-Verlauf
- Export nach PNG und JSON
- Ebenen-Panel
- Farbwähler
- Zoom- und Pan-Steuerung
- Tastenkürzel für alles
- Dark Mode
- Willkommensbildschirm mit Onboarding
- Präsentationsmodus
27 Tasks sind eine Menge. Aber sie waren gut abgegrenzt. Jeder hat ein spezifisches Stück Funktionalität hinzugefügt, ohne das Vorherige zu zerbrechen.
Was Ich Bekommen Habe#
Das Ding ist überraschend umfangreich.
Es fühlt sich an wie ein echtes Whiteboard-Tool. Du öffnest es und da ist ein unendlicher Canvas mit einem Punktraster. Du kannst pannen, rein- und rauszoomen, Formen droppen, Text schreiben, Dinge mit Pfeilen verbinden. Die Basis-Whiteboard-Schleife funktioniert einfach.
Es gibt einen richtigen Willkommensbildschirm. Er zeigt dir die Tastenkürzel und wie du anfängst. Du kannst ihn schließen und eine Box abhaken, damit er nicht wieder erscheint. Kleine Geste, aber sie lässt die App fertig wirken.
Die Verbinder sind intelligent. Du ziehst eine Linie zwischen zwei Formen und sie snapped an Verbindungspunkte. Verschiebst du eine Form, folgt der Verbinder. Das ist die Art Feature, die eine Zeichen-App von einem Diagramming-Tool unterscheidet.
Das Ebenen-Panel funktioniert wirklich. Jedes Element taucht in einer Seitenleisten-Liste auf. Du siehst die Hierarchie, kannst Dinge umsortieren und verwalten, was oben auf was liegt. Wie ein Mini-Figma-Ebenen-Panel.
Tastenkürzel für alles. V zum Auswählen, R für Rechteck, O für Ellipse, P für Stift, T für Text, S für Haftnotiz. Plus das ganze Standardzeug wie Cmd+Z für Undo, Cmd+Shift+Z für Redo. Es gibt ein komplettes Shortcut-Overlay, das du mit ? aufrufen kannst.
Das Stift-Werkzeug ist smooth. Ich habe ein Gesicht gezeichnet, nur zum Testen. Die Striche fühlen sich responsiv und natürlich an. Nicht drucksensitiv oder irgendwas Ausgefallenes, aber gut genug, um Ideen bei einem Brainstorm zu skizzieren.
Die Bug Reports#
Dieses hier war relativ sauber. Bei 27 Tasks hätte ich mehr Probleme erwartet, aber der inkrementelle Ansatz bedeutete, dass jedes Stück getestet wurde, bevor das nächste dazukam. Die Hauptsachen, die mir aufgefallen sind:
- Haftnotizen überlappten sich manchmal mit Text, wenn man sie zu klein skalierte
- Die Minimap in der Ecke konnte nach heftigem Zoomen aus dem Sync laufen
- Der PNG-Export schnitt gelegentlich Elemente an den Canvas-Rändern ab
Nichts Gravierendes. Die Kern-Whiteboard-Erfahrung war von früh an solide.
Die Zahlen#
- 27 Watchfire-Tasks vom Canvas-Setup bis zum Präsentationsmodus
- TypeScript + Vite mit HTML5-Canvas-Rendering
- Komplette Tool-Suite: Auswahl, Pan, Rechteck, Ellipse, Linie, Pfeil, Verbinder, Stift, Text, Haftnotiz
- Dark Mode, Ebenen, Export, Tastenkürzel, Präsentationsmodus
- Null externe UI-Bibliotheken. Alles ist individuell auf Canvas gebaut
Probier’s Aus#
Funktioniert am besten auf dem Desktop. Nutze die Tastenkürzel für das volle Erlebnis.
Fazit Tag 10#
Das ist das erste Projekt in der Challenge, das einen komplexen Web-Service angeht. Miro ist kein Spiel mit in sich geschlossenen Regeln. Es ist ein echtes Produkt mit Formen, Verbindern, Ebenen, Exporten, Präsentationsmodus und einem ganzen Interaktionsmodell, für das das Originalteam Jahre gebraucht hat, um es auszutüfteln. Es an einem Tag zu klonen bedeutet, Entscheidungen zu treffen, was man behält und was man fallen lässt.
Die größte Entscheidung war das Backend. Es gibt keins. Alles lebt im Browser, persistiert im Local Storage. Keine Accounts, keine Server, keine Datenbank. Das ist eine bewusste Einschränkung, die ich in den frühen Projekten dieser Challenge durchziehe — alles lokal halten, schneller ausliefern, die Komplexität vermeiden, für jedes Demo Infrastruktur hochzuziehen. Hier funktioniert es, weil ein Whiteboard nicht multiplayer sein muss, um nützlich zu sein. Irgendwann wird es an eine Wand stoßen. Echtzeit-Kollaboration, Cloud-Sync, ein Board mit jemandem per URL teilen — nichts davon ist ohne Backend möglich. Dorthin kommen wir in einem zukünftigen Projekt.
Was herausragt, ist die Architektur. Die Codebase ist in saubere Module für Input-Handling, Rendering, State Management, Tools und UI aufgeteilt. Jedes Tool ist sein eigenes Modul. Das State Management kümmert sich um den Verlauf für Undo/Redo. Es ist kein zusammengeschusterter Prototyp, sondern eine ordentlich strukturierte App.
Könnte es Miro ersetzen? Nein. Aber als local-first Skizzen- und Diagramming-Tool ist es überraschend nutzbar. Ich habe mich dabei erwischt, wie ich tatsächlich Ideen darauf ausgebreitet habe, statt es nur zu testen.
Ein Drittel der Challenge geschafft. Der Umfang dessen, was in einen einzigen Tag passt, wächst weiter.
Dies ist Tag 10 von 30 Tage Vibe Coding. Verfolge, wie ich 30 Projekte in 30 Tagen mit KI-gestütztem Coding ausliefere.
