https://github.com/lucidlayer/demo
https://github.com/lucidlayer/demo
babel-plugin code-to-ui component-mapping debugging developer-tools frontend react react-devtools traceform traceform-demo vscode-extension
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lucidlayer/demo
- Owner: lucidlayer
- Created: 2025-04-17T22:46:06.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-26T22:32:08.000Z (11 months ago)
- Last Synced: 2025-04-30T10:56:51.559Z (11 months ago)
- Topics: babel-plugin, code-to-ui, component-mapping, debugging, developer-tools, frontend, react, react-devtools, traceform, traceform-demo, vscode-extension
- Language: TypeScript
- Homepage: https://github.com/lucidlayer/traceform
- Size: 124 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Traceform: Demo projects
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
- [Overview](#overview)
- [Prerequisites](#prerequisites)
- [Demo Project List](#demo-project-list)
- [Step-by-Step Setup](#step-by-step-setup)
- [Traceform Onboarding](#traceform-onboarding)
- [Validation & Troubleshooting](#validation--troubleshooting)
- [FAQ](#faq)
- [Links & Resources](#links--resources)
---
## Overview
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.
---
## Prerequisites
- **Node.js** (>= 18.17.0): [Download Node.js](https://nodejs.org/)
- **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)
---
## Demo Project List
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
---
## Step-by-Step Setup
1. **Choose a Demo Project**
```bash
cd Demo-01 # or Demo-02, Demo-03, Demo-04
```
2. **Install Dependencies**
```bash
npm install
```
3. **Install Traceform Onboarding CLI and Types**
```bash
npx @lucidlayer/traceform-onboard check
```
_Follow the interactive wizard to set up the Babel plugin, VS Code extension, and browser extension._
4. **Start the Demo App**
```bash
npm run dev
```
5. **Open in Your Browser**
- Visit the local address shown in your terminal (e.g., `http://localhost:5173`).
6. **Validate Traceform**
- Open VS Code and check for the Traceform sidebar.
- Use "Traceform: Find Component in UI" to highlight components in your browser.
---
## Traceform Onboarding
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](https://marketplace.visualstudio.com/items?itemName=LucidLayer.traceform-vscode)
- Installing the [Traceform Chrome extension](https://chromewebstore.google.com/detail/giidcepndnnabhfkopmgcnpnnilkaefa)
- Final validation and troubleshooting tips
For a full walkthrough, see the GIF above or watch the [YouTube demo](https://www.youtube.com/watch?v=0ZnyWkS2g44).
---
## Validation & Troubleshooting
- 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](https://github.com/lucidlayer/traceform) or open an issue.
---
## FAQ
**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.
---
## Links & Resources
- [Traceform Onboarding CLI (npm)](https://www.npmjs.com/package/@lucidlayer/traceform-onboard)
- [Traceform VS Code Extension](https://marketplace.visualstudio.com/items?itemName=LucidLayer.traceform-vscode)
- [Traceform Chrome Extension](https://chromewebstore.google.com/detail/giidcepndnnabhfkopmgcnpnnilkaefa)
- [Traceform Documentation](https://github.com/lucidlayer/traceform)
---
*This repository is part of the Traceform developer toolset. For more information, visit [github.com/lucidlayer/traceform](https://github.com/lucidlayer/traceform)*