Cursor extension
Quick CSS Edit
Jump from HTML to the right rule without leaving your flow. Hover previews, inline peek editing, and CSS suggestions in your attributes. Inspired by the original Brackets "Quick Edit" feature.
Cursor: Extensions → ⋯ → Install from VSIX…
Preview on hover
Hover a class or ID to see its CSS without leaving the file: file path, line number, and a syntax-highlighted block of declarations.
- Multiple rules (e.g. base + media query) are shown together with
@media/@supportscontext when it applies. - CSS variables are resolved and their values are displayed inline, e.g.
var(--color-primary) /* #a1a1aa */. - If there is no rule yet, a subtle hint suggests CtrlE to add one inline.
Edit CSS inline
With the cursor on any class or ID in an HTML file, press CtrlE to open a native inline peek editor—no tab switching, no hunting for the right file.
- Opens a themed, syntax-highlighted peek directly below the line.
- Switch between different rules across different CSS files for the same selector.
- Make edits inline and save them back to the CSS file.
Define CSS rules
When there are several stylesheets and no existing rule for the selector, a compact panel lists every CSS file in the workspace.
- Select a file, then New rule to insert the stub and open the peek.
- + Create new CSS file… names a new file from a prompt.
- Closes after creation and returns focus to the HTML editor.
Suggest CSS classes and IDs
Typing inside class="", className="", or id="" triggers autocomplete suggestions populated from CSS rules in your project.
Install in Cursor
Download the VSIX, then install from the Extensions menu.
Download quick-css-edit-1.0.0.vsix