Code Editor

The code editor gives you direct access to your project’s source files. Browse the file tree, open multiple files in tabs, and edit code with syntax highlighting.

Who can do this: Everyone can view code. Direct editing requires a Pro plan. See Pricing and Plans for details.

Accessing the Code Editor

Click Code in the top navigation bar to open the code editor. The editor appears alongside or instead of the live preview, depending on your view mode.

File Tree Navigation

The left panel displays your complete project structure. Folders and files are organized the way a developer would expect:

• src/ contains your application code
• src/components/ holds reusable components
• src/pages/ contains page components
• public/ stores static assets

Click any file to open it. Click a folder to expand or collapse its contents.

Working with Tabs

Open multiple files simultaneously. Each file opens in a new tab at the top of the editor.

Tab actions:

• Click a tab to switch to that file
• Click the X on a tab to close it
• Unsaved files show a dot indicator on their tab

Tabs persist during your session. Close tabs you no longer need to keep your workspace organized.

View Modes

Switch between two layouts depending on how you prefer to work.

Split View

See code and preview side by side. Changes you make in the code appear in the preview after saving. This is useful when you want to see the immediate effect of your edits.

Code-Only View

Maximize the editor to focus entirely on code. The preview hides completely, giving you more screen space for complex files.

Toggle between views using the layout controls in the editor toolbar.

Element-to-Source Navigation

Find the code behind any element in your preview:

1. Click on Select Element in the top of your code/preview split view
2. Select an element in the live preview
3. The editor jumps to the source file and line that renders that element
4. Make your changes directly in the code

This bridges visual editing and code editing. See something you want to change? Click it, find the code, edit it.

Syntax Highlighting

The editor recognizes and highlights:

• JavaScript and TypeScript
• JSX and TSX (React components)
• CSS, Tailwind classes, and styled-components
• JSON configuration files
• Markdown
• HTML

Colors distinguish keywords, strings, functions, and variables, making code easier to read and errors easier to spot.

Saving Changes

Save a Single File

Press Cmd+S (Mac) or Ctrl+S (Windows) to save the current file. The unsaved indicator disappears from the tab, and your changes apply to the project.

Save All Files

Save all open files at once to create a project version. This captures the current state of every modified file.

Discard Changes

Revert unsaved changes in a file to restore its last saved state. This discards your edits without affecting the project.

Unsaved Changes Warning

If you try to leave the editor with unsaved changes, Sticklight warns you before navigating away. Save or discard your changes to continue.

Search and Navigation

Find files and content quickly:

• File search: Use the search bar to find files by name. Start typing, and matching files appear instantly.
• In-file search: Press Cmd+F (Mac) or Ctrl+F (Windows) to search within the current file. Navigate between matches with the arrow buttons or Enter key.

Free vs. Pro Access

Capability	Free	Pro
View all project files	Yes	Yes
Browse file tree	Yes	Yes
Search files	Yes	Yes
Edit code directly	No	Yes
Save changes	No	Yes

Free users can read and understand their project’s code. Pro users can modify it directly. Both tiers can use chat to make changes through the AI.

Best Practices

Use code editing for precision. When you need exact control over a specific line or value, edit the code directly rather than describing it in chat.

Combine with visual editing. Click an element in the preview to find its source, then edit the code. Or make visual changes and review the generated code.

Save frequently. Small, frequent saves create a clear version history. If something breaks, you can roll back to a recent working state.

Keep the preview visible. Split view lets you see changes immediately. Catch issues before they compound.

FAQ

Can I edit any file in my project?

Yes. The code editor provides access to all project files, including configuration files, styles, and assets.

Do code changes sync with chat-based changes?

Yes. Your project has one source of truth. Changes made in the code editor, through chat, or via visual editing all update the same files.

What happens if I break something?

Use version history to restore a previous working state. Every save creates a recoverable checkpoint.

Can I copy code from the editor?

Yes. Select code and copy it like any text editor. This is useful for sharing snippets or moving code between projects.

Does the editor support keyboard shortcuts?

Yes. Standard editor shortcuts work: save, undo, redo, find, select all. The Monaco editor (same as VS Code) powers the experience.