Traceform

Instantly See Where Your React Code Renders, Live

---

Why Traceform?

Traceform bridges VS Code and your running React app, instantly highlighting every rendered instance of a component directly in your browser UI.

• Efficient Debugging: Click a component in VS Code and see the corresponding element light up in your app instantly.
• Legacy Code Navigation: Map code to UI in large or unfamiliar React codebases with zero DOM searching.
• Fast Onboarding: New team members immediately visualize component locations without digging through code.

---

How It Works

1. Select a component in VS Code.
2. Right-click and choose "Traceform: Find in UI."
3. Instantly see every instance highlighted in your running app's browser.

---

Quickstart

1. Ensure you have Node.js (v14+) installed.
2. In your React project directory, run:

   npx @lucidlayer/traceform-onboard check

3. Follow the CLI prompts to install:
   • VS Code extension
   • Babel plugin
   • Browser extension
4. Start your development server and open your app in the browser.
5. Select a component in VS Code and trigger "Traceform: Find in UI" (right-click or Command Palette).
6. The corresponding element should be highlighted in your browser.

---

Beta / Current Status

Traceform is currently in closed Beta.

---

Traceform is a developer toolset for React teams. For more information, visit github.com/lucidlayer/traceform