Code

Code shows the Next.js project Qanvas generates from your site, file by file, before you export it. It is read-only: you change the site in Blueprint and Design, and Code shows the result.

The file tree

The left deck shows the Virtual repository: every file your export will contain, in its real folder structure. Select a file to open it. Selecting a page jumps straight to its source.

Typical contents:

• app/page.tsx and app/<route>/page.tsx: one file per page.
• app/layout.tsx: the shared layout, fonts and site metadata.
• app/robots.ts, plus app/sitemap.ts when you have set a Public site URL.
• components/: the blocks and UI components your pages use.
• Token-driven CSS for your theme.
• package.json and README.md.

Reading the source

The centre stage shows the selected file with a breadcrumb of its path. Select Copy file to copy its contents. Binary files, such as images and fonts, are listed but not shown. Large files open straight away; on very large files, syntax colours appear a moment after the text.

The code always reflects your current draft, including unsaved changes.

When there is nothing yet

A brand-new project has no source to show. Add a page in Design, or shape your strategy in Blueprint, and the generated files appear here.

When you are happy with the code, go to Export to download it.