Visually distinguish Server Components and Client Components in React / Next.js projects directly in your editor.
Why
In Next.js App Router and React Server Components, the boundary between server and client execution is critical for performance and bundle size. But JSX like <MyComponent /> gives no visual cue about where it runs.
React Component Lens solves this by coloring component tags based on whether the imported file contains "use client".
Architecture
The extension uses the shared Rust analysis core from the React Component Lens workspace. packages/core is the single implementation; packages/core-wasm builds it with wasm-pack --target nodejs so VS Code can load the same analyzer as WebAssembly. Zed consumes the same core natively through the rcl-lsp binary.
How It Works
Loads the bundled Rust WASM core (core_wasm.js and core_wasm_bg.wasm)
Parses the active .tsx / .jsx file for JSX tags
Resolves each import to its source file (supports relative paths, tsconfig path aliases, and barrel re-exports)
Detects "use client" at the top of the resolved file
Colors the tag shell (<Component, >, />, </Component>) — props are left untouched
Components without "use client" are treated as Server Components.
Settings
Setting
Default
Description
reactComponentLens.enabled
true
Enable or disable decorations
reactComponentLens.debounceMs
200
Delay before recomputing after changes (0 – 2000 ms)
reactComponentLens.scope.element
true
Highlight JSX element tags (<Component />, </Component>)
