# Code EditorThe WebPros Nova Code Editor gives direct access to all website or web app project files with syntax highlighting. Users can browse the file tree, search files by name or full-text content, edit code directly, and reference open files in a Nova chat for AI-assisted edits. Changes are not auto-saved — click Save to persist or Reset to discard. Best used for targeted technical changes after AI generation; use Edit Mode for visual adjustments.

Nova's Code Editor gives you direct access to your project's files. Use it when you want to find and review specific files or make changes that are more advanced than the options that are available in [Edit Mode](/en/features/design/edit-mode/).

The Code Editor works best for targeted code changes. Common uses include:

- Updating layout, styling, or text directly in a specific file.
- Reviewing and refining code that Nova generated before you continue iterating.
- Finding and fixing issues across related files, such as a component and its stylesheet.

{{< callout context="tip" icon="outline/rocket" >}}

AI project generation and direct editing work best together:

- To create initial structure and features quickly, use [Edit Mode](/en/features/design/edit-mode/) to make visual adjustments, and then use the Code Editor to fine-tune technical implementation details.
- When you need broader or repetitive updates across files, [chat with Nova](#chat-about-a-file-with-nova) and work in small, verified steps to reduce accidental overwrites.

{{< /callout >}}

## Using the Code Editor

To access the Code Editor, click the code icon (![code icon](/images/icons/code-icon.svg)) in the top navigation bar. The Code Editor displays a list of your project's files and the contents of the files that you open.

<img class="feature-image-padded" src="/images/code-editor.png" alt="Code Editor with multiple files open and tabs at the top">

{{< callout context="note" icon="outline/info-circle" >}}

The Code Editor does not automatically save your changes. Make sure to [save your changes](#save-or-reset-changes) regularly.

{{< /callout >}}

### Browse files

Use the file list to browse your project's file structure:

- Click on a folder to view its contents.
- Click on a filename to open it in the editor panel.

You can open multiple files at a time and switch between them using the tabs at the top of the editor panel.

{{< callout context="note" icon="outline/info-circle" >}}

To close a file, click the x icon (![x icon](/images/icons/x-icon.svg)) for that file's tab.

{{< /callout >}}

### Search files

The Code Editor includes multiple ways to search for files and their contents:

- Use the search text box above the file list to quickly find files by name.
- Click _Search_ at the top of the file panel to toggle to a full-text search across all of the files in the project.

### Edit code directly

After you open a file, you can make direct edits to its code. The editor supports syntax highlighting and formatting for common file types.

### Chat about a file with Nova

For targeted AI edits, you can reference files while chatting with Nova. For each file that you want to reference, open that file and click the file icon (![file icon](/images/icons/file-symlink-icon.svg)) in the top corner of the editor panel. Then, send your request to Nova.

- Nova can make edits directly in referenced files or use the information in those files to make changes across your project.
- To remove a file reference, click the file icon again to deselect it or click the x icon (![x icon](/images/icons/x-icon.svg)) for that filename in the prompt text box.

### Save or reset changes

When you are finished making changes, click _Save_ to save your project.

{{< callout context="caution" icon="outline/alert-triangle" >}}

If you close the project without saving, you will lose your changes.

{{< /callout >}}

If you do not want to keep the changes you made in the Code Editor, click _Reset_ to discard all unsaved changes and return to the last saved state.

## Troubleshooting

### Changes are missing

If changes do not appear after you leave the Code Editor and return to the project preview, you may not have saved your changes. Reopen the file to check whether your edits are present.

If they are not, reapply your changes and click _Save_.

### Formatting looks inconsistent

If spacing, indentation, or style is inconsistent after making changes in the Code Editor, your code may have diverged across the edited files.

[Chat with Nova](#chat-about-a-file-with-nova) and ask it to apply consistent formatting across your project. You can also use the Code Editor to manually adjust formatting in specific files.

### Generated updates overwrite manual edits

If a generated change replaces code that you had previously manually edited in the Code Editor, your prompt may have been too broad or may have unintentionally referenced the file that you edited.

[Edit the prompt that caused the change](/en/features/create/edit-previous-prompt/) and ensure that it targets only the file or section you want to change. Nova will revert the generated change and reapply your prompt.