Skip to main content
Everything Lovable builds is real, standard code, and the code editor is where you see it. Open it with the Code tab in the project toolbar to browse your project’s files, make manual edits, point Lovable at exact files and lines from chat, or download your code. You never need the code editor to build with Lovable. It’s there for when you want to see exactly what Lovable built, make a quick manual tweak, or work alongside a developer.

​
Browse and search your files

The left panel shows your project’s file structure. Click a folder to expand or collapse it, or use the Expand all and Collapse all buttons at the top of the panel. Files you open appear as tabs at the top of the code area, so you can keep several open, drag them into a different order, and close them when you’re done. Right-click any file or folder for its menu:
  • Open: Open the file in the editor.
  • Reference in chat: Add the file to the chat input as a reference, so your next message points Lovable at it.
To find something across your project, use the Search code box at the top of the file panel, or press Cmd+Shift+F (Mac) or Ctrl+Shift+F (Windows/Linux). Results are grouped into Files (matching file names) and In files (matching content). To find text inside the open file, press Cmd+F (Mac) or Ctrl+F (Windows/Linux). On paid plans, the same panel also lets you replace text.

​
View a file

While reading a file, the toolbar above it gives you:
  • Preview markdown: For .md and .markdown files, click the eye icon to switch between the raw source and rendered text. The preview supports common Markdown formatting, including tables, task lists, links, and code blocks, which makes READMEs and docs easy to read without leaving the editor.
  • Copy file content: Copy the whole file to your clipboard.
  • Download: Save the open file to your computer. Available to everyone with project access.

​
Edit code

Code editing is available on paid plans. On the Free plan the editor is read-only: you’ll see a Read only label and an Upgrade option.
To edit a file, click into it and type, like in any code editor. While you work:
  • Save your changes with the Save button or Cmd+S (Mac) or Ctrl+S (Windows/Linux), or throw them away with Discard. If you leave the code editor with unsaved changes, Lovable asks you to confirm first.
  • Each save becomes a version in your project’s version history, so a manual edit is as easy to revert as anything Lovable does.
  • Use the format button in the file toolbar to clean up indentation and style.
  • While Lovable is working on your project, the Save button is disabled until it finishes.
Saved changes apply to your project immediately, just like changes Lovable makes. Lovable doesn’t review your manual edits, so if a change breaks something, revert it from version history or ask Lovable in chat to fix it.

​
Reference code in chat

The code editor makes your chat messages more precise:
  • Reference a file: click the Reference file in chat button in the file toolbar, use Reference in chat in a file’s right-click menu, or type @ in the chat input:
  • Reference exact lines: hover over a line number and click the + chip to add a file and line reference to the chat input, or drag the chip to reference a range of lines. You can also press Cmd+Shift+L (Mac) or Ctrl+Shift+L (Windows/Linux) to reference the line or selection at your cursor. References appear as pills like Button.tsx:42, and clicking a pill takes you back to that line.
Pointing at the exact file or line is often faster than describing it. Lovable gets the precise context and doesn’t have to search for what you mean.

​
Download your project’s codebase

You can download your project’s full source code at any time. On paid plans, everyone with edit access to the project can click Download codebase at the bottom of the file panel to save the entire project as a .zip file. To save just one file, use the Download button in the file toolbar instead, on any plan. On Enterprise workspaces, admins can restrict codebase downloads so that only workspace admins and owners can use them. Everyone else sees the Download codebase option disabled. See Privacy and security settings. For ongoing work outside Lovable, connect your project to GitHub or GitLab instead of downloading snapshots. Git sync keeps a repository and your project in sync both ways, so you or a developer can edit in any tool and push changes back.

​
FAQ

No. Lovable writes and manages the code for you, and most people never open the code editor. It’s optional, for inspection, quick manual tweaks, and developer collaboration.
Opening the code editor requires edit access to the project: project viewers see the app preview only, not the code. Editing and saving files additionally requires a paid plan. On the Free plan the editor is read-only.
No. Editing and saving code yourself doesn’t use credits. Credits are only used when Lovable does work for you in chat. See Credits and usage.
Yes. Every save from the code editor creates a version in version history, so you can review or revert manual edits the same way as Lovable’s changes.
Yes. On paid plans, anyone with edit access can click Download codebase in the code editor to save the project as a .zip file.You can also sync your project to GitHub or GitLab to get a full repository that stays up to date. Git sync is available on all plans.On Enterprise workspaces, admins can restrict .zip downloads to workspace admins and owners.