Early interface exploration
Turn a rough visual idea into an interactive concept before investing in production design and engineering.
Independent tool overview
tldraw at a glance
Make Real is tldraw's visual prototyping experiment for turning a selected wireframe or sketch into an interactive website preview, then refining it with annotations.
Visit the official tldraw site ↗
- Developer
- tldraw
- Product type
- Sketch-to-website prototyping experiment
- Model access
- Bring your own provider API key
- Supported key options
- OpenAI, Anthropic, and Google
- Broader platform
- tldraw React SDK and AI starter kits
Overview
What tldraw is
Make Real runs on tldraw's infinite canvas and converts a selected sketch, wireframe, reference image, or set of annotations into generated website code. The result appears as an interactive preview on the same canvas, where it can be resized, compared with other versions, marked up, and sent back through another generation pass.
The current experiment asks users to supply an API key for a supported model provider, including OpenAI, Anthropic, or Google. Beyond the demo, tldraw now offers a production canvas SDK and AI starter kits for teams building their own sketch-to-code tools, agent-driven canvases, branching chats, or visual workflows. Make Real is useful for rapid interface exploration, but generated code still needs normal engineering, accessibility, security, and deployment work.
Use cases
Who tldraw is best for
The strongest fit depends on the job you need the product to complete, not the size of its feature list.
Design critique and iteration
Place generated versions beside the source sketch, annotate problems directly, and generate another pass.
Product workshops
Use an open canvas to combine wireframes, screenshots, notes, and multiple prototype directions in one visual space.
Developers building AI canvases
Start from tldraw's SDK patterns for canvas output, visual workflows, or agents that can read and manipulate shapes.
Capabilities
Core tldraw features
Sketch-to-interface generation
Uses a selected region of the canvas as visual context for generating a working website preview.
Embedded interactive output
Places generated HTML inside an interactive canvas shape rather than limiting the result to a static screenshot.
Annotation-driven revisions
Lets users draw notes and requested changes over the current preview, then include that context in the next generation.
Infinite-canvas comparison
Supports arranging source material and multiple generated iterations side by side for visual review.
Provider and model selection
The current Make Real settings support user-provided OpenAI, Anthropic, and Google API keys and model choice.
AI integration patterns
tldraw documents canvas-as-output, node-based visual workflows, and agent-controlled canvas approaches for custom products.
Starter kits
Official kits provide reference implementations for agents, chat, branching chat, and workflow applications.
Programmable editor
The React SDK exposes an Editor API for creating, reading, selecting, exporting, and manipulating canvas content.
Process
How the tldraw workflow works
Step 1
Choose a model
Open Make Real settings, select a provider and model, and supply the corresponding developer API key.
Step 2
Draw the interface
Create a wireframe with shapes and text, then add screenshots or notes that clarify the desired behavior.
Step 3
Select the relevant canvas area
Include the complete sketch and supporting context that the model should interpret.
Step 4
Generate the prototype
Run Make Real and interact with the resulting website preview on the canvas.
Step 5
Annotate and iterate
Mark issues and desired changes directly around or over the preview, then generate a revised version.
Step 6
Harden outside the experiment
Move an approved concept into a normal development workflow for source review, responsive behavior, tests, security, accessibility, backend integration, and deployment.
Cost
tldraw pricing and free plan
Make Real does not advertise a separate subscription, but it requires the user's own model-provider API key, so generation incurs that provider's current usage charges. The broader tldraw SDK has separate production licensing.
Make Real
No separate price listed
The public experiment uses a model API key supplied by the user.
- Model API charges are billed by the selected provider
- Costs depend on model, input, output, and number of iterations
- Set provider-side budgets before extensive use
SDK development
Free in development
The tldraw SDK can run in local development without a production license key.
- Production use requires a valid license
- Source available but not permissively licensed as a whole
SDK trial
Free for 100 days
Evaluation license for deploying the SDK in production before purchasing.
- No credit card required
- One trial per company or project
- Stops working when the trial expires
- Collects limited deployment diagnostics
Hobby license
Free by application
Discretionary production license for qualifying non-commercial projects.
- Requires application and approval
- Displays a made-with-tldraw watermark
- Intended for personal projects, research, student work, and non-business experiments
Commercial SDK license
Custom annual pricing
Production license for commercial products and internal business applications.
- Value-based pricing through sales
- Full SDK access
- Multiplayer sync included
- Host in your own environment
- Startup discounts may be available
Pricing checked . Check current pricing at the source ↗
Assessment
tldraw strengths and limitations
Where it stands out
- Visual input is faster than describing every layout detail in a long text prompt
- Generated previews stay beside the original sketch and supporting context
- Annotation creates an intuitive feedback loop for design revisions
- Bring-your-own-model access lets users choose among several providers
- The broader SDK offers a path from experiment to a deeply customized canvas product
- Official starter kits cover several common AI-canvas architectures
What to consider
- Make Real is a prototyping experiment, not a managed production application builder or hosting platform
- Users must obtain and protect a model-provider API key and pay the resulting API usage
- Generated code can contain security, accessibility, responsiveness, performance, or maintainability problems
- A visual mockup may leave business logic, data models, permissions, error states, and edge cases unspecified
- Results vary by model and prompt context, and repeated visual iterations can become expensive
- Commercial production use of the tldraw SDK requires a separate license
- The SDK evolves quickly and its documentation warns that minor releases may contain breaking changes
Compare
tldraw alternatives
The right alternative depends on the specific output, workflow, controls and budget your project requires.
Design
Vercel v0
Generates interfaces from text and image prompts with a workflow centered on code and deployable web projects.
Explore Vercel v0 →Coding
Lovable
A conversational application builder for moving from a product idea to a fuller hosted web app.
Explore Lovable →Coding
Bolt.new
Builds and runs web applications from natural-language instructions in a browser-based development environment.
Explore Bolt.new →Coding
Replit Agent
Combines AI-assisted application creation with an integrated coding, runtime, and deployment workspace.
Explore Replit Agent →Questions
tldraw FAQs
What is tldraw Make Real?
Make Real is a tldraw experiment that turns selected canvas sketches and visual context into an interactive website preview.
Is Make Real free?
tldraw does not list a separate Make Real fee, but users must provide an AI model API key and pay any usage charged by that provider.
Which AI providers does Make Real support?
The current settings interface lists API-key fields for OpenAI, Anthropic, and Google, with provider and model selection.
Can I edit a generated result?
Yes. Users can annotate the generated preview on the canvas and include those notes in another generation pass.
Does Make Real deploy a production website?
It generates an interactive prototype. Production use still requires code review, testing, accessibility work, security checks, integrations, and a deployment workflow.
Is the tldraw SDK open source?
It is source available, but the current SDK is under the tldraw license rather than a fully permissive open-source license. Many examples and starter kits have separate MIT licensing.
Do I need a tldraw license?
Make Real users do not buy an SDK license merely to use the demo. Developers deploying the current SDK in production need a trial, hobby, or commercial license key.
Bottom line
Our tldraw verdict
Make Real remains one of the clearest demonstrations of why an infinite canvas can be a better interface for AI prototyping than a chat box. It is excellent for exploring a UI idea and visually steering revisions, but teams should treat the output as a disposable or reviewable prototype—not finished production software.
Visit tldraw website ↗Similar Design Tools
View all Design AI tools →
AI training for the future of work.
Get access to all our AI courses, hundreds of real-world AI use cases, live expert-led workshops, an exclusive network of AI early adopters, and more.
AI Courses
Get unlimited access to all of our current & upcoming industry-specific AI courses for the duration of your subscription.
Daily Guides
To keep up with the rapid pace of AI, our team publishes AI implementation guides daily. Our library contains 300+ practical use cases to automate real-world work.
Workshops
Join weekly, live, interactive sessions with industry leaders who are at the forefront of AI for hands-on implementation guidance and exclusive insights.
Community
Network with an exclusive community of AI-first professionals who are working smarter with AI. Learn how early adopters are using AI in their work and businesses.