View and edit project code

View and manually edit your project’s source code directly in the Lovable code editor.

This feature gives you direct access to your project’s underlying codebase. You can inspect files, make targeted edits, and troubleshoot issues without switching tools or exporting your project.

What you can do

From the code editor view, you can:

• Browse your full project file structure
• Search across files and jump to specific components
• Inspect and edit files directly
• Format code
• Copy file content
• Download files
• Preview Markdown files as rendered text
  When you open a .md or .markdown file in the code editor, click the eye icon in the toolbar to switch between the raw source and a rendered preview. This makes it easier to read READMEs, docs, and other Markdown files as formatted text without leaving the editor. The preview supports common Markdown formatting, including tables, task lists, links, and code blocks.
• Reference files in chat to make targeted edits and discussions faster and clearer

Mention code files in chat.
Type @ or click the reference file in chat button in the code editor to mention specific files. For example:
@src/components/UserProfile.tsx add a loading state here

Good to know

• Changes made here immediately affect your project
• Code editing is available on paid plans only
• This is intended for manual adjustments and is not required when building in Build mode