Table of contents


Editor.js provides a set of CSS classes for common UI elements. They can be used to make the design of different Tools more consistent.

block cdx-block
inlineToolButton ce-inline-tool
inlineToolButtonActive ce-inline-tool--active
input cdx-input
loader cdx-loader
button cdx-button

Base class for Block Tool wrapper. Provides common margins and paddings between Blocks.


Style of buttons for the Inline Toolbar.


Modifier for the active state of Inline Toolbar Button.


A common style for text inputs.


You can set a placeholder for contenteditable element by adding a data-placeholder attribute:

<div contenteditable class="cdx-input" data-placeholder="Custom placeholder"> </div>

Add this class to some element to show an animated loader placed over the element.


A common style for buttons.

<div class="cdx-button"> Button text </div>