{"id":13837627,"url":"https://github.com/huozhi/devjar","last_synced_at":"2026-06-28T00:00:57.978Z","repository":{"id":38440306,"uuid":"483779830","full_name":"huozhi/devjar","owner":"huozhi","description":"nobuild react live code runtime in browser","archived":false,"fork":false,"pushed_at":"2026-06-27T20:54:52.000Z","size":400,"stargazers_count":293,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-27T21:08:18.623Z","etag":null,"topics":["bundless","esm","live-coding","livebundle","livecode","nobuild","playground","react","react-live-code","tailwindcss"],"latest_commit_sha":null,"homepage":"https://devjar.vercel.app","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/huozhi.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-04-20T19:02:48.000Z","updated_at":"2026-06-23T06:37:59.000Z","dependencies_parsed_at":"2024-05-03T23:27:45.951Z","dependency_job_id":"4f754e7e-d3a3-4430-982e-9030eeb99ab3","html_url":"https://github.com/huozhi/devjar","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/huozhi/devjar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huozhi","download_url":"https://codeload.github.com/huozhi/devjar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34872279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-27T02:00:06.362Z","response_time":126,"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":["bundless","esm","live-coding","livebundle","livecode","nobuild","playground","react","react-live-code","tailwindcss"],"created_at":"2024-08-04T15:01:17.634Z","updated_at":"2026-06-28T00:00:57.956Z","avatar_url":"https://github.com/huozhi.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# devjar\n\u003e react live preview in browser\n\n![image](https://repository-images.githubusercontent.com/483779830/318964f4-18ae-4dd4-9940-0fe51ccc5abc)\n\n## Introduction\n\ndevjar is a library that enables you to live test and share your code snippets and examples with others. devjar will generate a live code editor where you can run your code snippets and view the results in real-time based on the provided code content of your React app.\n\n**Notice:** devjar requires React 19 and only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.\n\n## Install\n\n```sh\npnpm add devjar\n```\n\n## React Code Runtime\n\n### `\u003cDevJar\u003e`\n\n`DevJar` is a react component that allows you to develop and test your code directly in the browser, using a CDN to load your dependencies.\n\n**Props**\n\n* `files`: An object that specifies the files you want to include in your development environment.\n* `resolveModule`: A function that maps module specifiers to browser-loadable module URLs.\n* `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.\n* `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.\n\n**Example**\n\n```jsx\nimport { DevJar } from 'devjar'\n\nconst CDN_HOST = 'https://esm.sh'\n\nconst files = {\n  'index.js': `export default function App() { return 'hello world' }`\n}\n\nfunction App() {\n  return (\n    \u003cDevJar\n      files={files}\n      resolveModule={(specifier) =\u003e {\n        return `${CDN_HOST}/${specifier}`\n      }}\n    /\u003e\n  )\n}\n```\n\n### `useLiveCode(options)`\n\nA hook that provides lower-level control over the live code execution environment.\n\n**Parameters**\n\n* `options`\n  * `resolveModule(specifier)`: A function that receives a module specifier and returns the browser-loadable URL. For example, import React from 'react' will load React from skypack.dev/react.\n  * `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.\n\n**Returns**\n\n* `state`\n  * `ref`: A reference to the iframe element where the live coding will be executed.\n  * `error`: An error message in case the live coding encounters an issue.\n  * `load(codeFiles)`: void: Loads code files and executes them as live code.\n\n**Example**\n\n```jsx\nimport { useLiveCode } from 'devjar'\n\nfunction Playground() {\n  const { ref, error, load } = useLiveCode({\n    // The CDN url of each imported module path in your code\n    // e.g. `import React from 'react'` will load react from skypack.dev/react\n    resolveModule(specifier) {\n      return `https://cdn.skypack.dev/${specifier}`\n    }\n  })\n\n  // logging failures\n  if (error) {\n    console.error(error)\n  }\n\n  // load code files and execute them as live code\n  function run() {\n    load({\n      // `index.js` is the entry of every project\n      'index.js': `export default function App() { return 'hello world' }`,\n\n      // other relative modules can be used in the live coding\n      './mod': `export default function Mod() { return 'mod' }`,\n    })\n  }\n\n  // Attach the ref to an iframe element for runtime of code execution\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={run}\u003erun\u003c/button\u003e\n      \u003ciframe ref={ref} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fdevjar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuozhi%2Fdevjar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fdevjar/lists"}