Browsing the source

Switch the right-hand pane of the project page from Preview to Code and you get your app's source: a file tree on the left, the selected file's contents on the right.

This is the real project, not a rendering of it. What you read here is exactly what runs, and exactly what you get if you download it.

What you see

The tree is built from a flat list of every file in the project. Folders sort before files, and both are in alphabetical order. The app folder is expanded when you open the tab.

The viewer opens on app/page.jsx if that file exists — it is the app's home page, and it is what most people want to read first. If there is no app/page.jsx, the first file in the tree is selected instead. Above the viewer the selected path is shown in monospace, or No file selected when nothing is open.

Files are shown as plain text. There is no syntax highlighting and no line numbers.

What is hidden

Three folders are never listed:

• node_modules — the installed dependencies. Tens of thousands of files that you did not write.
• .next — Next.js's own build cache.
• .git

The development server's log file is hidden too. The builder can read it with its dev_server_log tool; you cannot read it from here.

One folder is not hidden and probably should be: after you publish a project, a .next-export folder containing the built static site is left inside the project. It appears in the tree, and in your downloads. It is safe to ignore.

It is read-only

The toolbar says so: "Read-only — ask the builder for changes."

This is deliberate. The builder writes to these same files during a run, sometimes several times a second. A pane you could type into would race those writes, and one of the two edits would silently lose. Describing the change you want is the product's whole premise, so that is the only way to make one.

If you want to edit the code by hand, download it. It is a standard Next.js project and runs anywhere Node does.

Three limits

500 files. The tree lists at most 500 files, and the cut-off is silent — there is no "and 40 more" marker. A generated app is rarely near this, but an app that has been built on for a long time can be.

60,000 characters per file. A longer file is shown truncated, with a line appended reading …[truncated: file is N chars]. The same limit applies to what the builder itself can read, and to the copy in your downloaded zip.

Text only. Every file is read as text, with no check for whether it is one. An image the builder put under public/ will render as unreadable characters here, and will be corrupted in the download. If your app needs images, ask the builder to reference them by URL rather than adding image files.

When a file will not open

The viewer shows the server's own error message. The most common is a file that no longer exists — the tree was loaded before the builder deleted it. Switching tabs reloads the tree.

If a project has no files at all, the tree is simply empty. There is no message explaining why; the usual reason is that the first build has not run yet.

When the tree refreshes

The tree and the open file are re-read after every completed run, after a preview reload, and after a version restore. During a run the tree stays as it was — watch the step list in the chat for what is being written.

Who can see it

Anyone with access to the project, including viewers. A viewer in the organization can browse and download the source of every project in it. They cannot change anything. See Roles and permissions.

Next

• Version history — what changed, run by run.
• Downloading your app.