Class Lens
See the className at a glance. Class Lens shows each element's class or className value as a faded inline hint next to every closing tag — so a wall of </div>s is instantly readable, no matter how deeply your markup is nested.
Works in HTML, JSX, TSX, Vue, Svelte, Astro, PHP, ERB, and any file that uses class= or className= attributes. Zero config.
Want to see it without installing? Open any of the demos in demo/ — Bootstrap, Tailwind, and CSS Modules — with the extension enabled.
Bootstrap
Tailwind
CSS Modules
Installation
Search for Class Lens in the VS Code Extensions sidebar (Ctrl+Shift+X / Cmd+Shift+X) and click Install.
Alternatively, install from the command line:
code --install-extension Homuzu.class-lens
Quick Start
- Install the extension.
- Open any HTML, JSX, Vue, Svelte, or other markup file.
- Done — annotations appear automatically.
No commands, no keybindings, no setup. Toggle off any time with classLens.enabled: false.
What It Does
<div className="flex items-center gap-4">
<span className="text-lg font-bold">Hello World</span> /* text-lg font-bold */
</div> /* flex items-center gap-4 */
When your HTML, JSX, or template markup gets deeply nested, matching a </div> to its opening tag means scrolling up and hunting for the right line. Class Lens solves this by showing the className or class value as a faded annotation right after each closing tag.
Features
- Framework-agnostic — runs on any file containing
class= or className=. HTML, JSX, TSX, Vue, Svelte, Astro, PHP, ERB, Blade, Twig, Handlebars, Liquid, and more.
- Zero config — active on every language by default; opt out per language with
excludedLanguages.
- Two rendering modes — text decorations (default, looks like a comment) or native VS Code inlay hints.
- Handles dynamic values — template literals, ternaries, and any wrapper-function call (
cn(), clsx(), classNames(), or your own alias like clsName()) all unwrap correctly.
- Lightweight — regex parser with 200ms debounce, no AST, no language server, no file I/O.
- Set and forget — no commands or keybindings to learn.
Supported Patterns
| Code |
Annotation |
className="flex gap-4" |
flex gap-4 |
class="container mx-auto" |
container mx-auto |
className={styles.wrapper} |
wrapper |
className={`text-${color}`} |
text-${color} |
className={active ? 'on' : 'off'} |
active ? 'on' : 'off' |
className={cn('base', { bold: x })} |
'base', { bold: x } |
Self-closing tags (<img />, <br />, <input />) are also annotated, but only when the < and /> are on different lines (so a one-line <img className="..." /> stays quiet by default). Set classLens.hideSelfClosing to true to skip them entirely.
Settings
All settings are under classLens.* in VS Code settings.
| Setting |
Default |
Description |
enabled |
true |
Enable or disable annotations |
renderMode |
"decoration" |
"decoration" for text decorations, "inlayHint" for native inlay hints |
maxLength |
40 |
Truncate long values (0 = no limit) |
truncateType |
"word" |
"character" for exact count, "word" for word boundary |
truncatePosition |
"end" |
"end" keeps the start, "start" keeps the end |
opacity |
"0.9" |
Opacity of the annotation text |
prefix |
"/*" |
Text before the class value (a space between prefix and value is inserted automatically) |
suffix |
"*/" |
Text after the class value (a space between value and suffix is inserted automatically; pair with prefix for block-comment style) |
ellipsis |
"..." |
Marker shown when a value is truncated (e.g. "…", or "" to disable) |
showSameLine |
false |
Show annotations on tags whose opening < and closing > are on the same line (off by default to avoid noise on one-line elements) |
hideSelfClosing |
false |
Skip annotations on self-closing tags (<input />, <img />, etc.) |
excludedLanguages |
[] |
Language IDs to exclude (e.g. ["markdown", "json"]) |
transformPatterns |
[...] |
Regex transforms applied to values before display (strips styles. prefixes, unwraps any wrapper-function call like cn()/classNames()/your own alias, etc.) |
Render Modes
Text Decorations (default) — appends faded text after the closing tag, styled like a comment. Works in any theme.
Inlay Hints — uses VS Code's native inlay hint API. Respects your editor's inlay hint settings and theme colors. Toggle with "classLens.renderMode": "inlayHint".
How It Compares
There are several extensions that help with HTML and JSX tag navigation — they tend to do one of three things: highlight the matching opening tag when your cursor is on a closer, color-code tag pairs with rainbow brackets, or rename paired tags as you type.
Class Lens does something different and complementary: it shows the className/class value itself, inline, so you can identify a closing tag without moving your cursor or matching colors by eye. Use it alongside any tag-highlighter you already have.
FAQ
Does it work with Tailwind CSS?
Yes. Tailwind classes are just string values in className — they display exactly as written.
Does it slow down my editor?
No. The parser is a lightweight regex pass over the document text with a 200ms debounce on changes. There's no AST, no language server, and no file I/O.
Can I use it with a language not listed?
Yes. Class Lens runs on all languages by default. If it finds className= or class= in any file, it shows annotations. Use excludedLanguages to turn it off for specific languages.
Why don't I see annotations on a single-line <img className="..." />?
Self-closing tags follow the same showSameLine rule as paired tags: hidden when the < and /> are on the same line, shown when the tag spans multiple lines. Flip classLens.showSameLine to true to see them on single-line tags too, or set classLens.hideSelfClosing to true to skip self-closing tags entirely.
Known Issues
No known issues at this time. If you find a bug, please open an issue.
Contributing
Contributions are welcome! Please open an issue to report bugs or suggest features before submitting a pull request.
License
MIT
