Code Editor

The Code Editor provides direct access to your landing page's source code, allowing you to make precise changes to any file in your project. Perfect for advanced customizations that go beyond the visual editor.

Accessing the Code Editor

The Code Editor is located in the right panel of the landing page editor:

1. Open any landing page in the editor
2. The Code panel is visible on the right side alongside the preview
3. Click any component in the file tree to view and edit its source code

Interface Overview

The Code Editor is divided into two main sections:

• File Tree Panel (left, 20% width): Browse and navigate your project components
• Code Editor Panel (right, 80% width): Edit file contents with syntax highlighting

You can resize these panels by dragging the divider between them.

Real-Time AI Integration

When you use the AI chat to make changes, the Code Editor updates in real-time:

• Live updates: Watch the AI's changes appear as they're made
• Instant navigation: Click any component to jump to its source code
• Synchronized editing: Changes you make manually are reflected in the preview immediately

File Tree Navigation

Browsing Files

The file tree displays your landing page's folder structure:

• Click folders to expand or collapse them (the chevron icon rotates to indicate state)
• Click files to open them in the code editor
• Lock icon appears on read-only files that cannot be edited

File Tree Toolbar

The toolbar at the top of the file tree provides quick actions:

Searching Files

To find files quickly:

1. Click Search in the file tree toolbar
2. Type your search term in the search input
3. Results appear as a flat list showing matching file names and paths
4. Click any result to open that file
5. Click the X icon to exit search mode

Working with Files

Creating Files and Folders

Create a new file:

1. Click New File in the toolbar, or
2. Right-click a folder and select Create File
3. Enter the file name in the dialog (include extension like .tsx or .css)
4. Click Create

Create a new folder:

1. Click New Folder in the toolbar, or
2. Right-click a folder and select Create Folder
3. Enter the folder name
4. Click Create

Renaming Files and Folders

To rename a file or folder:

1. Right-click the item in the file tree
2. Select Rename
3. Enter the new name in the dialog
4. Click Rename

Moving Files and Folders

You can reorganize your project using drag and drop:

1. Click and hold on a file or folder
2. Drag it to the destination folder
3. The destination folder highlights when it's a valid drop target
4. Release to move the file

The destination folder automatically expands after the move operation completes.

Deleting Files and Folders

To delete a file or folder:

1. Right-click the item in the file tree
2. Select Delete File or Delete Folder
3. Confirm the deletion in the dialog

If the deleted file was open in the editor, it will automatically close.

Editing Code

Monaco Editor Features

The code editor is powered by Monaco (the same editor used in VS Code) and includes:

• Syntax highlighting for TypeScript, JavaScript, JSX, TSX, HTML, CSS, JSON, and more
• Line numbers for easy navigation
• Word wrap to prevent horizontal scrolling
• Auto-indentation with 2-space tabs
• Keyboard shortcuts for common operations

Opening Files

Click any file in the file tree to open it in the editor. Multiple files can be open simultaneously as tabs.

Tab Management

When multiple files are open:

• Click between tabs to switch files
• The active tab is highlighted
• Click the X on a tab to close it
• A colored dot appears on tabs with unsaved changes

Each tab includes action buttons:

• Copy: Copy file contents to clipboard
• Download: Download file as .txt
• Delete: Delete the file

Saving Changes

The Code Editor automatically saves your changes:

• Auto-save on blur: When you click outside the editor
• Auto-save on tab switch: When switching away from the Code tab
• Manual save: Press Cmd+S (Mac) or Ctrl+S (Windows/Linux)

A spinner appears next to the tab name while saving.

Read-Only Files

Certain core files are protected from editing to ensure your landing page functions correctly:

• src/main.tsx - Application entry point
• src/head.tsx - Document head configuration
• lib/form-api.ts - Form submission API

These files display a lock icon and cannot be:

• Edited
• Renamed
• Deleted

Use Cases

FAQ

Troubleshooting

For common issues with the Code Editor, see Code Editor Troubleshooting.

Related Resources

• AI Editor - Use AI to generate and modify code
• Visual Editor - Edit landing pages visually
• Landing Page Templates - Choose from pre-built templates
• Publishing Landing Pages - Deploy your edited pages