Skip to main content
Zite projects use a monorepo: one codebase contains every app in the workspace, along with shared packages and project configuration. When you add an app to an existing workspace, Zite adds it to the same monorepo instead of creating a separate codebase. Code view lets you browse the entire project, edit supported files, create files, run the workspace locally, and review the history of code changes.
Direct code editing is intended for seasoned developers. For most changes, work with the Zite agent so it can update related files and keep the project consistent.

​
Open code view

  1. Open a project.
  2. Click the project or app name in the top-left corner.
  3. Under Workspace, select Code.
The file tree appears on the left. Select a file to open it in the editor, use the search field to find a file by name, or expand folders to explore the project.

​
Understand the monorepo

All apps in a workspace are bundled into the same project codebase. The file tree commonly includes:
Zite Code view showing multiple apps in the project file tree and App.tsx open in the editor
Before changing a shared package, check which apps use it. A shared-code change can affect more than one app.

​
View and edit code

Click a file in the tree to open it, then edit the code directly. Files with a lock icon are managed by Zite and cannot be edited from Code view. Direct edits are most useful when you know which file needs to change and are comfortable with React, TypeScript, and the project structure. For changes that cross multiple files or apps, ask the Zite agent to make the update instead. To add a file, click the new-file icon beside the search field, then enter its name and extension. Follow the conventions already used in that app or package.
If you are unsure what a file does, use Explain file with AI before editing it. Zite opens Chat mode with the selected file as context, so you can ask follow-up questions without changing the project.

​
Review code history

Zite keeps a Git-backed history of meaningful project changes. Use it to connect code updates to prompts or agent actions and see exactly which files changed.
  1. Click History in the Code view toolbar.
  2. Select a change from the timeline.
  3. Choose Code to see the files changed and a side-by-side diff.
  4. Use the project selector to review changes across the entire project or within an individual app.
Version history Code tab showing changed files and a side-by-side diff
To return the project to an earlier working state, see Restore an older version.

​
Best practices

  • Use the Zite agent for changes that affect multiple files, apps, or shared packages.
  • Check whether code under packages is used by other apps before editing it.
  • Keep direct edits small and focused, then test every affected app.
  • Use History to review the resulting diff and understand what changed.

Related topics

Create an appChat modeRestore an older versionTroubleshooting
Last modified on August 17, 2026