Zaemit Visual Editor

Edit HTML/CSS visually inside VS Code — no browser needed.

Why Zaemit?

Tired of switching between your code editor and browser to tweak designs? Zaemit brings a full visual editor right into VS Code. Select elements, drag them around, edit styles — and watch the code update in real time. It's the fastest way to build and refine web pages.

Features

Visual Drag & Drop Editing

Click any element to select it. Drag to move. Resize with handles. Rotate freely. Everything you do visually is reflected in clean, production-ready HTML/CSS code.

Comprehensive Style Panel

No more guessing CSS property names. The style panel gives you intuitive controls for:

• Layout — Display, position, flexbox, grid, z-index
• Size — Width, height, margin, padding, min/max constraints
• Typography — Font family, size, weight, line height, letter spacing, text alignment
• Borders — Per-side border control, radius, styles, colors
• Backgrounds — Colors, gradients, images with size/position/repeat controls
• Effects — Opacity, box shadow, text shadow, transform, transition, cursor
• Overflow — Scroll behavior per axis

Responsive Design Mode

Instantly preview your page at different screen sizes. Switch between Desktop, Tablet, and Mobile viewports with a single click. Design responsive layouts without leaving VS Code.

Layer Panel

See and navigate the full DOM tree of your page. Reorder elements by drag & drop. Rename layers for better organization. Multi-select elements for batch operations.

Built-in Code Editor

Powered by CodeMirror, the integrated code editor lets you view and edit the raw HTML/CSS/JS alongside the visual canvas. Changes sync both ways — edit visually or in code.

Undo / Redo

Every action is tracked. Press Ctrl+Z to undo, Ctrl+Y to redo. The change history captures style edits, element moves, content changes, structural modifications, and AI-powered edits. Even changes made by Claude Code or other MCP tools are fully undoable.

Multi-Element Selection

Hold Ctrl and click to select multiple elements. Apply styles, move, or delete them all at once.

Zoom & Pan

Ctrl+Scroll to zoom in/out. Space+Drag to pan across the canvas. Ctrl+0 to reset zoom to 100%.

AI Integration (MCP Server)

Zaemit includes a built-in MCP (Model Context Protocol) server, enabling AI coding tools to interact with the visual editor directly.

• Claude Code, Cursor, Copilot, and other MCP-compatible tools can connect automatically
• AI can read the current page structure, inspect selected elements, and modify styles or HTML in real time
• All AI-powered edits are fully integrated with the Undo/Redo system — Ctrl+Z works seamlessly
• The editor exposes a REST API so any AI tool that supports HTTP calls can integrate seamlessly

Just open an HTML file with Zaemit — the MCP server starts automatically. No extra setup required.

Figma Import

Import Figma designs directly into your project as clean HTML/CSS.

1. Generate a Personal Access Token in Figma (Settings → Security)
2. Run "Zaemit: Set Figma Token" from the Command Palette
3. Run "Zaemit: Import from Figma" and paste a Figma URL
4. Zaemit converts the selected frame into HTML/CSS and adds it to your project folder

Supports frames, components, images, and text layers. Imported files are fully editable in the visual editor.

Getting Started

1. Install the Extension

Search "Zaemit" in the VS Code Marketplace and click Install. No additional configuration needed.

2. Open Your Project

Right-click any .html file in the Explorer panel and select "Open with Zaemit Visual Editor". Your page renders instantly in the visual editor. Works with any HTML filename — index.html, landing.html, about.html, and more.

3. Design & Ship

Edit visually, see code update live. Commit clean, production-ready code directly from your editor. CSS and JS file references in your HTML are auto-detected and preserved.

You can also click the Zaemit button in the bottom status bar to open the current HTML file.

Keyboard Shortcuts

Requirements

• VS Code 1.85.0 or later
• Works on Windows, macOS, and Linux

Feedback & Support

Found a bug or have a feature request? Open an issue on GitHub.

License

Proprietary. All rights reserved. See LICENSE for details.