Universal IDE extension that shows which React components are optimized by the React Compiler. See at a glance which components get automatically memoized ✨ and which ones have issues preventing optimization 🚫
- 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
- Commands to activate/deactivate markers or check individual files
- Configurable babel plugin path for custom setups
| IDE | Installation |
|---|---|
| VS Code / Cursor | VS Code Marketplace | Open VSX |
| WebStorm / IntelliJ IDEA | IntelliJ marketplace |
This is a monorepo containing:
packages/
server/ # LSP server (shared by all clients)
vscode-client/ # VS Code extension
intellij-client/ # WebStorm/IntelliJ plugin
Each client has its own version and release cycle. See individual READMEs for client-specific documentation:
- Install from VS Code Marketplace or search "React Compiler Marker" in Extensions
- Open a React component file - markers appear automatically
- Build the plugin:
cd packages/intellij-client && ./gradlew buildPlugin - Install from disk: Settings > Plugins > Install Plugin from Disk
- Select
build/distributions/react-compiler-marker-*.zip
All clients support these settings:
| Setting | Default | Description |
|---|---|---|
| Success Emoji | ✨ |
Marker for optimized components |
| Error Emoji | 🚫 |
Marker for failed components |
| Babel Plugin Path | node_modules/babel-plugin-react-compiler |
Path to the compiler plugin |
- Activate Extension - Enable markers
- Deactivate Extension - Disable markers
- Check Current File - Refresh markers in the active file
- Preview Compiled Output - View the compiled code
See CONTRIBUTING.md for development setup and guidelines.
MIT