Zite apps are built as Vite and TypeScript projects. You can open the code view from the app editor to inspect the files that power your app, make direct edits, create new files, ask AI to explain a file, or download the app code.
Direct code editing is intended for seasoned developers. For most changes, it is best to work with the Zite agent so it can understand your app, update related files, and keep the implementation consistent.
What you can do
Use code view when you want more control over the generated app files.
| Feature | What it does |
|---|
| View and edit code | Open files such as App.tsx, components, stylesheets, and API helper files, then edit the code directly. |
| Download code | Download the app files so you can run them locally, review them outside Zite, or adapt them for your own provider setup. |
| Create a new file | Add a file to the app project from the file tree. |
| Explain file with AI | Ask Zite to explain the selected file. This opens the agent chat in Chat mode so you can understand the code before changing it. |
Open code view
Open your app in the editor, then click the code icon in the top toolbar.
In code view, the file tree appears on the left and the selected file opens in the editor. Use the search field to find files by name, or expand folders such as src, components, and api.
Edit code directly
Click a file in the file tree to open it, then make your changes in the editor.
Direct edits are useful when you already know which file needs to change and are comfortable with React, TypeScript, and Vite project structure. For broader changes, ask the Zite agent to make the update instead. The agent can reason across multiple files and update connected UI, workflow, and integration logic together.
If you are unsure what a file does, use Explain file with AI before editing it.
Create a new file
To add a file:
- Open code view.
- Click the new file icon in the file panel.
- Name the file, including its extension.
- Add the code you need.
Use the same conventions as the rest of the project. For example, React components usually belong in src/components, while app-level styles are commonly kept in src/index.css.
Explain a file with AI
Use Explain file with AI when you want Zite to describe what a file does before you change it.
Zite opens the agent chat in Chat mode and uses the selected file as context. You can ask follow-up questions such as:
Explain how this component gets its data.
What would I need to change to add another status?
Is there anything risky about editing this file directly?
Download code
Click the download icon in the code view toolbar to export your app code.
You can choose from three download formats:
| Option | Use it when |
|---|
| App Files Only | You want a ZIP file containing just your app code. |
| Include Development Environment | You want the files needed to run the app locally as a Vite and TypeScript project. |
| Download as Text | You want all code in a single text file for review, sharing, or use with another AI tool. |
The downloaded app code does not include your Zite database, backend, hosting configuration, or hosted environment files.
Best practices
- Use the Zite agent for most app changes, especially changes that affect multiple files.
- Use Chat mode to understand a file before editing it.
- Keep direct edits small and focused.
- Download the code before making major manual changes if you want an external reference copy.
- Test the app after editing code directly.
Related topics
