{"id":27779911,"url":"https://github.com/lucidlayer/demo","last_synced_at":"2025-04-30T10:56:55.919Z","repository":{"id":288635796,"uuid":"968333071","full_name":"lucidlayer/demo","owner":"lucidlayer","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-26T22:32:08.000Z","size":130102,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-30T10:56:51.559Z","etag":null,"topics":["babel-plugin","code-to-ui","component-mapping","debugging","developer-tools","frontend","react","react-devtools","traceform","traceform-demo","vscode-extension"],"latest_commit_sha":null,"homepage":"https://github.com/lucidlayer/traceform","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucidlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-17T22:46:06.000Z","updated_at":"2025-04-26T22:32:11.000Z","dependencies_parsed_at":"2025-04-19T05:58:55.079Z","dependency_job_id":"8b7da827-5f53-49d2-abd5-13d6e294ff61","html_url":"https://github.com/lucidlayer/demo","commit_stats":null,"previous_names":["lucidlayer/demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucidlayer%2Fdemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucidlayer%2Fdemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucidlayer%2Fdemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucidlayer%2Fdemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucidlayer","download_url":"https://codeload.github.com/lucidlayer/demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251686110,"owners_count":21627365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","code-to-ui","component-mapping","debugging","developer-tools","frontend","react","react-devtools","traceform","traceform-demo","vscode-extension"],"created_at":"2025-04-30T10:56:50.827Z","updated_at":"2025-04-30T10:56:55.918Z","avatar_url":"https://github.com/lucidlayer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTraceform: Demo projects\u003c/h1\u003e\n\u003cp align=\"center\"\u003eReady 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.\u003c/p\u003e \n\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lucidlayer/demo/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/lucidlayer/demo?style=social\" alt=\"GitHub stars\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/lucidlayer/demo\"\u003e\n    \u003cimg src=\"https://visitor-badge.laobi.icu/badge?page_id=lucidlayer.demo\" alt=\"Page views\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ccode\u003enpx @lucidlayer/traceform-onboard check\u003c/code\u003e\u003cbr/\u003e \n\u003c/p\u003e\n\n![Traceform CLI onboarding demo](.github/demo.gif)\n\n*See above for a visual walkthrough of the onboarding and validation process.*\n\nWatch here: https://www.youtube.com/watch?v=0ZnyWkS2g44\n\n---\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\n- [Overview](#overview)\n- [Prerequisites](#prerequisites)\n- [Demo Project List](#demo-project-list)\n- [Step-by-Step Setup](#step-by-step-setup)\n- [Traceform Onboarding](#traceform-onboarding)\n- [Validation \u0026 Troubleshooting](#validation--troubleshooting)\n- [FAQ](#faq)\n- [Links \u0026 Resources](#links--resources)\n\n\u003c/details\u003e\n\n---\n\n## Overview\n\nThis 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.\n\n---\n\n## Prerequisites\n\n- **Node.js** (\u003e= 18.17.0): [Download Node.js](https://nodejs.org/)\n- **npm** (\u003e= 8.0.0), **yarn** (\u003e= 1.22.0), or **pnpm** (\u003e= 7.0.0)\n- A Chromium-based browser (for the Traceform extension)\n- Visual Studio Code (for the Traceform VS Code extension)\n\n---\n\n## Demo Project List\n\nPick any demo to try Traceform from scratch:\n\n- **Demo-01:** Basic React app\n- **Demo-02:** React + TypeScript\n- **Demo-03:** Vite + React\n- **Demo-04:** Advanced patterns\n\n---\n\n## Step-by-Step Setup\n\n1. **Choose a Demo Project**\n   ```bash\n   cd Demo-01  # or Demo-02, Demo-03, Demo-04\n   ```\n2. **Install Dependencies**\n   ```bash\n   npm install\n   ```\n3. **Install Traceform Onboarding CLI and Types**\n   ```bash\n   npx @lucidlayer/traceform-onboard check\n   ```\n   _Follow the interactive wizard to set up the Babel plugin, VS Code extension, and browser extension._\n\n4. **Start the Demo App**\n   ```bash\n   npm run dev\n   ```\n5. **Open in Your Browser**\n   - Visit the local address shown in your terminal (e.g., `http://localhost:5173`).\n\n6. **Validate Traceform**\n   - Open VS Code and check for the Traceform sidebar.\n   - Use \"Traceform: Find Component in UI\" to highlight components in your browser.\n\n---\n\n## Traceform Onboarding\n\nThe onboarding CLI will guide you through:\n- Checking prerequisites (Node.js, package manager)\n- Installing the Traceform Babel plugin\n- Adding configuration snippets (manual copy/paste)\n- Installing the [Traceform VS Code extension](https://marketplace.visualstudio.com/items?itemName=LucidLayer.traceform-vscode)\n- Installing the [Traceform Chrome extension](https://chromewebstore.google.com/detail/giidcepndnnabhfkopmgcnpnnilkaefa)\n- Final validation and troubleshooting tips\n\nFor a full walkthrough, see the GIF above or watch the [YouTube demo](https://www.youtube.com/watch?v=0ZnyWkS2g44).\n\n---\n\n## Validation \u0026 Troubleshooting\n\n- If you see \"client connected\" in the VS Code Traceform sidebar, setup is complete!\n- If components are not highlighted in the browser, double-check:\n  - The browser extension is installed and enabled\n  - The dev server is running\n  - The correct project is open in VS Code\n- For more help, see the [Traceform documentation](https://github.com/lucidlayer/traceform) or open an issue.\n\n---\n\n## FAQ\n\n**Q: Can I use these demos in a monorepo?**  \nA: Yes! The onboarding CLI detects monorepos and works with common setups.\n\n**Q: Does the CLI modify my files?**  \nA: No. All configuration changes are manual (copy/paste from the wizard).\n\n**Q: What if something fails?**  \nA: The wizard provides troubleshooting tips and links to documentation for each step.\n\n---\n\n## Links \u0026 Resources\n\n- [Traceform Onboarding CLI (npm)](https://www.npmjs.com/package/@lucidlayer/traceform-onboard)\n- [Traceform VS Code Extension](https://marketplace.visualstudio.com/items?itemName=LucidLayer.traceform-vscode)\n- [Traceform Chrome Extension](https://chromewebstore.google.com/detail/giidcepndnnabhfkopmgcnpnnilkaefa)\n- [Traceform Documentation](https://github.com/lucidlayer/traceform)\n\n---\n\n*This repository is part of the Traceform developer toolset. For more information, visit [github.com/lucidlayer/traceform](https://github.com/lucidlayer/traceform)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucidlayer%2Fdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucidlayer%2Fdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucidlayer%2Fdemo/lists"}