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.1k↓52.4%379[226 issues](https://github.com/xdan/jodit/issues)[1 PRs](https://github.com/xdan/jodit/pulls)1MITJavaScriptCI passing

Since Feb 26Pushed 3w ago47 watchersCompare

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

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

[![Jodit WYSIWYG 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)

Jodit Editor is an excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. It includes a file editor and image editor.

[![Build Status](https://github.com/xdan/jodit/workflows/Run%20tests/badge.svg)](https://github.com/xdan/jodit/actions/workflows/tests.yml)[![npm version](https://camo.githubusercontent.com/42b0630ef86750d6368af044c6121dd71290d26cf7dc2655ce0e48ce9304efac/68747470733a2f2f62616467652e667572792e696f2f6a732f6a6f6469742e737667)](https://badge.fury.io/js/jodit)[![npm](https://camo.githubusercontent.com/868e51729be6af347f9f76779c20cf5235af821deeae271415776d27893c8ce4/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6a6f6469742e737667)](https://www.npmjs.com/package/jodit)[![npm](https://camo.githubusercontent.com/b5843172cb467506547cdf6dd30a6b25dd36905baf0c08814d9a63761a0f79ee/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6a6f6469742d72656163742e737667)](https://www.npmjs.com/package/jodit-react)

- [Demo and Official site](https://xdsoft.net/jodit/)
- [PRO Version](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)

How to Use
----------

[](#how-to-use)

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'
    }
  }
});
```

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

[](#browser-support)

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

License
-------

[](#license)

MIT

###  Health Score

62

—

FairBetter than 99% of packages

Maintenance60

Regular maintenance activity

Popularity55

Moderate usage in the ecosystem

Community38

Small or concentrated contributor base

Maturity83

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 93.6% 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

1152d 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 (2848 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (51 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (18 commits)")[![eric-mallac](https://avatars.githubusercontent.com/u/269179865?v=4)](https://github.com/eric-mallac "eric-mallac (11 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

3851.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.1k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.3k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

282.2k](/packages/webkinder-sproutset)

PHPackages © 2026

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