{"id":14343296,"url":"https://github.com/steelydylan/react-embed-devtools","last_synced_at":"2025-08-17T19:38:00.272Z","repository":{"id":232421901,"uuid":"784253304","full_name":"steelydylan/react-embed-devtools","owner":"steelydylan","description":"React embeddable devtools ","archived":false,"fork":false,"pushed_at":"2024-05-03T11:53:51.000Z","size":56,"stargazers_count":37,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-07T22:06:44.298Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-embed-devtools.vercel.app","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/steelydylan.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-04-09T13:43:07.000Z","updated_at":"2024-09-04T22:08:47.000Z","dependencies_parsed_at":"2024-04-09T20:04:19.785Z","dependency_job_id":"b550c634-b2c2-4ff4-ba5c-0fcf5a0bb5b9","html_url":"https://github.com/steelydylan/react-embed-devtools","commit_stats":null,"previous_names":["steelydylan/react-embed-devtools"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/steelydylan/react-embed-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Freact-embed-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Freact-embed-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Freact-embed-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Freact-embed-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steelydylan","download_url":"https://codeload.github.com/steelydylan/react-embed-devtools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Freact-embed-devtools/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260072819,"owners_count":22954926,"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":[],"created_at":"2024-08-26T16:01:15.797Z","updated_at":"2025-06-16T00:10:12.583Z","avatar_url":"https://github.com/steelydylan.png","language":"TypeScript","readme":"# ReactEmbedDevTools\n\nReactEmbedDevTools is a library that allows you to inspect inside an iframe with the embedded DevTools\n\n\u003cdiv\u003e\u003cvideo controls src=\"https://github.com/steelydylan/react-embed-devtools/assets/2508691/9da803a2-973f-4514-994b-99094f9511f2\" muted=\"false\"\u003e\u003c/video\u003e\u003c/div\u003e\n\nThis library is used for programing learning platform [https://mosya.dev](https://mosya.dev)\n\n## Demo\n\n[https://react-embed-devtools.vercel.app/](https://react-embed-devtools.vercel.app/)\n\n## Installation\n\n```bash\nnpm install react-embed-devtools\n```\n\n## Usage\n\nYou should embed the `embedChobitsu` function in the head tag of the html you want to inspect.\n\n```jsx\nimport React from \"react\";\nimport { EmbedDevTools, embedChobitsu } from \"react-embed-devtools\";\n\nconst html = `\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n  ${embedChobitsu()}\n  \u003cstyle\u003e\n    h1 {\n      color: #333;\n      font-size: 32px;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHello World\u003c/h1\u003e\n  \u003cscript\u003econsole.log('Hello World')\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n`;\n\nfunction App() {\n  return (\n    \u003cEmbedDevTools\n      direction=\"vertical\"\n      srcDoc={html}\n      style={{ width: \"100%\", height: \"100%\" }}\n      resizableProps={{\n        style: { background: \"rgba(0, 0, 0, 0.1)\", height: \"10px\" },\n      }}\n      devToolsProps={{\n        style: { width: \"100%\", height: \"100%\" },\n      }}\n    /\u003e\n  );\n}\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Freact-embed-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteelydylan%2Freact-embed-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Freact-embed-devtools/lists"}