Skip to main content

​
Overview

The Knot Code Editor gives you full control over your store’s source code with a powerful, professional editing experience. Whether you’re making quick tweaks or implementing complex features, the editor provides all the tools you need to work efficiently.
Code Editor Overview

The Code Editor interface with syntax highlighting, file explorer, and live preview

​
Key Features

​
Intelligent Code Editing

  • Syntax Highlighting: Automatic language detection and color coding
  • Auto-completion: Smart suggestions as you type
  • Error Detection: Real-time error highlighting and diagnostics
  • Code Formatting: Automatic formatting with customizable rules

​
Advanced Navigation

  • File Explorer: Browse and manage your project files
  • Quick Open: Fast file switching with Cmd/Ctrl + P
  • Go to Definition: Jump to function and variable definitions
  • Find & Replace: Powerful search across files with regex support

​
Getting Started

1

Access the Code Editor

Click the code icon in the top navigation to open the editor
2

Navigate your files

Use the file explorer on the left to browse your project structure. Click any file to open it in the editor.
3

Make your changes

Edit code with full syntax highlighting and auto-completion support. Changes are tracked automatically.
4

Save your work

Press Cmd/Ctrl + S to save the current file, or use auto-save to save changes automatically.

​
File Management

​
File Explorer

The file explorer panel shows your entire project structure:
  • Create new files: Right-click in the explorer and select “New File”
  • Rename files: Right-click and select “Rename” or press F2
  • Delete files: Right-click and select “Delete” (with confirmation)
  • Move files: Drag and drop to reorganize your project
File Explorer

File explorer showing project structure with context menu options

​
Supported File Types

The editor provides specialized support for:
  • React/JSX: Component editing with JSX syntax support
  • TypeScript: Full type checking and IntelliSense
  • CSS/SCSS: Style editing with color previews
  • JSON: Configuration files with schema validation
  • Markdown: Documentation with live preview

​
Editor Features

​
Multi-Cursor Editing

Hold Alt/Option and click to add multiple cursors, allowing you to edit multiple locations simultaneously.

​
Code Folding

Click the arrow icons in the gutter to collapse/expand code blocks, making it easier to navigate large files.

​
Split View

Open multiple files side-by-side by dragging tabs or using Cmd/Ctrl + \ to split the editor.
Split View Editor

Split view showing HTML and CSS files side-by-side

​
Keyboard Shortcuts

​
Essential Shortcuts

ActionWindows/LinuxMac
Save fileCtrl + SCmd + S
Open fileCtrl + PCmd + P
Find in fileCtrl + FCmd + F
Find & ReplaceCtrl + HCmd + H
Comment lineCtrl + /Cmd + /
Duplicate lineCtrl + DCmd + D
Move line up/downAlt + ↑/↓Option + ↑/↓
Multi-cursorAlt + ClickOption + Click

​
Advanced Shortcuts

ActionWindows/LinuxMac
Go to definitionF12F12
Find all referencesShift + F12Shift + F12
Rename symbolF2F2
Format documentShift + Alt + FShift + Option + F
Toggle terminalCtrl + `` Cmd + ``

​
Working with Git

The Code Editor includes Git integration:
  • View changes: Modified files are marked in the explorer
  • Diff view: See what changed in each file
  • Stage changes: Select which changes to include
  • Commit: Write commit messages and push changes
Version Control: All changes are automatically tracked. You can view file history and revert changes at any time.

​
Tips for Efficient Coding

Pro Tips:
  • Use Cmd/Ctrl + Shift + P to open the command palette for quick access to all editor commands
  • Enable auto-save in settings to never lose your work
  • Use the minimap on the right for quick navigation in large files
  • Customize your theme and font size in editor settings
Important: While the Code Editor gives you full control, be careful when modifying core files. Always test your changes in preview before publishing.

​
Common Use Cases

​
Customizing Components

  1. Locate the component file in the explorer
  2. Make your modifications
  3. Preview changes in real-time
  4. Save when satisfied

​
Adding Custom CSS

  1. Open your stylesheet file
  2. Add new styles or modify existing ones
  3. Use the color picker for easy color selection
  4. See changes reflected immediately in preview

​
Implementing New Features

  1. Create new component files
  2. Import necessary dependencies
  3. Write your implementation
  4. Test thoroughly before publishing

​
Troubleshooting

​
Code Not Updating

  • Ensure you’ve saved your changes (Cmd/Ctrl + S)
  • Check for syntax errors in the problems panel
  • Refresh the preview window if needed

​
IntelliSense Not Working

  • Wait a moment for the language server to initialize
  • Ensure your file has the correct extension
  • Check for errors in imported modules
Need Help? The editor includes built-in documentation. Hover over any function or component to see its documentation, or press Cmd/Ctrl + Click to jump to its definition.
⌘I