Skip to main content
Get up and running with Canvas quickly. Choose your path and start building.

​
Choose Your Setup

You can work with Canvas in two ways:

​
Option 1: Connected Repository

Work on your existing project by connecting your GitHub repository. Each frame becomes a branch in your real codebase with a live preview. Share preview links with colleagues and clients to get quick feedback. Best for: Working on your actual product, team collaboration, creating PRs, getting stakeholder feedback

​
Option 2: Blank Frames

Start with empty projects to explore ideas and prototype features before integrating into your main codebase. Best for: Exploring concepts, prototyping, experimenting with new features

​
Quick Start Steps

1

Connect Your Repository (Optional)

If working with an existing project: - Go to Team Settings → Integrations - Enable GitHub and select your repository - Wait for indexing to complete. See the full GitHub Integration guide for details.
2

Create Your First Variant

  • Click New Variant or press N to create a new frame - If connected: this creates a branch in your repository - If blank: this creates an empty project to work in
3

Choose Your Mode

Select how you want to work: - Iterate mode (default): direct code editing for quick fixes and changes - Plan mode: exploring multiple implementation approaches with AI research. For a complete overview of chat modes and commands, see Chat Modes & Commands.
4

Start Building

Describe what you need in the chat: - “Add a user profile page” - “Fix the button spacing in the header” - “Create a dashboard with analytics cards” The AI will help you build it.
5

Get Your Code

When ready to integrate your work back into your project, follow the Getting Your Code guide. It explains how to work with PRs, Git patches, and downloads for both connected repositories and blank frames.

​
Which Mode Should I Use?

Use Iterate mode for direct edits and quick changes, and Plan mode when you want to explore different implementation options and compare approaches. For detailed explanations of each mode and example workflows, see:

​
Essential Tips

Use @Codebase — When working with a connected repo, mention files using @Codebase to give the AI better context about your codebase structure.
Bookmark Favorite Apps — For Plan mode, bookmark apps at 21st.dev/community/screens so the AI understands your design preferences.
Multiple Chats per Variant — Create multiple chats for the same variant using the + button in the chat header. Switch between chats to work on different aspects of the same feature. View all chats in the chat history panel.
Share Previews — Since 21st runs your real application, you can share preview links for any branch with colleagues and clients. Get feedback on new features or prototypes instantly — no deployment needed.

​
Next Steps

Chat Modes & Commands

Learn about inline @commands and modes

Context Management

Add context to improve AI responses

Version History

Restore previous versions

Design Mode

Visual styling editor