Code Editor

The Code Editor gives you direct access to the HTML and CSS of your pages. This is an advanced tool for users who want full control over their content.

Opening the Code Editor

1. Open your content in the workspace
2. Click the Code Editor button in the toolbar
3. The full-screen code editor opens with your page's source code

Features

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

• Syntax highlighting — Color-coded HTML and CSS for easy reading
• Auto-completion — Suggestions as you type
• Error detection — Highlights potential issues in your code
• Search and replace — Find and replace text across your code
• Full-screen editing — Large editing area for complex changes

What You Can Do

• Edit HTML — Change the page structure, add new elements, modify content
• Edit CSS — Adjust styles, add custom CSS, override design tokens
• Add scripts — Include custom JavaScript for dynamic behaviors
• Fine-tune layout — Adjust responsive breakpoints and layout properties

Saving Code Changes

After making changes in the code editor:

1. Review your changes in the editor
2. Close the editor or click Save
3. Your changes appear immediately in the workspace preview

Tips

• Use the code editor for precise changes that are hard to make in Design Mode
• Always preview your changes in all device modes after editing code
• Use version history to restore a previous version if your code changes cause issues
• The code editor is especially useful for adding custom CSS classes or fine-tuning responsive behavior