In this guide, you’ll learn how to:
  • Browse and search your project files.
  • Edit and save code directly in Rocket.
  • View live build logs and debug messages.
  • Refresh your editor, export code, or connect to GitHub.

​
Before you begin

You’ll need:
An existing project opened in Rocket.

​
Explore the code-view

Rocket code editor with file explorer and output panel visible.Rocket code editor with file explorer and output panel visible.

Code-view overview

The code-view is your app’s editing cockpit. Fast, flexible, and precise, it gives you full control over your files and logic.

​
Key features inside code-view

Browse your app files

Use the file explorer on the left to navigate folders like pages, components, or styles.
  • Expand folders to view their contents.
  • Click any file to open it in a new tab.
Need more space? Collapse the explorer using the collapse icon in the top-right corner of the panel.
File tree expanded in Rocket code-view showing folders and files.File tree expanded in Rocket code-view showing folders and files.

File explorer panel

Success check: Your selected file opens in a new tab.
Click a file to open it in the editor. Make your changes whether it’s updating styles, editing content, or modifying logic.When you edit a file, a save bar appears at the bottom:
  • Click Save to apply changes.
  • Click Discard to undo them.
Rocket editor with unsaved changes and save/discard options.Rocket editor with unsaved changes and save/discard options.

Editor with save and discard options

Success check: Your changes are saved and reflected in the file.
If you’re editing configuration files like tailwind.config.js or package.json, your changes may affect how your app compiles or behaves. If something breaks, you can always revert or refresh.
Important: Your environment file stores secret API keys and config values. Never share it unless you’re sure it’s secure.
Rocket supports environment variables for both mobile and web projects:
  • Mobile apps use env.json.
  • Web apps use .env.

​
To update an existing key

  1. Open the relevant file.
  2. Find the key and replace its value.
  3. Press Save.
Example: Updating Supabase? Change both SUPABASE_URL and SUPABASE_ANON_KEY. Rocket applies them automatically wherever they’re referenced.
  • Mobile (env.json)
  • Web (.env)
Editing environment key in env.json file.Editing environment key in env.json file.

Update key in env.json

​
To add a new key

  1. Open env.json (for mobile) or .env (for web).
  2. Add a new line, for example:
    STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key-here
  3. Click Save.
After saving, you can tell Rocket how to use that key in your app logic.
For example:
“Use STRIPE_PUBLISHABLE_KEY to load the map on the home screen.”
  • Mobile (env.json)
  • Web (.env)
Adding new environment key to env.json file.Adding new environment key to env.json file.

Add key to env.json

Tip: Use clear, specific key names so Rocket can recognize and apply them accurately.
The output panel at the bottom shows live logs as you edit and save. Use this to:
  • Monitor app builds and auto reloads.
  • Catch errors or warnings early.
  • Confirm that updates were successful.
Live log output in Rocket showing build events and errors.Live log output in Rocket showing build events and errors.

Live build logs

Success check: Logs update automatically after each change.
You don’t need to run commands here. Logs provide a live feed of activity while you work.
Toolbar in Rocket showing refresh, GitHub, and download icons.Toolbar in Rocket showing refresh, GitHub, and download icons.

Editor toolbar with quick actions

At the top-right corner of the editor, you’ll find:
  • Refresh: Reloads your editor and file tree.
  • GitHub: Connects your project to a GitHub repository.
  • Download: Exports your app as a .zip file.
You can connect and sync your Rocket app to a GitHub repo.
Transferring Rocket project to a connected GitHub repo.Transferring Rocket project to a connected GitHub repo.

Transfer project to GitHub

  • After transfer, use the Update button to push changes.
GitHub update button in Rocket for syncing project changes.GitHub update button in Rocket for syncing project changes.

GitHub sync with update option

Note: GitHub sync is one-way. Changes made in GitHub won’t appear in Rocket. Only the main branch is supported.
Heads-up: GitHub and Download options are available only for paid users.

You did it!

You explored, edited, and debugged your app using Rocket’s code-view.
Need help?
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.