Demo:Traceform highlighting the header^
April 16, 2025
Today I'm excited to share Traceform, a new developer tool we've created to solve a persistent frustration in React development, the disconnect between your code editor and what actually renders in the browser.
The Problem We're Solving
At its core, software development is about feedback loops. The tighter these loops, the faster we build. Yet React developers still waste countless minutes each day asking "Where exactly is this component showing up in my UI?" or "Where is this buggy UI element in my code?". This context switching tax adds up, especially in large and complex codebases.
Traceform eliminates this friction entirely.
What Traceform Does
Traceform creates a direct bridge between VS Code and your browser:
- Right click any React component in your editor
- Select "Traceform: Find Component in UI"
- Watch as all instances instantly highlight in your browser
No more manual hunting through React DevTools or inspecting DOM elements. The connection is immediate and seamless.
Building for Developer Experience
When we started building Traceform, we had a simple metric, how many seconds can we save developers each day? The best tools don't just solve problems, they make entire categories of friction disappear.
We've built this with minimal configuration requirements, focusing on making the experience feel almost magical when you first use it.
Technical Implementation
Our approach combines:
- A Babel plugin that injects trace identifiers during development builds
- A VS Code extension that handles editor commands
- A browser extension that visualizes the components
This architecture allows for real time communication without complex source map parsing, keeping the experience fast and reliable.
Try the Beta
We're releasing this as a beta because we believe in shipping early and iterating based on real world feedback. The setup is straightforward:
- Install "Traceform for VS Code" from the Marketplace
- Add
@lucidlayer/babel-plugin-traceformto your dev dependencies - Install our browser extension from GitHub Releases
Check our documentation for detailed setup instructions. Detailed setup instructions
What's Coming Next
This initial release focuses on the code to UI flow, but we're already working on:
- Browser to code navigation (clicking elements to jump to their code or files)
- Streamlining the installation experience
- Firefox support and potential expansion to other frameworks
- Enhanced error handling and documentation
Join Us
Tools like this get better through community adoption and feedback. If you're building with React, we'd love for you to try Traceform and share your experience.
We believe developer tools should feel like superpowers. Traceform is our contribution to making React development more intuitive and immediate.
-Traceform Team
Top comments (5)
Neat idea Traceform sounds like a metal detector for code find the hidden stuff fast What happens when teams are huge and lots of people change the code every day does it still help keep everyone on track
Hi Nevo,
Great question about team environments!
Traceform handles changing codebases through three key mechanisms:
Build specific Identifiers: Our Babel plugin creates component fingerprints during your development build, these work regardless of what's changing elsewhere.
Individual Context: Each developer gets their own direct connection between code and UI in their local environment. What your teammates are working on doesn't interfere.
Instant Clarity: In large teams, finding "what code creates this UI" becomes more difficult, not less. Traceform eliminates this search entirely.
The tool creates a "local reality" for each developer, you always understand what you're working with, even as the broader codebase evolves rapidly around you.
-Traceform Team
Looks very interesting, definitely gonna try
Himanshu, how did Traceform perform in your workflow?
Currently on vacation, after few days gonna try and don't worry, will also share review and also Gove suggestions like this feature will be good too and etc etc