https://github.com/huozhi/devjar
nobuild react live code runtime in browser
https://github.com/huozhi/devjar
bundless esm live-coding livebundle livecode nobuild playground react react-live-code tailwindcss
Last synced: 11 days ago
JSON representation
nobuild react live code runtime in browser
- Host: GitHub
- URL: https://github.com/huozhi/devjar
- Owner: huozhi
- Created: 2022-04-20T19:02:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-06-27T20:54:52.000Z (11 days ago)
- Last Synced: 2026-06-27T21:08:18.623Z (11 days ago)
- Topics: bundless, esm, live-coding, livebundle, livecode, nobuild, playground, react, react-live-code, tailwindcss
- Language: TypeScript
- Homepage: https://devjar.vercel.app
- Size: 391 KB
- Stars: 293
- Watchers: 1
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# devjar
> react live preview in browser
## Introduction
devjar 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.
**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.
## Install
```sh
pnpm add devjar
```
## React Code Runtime
### ``
`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.
**Props**
* `files`: An object that specifies the files you want to include in your development environment.
* `resolveModule`: A function that maps module specifiers to browser-loadable module URLs.
* `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.
* `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
**Example**
```jsx
import { DevJar } from 'devjar'
const CDN_HOST = 'https://esm.sh'
const files = {
'index.js': `export default function App() { return 'hello world' }`
}
function App() {
return (
{
return `${CDN_HOST}/${specifier}`
}}
/>
)
}
```
### `useLiveCode(options)`
A hook that provides lower-level control over the live code execution environment.
**Parameters**
* `options`
* `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.
* `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
**Returns**
* `state`
* `ref`: A reference to the iframe element where the live coding will be executed.
* `error`: An error message in case the live coding encounters an issue.
* `load(codeFiles)`: void: Loads code files and executes them as live code.
**Example**
```jsx
import { useLiveCode } from 'devjar'
function Playground() {
const { ref, error, load } = useLiveCode({
// The CDN url of each imported module path in your code
// e.g. `import React from 'react'` will load react from skypack.dev/react
resolveModule(specifier) {
return `https://cdn.skypack.dev/${specifier}`
}
})
// logging failures
if (error) {
console.error(error)
}
// load code files and execute them as live code
function run() {
load({
// `index.js` is the entry of every project
'index.js': `export default function App() { return 'hello world' }`,
// other relative modules can be used in the live coding
'./mod': `export default function Mod() { return 'mod' }`,
})
}
// Attach the ref to an iframe element for runtime of code execution
return (
run
)
}
```
## License
MIT