Zum Inhalt springen
← Alle Beiträge
3 min read Any AI Studio

Canvas: ein Live-Vorschaufenster für alles, was ein Modell schreibt

Wenn ein Modell HTML, SVG, ein Mermaid-Diagramm oder Markdown schreibt, solltest du es nicht erst woanders hinkopieren müssen, um es zu sehen. Canvas rendert es neben dem Chat und aktualisiert, während du iterierst.

  • Features
  • Canvas

Die meisten Chat-Tools reichen dir einen Codeblock und wünschen dir viel Glück. Du kopierst ihn in einen Editor, speicherst eine Datei, öffnest einen Browser, siehst, dass er leicht falsch ist, gehst zurück zum Chat, fügst die Korrektur ein und wiederholst. Canvas entfernt jeden Schritt in dieser Schleife außer den beiden, die zählen: fragen und schauen.

Was Canvas ist

Wenn die Antwort eines Modells etwas Renderbares enthält, öffnet sich ein Vorschaufenster neben der Konversation und zeigt es live. HTML rendert als Seite. SVG rendert als Bild. Ein Mermaid-Block wird zum Diagramm. Markdown wird zu formatiertem Text. Du siehst das Ergebnis, nicht den Quelltext, in dem Moment, in dem das Modell mit dem Schreiben fertig ist.

Der Chat bleibt links, das gerenderte Artefakt rechts. Du redest weiter — „mach die Überschrift kleiner”, „nimm einen dunkleren Hintergrund”, „füg einen Knoten für den Retry-Pfad hinzu” — und die Vorschau aktualisiert, während das Modell überarbeitet. Kein Kopieren, kein Einfügen, keine zweite App.

Wo es sich bezahlt macht

Ein paar Dinge, die es von einer lästigen Pflicht zu einem Gespräch macht:

  • Landing-Sektionen und E-Mail-HTML. Beschreib eine Hero-Sektion, schau zu, wie sie rendert, schubs Abstände und Farbe in einfacher Sprache, bis es richtig aussieht. Du iterierst an der Sache selbst, nicht an einer Beschreibung der Sache.
  • Diagramme. Bitte um ein Flussdiagramm eines Auth-Handshakes oder ein Sequenzdiagramm einer Anfrage. Mermaid rendert es sofort, und „tausch diese zwei Schritte” ist ein Satz statt einer manuellen Neuzeichnung.
  • Charts und SVG. Schnelle Datenskizzen, Icons, einfache Illustrationen. Du siehst sie in voller Größe und verfeinerst durch Reden.
  • Lange Texte. Markdown rendert mit echten Überschriften und Struktur, sodass du das Dokument so liest, wie ein Leser es lesen wird, statt auf rohe Sternchen zu schielen.

Es funktioniert mit dem Modell-Picker

Canvas ist nicht an einen Anbieter gebunden. Entwirf ein Layout mit einem schnellen Modell, verzweige dann den kniffligen Teil zu einem stärkeren — die Vorschau folgt dem gewinnenden Branch. Weil das Artefakt neben dem Thread lebt und nicht in der Sandbox eines einzelnen Modells, kostet dich der Modellwechsel nicht die laufende Arbeit. Das Rendering läuft einfach gegen die neue Antwort neu.

Das ist dasselbe Prinzip, auf dem das ganze Studio gebaut ist: Die nützliche Sache (hier ein Live-Artefakt) gehört deiner Konversation, nicht dem abgeriegelten Feature-Set eines einzelnen Modells.

Iteriere in Sprache, nimm den Quelltext mit

Wenn die Vorschau richtig aussieht, ist der Quelltext direkt da zum Mitnehmen — kopier das HTML, exportier das SVG, schnapp dir die Mermaid-Definition. Canvas ist keine Blackbox, die nur es selbst lesen kann; es ist ein schnellerer Weg zu Quelltext, der dir vollständig gehört. Das Iterieren hast du in einfacher Sprache erledigt und am Ende produktionsreife Ausgabe bekommen.

Ein kleines Feature mit überproportionaler Wirkung

Canvas fügt keine Fähigkeit hinzu, die die Modelle nicht hatten — HTML schreiben konnten sie schon immer. Was es entfernt, ist die Lücke zwischen geschrieben und gesehen. Diese Lücke zu schließen verändert, wie du arbeitest: Du hörst auf, die Ausgabe des Modells als Entwurf zu behandeln, den du später bewertest, und fängst an, sie als etwas zu behandeln, das du gerade jetzt formst, in Echtzeit, im selben Fenster. Das stellt sich als das meiste davon heraus, was ein Werkzeug schnell anfühlen lässt.


Tippfehler entdeckt oder anderer Meinung? Schreib uns .

Probier das Produkt hinter dem Text.
Studio.

Free-Tarif. Keine Kreditkarte. Anmeldung mit Google oder Apple.