Visual CSS Preview

Preview rendered HTML elements directly from CSS and SCSS selectors inside VS Code.

Instead of switching back and forth between your editor and browser just to check what an element looks like, Visual CSS Preview lets you hover over a CSS selector and see the actual rendered element directly inside VS Code.

Features

Hover over a CSS or SCSS class selector:

.roomWrapper {
  display: flex;
  padding: 20px;
}

Visual CSS Preview will:

1. Read the selector under your cursor.
2. Connect to your running local development server.
3. Find the matching DOM element.
4. Render the page using a Chromium-based browser.
5. Capture the matching element.
6. Display the rendered element directly inside the VS Code hover panel.

In short:

CSS / SCSS Selector
        ↓
      Hover
        ↓
Local Development Server
        ↓
   Rendered DOM
        ↓
    Screenshot
        ↓
VS Code Hover Preview

Usage

1. Start your development server

Visual CSS Preview works with an already running development server.

For example:

http://127.0.0.1:5500

or:

http://localhost:5173

It can be a Live Server instance, Vite development server, or another local development server.

2. Configure the preview URL

Open VS Code Settings:

Ctrl + ,

Search for:

Visual CSS Preview

Then set:

Visual CSS Preview: Url

to the URL of your development server.

For example:

http://127.0.0.1:5501

You can also configure it directly in your workspace .vscode/settings.json:

{
  "visualCssPreview.url": "http://127.0.0.1:5501"
}

This makes it possible for each project to use its own development server URL.

3. Hover over a selector

Open a CSS or SCSS file:

.roomWrapper {
  width: 300px;
  padding: 20px;
  display: flex;
}

Hover over:

.roomWrapper

Visual CSS Preview will locate the matching element in the rendered page and display a screenshot directly inside the VS Code hover panel.

Requirements

Visual CSS Preview requires:

• Visual Studio Code
• A running local development server
• Google Chrome or Microsoft Edge

The extension uses Playwright to communicate with a Chromium-based browser and render your page.

You do not need to manually install Playwright's bundled Chromium browser when Google Chrome or Microsoft Edge is available.

The extension will attempt to use:

Google Chrome
      ↓
Microsoft Edge
      ↓
Playwright Chromium (fallback)

Extension Settings

visualCssPreview.url

Specifies the development server URL used when rendering previews.

Default:

http://127.0.0.1:5500

Example:

{
  "visualCssPreview.url": "http://localhost:5173"
}

Supported Languages

Currently supported:

• CSS
• SCSS

Current Selector Support

The initial version focuses on CSS class selectors.

For example:

.card

.roomWrapper

.roomSelection-photo

Multiple Matching Elements

If multiple DOM elements match the same selector, Visual CSS Preview currently uses the first matching element.

For example:

.card

If the rendered page contains:

<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>

the first matching .card element will currently be used for the preview.

How It Works

Visual CSS Preview connects your stylesheet to the actual rendered page.

VS Code
   │
   │ Hover .roomWrapper
   ▼
Visual CSS Preview
   │
   │ Playwright
   ▼
Chrome / Edge
   │
   │ Open configured URL
   ▼
Rendered Web Page
   │
   │ document selector
   ▼
.roomWrapper
   │
   │ screenshot
   ▼
VS Code Hover

This means the preview comes from the actual rendered DOM rather than trying to recreate the element from CSS alone.

Because the real page is rendered, the preview can reflect styles inherited from the application and the surrounding page environment.

Why?

When working with large frontend projects, understanding what a selector actually represents often means switching between:

VS Code
→ Browser
→ DevTools
→ Find element
→ Back to VS Code

Visual CSS Preview is an experiment in making that feedback loop shorter:

Hover the selector
→ See the element

Known Limitations

This is an early version of Visual CSS Preview.

Current limitations include:

• Primarily supports class selectors.
• Complex selectors are not fully supported yet.
• Nested SCSS selectors are not fully resolved yet.
• SCSS & selectors are not fully supported yet.
• The development server must already be running.
• The configured URL must contain the element being previewed.
• When multiple elements match a selector, only the first one is currently previewed.
• Dynamic application state may affect which elements are available.
• Pages requiring authentication or navigation may not immediately expose the target element.

Planned Improvements

Possible future improvements include:

• More CSS selector types
• Better SCSS nested selector support
• SCSS & resolution
• Multiple-element preview
• Screenshot caching
• Faster repeated previews
• Automatic cache cleanup
• Better development-server error messages
• Configurable viewport sizes
• Better support for modern frontend frameworks

Troubleshooting

Preview server is not running

Make sure your development server is running and that the configured URL is correct.

For example:

http://127.0.0.1:5501

Element not found

Make sure the selector exists on the page opened by the configured development URL.

For example, hovering:

.roomWrapper

requires the rendered page to contain an element matching:

<div class="roomWrapper">

Browser cannot be launched

Make sure Google Chrome or Microsoft Edge is installed.

Visual CSS Preview attempts to use a locally installed Chromium-based browser for rendering.

Release Notes

0.0.1

Initial release of Visual CSS Preview.

Features:

• CSS hover integration
• SCSS hover integration
• Configurable development server URL
• Playwright-powered page rendering
• DOM element detection
• Element screenshot capture
• Screenshot preview directly inside VS Code Hover
• Google Chrome support
• Microsoft Edge fallback

Feedback

Visual CSS Preview is still experimental.

Bug reports, ideas, and suggestions are welcome.

---

Visual CSS Preview

Hover your CSS. See the real thing.