Code
View and edit your project's source code directly from the Beautiful.dev dashboard.
Code editor
Beautiful.dev allows you to view and edit your project's source code directly from the dashboard. This gives you full control when you want to make quick adjustments without prompting the AI Agent.
To open the code editor, go to your project page and click Code.
File browser
In the Code view, you'll see:
- A file tree on the left showing all project files
- The file editor on the right where you can view and modify code
You can open any file to see its content and make changes as needed.
Editing and deploying changes
The code editor is especially useful for small adjustments, such as:
- Updating text or titles
- Fixing minor layout issues
- Adjusting styles
- Correcting typos
After making your changes, click Save changes. Deployment may take a couple of minutes, and once complete, your preview will update automatically.
Be careful when editing code manually
Manual edits can affect how your app works or how the AI Agent generates future updates.
For significant changes or modifications to your app's structure, it is generally safer to ask the AI Agent instead of editing files directly.
Exporting your project code
You can export the full source code of your project at any time.
To export:
- Open Project settings
- Click
Export - Download the generated archive file
The export contains all project files for the currently selected version, including code, assets, and configuration. This is useful for backups, code reviews, or moving your project outside of Beautiful.dev.