Code editor & file tree

The Source view is a live window into the real Astro project behind your site — what it shows, what it deliberately doesn't, and how to take the files with you.

A real project, compiled live

Switch to the Source view and you get a Monaco editor — the same engine as VS Code — over a file tree of the actual Astro project your site compiles to. It isn't a stored folder Zitegen keeps around; it's generated on the fly from your component tree every time the tree changes.

The tree you'll see mirrors a normal Astro project:

  • src/pages/*.astro — one file per page (plus blog and content-type routes when your site has them).
  • src/components/*.astro — one per Reusable Component, plus SEOHead.astro and (when enabled) CookieConsent.astro.
  • src/layouts/Base.astro — the shared page shell.
  • package.json, astro.config.mjs, tsconfig.json, .gitignore — real, buildable project config.

A window that can't fall out of sync

Because the Source view is recompiled from the tree on demand, it always reflects the current state of your site — no matter which layer made the last change. A canvas drag, an AI chat edit, and an MCP push all land in the same tree, and the next time you open Source, you see them. There is nothing to reconcile because there is only ever one source: the tree.

It's a read-only view

The Source view shows compiled output, so it's read-only. You shape the site through the AI chat and visual editor (which write the component tree), and when you want to edit code directly, you export the project and open it in your own editor.

What's deliberately not in the tree

On free sites, a small "Built with Zitegen" badge appears on the deployed page — but you will never find it in the file tree or your source. It's injected server-side during the Cloudflare Pages build step, entirely outside the compiler that produces these files.

That's deliberate: your source stays clean, and the badge can't be edited out of the files, because it was never in them. Upgrade to a paid plan and the deploy step simply stops adding it.

Download the same files, yours to keep

The Download button hands you a zip of the exact same file set the Source view shows — a complete, buildable Astro project, badge-free, with fonts and media bundled in. Run npm install && astro build and you get the same output Zitegen ships.

The code editor, the file tree, and the download are unlocked on every plan, including free. Only AI generation spends credits — reading and exporting your own code never does.