Ready to use demo projects so you can safely try, test, and get comfortable with the full Traceform toolchain before using it in your own React apps.
npx @lucidlayer/traceform-onboard check
See above for a visual walkthrough of the onboarding and validation process.
Watch here: https://www.youtube.com/watch?v=0ZnyWkS2g44
Table of Contents
This repository contains four demo projects designed to showcase Traceform's capabilities. Each project is pre-configured without Traceform, allowing you to go through the setup process yourself and experience the onboarding flow as a new user would.
- Node.js (>= 18.17.0): Download Node.js
- npm (>= 8.0.0), yarn (>= 1.22.0), or pnpm (>= 7.0.0)
- A Chromium-based browser (for the Traceform extension)
- Visual Studio Code (for the Traceform VS Code extension)
Pick any demo to try Traceform from scratch:
- Demo-01: Basic React app
- Demo-02: React + TypeScript
- Demo-03: Vite + React
- Demo-04: Advanced patterns
-
Choose a Demo Project
cd Demo-01 # or Demo-02, Demo-03, Demo-04
-
Install Dependencies
npm install
-
Install Traceform Onboarding CLI and Types
npx @lucidlayer/traceform-onboard check
Follow the interactive wizard to set up the Babel plugin, VS Code extension, and browser extension.
-
Start the Demo App
npm run dev
-
Open in Your Browser
- Visit the local address shown in your terminal (e.g.,
http://localhost:5173).
- Visit the local address shown in your terminal (e.g.,
-
Validate Traceform
- Open VS Code and check for the Traceform sidebar.
- Use "Traceform: Find Component in UI" to highlight components in your browser.
The onboarding CLI will guide you through:
- Checking prerequisites (Node.js, package manager)
- Installing the Traceform Babel plugin
- Adding configuration snippets (manual copy/paste)
- Installing the Traceform VS Code extension
- Installing the Traceform Chrome extension
- Final validation and troubleshooting tips
For a full walkthrough, see the GIF above or watch the YouTube demo.
- If you see "client connected" in the VS Code Traceform sidebar, setup is complete!
- If components are not highlighted in the browser, double-check:
- The browser extension is installed and enabled
- The dev server is running
- The correct project is open in VS Code
- For more help, see the Traceform documentation or open an issue.
Q: Can I use these demos in a monorepo?
A: Yes! The onboarding CLI detects monorepos and works with common setups.
Q: Does the CLI modify my files?
A: No. All configuration changes are manual (copy/paste from the wizard).
Q: What if something fails?
A: The wizard provides troubleshooting tips and links to documentation for each step.
- Traceform Onboarding CLI (npm)
- Traceform VS Code Extension
- Traceform Chrome Extension
- Traceform Documentation
This repository is part of the Traceform developer toolset. For more information, visit github.com/lucidlayer/traceform