# jarle

> J.A.R.L.E Just Another React Live Editor

Latest version **3.4.0** (published 2025-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install jarle
pnpm add jarle
yarn add jarle
bun add jarle
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.4.0 |
| Published | 2025-12-02 |
| First published | 2021-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 66 |
| Author | Jason Quense |
| Maintainers | monastic.panic |

## Links

- npm: https://www.npmjs.com/package/jarle
- Repository: https://github.com/jquense/jarle
- Homepage: https://github.com/jquense/jarle#readme
- Issues: https://github.com/jquense/jarle/issues
- npm.io page: https://npm.io/package/jarle

## Dependencies (4)

- [@restart/hooks](https://npm.io/package/@restart/hooks.md) ^0.6.2
- [uncontrollable](https://npm.io/package/uncontrollable.md) ^9.0.0
- [sourcemap-codec](https://npm.io/package/sourcemap-codec.md) ^1.4.8
- [prism-react-renderer](https://npm.io/package/prism-react-renderer.md) ^2.4.1

## Recent versions

- 3.4.0 (latest) — 2025-12-02
- 3.0.0-beta.1 (beta) — 2024-06-20
- 2.0.0-beta.1 (next) — 2021-11-12
- 3.3.0 — 2025-10-01
- 3.2.2 — 2025-10-01
- 3.2.1 — 2025-06-05
- 3.2.0 — 2025-06-05
- 3.1.1 — 2025-04-01
- 3.1.0 — 2025-04-01
- 3.0.2 — 2024-07-23
- 3.0.1 — 2024-06-28
- 3.0.0 — 2024-06-21
- 3.0.0-beta.0 — 2024-06-20
- 2.1.1 — 2023-01-18
- 2.1.0 — 2023-01-18
- … 13 more at https://npm.io/package/jarle/versions

## README

<h1 align="center">J.A.R.L.E</h1>
<p align="center">
  <strong>Just Another React Live Editor</strong>
</p>

JARLE is a as lightweight but feature-rich React component editor with live
preview. JARLE uses [sucrase](https://github.com/alangpierce/sucrase) for fast, minimal
compilation of JSX and/or Typescript.

## Usage

```js
import { Provider, Editor, Error, Preview } from 'jarle';

function LiveEditor() {
  return (
    <Provider code="<strong>Hello World!</strong>">
      <Editor />
      <Error />
      <Preview />
    </Provider>
  );
}
```

See **https://jquense.github.io/jarle/** for docs.

### Rendering Code

Jarle removes boilerplate code in your examples, by rendering the **last** expression in your code block.
Define variables, components, whatever, as long as the last line is a JSX expression.

```js
<Provider
  code={`
    function Example({ subject }) {
      return <div>Hello {subject}</div>
    }

    <Example subject="World"/>
  `}
/>
```

If you do need more control over what get's rendered, or need to render asynchronously, a
`render` function is always in scope:

```js
setTimeout(() => {
  render(<div>I'm late!</div>);
}, 1000);
```

Jarle also supports rendering your code _as a component_, helpful for illustrating
hooks or render behavior with minimal extra code. When using `renderAsComponent`
the code text is used as the body of React function component, so you can use
state and other hooks.

```js
<Provider
  renderAsComponent
  code={`
    const [secondsPast, setSeconds] = useState(0)

    useEffect(() => {
      let interval = setInterval(() => {
        setSeconds(prev => prev + 1)
      }, 1000)

      return () => clearInterval(interval)
    }, [])

    <div>Seconds past: {secondsPast}</div>
  `}
/>
```

---
_Source: https://npm.io/package/jarle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._