Canvas-based wireframe input
Users draw wireframes on a tldraw canvas, and the app captures the selected shapes as a JPEG image for AI processing.
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Make Real
Make Real is a Next.js application that turns hand-drawn UI sketches into working HTML prototypes. It is built on the tldraw SDK and is designed for a workflow where a user draws a wireframe on a canvas, sends it to an AI model, and reviews the generated interface in an embedded preview.
The repository documentation says the app can work with OpenAI, Anthropic, or Google AI models, and that it supports a mode where all three providers run in parallel. Generated HTML is streamed into a preview shape, and finished output can be shared through a link or exported to Replit.
Core capabilities
Streamed prototype generation
The app sends the image and prompts to AI provider routes and streams back generated HTML, allowing the preview to update as output arrives.
Inline HTML preview
Generated code is rendered inside a custom preview shape using an iframe, so the result can be viewed directly on the canvas.
Parallel multi-provider runs
An "all" provider mode can run OpenAI, Anthropic, and Google together and create separate labeled previews for each result.
Iterative refinement
When previous preview shapes are selected, their HTML can be included for iterative refinement of the next generation pass.
Output sharing and export
The app includes support for copying HTML or URL, opening the preview in a new window, and exporting generated HTML to Replit.
Common use cases
Wireframe-to-prototype handoff
A designer or product owner sketches a UI on the canvas and wants a quick working prototype to review interaction and layout ideas without starting from scratch in a code editor.
Model comparison workflows
A builder compares outputs from multiple models in one run to see how different providers interpret the same sketch and prompt.
Refining an existing prototype
A team member iterates on a draft by selecting a previous preview shape and asking the next generation to incorporate the earlier HTML.
Sharing and handoff
Someone sharing a concept with others uses the generated link or exported Replit project to move the prototype outside the editor.
Local development and customization
A developer working from the repository runs the app locally with Yarn commands to inspect or modify the generation flow.
Pros and Cons
Pros
- Turns a drawn wireframe into a rendered HTML prototype from the same canvas workflow.
- Supports more than one AI provider, including an all-provider mode for side-by-side generation.
- Streams generated HTML into the preview, which makes the result visible before the run is finished.
- Includes iterative refinement by feeding previously generated HTML back into the next pass.
- Provides link sharing and Replit export options for moving prototypes out of the editor.
Cons
- The repository says there is no test suite in the project.
- TypeScript strict mode is disabled in the current configuration.
- The app depends on external AI provider keys and environment setup, so it is not a fully self-contained offline tool.
FAQ
What does Make Real do?
Make Real is built on the tldraw SDK and is described as a Next.js application that turns hand-drawn wireframes into working HTML prototypes using AI. The repository notes that it can use OpenAI, Anthropic, or Google AI models for generation.
How do you run it locally?
The repository states that the project has no test suite and that development is done with Yarn commands such as `yarn dev`, `yarn build`, `yarn start`, and `yarn lint`. The live product is available at makereal.tldraw.com.
Does it support multiple AI providers?
Yes. The documentation says that in "all" provider mode the app runs OpenAI, Anthropic, and Google in parallel with `Promise.allSettled`, producing labeled previews for each.
What happens to the generated result?
Generated HTML is rendered in a custom tldraw preview shape. The docs also say completed HTML can be uploaded to Vercel Postgres for link sharing, and that the app supports opening or copying the generated output.
Quick Facts
- Category
- Developer Tool
- Platform
- Next.js web app
- Primary workflow
- Draw wireframes on a tldraw canvas and generate HTML prototypes
- AI providers
- OpenAI, Anthropic, and Google AI
- Source domain
- github.com
- Live site
- makereal.tldraw.com
Make Real Alternatives
Prompty Town
Prompty Town is a web product that turns a link into a building in a small internet city. It appears to let users buy a tile, add a prompt, and publish the result alongside other buildings.
beehiiv
beehiiv is a newsletter platform for creators, publishers, and brands that want to build, grow, and monetize email newsletters and websites from one place. It offers a free Launch plan, plus paid tiers for more advanced growth, monetization, and support features.
Napkin AI
Napkin AI turns text into editable visuals for presentations, documents, and shareable content. Text-first generation, collaboration, and export to PPT, PNG, SVG, or PDF.
FigPrompt
FigPrompt is an AI tool for creating production-ready Figma plugins from a written description. It helps Figma users move from idea to plugin logic without writing code.
findloc.ai
findloc.ai publishes public AI reports for local markets and checks individual business websites for AI visibility signals. It helps owners, marketers, and agencies see which businesses AI assistants recommend and what their own site may be missing.
Refero MCP
Refero MCP for AI agents connects an MCP-compatible agent to Refero’s curated library of web and iOS product interfaces and user flows. It helps agents research real design patterns before generating UI, with access included in the Refero Pro plan.