User Documentation & Shortcuts

Quick Start

1. Getting Started with Any Local Project

WebStudio Local operates directly on your computer's filesystem. There are no proprietary databases, no mandatory bundlers, and zero npm build steps required for target websites.

Standard Project Structure:

Point WebStudio to any directory containing standard web files:

my-project/
├── index.html        ← Main entry point
├── styles.css        ← Global stylesheet (WebStudio cascade writes here)
├── assets/           ← Images, SVGs, textures, fonts
└── js/main.js        ← Interactive scripts

Productivity

2. Master Keyboard Shortcuts Cheat-Sheet

Work at the speed of thought. WebStudio provides comprehensive keyboard bindings across canvas manipulation, history management, and code syncing.

Keystroke	Action	Scope
`Ctrl` + `S`	Save Directly to Disk: Writes HTML and CSS changes to filesystem with 0ms delay.	Global
`Ctrl` + `Z`	Undo Visual Edit: Roll back style inspector tweaks or DOM changes.	Canvas & Styles
`Ctrl` + `Y`	Redo Action: Reapply rolled-back operations.	Canvas & Styles
`Esc`	Deselect Active Node: Clears element focus and closes unpinned panels.	Canvas
`Del` / `Backspace`	Remove Element: Deletes selected node from the DOM tree.	DOM Tree
`Alt` + `S`	Quick Style HUD: Opens the floating quick style inspector directly at mouse cursor.	Floating HUD
`Ctrl` + `E`	Toggle Monaco Code Sync: Expands split-view Monaco editor view.	Workspace
`Ctrl` + `D`	Duplicate Element: Clones selected node immediately after current element.	DOM Tree

CSS Architecture

3. The Webflow Cascade & Combo-Classes

WebStudio brings Webflow's renowned styling hierarchy to clean local CSS stylesheets:

Base Classes (e.g. .btn, .bento-card): Define shared properties (padding, font size, border radius). All elements with this class inherit these foundational rules.
Combo-Classes / Modifiers (e.g. .btn.is-primary, .bento-card.is-featured): Add contextual style deviations (accent colors, glowing borders, active shadow states) without rewriting base rules.
Safe Class Duplication (-D Suffix): When you want to tweak an element without affecting its siblings across your site, 1-click duplication creates an isolated copy (e.g. .hero-title-D).
Pseudo-States (:hover, :focus, :active): Switch between states in the style inspector to visually adjust interactive behaviors.

UX Standard

4. Modular Floating & Pinnable HUD Windows (Rule #5)

Secondary editing windows in WebStudio (Quick Style HUD, Gradient Editor, Color Picker, Shadow Presets) adhere to our strict modular UX standard:

📌 Pin / Unpin Mechanics

Pinned windows stay open as you click between DOM elements. This allows you to apply presets or adjust properties across multiple nodes on a single click without reopening panels.

↔️ Smooth Drag & Resize

Drag using the grip header with hardware-accelerated translate3d. Use the bottom resize handle to adjust height smoothly with automatic localStorage memory.

AI Integration

5. The Visual Co-Pilot for AI-Generated Websites

The modern web development cycle is hybrid: AI writes the foundation, but human visual intuition perfects the experience:

Step 1

Generate via AI

Scaffold website layouts, markup, and initial copy in Claude, ChatGPT, v0, or Cursor in seconds.

Step 2

Visually Refine

Open the folder in WebStudio. Tweak colors, box model margins, and shadows visually—preventing destructive AI regressions.

Step 3

Sync & Continue

Save directly to disk (`Ctrl + S`), push to GitHub, or hand clean code back to your AI agent for backend features.

Compatibility

6. System Requirements & Supported Formats

WebStudio Local runs natively inside modern web engines with local filesystem access. No heavy background daemons or cloud servers required.

Supported Browsers

Brave, Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari.

Operating Systems

Windows 10/11, macOS (Apple Silicon & Intel), Linux (Ubuntu, Debian, Fedora).

Supported Formats

HTML5, CSS3, ES6 JavaScript, SVG, PNG, JPG, WEBP, MP4, and font files.