Pagesmith
Start building

Code Editor

Browse and edit your site's source code directly in the workspace. Available on Pro plans and above.

The Code panel in your Workspace lets you browse and edit the source code Pagesmith generates for your site.

The Code Editor is available on Pro plans and above.

Accessing the Code Editor

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

Features

File tree

Browse the project’s complete file structure:

  • Expandable folders — click to open and close directories
  • File icons — visual indicators for different file types
  • Standard Astro project layout — src/pages/, src/components/, src/layouts/, etc.

Source code

View and edit any file:

  • Syntax highlighting for .astro, .mdx, .ts, .css, and other common formats
  • Copy to clipboard for snippets
  • Save changes — edits are committed to the project’s git history along with AI-driven changes

Project Structure

Your Pagesmith project is a standard Astro project:

src/
├── pages/          # Page routes (.astro files)
├── components/     # Reusable UI components
├── layouts/        # Page layouts (BaseLayout, BlogLayout)
├── content/        # Content collections (blog posts, docs)
└── styles/         # Global Tailwind styles
public/             # Static assets (images, fonts)
astro.config.mjs    # Astro configuration

What You Can Do

  • Inspect how your site is built and learn from the code
  • Edit files directly — small fixes that are faster than describing in chat
  • Reference paths when chatting with the AI (“update the hero in src/pages/index.astro”)
  • Understand the structure before exporting to GitHub

Exporting Your Code

To work with your code locally, push it to a GitHub repository — see the Export docs.