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.
Dive into the code-view
code-view
Rocket’s code-view is your editing cockpit. It’s fast, flexible, and designed for precision - perfect for anyone ready to go hands-on with their app files.
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.
Collapse the tree using the collapse icon at the top right of the panel if you need more space.
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.
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
In the top-right corner of the editor, you’ll see three quick-action icons:
-
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 the
mainbranch of your GitHub repository.
-
-
Download: Saves your entire app as a
.zipfile.
These are especially helpful if you’re syncing with a teammate, backing up your code, or troubleshooting.
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.