Looks Good 👀

A VS Code extension for live HTML preview with visual editing capabilities.

⚠️ NOTICE: This extension is under active development!

✨ Features

• 🖼️ Visual Editing: Edit HTML elements visually within the WebView
• ⏱️ Real-Time Preview: See changes reflected instantly as you edit
• 🧩 VS Code Integration: Seamlessly integrated with VS Code themes
• 🖱️ Element Selection: Click elements in preview, cursor jumps to code
• ↔️ Bidirectional Sync: Code selections highlight elements in preview
• ✂️ Copy/Cut/Paste: Full clipboard support for elements
• 🔍 Zoom Controls: Zoom in/out with keyboard shortcuts or toolbar
• ↕️ Drag & Drop: Rearrange elements by dragging
• 🎨 CSS Panel: Edit styles directly with live preview

📦 Installation

From VSIX

Install the extension from HERE.

From Source

1. Clone or download this repository
2. Open the folder in VS Code
3. Run npm install to install dependencies
4. Press F5 to launch the Extension Development Host
5. Open any HTML file and press Ctrl+Shift+V to open preview

🚀 Usage

Open Preview

• Keyboard: Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (Mac)
• Command Palette: "Looks Good: Open Preview to the Side"
• Editor Title Button: Click the preview icon in the top-right

Interact with Elements

• Select: Click any element in the preview
• Edit CSS: Use the right-side CSS panel to modify styles
• Copy: Ctrl+C to copy selected element
• Cut: Ctrl+X to cut selected element
• Paste: Ctrl+V to paste after selected element
• Drag: Drag elements to reorder them

Zoom Controls

• Zoom In: Ctrl+= or toolbar button
• Zoom Out: Ctrl+- or toolbar button
• Reset: Ctrl+0 or toolbar button

⚙️ Configuration

📝 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

Inspired by:

• vscode-livepreview
• vscode-web-visual-editor