# Welcome to the Jodit Blog
If you've ever needed a rich text editor for a web project, you know how tricky the choice can be. Heavy dependencies, poor TypeScript support, limited customization, or just too much complexity for what should be a simple task. That's exactly why we built Jodit — and why we're starting this blog.
## Who We Are
We're **XDSoft**, the team behind [Jodit](https://xdsoft.net/jodit/) — a WYSIWYG editor used across **50 million npm installs per year**. Jodit powers forms, CMSs, admin panels, and content tools in production applications around the world.
Jodit started as a simple idea: what if a rich text editor had **zero dependencies**, stayed under **400 KB**, and just worked — in vanilla JS, React, Vue, Angular, or any other framework?
That idea became a real product, and today Jodit is at version **4.6** with a full-featured open-source core and a PRO tier with 20+ premium plugins.
## What Is Jodit?
Jodit is a pure JavaScript (TypeScript) WYSIWYG editor. No jQuery. No external libraries. Just one script — and you have a fully functional editor.
Here's how simple it is to get started:
```html
```
That's it. No build step, no bundler config, no dependency tree to manage.
## Configuration That Makes Sense
Every project has different needs. Jodit gives you full control over the toolbar, behavior, and appearance — all through a single config object:
```javascript
const editor = Jodit.make('#editor', {
height: 500,
buttons: [
'bold', 'italic', 'underline', '|',
'ul', 'ol', '|',
'image', 'link', '|',
'align', '|',
'source'
],
placeholder: 'Start typing your content...',
spellcheck: true,
uploader: {
insertImageAsBase64URI: true
}
});
```
Need only bold, italic, and lists? Just list those buttons. Need a full document editor with PDF export? There's a preset for that too.
## TypeScript First
Jodit is written in TypeScript, and we take types seriously. If you're building with TypeScript, you get full autocomplete and type safety out of the box:
```typescript
import { Jodit } from 'jodit';
interface MyEditorConfig {
readonly height: number;
readonly theme: 'default' | 'dark';
readonly readonly: boolean;
}
const config: MyEditorConfig = {
height: 400,
theme: 'dark',
readonly: false
};
const editor = Jodit.make('#editor', config);
// Full type safety — editor.value is always a string
const content: string = editor.value;
// Event system is typed too
editor.events.on('change', (newValue: string) => {
console.log('Content changed:', newValue.length, 'chars');
});
```
## Works With Your Stack
Jodit doesn't lock you into a framework. Use it wherever JavaScript runs:
**Vanilla JavaScript** — just include the script:
```javascript
const editor = Jodit.make('#editor');
```
**React** — with the official wrapper:
```javascript
import { JoditEditor } from 'jodit-react';
import { useMemo, useRef } from 'react';
export const MyEditor = () => {
const editor = useRef(null);
const config = useMemo(() => ({
height: 400,
placeholder: 'Start typing...'
}), []);
return (
console.log(newContent)}
/>
);
};
```
**Custom styling** — CSS variables make theming straightforward:
```css
/* Override Jodit's appearance to match your design */
.jodit-container {
--jd-color-border: #e0e0e0;
--jd-color-panel: #fafafa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Dark mode? Just swap the values */
.dark .jodit-container {
--jd-color-border: #333;
--jd-color-panel: #1a1a1a;
}
```
## Free vs PRO — What's the Difference?
The open-source (MIT-licensed) core includes everything most projects need: text formatting, lists, images, tables, links, code view, fullscreen, search and replace, drag and drop, and much more.
**Jodit PRO** adds specialized plugins for teams that need more:
| Feature | Free | PRO |
|---------|------|-----|
| Text formatting, lists, tables | Yes | Yes |
| Image upload and management | Yes | Yes |
| Source code editing | Yes | Yes |
| Paste from Word (enhanced) | Basic | Advanced |
| AI Writing Assistant | — | Yes |
| Export to PDF / DOCX | — | Yes |
| Autocomplete & @Mentions | — | Yes |
| Advanced File Manager | — | Yes |
| Emoji Picker | — | Yes |
| Google Maps integration | — | Yes |
| Content Templates | — | Yes |
| Syntax-highlighted code blocks | — | Yes |
| 10+ more plugins | — | Yes |
Both tiers share the same core: zero dependencies, under 400 KB, same version (4.6).
## What to Expect From This Blog
We're starting this blog to share practical, code-first content for developers working with rich text editing on the web. Here's what we'll be covering:
- **Tutorials** — step-by-step guides for common editor tasks (image upload, custom toolbar buttons, content validation)
- **Plugin deep dives** — how each PRO plugin works under the hood, with real configuration examples
- **Integration guides** — setting up Jodit with React, Vue, Angular, Next.js, and other frameworks
- **Tips and tricks** — performance optimization, accessibility, mobile editing, and theming
- **Web development insights** — broader topics around ContentEditable, Selection API, and the challenges of building WYSIWYG editors
Every post will include working code examples you can copy and adapt for your own projects.
## Stay Tuned
This is just the beginning. We have a lot of practical content planned, and we'd love to hear what topics matter most to you. Whether you're evaluating Jodit for a new project or you've been using it for years, this blog is for you.
Let's build better editors together.
_Full page: https://xdsoft.net/blog/welcome-to-jodit-blog_