Canvas Browser - VS Code Extension

Infinite canvas for live preview of HTML files and websites in VS Code.

Features

• Infinite Canvas: Figma-like infinite canvas workspace
• Live Preview: Open and preview HTML files and websites
• Drag & Drop: Drag local HTML files directly onto the canvas
• Browser Windows: Multiple browser windows on canvas
• Hot Reload: Automatic refresh when local HTML files change
• Zoom & Pan:
  • Zoom: Ctrl + Mouse Wheel
  • Vertical: Mouse Wheel
  • Horizontal: Shift + Mouse Wheel
  • Free Pan: Middle Mouse Button or Space + Left Mouse
• Window Management: Drag, resize, and arrange browser windows

4. Run the command Open Canvas Browser from the Command Palette (Ctrl+Shift+P)

Usage

1. Open the Canvas Browser by running the command Canvas Browser: Open from Command Palette
2. On first launch, you'll see an onboarding guide with all keyboard shortcuts and features
3. Add websites: Enter a URL in the toolbar and click "Add Site"
4. Add local HTML: Drag and drop any .html file onto the canvas
5. Use the following controls:
   • Zoom: Hold Ctrl and scroll mouse wheel
   • Vertical Pan: Scroll mouse wheel
   • Horizontal Pan: Hold Shift and scroll mouse wheel
   • Free Pan: Click and drag with middle mouse button, or hold Space and drag with left mouse button
   • Move Window: Click and drag the window title bar
   • Resize Window: Click and drag the resize handles on window edges and corners
   • Focus Window: Click anywhere on a window to interact with it
   • Unfocus Window: Press ESC to exit focus mode
   • Refresh Window: Press F5 to reload the focused window
   • Close Window: Click the X button on the window title bar