UStackUStack
Make Real icon

Make Real

Make Real is an archived GitHub project with the tldraw SDK, offering a starter to turn a drawn UI into a functional app experience.

Make Real

What is Make Real?

Make Real (repository: tldraw/make-real) is an open-source project associated with the tldraw SDK. Its core purpose is to let you “draw a ui and make it real,” by providing a starter and supporting code for turning UI you design into something functional in an application.

The repository is archived by its owner as of Feb 20, 2026, so it is read-only. The page also points readers to a live demo and to resources for building a version of the project and learning more via a blog post.

Key Features

  • Built with the tldraw SDK, providing the foundation for a drawing-based UI workflow.
  • Starter repository approach: clone the repo to build your own version of Make Real.
  • Includes a demo experience (makereal.tldraw.com) referenced from the repository readme.
  • Structured as a TypeScript/Next.js codebase (presence of next.config.js, TypeScript/TS files, and package.json).
  • Repository includes supporting files for code quality and styling (for example ESLint/Prettier and Tailwind config files).

How to Use Make Real

  1. Use the live demo at makereal.tldraw.com to understand the “draw a UI and make it real” flow.
  2. Clone the starter repository from GitHub (tldraw/make-real) to build your own version.
  3. Follow the project’s README and any linked resources (including the referenced blog post) to understand how the demo works and how to adapt it.
  4. Share what you build via the linked Discord community mentioned in the repository page.

Use Cases

  • Prototyping a UI interaction flow: Design a UI visually and connect it to app behavior using the project’s approach based on the tldraw SDK.
  • Building a custom “UI canvas” application: Use the repository as a starting point to implement your own drawing-and-rendering workflow.
  • Exploring how a drawn interface can drive logic: Learn from the code structure to understand how UI elements represented in the drawing environment can be translated into functional application behavior.
  • Teaching or documenting product interactions: Use the demo and the underlying project to illustrate how a designed UI can become an executable experience.
  • Experimenting with UI-to-app pipelines in TypeScript/Next.js: Leverage the existing Next.js + TypeScript setup as a template for related prototypes.

FAQ

  • Is this repository actively maintained? No. The repository was archived by its owner on Feb 20, 2026 and is now read-only.

  • Where can I try the project online? The repository page points to a demo at makereal.tldraw.com.

  • What should I clone if I want to build my own version? The page states that you can clone the provided starter repo to build your own version of Make Real.

  • What technology is it built with? The repository content indicates it is built with the tldraw SDK and uses a TypeScript codebase with Next.js configuration.

Alternatives

  • Build your own UI prototyping setup with tldraw: Instead of using this archived repo directly, you can start from tldraw SDK concepts and implement your own mapping from drawn elements to application behavior.
  • Use a general prototyping-to-code approach: If your goal is “turn a UI design into working screens,” you can use other prototyping workflows that focus on generating or wiring UI behavior, while handling the design-to-logic translation yourself.
  • Create an editor-driven UI system: If you want a similar “draw to drive” workflow, consider alternatives that treat UI as editable state (for example, state-driven UI builders) rather than following this specific project structure.
  • Look for actively maintained UI builders based on diagramming/canvas editing: Since this repo is archived, newer tools in the “canvas editor that drives app behavior” category may better fit long-term projects, depending on your exact needs.