---
title: Create Custom Plugin
description: Build a custom Jodit plugin with word and character count example.
keywords: custom plugin, jodit plugin, word count, status bar
---

# Create custom plugin

You can create your own plugin for Jodit. For example we will create plugin - statistic. It will show words count and chars count in status bar.

Basic code for creating your own plugin:

```javascript
Jodit.plugins.add('pluginName', function (editor) {
    editor.events.on('afterInit', function () {
        // here you can insert your code
    });
};
```

[More examples](https://github.com/xdan/jodit/blob/master/plugins/example/example.ts)

You can use all events in your plugins.

Create `jodit.stat.js`

```javascript
Jodit.plugins.add('stat', function (editor) {
	var statusbar = document.createElement('div');
	statusbar.style.backgroundColor = '#f8f8f8';
	statusbar.style.color = red;
	statusbar.style.fontSize = '11px';
	statusbar.style.padding = '1px 4px';

	function calcStat() {
		var text = Jodit.modules.Helpers.trim(editor.editor.innerText),
			wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
				return value;
			}).length,
			charCount = text.replace(/[\s\n\r\t]+/, '').length;

		statusbar.innerText = 'Words: ' + wordCount + ' Chars: ' + charCount;
	}

	editor.events
		.on('change afterInit', editor.async.debounce(calcStat, 100))
		.on('afterInit', function () {
			editor.container.appendChild(statusbar);
		});
});
```

Include Jodit

```html
<link rel="stylesheet" href="build/jodit.min.css" />
<script src="build/jodit.min.js"></script>
<script src="plugins/jodit.stat.js"></script>
```

Create input element

```html
<textarea id="editor"></textarea>
```

Init Jodit

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

## Result

```html
<!-- Example Start -->
<textarea id="editor"></textarea>
<script>
	Jodit.plugins.add('stat', function (editor) {
		const statusbar = document.createElement('div');
		statusbar.style.backgroundColor = '#f8f8f8';
		statusbar.style.color = 'red';
		statusbar.style.fontSize = '11px';
		statusbar.style.padding = '1px 4px';

		function calcStat() {
			var text = Jodit.modules.Helpers.trim(editor.editor.innerText),
				wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
					return value;
				}).length,
				charCount = text.replace(/[\s\n\r\t]+/, '').length;

			statusbar.innerText =
				'words: ' + wordCount + ' chars: ' + charCount;
		}

		editor.events
			.on('change afterInit', editor.async.debounce(calcStat, 100))
			.on('afterInit', function () {
				editor.container.appendChild(statusbar);
			});
	});
	Jodit.make('#editor');
</script>
<!-- Example End -->
```