# jodit-react

> Jodit is awesome and usefully wysiwyg editor with filebrowser

Latest version **5.5.8** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install jodit-react
pnpm add jodit-react
yarn add jodit-react
bun add jodit-react
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.5.8 |
| Published | 2026-09-09 |
| First published | 2018-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 406 |
| Author | Chupurnov |
| Maintainers | xdan |
| Keywords | react, jodit, html, text, editor, wysisyg, rich editor, rich text editor, rte |

## Links

- npm: https://www.npmjs.com/package/jodit-react
- Repository: https://github.com/jodit/jodit-react
- Homepage: https://xdsoft.net/jodit/
- Issues: https://github.com/jodit/jodit-react/issues
- npm.io page: https://npm.io/package/jodit-react

## Dependencies (1)

- [jodit](https://npm.io/package/jodit.md) ^4.14.7

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 5.5.8 (latest) — 2026-09-09
- 5.0.0-beta.3 (beta) — 2024-12-11
- 5.5.7 — 2026-09-08
- 5.5.6 — 2026-09-08
- 5.5.5 — 2026-09-08
- 5.5.4 — 2026-09-08
- 5.5.3 — 2026-09-02
- 5.5.2 — 2026-09-02
- 5.5.1 — 2026-09-02
- 5.4.81 — 2026-09-01
- 5.4.80 — 2026-09-01
- 5.4.72 — 2026-08-11
- 5.4.71 — 2026-08-11
- 5.4.70 — 2026-08-06
- 5.4.69 — 2026-08-05
- … 283 more at https://npm.io/package/jodit-react/versions

## README

# React Jodit WYSIWYG Editor

[![npm](https://img.shields.io/npm/v/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)
[![npm](https://img.shields.io/npm/dm/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)
[![npm](https://img.shields.io/npm/l/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)

React wrapper for [Jodit](https://xdsoft.net/jodit/)

> [Jodit React PRO](https://xdsoft.net/jodit/pro/) it is an extended version of Jodit React with the same API, but with a lot more features.

## Installation

```bash
npm install jodit-react --save
```

## Update editor version

```bash
npm update jodit-react
```

## Run demo

```bash
npm install --dev
npm run demo
```

and open

```
http://localhost:4000/
```

## Usage

### 1. Require and use Jodit-react component inside your application.

```jsx
import React, { useState, useRef, useMemo } from 'react';
import JoditEditor from 'jodit-react';

const Example = ({ placeholder }) => {
  const editor = useRef(null);
  const [content, setContent] = useState('');

  const config = useMemo(
    () => ({
      readonly: false, // all options from https://xdsoft.net/jodit/docs/,
      placeholder: placeholder || 'Start typings...'
    }),
    [placeholder]
  );

  return (
    <JoditEditor
      ref={editor}
      value={content}
      config={config}
      tabIndex={1} // tabIndex of textarea
      onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
      onChange={newContent => {}}
    />
  );
};
```

### Jodit plugins

You can use all Jodit features and write your [own plugin](https://xdsoft.net/jodit/docs/modules/plugin.html) for example.

```js
import JoditEditor, { Jodit } from 'jodit-react';

/**
 * @param {Jodit} jodit
 */
function preparePaste(jodit) {
  jodit.e.on(
    'paste',
    e => {
      if (confirm('Change pasted content?')) {
        jodit.e.stopPropagation('paste');
        jodit.s.insertHTML(
          Jodit.modules.Helpers.getDataTransfer(e)
            .getData(Jodit.constants.TEXT_HTML)
            .replace(/a/g, 'b')
        );
        return false;
      }
    },
    { top: true }
  );
}
Jodit.plugins.add('preparePaste', preparePaste);

//...
return <JoditEditor />;
```

You can see how to write plugins [in the documentation](https://xdsoft.net/jodit/pro/docs/how-to/create-plugin.md) or [on the stand](https://xdsoft.net/jodit/pro/docs/getting-started/examples.md#jodit-example-paste-link)

## Use with Jodit PRO

You can connect any Jodit constructor and set it as the `JoditConstructor` property of the component.

```jsx
import React from 'react';
import JoditEditor from 'jodit-react';
import { Jodit } from 'jodit-pro';
import 'jodit-pro/es5/jodit.min.css';
// ...

function App() {
  return <JoditEditor JoditConstructor={Jodit} />;
}
```

### Import and use Jodit-react inside your Next.js application

```js
import dynamic from 'next/dynamic';

const JoditEditor = dynamic(() => import('jodit-react'), {
  ssr: false
});
```

## License

This package is available under `MIT` License.

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