Code Viewer

The code viewer lets you inspect all generated source code. Browse files, understand the structure, and copy code snippets as needed.

File Tree

The left panel shows your project's file structure:

  • Components - Reusable UI components
  • Pages - Application routes and pages
  • Styles - CSS and styling files
  • Utilities - Helper functions and utilities
  • Config - Configuration files

Viewing Files

Click any file to view its contents. The code is syntax-highlighted for easy reading:

  • JavaScript/TypeScript - JS/TS/JSX/TSX files
  • CSS - Stylesheets and Tailwind classes
  • JSON - Configuration and data files
  • Markdown - Documentation files

Read-Only

The code viewer is read-only. To make changes, use the AI chat to describe what you want to modify.

Copying Code

Copy code snippets for use elsewhere:

  • Click the copy button to copy the entire file
  • Select text and use Ctrl/Cmd + C to copy selections

Searching Code

Use the search bar to find code across all files:

  • Ctrl/Cmd + F - Search in current file
  • Ctrl/Cmd + Shift + F - Search all files

Understanding the Code

The generated code follows modern best practices:

  • Components - Functional React components
  • Styling - Tailwind CSS utility classes
  • TypeScript - Type-safe code with proper typing
  • Organization - Logical file and folder structure

Next Steps

PreviousPreview ModesNextCanvas Editor