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.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 assrc, 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.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.
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:Download code
Click the download icon in the code view toolbar to export your app code.
Downloaded code is useful if you want to run the frontend locally, review implementation details, or adapt the app for your own provider.
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.