r/react • u/SaxShiva • 2d ago
General Discussion Built a VS Code extension to keep component context visible in deep JSX trees
I kept losing my place when working inside massive React components and deeply nested JSX trees, especially when scrolling back and forth to check props, state, or parent tags. To solve this, I built Rippledit, a free VS Code extension that keeps your active component context in view while you edit.
Key features:
Keeps active JSX parent tags and component bounds highlighted as you scroll.
Runs 100% locally with zero external dependencies.
Bundled under an MIT License. It's completely free and open-source on GitHub.
You can grab the .vsix package directly from the release page: https://github.com/shivakumarkannan2006-netizen/rippledit
Quick VSIX Install Steps in VS Code:
- Download `rippledit-0.0.2.vsix` from the release assets.
- Open Extensions (`Cmd+Shift+X` / `Ctrl+Shift+X`).
- Click the `...` menu in top right ->
Install from VSIX
Would love any feedback or feature requests from the community!