Skip to main content
Canvas is 21st’s visual frontend development tool. Work on your repository in a canvas where each frame represents a branch. See multiple approaches side by side, iterate visually, and work with AI that understands your codebase, components, and design system.

​
What are Variants?

Each frame on your canvas is a variant — but what that means depends on how you’re working:

​
Working with a Connected Repository

If you’ve connected your GitHub repository, each variant is a local branch with a live preview. You’re iterating on your actual codebase, seeing real changes. Branches stay local until you open a PR — only the selected branch gets published to GitHub when you create a pull request. Since 21st runs your real application, you can share preview links with colleagues and clients to get quick feedback on new features or prototypes — no deployment needed.

​
Working with Blank Frames

If you’re working with blank frames (empty projects), each variant is a separate empty project for iterating on ideas. Perfect for exploring concepts, prototyping features, or experimenting before integrating into your main codebase.
21st doesn’t commit directly to your code. You control when and how changes are integrated.

​
Getting Started

Quick Start

Get started with Canvas in minutes

Chat Modes & Commands

Iterate vs Plan mode, inline @commands

Iterate Mode

Full-featured coding agent with standard tools

Plan Mode

Get multiple implementation approaches with AI research

Context Management

Add on-canvas items, images, and @Codebase

Version History

Versions dialog and restore checkpoints

GitHub Integration

Enable, authorize, index your repo

Design Mode

Visual no-code editor for styling

Keyboard Shortcuts

Complete shortcuts reference

​
Getting Your Code

21st doesn’t commit directly to your repository. How you get your code depends on whether you’re working with a connected repo or empty frames. For a complete guide and export options, see Getting Your Code.