{"id":30664514,"url":"https://github.com/flexsurfer/reflex-devtools","last_synced_at":"2025-08-31T19:03:22.244Z","repository":{"id":306613482,"uuid":"1026756580","full_name":"flexsurfer/reflex-devtools","owner":"flexsurfer","description":"Developer tools for applications built with the reflex library","archived":false,"fork":false,"pushed_at":"2025-07-26T16:51:44.000Z","size":56,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-26T20:11:48.160Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexsurfer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-07-26T14:49:44.000Z","updated_at":"2025-07-26T16:51:48.000Z","dependencies_parsed_at":"2025-07-26T20:14:42.972Z","dependency_job_id":null,"html_url":"https://github.com/flexsurfer/reflex-devtools","commit_stats":null,"previous_names":["flexsurfer/reflex-devtools"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/flexsurfer/reflex-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Freflex-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Freflex-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Freflex-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Freflex-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexsurfer","download_url":"https://codeload.github.com/flexsurfer/reflex-devtools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Freflex-devtools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273025829,"owners_count":25032842,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-08-31T19:03:21.370Z","updated_at":"2025-08-31T19:03:22.219Z","avatar_url":"https://github.com/flexsurfer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"reflex_devtools_logo.jpg\" alt=\"Reflex DevTools Logo\" width=\"200\" /\u003e\n  \n  # 🛠️ Reflex DevTools\n  \n  **Real-time debugging and inspection for Reflex applications**\n  \n  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n  [![NPM Version](https://img.shields.io/npm/v/%40flexsurfer%2Freflex)](https://www.npmjs.com/package/@flexsurfer/reflex-devtools)\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/flexsurfer/reflex-devtools/pulls)\n    \n\n  \u003cimg src=\"screenshot.png\" alt=\"Reflex DevTools Screenshot\" width=\"100%\" /\u003e\n\u003c/div\u003e\n\n---\n\n## ✨ What is Reflex DevTools?\n\nReflex DevTools is a powerful debugging toolkit for applications built with the [`@flexsurfer/reflex`](https://github.com/flexsurfer/reflex) library. It provides real-time inspection of your application's state, events, and traces through an intuitive web-based dashboard.\n\n### 🎯 Key Features\n\n- **📊 Database State Inspection** - Visualize your entire application state in real-time\n- **🔄 Real-time Event Tracing** - Watch events and state changes as they happen\n- **🔥 Real-time Reactions and Render Tracing** - Watch all reactions being created and run, and rendering processes\n- **⏱ Performance Profiling** - Analyze events and reactions times and bottlenecks in real-time\n- **🎨 Beautiful Dashboard** - Clean, modern UI with dark/light theme support\n- **📱 React \u0026 React Native Support** - Works seamlessly with both platforms\n- **⚡ Zero Configuration** - Get started with just two lines of code\n\n---\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install --save-dev @flexsurfer/reflex-devtools\n# or\nyarn add -D @flexsurfer/reflex-devtools\n# or\npnpm add -D @flexsurfer/reflex-devtools\n```\n\n### 1. Enable in Your App\n\nAdd these lines to your app's entry point (e.g., `main.tsx` or `App.tsx`):\n\n```typescript\nimport { enableTracing } from '@flexsurfer/reflex';\nimport { enableDevtools } from '@flexsurfer/reflex-devtools';\n\n// Enable tracing for Reflex events\nenableTracing();\n\n// Connect to devtools server\nenableDevtools({ \n  serverUrl: 'localhost:4000' // Optional: defaults to localhost:4000\n});\n```\n\n### 2. Start the DevTools Server\n\n```bash\nnpx reflex-devtools\n```\n\nOr with custom configuration:\n\n```bash\nnpx reflex-devtools --port 3000 --host 0.0.0.0\n```\n\n### 3. Open the Dashboard\n\nNavigate to [http://localhost:4000](http://localhost:4000) in your browser to see the DevTools dashboard.\n\n---\n\n## 📖 Usage Examples\n\n### Basic Setup\n\n```typescript\n// main.tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { enableTracing } from '@flexsurfer/reflex';\nimport { enableDevtools } from '@flexsurfer/reflex-devtools';\nimport App from './App';\n\nenableTracing();\nenableDevtools();\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n### Custom Configuration\n\n```typescript\nenableDevtools({\n  serverUrl: 'localhost:3001',\n  enabled: process.env.NODE_ENV === 'development'\n});\n```\n---\n\n## 🔧 Configuration Options\n\n### Client Configuration\n\n```typescript\ninterface DevtoolsConfig {\n  serverUrl?: string;  // Default: 'localhost:4000'\n  enabled?: boolean;   // Default: true\n}\n```\n\n### Server Configuration\n\n```bash\nnpx reflex-devtools [options]\n\nOptions:\n  -p, --port \u003cport\u003e    Port number (default: 4000)\n  -h, --host \u003chost\u003e    Host address (default: localhost)\n  --help              Show help message\n```\n\n---\n\n## 🏗️ Architecture\n\nReflex DevTools consists of three main components:\n\n```\n┌─────────────────┐    WebSocket/HTTP    ┌─────────────────┐\n│   Your App      │ ◀──────────────────▶ │  DevTools       │\n│                 │                      │  Server         │\n│ - Reflex SDK    │                      │                 │\n│ - DevTools SDK  │                      │ - Express API   │\n│                 │                      │ - WebSocket     │\n└─────────────────┘                      └─────────────────┘\n                                                   │\n                                                   │ HTTP\n                                                   ▼\n                                         ┌─────────────────┐\n                                         │   Web Dashboard │\n                                         │                 │\n                                         │ - React UI      │\n                                         │ - Real-time     │\n                                         │   Updates       │\n                                         └─────────────────┘\n```\n\n### Components:\n\n1. **Client SDK** (`/client`) - Lightweight SDK that integrates with your app\n2. **DevTools Server** (`/server`) - Express server with WebSocket support\n3. **Web Dashboard** (`/ui`) - React-based debugging interface\n\n---\n\n## 🛠️ Development \u0026 Contributing\n\nWe welcome contributions! Here's how to get started:\n\n### Prerequisites\n\n- Node.js 18+ \n- pnpm (recommended) or npm/yarn\n\n### Setup Development Environment\n\n```bash\n# Clone the repository\ngit clone https://github.com/flexsurfer/reflex-devtools.git\ncd reflex-devtools\n\n# Install dependencies\npnpm install\n\n# Start development servers\npnpm dev\n```\n\nThis will start:\n- DevTools server on `localhost:4000`\n- UI development server with hot reload on `localhost:5173`\n- Test app on `localhost:3000`\n\n### Project Structure\n\n```\npackages/\n├── reflex-devtools/     # Main package (client SDK + server)\n│   ├── src/client/      # Client SDK for apps\n│   ├── src/server/      # DevTools server\n│   └── src/cli.ts       # CLI entry point\n├── reflex-devtool-ui/   # Web dashboard\n│   └── src/            # React components\n└── reflex-test-app/     # Example app for testing\n```\n\n### Development Commands\n\n```bash\n# Build all packages\npnpm build\n\n# Run tests\npnpm test\n\n# Start only the UI in development\npnpm dev:ui\n\n# Start only the server\npnpm dev:server\n\n# Start only the test app\npnpm dev:testapp\n\n# Clean all builds\npnpm clean\n```\n\n### Making Changes\n\n1. **Fork** the repository\n2. **Create** a feature branch: `git checkout -b feature/amazing-feature`\n3. **Make** your changes\n4. **Test** with the test app: `pnpm dev:testapp`\n5. **Commit** using conventional commits: `git commit -m 'feat: add amazing feature'`\n6. **Push** and create a **Pull Request**\n\n### Code Style\n\n- TypeScript for all code\n- ESLint + Prettier for formatting\n- Conventional Commits for commit messages\n- Component-based architecture for UI\n\n---\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\nBuilt with ❤️ for the Reflex community. Special thanks to all contributors and the open-source projects that make this possible.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \n  **Happy Debugging! 🐛➡️✨**\n  \n  Made by [@flexsurfer](https://github.com/flexsurfer)\n  \n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexsurfer%2Freflex-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexsurfer%2Freflex-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexsurfer%2Freflex-devtools/lists"}