CSS Studio

Edit CSS visually, test responsive layouts, and track every change — without leaving VS Code.

CSS Studio brings the power of browser DevTools directly into your editor, with a visual property builder, live preview, automatic breakpoint detection, and full change tracking with undo/redo.

Features

Live Preview with Responsive Testing

Load any HTML page from your workspace and instantly test it across every breakpoint. CSS Studio auto-detects all @media queries from your stylesheets and populates a breakpoint dropdown so you can switch between Mobile, Tablet, Desktop, and custom sizes in one click.

• Viewport scaling — preview 1920px layouts on a 1366px screen
• Rotate — toggle landscape/portrait for mobile-first testing
• Dimension labels — always know the exact viewport size and scale

Visual CSS Property Builder

Select any element from the DOM tree and build CSS with visual controls instead of typing syntax:

• Layout & Flexbox & Grid — dropdowns for display, position, flex-direction, and more
• Spacing & Size — 4-side padding/margin controls with a link toggle, width/height inputs
• Typography — font family, size, weight, color, alignment
• Background & Border — color pickers, radius controls
• Effects — opacity, shadows, transforms, transitions

Every change applies live and tracks automatically.

Element Inspection

Enable Inspect mode, hover to highlight, click to lock. See every CSS rule that applies to an element — organized by media query. Edit values inline with instant validation:

• Green border = valid CSS (browser-confirmed)
• Red border = invalid value
• Editable property names — rename margin to padding with live preview
• Per-property delete — remove or unset individual properties

Change Tracking with Undo/Redo

Every modification tracks automatically in the Changes panel. Review all edits, copy individual changes or all CSS at once, and delete changes to revert.

• Paste-ready CSS — Copy CSS outputs clean, valid CSS you can paste directly into your stylesheets
• Undo/Redo — step through up to 50 states with buttons or Ctrl+Z / Ctrl+Y
• Deduplication — editing the same property from Inspect and Build keeps only the latest

Inspect Auto-Timeout

Inspect mode automatically disables after 2 minutes of inactivity — no more accidentally leaving it on. All tracked changes are preserved and the Changes tab is shown so you can review your work.

Getting Started

1. Install CSS Studio from the Extensions Marketplace
2. Open a workspace with HTML and CSS files
3. Launch via Command Palette → CSS Studio: Open, right-click an .html file, or press Ctrl+Shift+B
4. Load your page, pick a breakpoint, and start editing

Workflows

Debug existing CSS — Inspect mode → click the broken element → see all applied rules → edit the value → copy the CSS → done.

Build new styles — Build tab → select element from DOM tree → use visual controls → review in Changes tab → copy all CSS.

Responsive testing — cycle through breakpoints → spot layout issues → edit scoped to that @media query → verify across all sizes.

Keyboard Shortcuts

Settings

Requirements

• VS Code 1.85.0 or later
• A workspace with HTML and CSS files

Zero runtime dependencies — fully self-contained, no external services, no accounts, no telemetry.

How It Works

CSS Studio runs a local HTTP server that serves your workspace files. A webview panel loads the tool UI and embeds your page in a same-origin iframe, giving full DOM and CSSOM access for inspection, live editing, and CSS extraction.

All CSS changes are tracked with full undo/redo support, and can be copied individually or as a complete stylesheet.

Contact

For questions, feedback, or licensing inquiries:

Email: besimymeri1@gmail.com

License

All rights reserved. Personal use permitted. See the LICENSE file for details.