`, `
`, ``. These replace the current block element entirely.
- **Text styles** — applied to inline elements like ``, ``, ``, ``. These wrap the selected text.
Each card shows a **live preview** of the style using the actual HTML element and CSS classes, so writers see exactly what they'll get before clicking.
## Quick Setup
Here's a complete working example. First, the editor configuration:
```javascript
Jodit.make('#editor', {
customStyles: {
definitions: Jodit.atom([
// Block styles
{ name: 'Document Title', element: 'h2', classes: ['document-title'] },
{ name: 'Section Header', element: 'h3', classes: ['section-header'] },
{ name: 'Info Box', element: 'p', classes: ['info-box', 'highlighted'] },
{ name: 'Pull Quote', element: 'blockquote', classes: ['pull-quote'] },
// Text styles
{ name: 'Highlight', element: 'span', classes: ['marker'] },
{ name: 'Keyboard Key', element: 'code', classes: ['kbd'] },
{ name: 'Brand Name', element: 'strong', classes: ['brand'] }
])
}
});
```
Then the CSS for your custom classes:
```css
/* Block styles */
.document-title {
font-size: 2em;
font-weight: 700;
color: #1a1a2e;
border-bottom: 3px solid #4a6cf6;
padding-bottom: 0.3em;
}
.section-header {
font-size: 1.4em;
color: #16213e;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.info-box.highlighted {
background: #e8f4fd;
padding: 16px 20px;
border-left: 4px solid #2196f3;
border-radius: 0 8px 8px 0;
}
.pull-quote {
font-size: 1.25em;
font-style: italic;
color: #555;
border-left: 4px solid #4a6cf6;
padding: 12px 24px;
margin: 24px 0;
}
/* Text styles */
.marker {
background: linear-gradient(120deg, #fff176 0%, #ffee58 100%);
padding: 2px 6px;
border-radius: 3px;
}
.kbd {
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 6px;
font-family: monospace;
font-size: 0.9em;
box-shadow: 0 1px 0 #999;
}
.brand {
color: #4a6cf6;
font-weight: 800;
}
```
That's all. Your writers now have a visual palette of styles to apply with one click.
## Style Definitions Explained
Each style definition is a simple object with three properties:
| Property | Type | Description |
|----------|------|-------------|
| `name` | `string` | Label shown on the card in the popup |
| `element` | `string` | HTML tag to use (`h2`, `span`, `p`, `blockquote`, etc.) |
| `classes` | `string[]` | One or more CSS class names to apply |
The `element` property determines whether the style is treated as a **block** or **text** style:
- **Block elements**: `h1`–`h6`, `p`, `div`, `blockquote`, `pre` — replace the entire block
- **Inline elements**: `span`, `strong`, `em`, `code`, `a` — wrap the selected text
## Toggle Behavior
Styles work as toggles. Click a style to apply it; click it again to remove it:
- **Block styles** revert to a plain `` tag when toggled off
- **Text styles** unwrap the element, leaving just the text content
This means writers can't accidentally stack duplicate styles. The active style is visually highlighted in the popup with a blue border, so it's always clear what's currently applied.
## Active Style in the Toolbar
By default, the Style button shows an icon. But you can make it display the **name of the currently active style** as text, which gives writers immediate feedback without opening the popup:
```javascript
Jodit.make('#editor', {
textIcons: true,
customStyles: {
definitions: Jodit.atom([
{ name: 'Title', element: 'h2', classes: ['doc-title'] },
{ name: 'Body', element: 'p', classes: ['doc-body'] }
])
}
});
```
You can also render the styles as a **dropdown select** instead of a popup:
```javascript
Jodit.make('#editor', {
controls: {
style: {
component: 'select'
}
},
customStyles: {
definitions: Jodit.atom([
{ name: 'Title', element: 'h2', classes: ['doc-title'] },
{ name: 'Body', element: 'p', classes: ['doc-body'] }
])
}
});
```
## Real-World Use Cases
**Documentation portals** — Define "Note", "Warning", "Tip" boxes as block styles. Writers click one button instead of manually adding `
`.
**Marketing sites** — Create branded heading styles, testimonial quote styles, and CTA highlight markers that match your design system exactly.
**Legal and compliance** — Set up "Clause Header", "Definition", "Cross Reference" styles for structured document editing with consistent formatting.
**Email template editors** — Pre-define styles that map to your email CSS, so content editors produce on-brand emails without touching code.
## Key Design Decisions
A few things worth noting about how the plugin works:
1. **No CSS injection** — The plugin only adds and removes CSS classes. It never injects styles into the document. You control the CSS entirely, which means styles work with your existing build pipeline, CDN, and caching strategy.
2. **Multiple classes** — A single style can apply multiple classes (like `['info-box', 'highlighted']`). The plugin handles adding and removing all of them as a unit.
3. **Clean HTML output** — When a text style is removed, the plugin cleans up the DOM properly. A bare `` with no remaining attributes is unwrapped instead of leaving empty markup behind.
4. **Automatic grouping** — You don't need to manually separate block and text styles. The plugin classifies them automatically based on the `element` property and displays them in labeled groups.
## Try It Out
The Style plugin is available in [Jodit PRO](https://xdsoft.net/jodit/pro/). You can see it in action on the [interactive demo page](https://xdsoft.net/jodit/pro/docs/plugin/style/).
If you're already using Jodit PRO, just add the `customStyles` configuration to your editor options and provide the corresponding CSS — the plugin handles the rest.
Have questions or need help setting it up? Reach out to us at [support@xdsoft.net](mailto:support@xdsoft.net).
_Full page: https://xdsoft.net/blog/jodit-pro-custom-styles-plugin_