View and edit your project's code

1. 1

   Open your project in Lovable and click the 'Code' tab in the toolbar.

   This opens the code editor where you can see all the files Lovable has created for your project.

2. 2

   Browse the files on the left panel, click to open them, or use the search box to find specific code.

   This lets you explore your project's structure and find the exact parts you're interested in.

3. 3

   To make a change, click into an open file and type your edits (requires a paid plan).

   This allows you to directly modify the code Lovable has generated, just like a regular code editor.

4. 4

   Save your changes using the 'Save' button or a keyboard shortcut.

   Saving applies your manual edits to the project immediately and creates a new version in your project's history.

5. 5

   To tell Lovable about a specific file or line, right-click a file and choose 'Reference in chat', or hover over a line number and click the '+' chip to add it to your chat message.

   This helps Lovable understand exactly what part of the code you're talking about, making its responses more accurate.

6. 6

   To get all your project's code, click 'Download codebase' at the bottom of the file panel (requires a paid plan).

   This lets you save a complete copy of your project's code to your computer as a '.zip' file.

Lovable, I'm looking at the code for my project. Can you help me understand how to make a small change to a file, or how to point you to a specific line of code when I'm chatting with you?

code editor

A special program or part of a program where you can write, view, and change computer code.

source code

The original instructions written by a programmer that a computer program is made from.

codebase

The entire collection of source code files that make up a software project.

version history

A record of all the changes made to your project over time, allowing you to see past versions and go back to them if needed.

IDE

Integrated Development Environment; a software application that provides comprehensive facilities to computer programmers for software development. Think of it as a super-powered code editor with extra tools.

Git sync

A feature that automatically keeps your Lovable project's code in sync with an external code repository like GitHub, allowing you to work on the code outside of Lovable.

• Don't forget to save your manual code changes, or they will be lost.
• Be aware that Lovable doesn't check your manual edits for errors; if you break something, you'll need to revert it or ask Lovable to fix it.
• Remember that code editing and downloading the full codebase are features only available on paid plans; on the Free plan, the editor is read-only.
• Don't rely on downloading '.zip' files for ongoing collaboration; use Git sync for continuous updates with external tools.