Why it is worth attention

It solves a persistent pain point for Leptos developers—rust-analyzer's semantic tokens ruining RSX highlighting—by filtering only the markup tokens instead of disabling semantic highlighting entirely, and enriches hovers with MDN documentation while trimming useless crate-level docs.

Who it is for

Leptos framework users writing UI in Rust
Rust developers using VS Code for web frontend development
Developers frustrated by broken syntax highlighting in `view!` macros

Use cases

Accurately colorize HTML tags and attributes inside `view!` macros without breaking Rust highlighting in closures
Get per-element attribute completion and value suggestions (e.g., button type) with MDN documentation
Display clean hover info combining HTML docs and tachys type info, removing the generic Leptos crate intro

Strengths

Uses the same W3C/MDN data as VS Code's built-in HTML support, ensuring accurate completions and hovers
Filters only RSX markup semantic tokens, preserving full Rust semantic highlighting in other contexts
Graceful degradation with a decorations fallback if the rust-analyzer middleware API changes
Supports Leptos-specific attribute namespaces (on:, class:, prop:, etc.) with usage hints

Considerations

Unbraced attribute values containing a bare `>` (e.g., `when=move || count.get() > 0`) can break highlighting; braces are required
`view!` bodies using `()` or `[]` delimiters instead of `{}` are not recognized

README quick start

Leptos RSX (HTML)

Proper HTML syntax highlighting and IntelliSense inside Leptos view! macros.

This extension is built around two core ideas:

Completions and hovers driven by the same W3C/MDN HTML data and theme colors as VS Code's built-in HTML support — not a hand-typed list.
Handling syntax highlighting at BOTH the semantic token layer and the TextMate grammar layer. Semantic tokens always override grammars, and view! HTML tags are implemented as functions, so rust-analyzer's tokens ruin any HTML grammars.

Problem Statement

Existing RSX extensions fail to address IDE issues with rust-analyzer enabled:

rust-analyzer adds semantic tokens that override extension syntax highlighting, coloring html opening tags and attributes as functions, and closing tags with the generic catch-all color:
Code completion is inaccurate or missing entirely for html attributes:
rust-analyzer hover info inside of the view! macros resolves through the WHOLE macro expansion. The result is a combo of the tachys type (useful) and ALSO the entire Leptos crate-level intro docs (useless):

Problem Resolutions

With this extension installed, you can expect:

Correct HTML syntax highlighting for tags and attributes, without affecting nested Rust code closures:
Accurate code completion, consistent with behavior inside a .html file:
Sane hover info, starting with the info you get in a .html file, followed by the tachys type info. Each section (HTML and rust-analyzer) is labeled for clarity:

Features

Highlighting that survives real code

Element tags, component tags (colored like types, including paths like my_crate::widgets::Fancy), and fragments <>…
Leptos attribute namespaces: on:, class:, style:, prop:, attr:, bind:, use:, node_ref
Attribute values and {…} text nodes re-embed real Rust highlighting, recursively — closures, method calls, format! interpolation, nested view!

IntelliSense that knows HTML

Tag completion after `` offers button | submit | reset; works for every value set in the HTML spec data
DOM events in Leptos form: on:click, on:input, … with docs
Leptos namespaces (class:, prop:, bind:value, …) with usage hints
Hover docs for tags and attributes, s

Description

VS Code entension providing proper HTML syntax highlighting and IntelliSense inside Leptos view! macros.

Related repositories

Similar projects matched by category, topics, and programming language.

TanStack

Featured

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web DevelopmentFrontend Frameworks

14,861

vercel-labs

Featured

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

Developer ToolsCode Quality & Build

1,985

Jakubantalik

Featured

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI & Machine LearningAI Agents

1,191