App Studio
Use code-view
Peek under the hood and take full control of your Rocket app – explore, edit, and expand your project in the code-view.
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.
An existing project opened in Rocket.
Dive into the code-view
code-view
Key features inside code-view
Browse your app files
Browse your app files
Use the file explorer on the left to view and open project folders like 
pages, components, or styles.- Expand folders to reveal their files.
- Tap any file to open it in a new tab.
Project file explorer
Success check: Your selected file opens in a new tab.
Find files fast with search
Find files fast with search
At the top of the file panel, use the search bar to locate files instantly by name. As you type, Rocket filters results live - no need to hit enter.
Search bar with live filtering
Success check: Matching files appear immediately as you type.
Edit and save any file
Edit and save any file
Click a file to open it in the main editor. Make your changes - whether it’s tweaking styles, editing text, or modifying logic.After editing, a save bar appears at the bottom:
- Click Save to confirm.
- Click Discard to undo.
Editor with save/discard bar
Success check: Your changes are saved and reflected in the file.
If you’re editing configuration files like
tailwind.config.js or package.json, changes may affect how your app compiles or behaves. If something breaks, you can always revert or refresh.Manage secret keys in your env file
Manage secret keys in your env file
Heads up: Your
env file is one of the most important and sensitive parts of your app. It contains secret API keys and config values. Do not share this file or its contents unless you fully trust the recipient.- For mobile apps, the file is called
env.json. - For web apps, it’s
.env.
To update an existing key
Open the corresponding file, find the key, and replace the value.Example: Updating your Supabase config? You’ll likely need to change bothOnce you’ve made the change, press Save, then simply ask Rocket to use the updated key in your logic.SUPABASE_URLandSUPABASE_ANON_KEY. Rocket will use the new values instantly, wherever they’re referenced.
Updating existing keys in env.json
To add a new key
Let’s say you want to add aGOOGLE_MAP_KEY.- Open
env.json(for mobile) or.env(for web). - Add the new line, like:
GOOGLE_MAP_KEY=your-google-map-api-key-here. - Press Save.
For example:
“Use GOOGLE_MAP_KEY to load the map on the home screen.”
Rocket will recognize the key and apply it wherever you ask.
Adding GOOGLE_MAP_KEY to env.json
Tip: Name your keys clearly and specifically. It helps Rocket understand their purpose and use them correctly.
Track build logs and debug output
Track build logs and debug output
The panel at the bottom displays live logs for your app. These logs help you:
- Monitor app saves, builds, and automatic reloads.
- Spot errors and warnings instantly.
- Confirm if recent updates went through correctly.
Live build logs panel
Success check: Logs update in real time as you edit and save.
You don’t need to run commands here. The logs act like a live status feed—no terminal needed.
Use toolbar actions (Refresh, GitHub, Download)
Use toolbar actions (Refresh, GitHub, Download)
Toolbar with refresh, GitHub, and download
- Refresh: Reloads the editor and file tree.
-
GitHub: Connects your project to a GitHub repository.
Transfer and sync with GitHub
You can sync your Rocket app to a GitHub repository in just a few clicks.-
Connect your GitHub account.
Want to track changes and collaborate with your team?
Learn how to connect your Rocket project to GitHub. -
Transfer your project.
Click Transfer project to create a new GitHub repository.
Transfer project to GitHub
-
Push updates.
After transfer, an Update button appears - use it to sync your changes.
GitHub project synced with update option
GitHub sync is one-way - changes made directly on GitHub won’t sync back to Rocket. Also, Rocket only pushes code on themainbranch of your GitHub repository.
-
Connect your GitHub account.
-
Download: Saves your entire app as a
.zipfile.
You did it!
You just explored, edited, and debugged your app - all from Rocket’s code-view.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.