Tldraw Make Real

The core engine uses OpenAI's GPT-4 Vision to interpret freehand drawings as UI layouts. It can recognize common patterns like navigation bars, card grids, form inputs, buttons, and text blocks from rough sketches, then translate them into semantically appropriate HTML elements with matching CSS styling. The model handles both geometric shapes drawn with tldraw's shape tools and freehand scribbles.

Unlike one-shot code generators, Make Real supports a draw-generate-annotate-regenerate loop. After the first generation, users can draw directly on top of the rendered output to indicate changes — circling elements, adding text notes, or drawing arrows with instructions. The AI processes these visual annotations as correction prompts, enabling progressive refinement without starting from scratch each time.

Built on tldraw's infinite canvas, the tool provides a full whiteboarding experience with drawing tools, shapes, text, colors, and zoom/pan navigation. Users can organize multiple sketches and generated outputs side by side, creating a visual workspace for exploring different design directions. The canvas itself is a mature, well-polished drawing tool independent of the AI features.

Generated HTML is rendered as a live, interactive preview directly on the tldraw canvas rather than in a separate window or panel. Users can interact with buttons, forms, and other elements within the preview while still having their original sketch visible nearby. This tight feedback loop makes it easy to compare the output against the original intent and identify areas for refinement.

The entire project is open-source under the tldraw GitHub organization, meaning developers can inspect exactly how sketches are captured, how prompts are constructed, and how generated code is rendered. Teams can self-host the tool on their own infrastructure for security or customization purposes, and can modify the prompt engineering or swap in different AI models to suit their specific needs.