> ## Documentation Index
> Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Code

> Open the file tree in the Rocket.new Build editor to inspect project source, tweak components, and make direct code edits alongside AI changes.

Code view lets you browse your project's source files, make direct edits, view live build logs, and download or push your code. All without leaving the Rocket editor.

## When to use code view

| Use code view when | Use chat instead when |
| :- | :- |
| You need to edit a specific line of code | You want to add new features or pages |
| Managing API keys and environment variables | You want to change design or layout |
| Debugging with build logs | You need broad changes across many files |
| Reviewing what Rocket generated | You are not sure what to change |

## How to open

Click the **`</> Code`** button in the top toolbar - the same bar as **Preview** and **Full screen**. This switches the main panel to code view.

**Web Browser**

![Rocket code editor with file explorer and output panel visible.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-view-light.webp)

![Rocket code editor with file explorer and output panel visible.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-view-dark.webp)

Code view overview

### Browse your files

The **Explorer** panel on the left shows your full project file tree. Click any file to open it in the editor.

* Use the **Search files...** bar at the top of the Explorer to find files by name - results filter as you type
* Collapse the Explorer using the **collapse icon** in the top-right corner of the panel

![File tree expanded in Rocket code view.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/file-explorer-light.webp)

![File tree expanded in Rocket code view.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/file-explorer-dark.webp)

File explorer panel

### Edit and save a file

Click a file to open it in the editor. Make your changes, then use the **save bar** at the bottom:

* Click **Save** to apply changes
* Click **Discard** to undo them

![Rocket editor with unsaved changes and save/discard options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/edit-code-message-light.webp)

![Rocket editor with unsaved changes and save/discard options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/edit-code-message-dark.webp)

Editor with save and discard options

> [!NOTE]
>
> Editing configuration files like `tailwind.config.js` or `package.json` can affect how your app compiles or behaves. If something breaks after a config edit, you can [roll back to a previous version](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/versions.md).

### Environment variables

Your environment files store sensitive values like API keys:

* **Web apps** use `.env`
* **Mobile apps** use `env.json`

You can edit these files directly in code view. For a full guide on adding and managing variables:

> Manage environment variables
>
> [Open](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/env-variables.md)

### Build logs

The **Logs** panel at the bottom of the screen shows live output as you edit and save. It has a collapse arrow on the right to hide it when you need more editor space. Logs update automatically - no commands needed.

Use the logs to:

* Monitor builds in real time
* Catch and diagnose errors
* Confirm that a save was applied successfully

![Live log output in Rocket showing build events and errors.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/log-terminal-light.webp)

![Live log output in Rocket showing build events and errors.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/log-terminal-dark.webp)

Live build logs

### Toolbar actions

The top-right of the code view toolbar has quick actions:

* **Refresh** - Reload the editor and file tree
* **Download** - Export your app as a `.zip` file to open locally (paid plan required)
* **GitHub** - Push your project to a GitHub repository

> Set up GitHub and learn about two-way code sync
>
> [Open](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/github/overview.md)

### Download your code

Export your entire project as a `.zip` archive so you can open it in your own IDE, run it locally, run tests, or hand it off to another developer.

![Rocket code editor showing download button in toolbar.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-download-light.webp)

![Rocket code editor showing download button in toolbar.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-download-dark.webp)

Code download interface

> [!NOTE]
>
> Downloading source code requires a **paid plan (Pro or above)** and is only available on the web browser. Mobile app users can browse files and push to GitHub, but code download is not supported.

**1. Open Code view**

Open your task in the Build editor and click the **`</> Code`** button in the top toolbar (the same bar as **Preview** and **Full screen**). The main panel switches to code view.

![Rocket code editor with file explorer and output panel visible.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-view-light.webp)

![Rocket code editor with file explorer and output panel visible.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/web-browser/code-view-dark.webp)

Code view toolbar button

**2. Click Download in the toolbar**

Click the **Download** icon in the top-right of the code view toolbar. Rocket packages your full project - source files, configuration, and environment variable templates - into a single `.zip` archive.

If you are on the Free plan, the button prompts you to upgrade. See [Pricing](https://dhiwisepvtltd-5e04e6a4.mintlify.site/getting-started/pricing.md) for plan details.

**3. Wait for the export to finish**

A short progress indicator shows the export status. For large projects this can take up to a minute. Once complete, the `.zip` file is saved to your browser's default download folder.

**4. Extract the archive**

Locate the downloaded `.zip` file and extract it to a folder on your computer:

* **macOS**: Double-click the `.zip` file in Finder, or run `unzip project-name.zip` in Terminal
* **Windows**: Right-click the `.zip` and choose **Extract All**, or run `Expand-Archive project-name.zip` in PowerShell

The extracted folder contains your full project structure.

**5. Install dependencies and run locally**

Open the extracted folder in your IDE or terminal and install dependencies.

**Next.js (web app)**

```bash theme={null}
npm install
npm run dev
```

The app starts on `http://localhost:3000`. See the [Next.js getting started guide](https://nextjs.org/docs/getting-started) for more.

**Flutter (mobile app)**

```bash theme={null}
flutter pub get
flutter run
```

Choose a connected device or emulator when prompted. See the [Flutter install guide](https://docs.flutter.dev/get-started/install) for setup help.

**6. Add your environment variables**

Rocket exports an environment template (`.env` for web apps, `env.json` for mobile apps) with placeholder values. Fill in your own API keys and secrets before running the app locally.

> View and manage environment variables
>
> [Open](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/env-variables.md)

> [!TIP]
>
> **What to do after downloading:**
>
> * **Run locally** for testing, automated tests, or custom build steps
> * **Push to a new GitHub repository** to version-control your code and trigger CI/CD pipelines. Use [GitHub integration](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/github/overview.md) for ongoing two-way sync (Next.js TypeScript), or clone the extracted repo and push manually
> * **Continue iterating in Rocket** - anytime you change the app in Rocket, click **Download** again to export the latest version

> [!WARNING]
>
> Downloaded `.zip` archives reflect the project state at the moment of export. They do **not** auto-sync with later changes made in Rocket. To keep a repository up to date automatically, use [GitHub integration](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/github/overview.md) instead of manual downloads.

**Mobile App**

> [!NOTE]
>
> The mobile app supports browsing files and GitHub integration. Editing files, managing environment variables, viewing build logs, and downloading code are only available on the web browser.

![Rocket code editor on mobile.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/mobile-app/mobile-app-code-views-in-rocket-app.webp)

Code tab on mobile

### Browse your files

Tap the **current file name** at the top of the screen to open the file picker. Browse all folders and files in your project and tap any file to switch to it.

![Browsing files in Rocket code view on mobile.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/mobile-app/browse-files-in-mobile-app.gif)

File explorer on mobile

### Refresh

Tap the **Refresh** button in the top-right corner to reload the editor and file tree.

![Toolbar showing refresh and GitHub icons.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/code-view/mobile-app/refresh-and-github-option-in-rocket-app.webp)

Editor toolbar on mobile

### Push to GitHub

Tap the **GitHub** button in the top-right toolbar to push your project to a GitHub repository. After the initial push, use **Update** to push new changes.

## What's next?

> **[Chat with Rocket](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/chat.md)**
>
> Use chat to make broader changes across your project.

> **[Environment variables](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/env-variables.md)**
>
> Store API keys and secrets your app needs at runtime.

> **[Add custom code](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/custom-code.md)**
>
> Bring in external scripts, embeds, and components.

> **[Connect APIs](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/apis.md)**
>
> Import and integrate API endpoints into your app.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.