Code Editing

While the AI handles most of the heavy lifting, there are times when editing code directly is faster and more precise. Skappa includes a full-featured code editor powered by CodeMirror with syntax highlighting, auto-complete, bracket matching, and inline error detection.

The Code Editor

Click any file in the file tree to open it in the code panel. The editor supports TypeScript, TSX, JSX, CSS, JSON, and Markdown files. Your changes save automatically and appear in the live preview as you type. The editor also highlights syntax errors inline, so you can catch issues before they reach the preview.

When to Edit Manually

Manual edits are ideal for small, precise changes where describing them to the AI would take longer than just making the edit yourself:

• Fixing a typo in text content
• Adjusting a color value or spacing
• Renaming a variable or component
• Tweaking a Tailwind class

// Quick color change — faster to edit directly
<button className="bg-blue-500 hover:bg-blue-600">
  Submit
</button>

// Change to:
<button className="bg-emerald-500 hover:bg-emerald-600">
  Submit
</button>

When to Use the AI

Use the AI for tasks that involve creating new files, writing logic, restructuring layouts, or generating multiple related changes across your project. The AI is faster and more reliable for:

• Creating new components or pages from scratch
• Adding features that touch multiple files
• Writing complex state management or data-fetching logic
• Refactoring component structure

Code Quality

Skappa generates production-quality code following modern best practices: TypeScript types, proper React component structure, accessible HTML, and clean Tailwind CSS. All generated code uses Next.js App Router conventions, server components by default, and proper error boundaries. You can export your entire project at any time and continue development in VS Code or any other editor.