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.9k28.5k↓50%378[343 issues](https://github.com/xdan/jodit/issues)[3 PRs](https://github.com/xdan/jodit/pulls)1MITJavaScriptCI failing

Since Feb 26Pushed 1mo ago49 watchersCompare

[ Source](https://github.com/xdan/jodit)[ Packagist](https://packagist.org/packages/xdan/jodit)[ RSS](/packages/xdan-jodit/feed)WikiDiscussions main Synced 1mo 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

61

—

FairBetter than 99% of packages

Maintenance55

Moderate activity, may be stable

Popularity54

Moderate usage in the ecosystem

Community38

Small or concentrated contributor base

Maturity83

Battle-tested with a long release history

 Bus Factor1

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

1106d ago

Major Versions

3.24.9 → 4.0.0-beta.62023-05-08

### Community

Maintainers

![](https://www.gravatar.com/avatar/364704c7aab3e71995ebb361f7a30604a5f9e136949d6f683c9da4c885cadb9b?d=identicon)[xdan](/maintainers/xdan)

---

Top Contributors

[![xdan](https://avatars.githubusercontent.com/u/794318?v=4)](https://github.com/xdan "xdan (2769 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (42 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)")[![pmasekito](https://avatars.githubusercontent.com/u/119517642?v=4)](https://github.com/pmasekito "pmasekito (7 commits)")[![huizarmx](https://avatars.githubusercontent.com/u/10178745?v=4)](https://github.com/huizarmx "huizarmx (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)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (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)")[![Evenerik](https://avatars.githubusercontent.com/u/29727298?v=4)](https://github.com/Evenerik "Evenerik (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

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

555.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

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