Code

Code viewer

Beautiful allows you to view your project's source code directly from the dashboard. This is useful for understanding how your project is structured, reviewing generated files, or inspecting specific implementations without leaving Beautiful.

To open the code viewer, 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
• A file viewer on the right displaying the contents of the selected file

You can open any file to inspect its contents. Files are displayed in a read-only format for reference and review.

Reviewing project code

Viewing your project's code can be helpful for:

• Understanding how your app is organized
• Reviewing AI-generated components or layouts
• Auditing configuration files
• Learning how specific features are implemented

If you want to make changes to your project, use the AI Agent to apply updates safely and consistently.

Exporting your project code

You can export the full source code of your project at any time.

To export:

1. Open Project settings
2. Click Export
3. 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.