PHPackages                             xdan/jodit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. xdan/jodit

ActiveLibrary[Templating & Views](/categories/templating)

xdan/jodit
==========

Awesome WYSIWYG editor and FileBrowser

3.24.9(3y ago)1.9k29.7k↓45.3%386[23 issues](https://github.com/xdan/jodit/issues)[16 PRs](https://github.com/xdan/jodit/pulls)1MITJavaScriptCI passing

Since Feb 26Pushed 1w ago46 watchersCompare

[ Source](https://github.com/xdan/jodit)[ Packagist](https://packagist.org/packages/xdan/jodit)[ RSS](/packages/xdan-jodit/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (10)DependenciesVersions (298)Used By (1)

[![Jodit Editor](https://raw.githubusercontent.com/xdan/jodit/main/examples/assets/logo.png)](https://raw.githubusercontent.com/xdan/jodit/main/examples/assets/logo.png)Jodit Editor
============

[](#jodit-editor)

Pure-TypeScript WYSIWYG editor with a built-in file browser & image editor.

[![Live Demo](https://camo.githubusercontent.com/77f80bf86edd8a561a1c3626e22015fd4a23dd04a11da1b39a2f15e3ac182475/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545322539362542362532304c69766525323044656d6f2d3146323933373f7374796c653d666f722d7468652d6261646765)](https://xdsoft.net/jodit/) [![Get Jodit PRO](https://camo.githubusercontent.com/d0612d149d043069adf00d2e5a0b05a6a92e5cd2bc8437e8586e4730f16eefab/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4765742532304a6f64697425323050524f2532302545322538362539322d4635413632333f7374796c653d666f722d7468652d6261646765)](https://xdsoft.net/jodit/pro/)

- [Builder](https://xdsoft.net/jodit/builder/)
- [Playground - Play with Options](https://xdsoft.net/jodit/play.html)
- [Documentation](https://xdsoft.net/jodit/docs/)
- [Download & Changes](https://github.com/xdan/jodit/releases)
- [Changelog](https://github.com/xdan/jodit/blob/main/CHANGELOG.md)
- [Examples](https://xdan.github.io/jodit)
- [TypeScript Starter](https://codesandbox.io/s/ggc6km)

Get Started
-----------

[](#get-started)

Download the latest [release](https://github.com/xdan/jodit/releases/latest) or via npm:

```
npm install jodit
```

You will get the following files:

- Inside `/esm`: ESM version of the editor (compatible with tools like webpack)
- Inside `/es5`, `/es2015`, `/es2018`, `/es2021`: UMD bundled files (not minified)
- Inside `/es5`, `/es2015`, `/es2018`, `/es2021` with `.min.js` extension: UMD bundled and minified files
- `types/index.d.ts`: This file specifies the API of the editor. It is versioned, while everything else is considered private and may change with each release.

### Include Jodit in Your Project

[](#include-jodit-in-your-project)

Include the following two files:

#### ES5 Version:

[](#es5-version)

```

```

ES2021 Version (for modern browsers only):

```

```

#### ESM Modules:

[](#esm-modules)

```

  import { Jodit } from './node_modules/jodit/esm/index.js';
  Jodit.make('#editor', {
    width: 600,
    height: 400
  });

```

The ESM modules automatically include only the [basic set of plugins](https://github.com/xdan/jodit/blob/main/tools/utils/resolve-alias-imports.ts#L59) and the English language. You can manually include additional plugins and languages as needed.

```

  import { Jodit } from './node_modules/jodit/esm/index.js';
  import './node_modules/jodit/esm/plugins/add-new-line/add-new-line.js';
  import './node_modules/jodit/esm/plugins/fullsize/fullsize.js';

  // Or import all plugins
  import './node_modules/jodit/esm/plugins/all.js';

  import de from './node_modules/jodit/esm/langs/de.js';

  Jodit.langs.de = de;

  Jodit.make('#editor', {
    width: 600,
    height: 400,
    language: 'de'
  });

```

### Use a CDN

[](#use-a-cdn)

#### cdnjs

[](#cdnjs)

```

```

#### unpkg

[](#unpkg)

```

```

### Usage

[](#usage)

Add a `textarea` element to your HTML:

```

```

Initialize Jodit on the textarea:

```
const editor = Jodit.make('#editor');
editor.value = 'start';
```

### Create plugin

[](#create-plugin)

```
Jodit.plugins.yourplugin = function (editor) {
  editor.events.on('afterInit', function () {
    editor.s.insertHTMl('Text');
  });
};
```

### Add custom button

[](#add-custom-button)

```
const editor = Jodit.make('.someselector', {
  extraButtons: [
    {
      name: 'insertDate',
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.s.insertHTML(new Date().toDateString());
        editor.synchronizeValues(); // For history saving
      }
    }
  ]
});
```

or

```
const editor = Jodit.make('.someselector', {
  buttons: ['bold', 'insertDate'],
  controls: {
    insertDate: {
      name: 'insertDate',
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.s.insertHTML(new Date().toDateString());
      }
    }
  }
});
```

button with plugin

```
Jodit.plugins.add('insertText', function (editor) {
  editor.events.on('someEvent', function (text) {
    editor.s.insertHTMl('Hello ' + text);
  });
});

// or

Jodit.plugins.add('textLength', {
  init(editor) {
    const div = editor.create.div('jodit_div');
    editor.container.appendChild(div);
    editor.events.on('change.textLength', () => {
      div.innerText = editor.value.length;
    });
  },
  destruct(editor) {
    editor.events.off('change.textLength');
  }
});

// or use class

Jodit.plugins.add(
  'textLength',
  class textLength {
    init(editor) {
      const div = editor.create.div('jodit_div');
      editor.container.appendChild(div);
      editor.events.on('change.textLength', () => {
        div.innerText = editor.value.length;
      });
    }
    destruct(editor) {
      editor.events.off('change.textLength');
    }
  }
);

const editor = Jodit.make('.someselector', {
  buttons: ['bold', 'insertText'],
  controls: {
    insertText: {
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.events.fire('someEvent', 'world!!!');
      }
    }
  }
});
```

FileBrowser and Uploader
------------------------

[](#filebrowser-and-uploader)

For testing FileBrowser and Uploader modules, need install [PHP Connector](https://github.com/xdan/jodit-connectors)

```
composer create-project --no-dev jodit/connector
```

Run test PHP server

```
php -S localhost:8181 -t ./
```

and set options for Jodit:

```
const editor = Jodit.make('#editor', {
  uploader: {
    url: 'http://localhost:8181/index-test.php?action=fileUpload'
  },
  filebrowser: {
    ajax: {
      url: 'http://localhost:8181/index-test.php'
    }
  }
});
```

> **Using Jodit in a commercial product?**Remove the "Powered by Jodit" mark and unlock 20+ premium plugins — Finder file manager, PDF & Word export, @mentions, AI Assistant and more. One-time license from $99.
>
> [**Compare plans →**](https://xdsoft.net/jodit/pro/)

Browser Support
---------------

[](#browser-support)

- Internet Explorer 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge

Star History
------------

[](#star-history)

[ ![Star History Chart](https://camo.githubusercontent.com/edbf897ec7f24c6b1381d39711fb86be6d21c576ff0ff02e278515e699c24ba6/68747470733a2f2f6170692e737461722d686973746f72792e636f6d2f7376673f7265706f733d7864616e2f6a6f64697426747970653d44617465)](https://star-history.com/#xdan/jodit&Date)License
-------

[](#license)

MIT

###  Health Score

63

—

FairBetter than 99% of packages

Maintenance63

Regular maintenance activity

Popularity56

Moderate usage in the ecosystem

Community38

Small or concentrated contributor base

Maturity83

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 91.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~6 days

Recently: every ~0 days

Total

282

Last Release

1198d ago

Major Versions

3.24.9 → 4.0.0-beta.62023-05-08

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/794318?v=4)[Valerii](/maintainers/xdan)[@xdan](https://github.com/xdan)

---

Top Contributors

[![xdan](https://avatars.githubusercontent.com/u/794318?v=4)](https://github.com/xdan "xdan (2907 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (82 commits)")[![eric-mallac](https://avatars.githubusercontent.com/u/269179865?v=4)](https://github.com/eric-mallac "eric-mallac (49 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (36 commits)")[![Dave-van-Rijn-Development](https://avatars.githubusercontent.com/u/189516973?v=4)](https://github.com/Dave-van-Rijn-Development "Dave-van-Rijn-Development (10 commits)")[![s-renier-taonix-fr](https://avatars.githubusercontent.com/u/74581606?v=4)](https://github.com/s-renier-taonix-fr "s-renier-taonix-fr (9 commits)")[![huizarmx](https://avatars.githubusercontent.com/u/10178745?v=4)](https://github.com/huizarmx "huizarmx (7 commits)")[![pmasekito](https://avatars.githubusercontent.com/u/119517642?v=4)](https://github.com/pmasekito "pmasekito (7 commits)")[![masechkacat](https://avatars.githubusercontent.com/u/25804682?v=4)](https://github.com/masechkacat "masechkacat (6 commits)")[![serialine](https://avatars.githubusercontent.com/u/7322570?v=4)](https://github.com/serialine "serialine (6 commits)")[![dbp-fr](https://avatars.githubusercontent.com/u/13165515?v=4)](https://github.com/dbp-fr "dbp-fr (5 commits)")[![hodade](https://avatars.githubusercontent.com/u/295002?v=4)](https://github.com/hodade "hodade (5 commits)")[![Ako0](https://avatars.githubusercontent.com/u/1160352?v=4)](https://github.com/Ako0 "Ako0 (4 commits)")[![amrita-syn](https://avatars.githubusercontent.com/u/45505551?v=4)](https://github.com/amrita-syn "amrita-syn (4 commits)")[![dexeroui](https://avatars.githubusercontent.com/u/167895272?v=4)](https://github.com/dexeroui "dexeroui (4 commits)")[![gojuukaze](https://avatars.githubusercontent.com/u/15613304?v=4)](https://github.com/gojuukaze "gojuukaze (4 commits)")[![matteogatti](https://avatars.githubusercontent.com/u/841614?v=4)](https://github.com/matteogatti "matteogatti (4 commits)")[![superelement](https://avatars.githubusercontent.com/u/1377237?v=4)](https://github.com/superelement "superelement (4 commits)")[![viktorsommar](https://avatars.githubusercontent.com/u/65346980?v=4)](https://github.com/viktorsommar "viktorsommar (4 commits)")[![mtulikowski](https://avatars.githubusercontent.com/u/3591892?v=4)](https://github.com/mtulikowski "mtulikowski (3 commits)")

---

Tags

ace-editoreditorfilebrowserhtmlimageeditorjoditrich-text-editortypescriptwysiwygwysiwyg-editorwysiwyg-html-editor

### Embed Badge

![Health badge](/badges/xdan-jodit/health.svg)

```
[![Health](https://phpackages.com/badges/xdan-jodit/health.svg)](https://phpackages.com/packages/xdan-jodit)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3841.2M](/packages/limenius-react-bundle)[pdewit/nova-external-url

An external URL Laravel Nova field.

30383.2k](/packages/pdewit-nova-external-url)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.7k1](/packages/wbrowar-guide)[localgovdrupal/localgov_base

The base theme for LocalGov Drupal websites.

13126.9k5](/packages/localgovdrupal-localgov-base)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)