Understanding the Editor

The Skappa editor is your workspace for building, previewing, and refining applications. It is designed to feel familiar whether you come from a coding background or have never opened a code editor before. Everything you need is in one screen.

Editor Layout

The editor is divided into three resizable panels. On the left is the file tree, which lists every file in your project. In the center is the code panel, powered by CodeMirror, where you can view and edit source files directly. On the right is the live preview, which renders your running application in real time. You can drag the dividers between panels to resize them, or collapse a panel entirely if you want more room.

File Tree

The file tree mirrors a standard Next.js project structure. Pages live in the app/ directory, reusable components in components/, and configuration files like tailwind.config.ts sit at the root. Click any file to open it in the code panel. The file tree updates automatically when the AI adds or removes files.

Live Preview

The preview panel runs your app inside a Vercel Sandbox — a real browser environment. Navigate between pages, submit forms, click buttons, and interact with your app exactly as your users will. Changes you make in the code panel or through the AI chat appear instantly without a manual refresh.

AI Chat Modes

The chat panel supports three distinct modes, each optimized for a different workflow:

• Build mode — Describe a feature or change and the AI writes the code. Use this for adding components, pages, layouts, or behavior.
• Discuss mode — Ask questions about your code, brainstorm architecture, or get explanations. No code is modified in this mode.
• Fix mode — Paste an error message or describe a bug. The AI reads your project, diagnoses the problem, and applies a fix.

Keyboard Shortcuts

Ctrl/Cmd + S    Save the current file
Ctrl/Cmd + P    Open quick file finder
Ctrl/Cmd + Enter Send your chat message
Esc             Close any open panel or modal