Code Viewer

The Code panel in your Workspace lets you browse the source code that PageSmith generates for your website.

Accessing the Code Viewer

1. Open your project in the AI Editor
2. Go to Workspace → Code

Features

File Tree

Browse your project's complete file structure:

• Expandable folders - Click to open and close directories
• File icons - Visual indicators for different file types
• Organized structure - Standard Next.js/Astro project layout

Source Code Display

View the contents of any file:

• Syntax highlighting - Code is color-coded for readability
• Copy to clipboard - Quickly copy code snippets

Project Structure

Your PageSmith project includes:

src/
├── components/     # Reusable UI components
├── layouts/        # Page layout templates
├── pages/          # Your site's pages
├── styles/         # CSS and styling
└── assets/         # Images and media files
public/             # Static assets

What You Can Do

• Learn from the code - See how your site is built
• Copy snippets - Reuse code in other projects
• Understand the structure - Familiarize yourself before exporting

Exporting Your Code

To download and work with your code locally, use the GitHub export feature to push your project to a repository.

Availability

The Code Viewer is available on paid plans.