https://github.com/blazejkustra/react-compiler-marker
Universal IDE extension that shows which React components are optimized by the React Compiler ✨
https://github.com/blazejkustra/react-compiler-marker
cursor intellij-plugin lsp lsp-server react react-compiler vscode-extension webstorm-plugin windsurf
Last synced: 2 months ago
JSON representation
Universal IDE extension that shows which React components are optimized by the React Compiler ✨
- Host: GitHub
- URL: https://github.com/blazejkustra/react-compiler-marker
- Owner: blazejkustra
- License: mit
- Created: 2024-11-24T19:52:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-15T11:18:46.000Z (4 months ago)
- Last Synced: 2026-03-15T12:21:15.463Z (4 months ago)
- Topics: cursor, intellij-plugin, lsp, lsp-server, react, react-compiler, vscode-extension, webstorm-plugin, windsurf
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=blazejkustra.react-compiler-marker
- Size: 4.32 MB
- Stars: 401
- Watchers: 2
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-swm-tools - react-compiler-marker - A VS Code/Cursor extension to visualize which React components are optimized by the React Compiler. (Editor extensions)
README
# React Compiler Marker
**Universal IDE extension that shows which React components are optimized by the [React Compiler](https://react.dev/learn/react-compiler)**. See at a glance which components get automatically memoized ✨ and which ones have issues preventing optimization 🚫
## Features
- Visual emoji markers next to React components (customizable)
- Hover tooltips with optimization details and error messages
- Preview compiled output to see what the React Compiler generates
- Generate reports for a full-project compilation snapshot
- Commands to activate/deactivate markers or check individual files
- Configurable babel plugin path for custom setups
## Supported IDEs
| IDE | Installation |
|------|--------------|
| VS Code / Cursor / Antigravity | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=blazejkustra.react-compiler-marker) \| [Open VSX](https://open-vsx.org/extension/blazejkustra/react-compiler-marker) |
| WebStorm / IntelliJ IDEA | [IntelliJ marketplace](https://plugins.jetbrains.com/plugin/29540-react-compiler-marker) |
| Neovim | [Setup instructions](packages/nvim-client/README.md) |
| Zed (alpha) | [Setup instructions](packages/zed-client/README.md) |
## Project Structure
This is a monorepo containing:
```
packages/
cli/ # CLI for generating reports
server/ # LSP server (shared by all clients)
vscode-client/ # VS Code extension
intellij-client/ # WebStorm/IntelliJ plugin
nvim-client/ # Neovim plugin
zed-client/ # Zed extension
```
Each client has its own version and release cycle. See individual READMEs for client-specific documentation:
- [CLI](packages/cli/README.md)
- [VS Code Client](packages/vscode-client/README.md)
- [IntelliJ Client](packages/intellij-client/README.md)
- [Neovim Client](packages/nvim-client/README.md)
- [Zed Client](packages/zed-client/README.md)
- [LSP Server](packages/server/README.md)
## Quick Start
### CLI
```bash
npx react-compiler-marker
```
Generate a full-project report from the command line. Supports text, HTML, and JSON output formats.
```bash
# Text summary (default)
npx react-compiler-marker .
# Interactive HTML report
npx react-compiler-marker --format html .
# JSON for CI pipelines
npx react-compiler-marker --format json . > report.json
```
See the [CLI README](packages/cli/README.md) for all options.
### VS Code / Cursor / Antigravity
1. Install from [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=blazejkustra.react-compiler-marker) or search "React Compiler Marker" in Extensions
3. Open a React component file - markers appear automatically
### WebStorm / IntelliJ IDEA
1. Build the plugin: `cd packages/intellij-client && ./gradlew buildPlugin`
2. Install from disk: Settings > Plugins > Install Plugin from Disk
3. Select `build/distributions/react-compiler-marker-*.zip`
### Neovim
Using [lazy.nvim](https://github.com/folke/lazy.nvim):
```lua
{
'blazejkustra/react-compiler-marker',
ft = { 'javascript', 'javascriptreact', 'typescript', 'typescriptreact' },
build = './scripts/build-nvim.sh',
opts = {},
}
```
Open a React component file - markers appear automatically.
**Requirements:** Neovim 0.9+ (0.10+ recommended for native inlay hints), Node.js, `babel-plugin-react-compiler` in your project.
See the [Neovim Client README](packages/nvim-client/README.md) for configuration options and other package managers.
### Zed
> **Note:** The Zed extension is not yet available in the Zed extension registry. For now, you need to download and install it manually.
See the [Zed Client README](packages/zed-client/README.md) for installation and configuration options.
## Links
- [GitHub Repository](https://github.com/blazejkustra/react-compiler-marker)
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=blazejkustra.react-compiler-marker)
- [Open VSX Registry](https://open-vsx.org/extension/blazejkustra/react-compiler-marker)
- [Jetbrains Marketplace](https://plugins.jetbrains.com/plugin/29540-react-compiler-marker)
- [React Compiler Documentation](https://react.dev/learn/react-compiler)
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
## License
MIT