{"id":23392841,"url":"https://github.com/leegeunhyeok/react-native-devtools-standalone","last_synced_at":"2025-04-22T11:11:07.535Z","repository":{"id":226741033,"uuid":"766033515","full_name":"leegeunhyeok/react-native-devtools-standalone","owner":"leegeunhyeok","description":" Standalone React DevTools for integration with React Native","archived":false,"fork":false,"pushed_at":"2024-07-11T06:28:30.000Z","size":1363,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T01:18:53.399Z","etag":null,"topics":["react-devtools","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-devtools-standalone","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/leegeunhyeok.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}},"created_at":"2024-03-02T06:36:53.000Z","updated_at":"2024-08-25T08:29:35.000Z","dependencies_parsed_at":"2024-07-09T12:46:09.291Z","dependency_job_id":null,"html_url":"https://github.com/leegeunhyeok/react-native-devtools-standalone","commit_stats":null,"previous_names":["leegeunhyeok/react-native-devtools-standalone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegeunhyeok%2Freact-native-devtools-standalone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegeunhyeok%2Freact-native-devtools-standalone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegeunhyeok%2Freact-native-devtools-standalone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegeunhyeok%2Freact-native-devtools-standalone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leegeunhyeok","download_url":"https://codeload.github.com/leegeunhyeok/react-native-devtools-standalone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250228637,"owners_count":21395958,"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":["react-devtools","react-native"],"created_at":"2024-12-22T05:16:28.764Z","updated_at":"2025-04-22T11:11:07.512Z","avatar_url":"https://github.com/leegeunhyeok.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# react-native-devtools-standalone\n\n![preview](./preview.png)\n\nStandalone [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) for integration with React Native\n\n\u003cdetails\u003e\n\n  \u003csummary\u003eYou can also embed react-devtools in \u003ca href=\"https://reactnative.dev/docs/debugging?js-debugger=new-debugger\"\u003eNew Debugger\u003c/a\u003e!\u003c/summary\u003e\n\n![preview](./preview-devtools.png)\n\n\u003c/details\u003e\n\n\u003c/div\u003e\n\n## Architecture\n\n```\n┌────────────────────┐         ┌─────────────────────┐\n│ Dev Server         │         │ React Native        │\n│┌──────────────────┐│         │                     │\n││ (Proxy)          ││    ┌────► react-devtools-core │\n││ WebSocket Server ◄─────┘    │ (WebSocket)         │\n││        ▲         ││         └─────────────────────┘\n││        │         ││         ┌─────────────────────────┐\n││        ▼         ││         │ React DevTools Frontend │\n││ WebSocket Server ◄─────┐    │                         │\n│└──────────────────┘│    └────► WebSocket Client        │\n└────────────────────┘         └─────────────────────────┘\n```\n\n## Installation\n\n```bash\nnpm install react-native-devtools-standalone\n# or\nyarn add react-native-devtools-standalone\n```\n\n## Usage\n\n### Backend\n\n```ts\nimport * as http from 'node:http';\nimport { setupDevToolsProxy } from 'react-native-devtools-standalone/backend';\n\nconst server = http.createServer();\n\nconst config: DevToolsProxyConfig = /* */;\n\nsetupDevToolsProxy(config);\n\nserver.listen(...);\n```\n\n```ts\ninterface DevToolsProxyConfig {\n  /**\n   * Configurations for client(React Native).\n   */\n  client?: {\n    /**\n     * Dev server host.\n     */\n    host?: string;\n    /**\n     * `__REACT_DEVTOOLS_PORT__` value in React Native runtime.\n     *\n     * @see https://github.com/facebook/react-native/blob/v0.73.5/packages/react-native/Libraries/Core/setUpReactDevTools.js#L50-L53\n     *\n     * Defaults to `8097`\n     */\n    port?: number;\n    /**\n     * WebSocket delegate\n     */\n    delegate?: ProxyWebSocketDelegate;\n  };\n  /**\n   * Configurations for React DevTools.\n   */\n  devtools?: {\n    /**\n     * Dev server host.\n     *\n     * Defaults to `'localhost'`\n     */\n    host?: string;\n    /**\n     * Port for DevTools to connect.\n     *\n     * Defaults to `8098`\n     */\n    port?: number;\n    /**\n     * WebSocket delegate\n     */\n    delegate?: ProxyWebSocketDelegate;\n  };\n}\n```\n\n### Frontend\n\n```ts\nimport { setupDevTools } from 'react-native-devtools-standalone/frontend';\n\nconst config: DevToolsConfigs = {\n  element: document.getElementById('container'),\n  /* */\n};\n\nsetupDevTools(config);\n```\n\n```ts\nimport type {\n  Config as DevtoolsStoreConfig,\n  DevtoolsProps,\n} from 'react-devtools-inline/frontend';\n\ninterface DevToolsConfigs {\n  /**\n   * Element to render DevTools.\n   */\n  element: HTMLElement;\n  /**\n   * Proxy web socket server host.\n   *\n   * Defaults to `'localhost'`\n   */\n  host?: string;\n  /**\n   * Proxy web socket server port.\n   *\n   * Defaults to `8098`\n   */\n  port?: number;\n  /**\n   * React DevTools store config.\n   */\n  devtoolsStoreConfig?: DevtoolsStoreConfig;\n  /**\n   * React DevTools props.\n   *\n   * Defaults to `{ showTabBar: true, hideViewSourceAction: true }`\n   */\n  devtoolsProps?: DevtoolsProps;\n  /**\n   * WebSocket delegate.\n   */\n  delegate?: ProxyWebSocketDelegate;\n}\n```\n\n## Development\n\n```bash\n# start dev server (http://localhost:3000/index.html)\nyarn start\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleegeunhyeok%2Freact-native-devtools-standalone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleegeunhyeok%2Freact-native-devtools-standalone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleegeunhyeok%2Freact-native-devtools-standalone/lists"}