Skip to main content
Canvas is 21st’s AI-powered prototyping tool. Build frontend prototypes with AI, explore multiple variations side by side, and get production-ready code you can copy into your project.

​
What are Prototypes?

Each frame on your canvas is a prototype — a self-contained project where you can build and iterate on ideas. Create multiple prototypes to explore different approaches, compare them visually, and copy the code you like best.

​
Sandbox Prototypes

Start with blank prototypes to explore ideas and build new features. Perfect for:
  • Trying out UI concepts
  • Building components before integrating them
  • Experimenting with different approaches

​
Connected Repository (Optional)

For advanced use cases, connect your GitHub repository to prototype directly with your existing code and design system. Share live previews with your team to get feedback — without committing anything to your codebase.
21st doesn’t commit directly to your code. Prototypes stay separate until you manually copy the code into your project.

​
Getting Started

Quick Start

Create your first prototype in minutes

Chat Modes & Commands

Agent vs Prototype mode, inline @commands

Agent Mode

Full-featured coding agent for direct edits

Prototype Mode

Generate multiple variations at once

Context Management

Add on-canvas items, images, and @Codebase

Version History

Versions dialog and restore checkpoints

GitHub Integration

Prototype with your existing codebase

Design Mode

Visual no-code editor for styling

Keyboard Shortcuts

Complete shortcuts reference

​
Getting Your Code

When you’re happy with a prototype, copy the code or prompt to use in your own project. See Getting Your Code for all export options.