Jodit UI System

For interface design, Jodit provides a set of components that allow you to build complex interfaces. Their advantage is the uniformity of the insert/drop interfaces. Reactivity created by observing the fields of the component.

Each UI element must implement the interface [[IIUElement]], and should extend [[UIElement]].

For each element to work, an instance is required when creating it [[IView]]

import './style.less';

import { UIElement } from 'jodit/src/core/ui';
import { component } from 'jodit/src/core/decorators';

export class UISlider extends UIElement {
className() {
return 'UISlider';

render(): string {
return `<div>
<div class="&__wrapper">
<div class="&__item">1</div>
<div class="&__item">2</div>
<div class="&__item">3</div>

Pay attention to the styles. They connect explicitly.

File style.less

.jodit-ui-slider {
&__wrapper {
display: flex;
overflow: scroll;

&__slider-item {
display: flex;
width: 200px;
height: 100px;
background-color: red;


Re-exports Button
Re-exports Icon
Re-exports Popup
Re-exports ProgressBar
Re-exports UIBlock
Re-exports UIButton
Re-exports UIButtonGroup
Re-exports UIButtonState
Re-exports UICheckbox
Re-exports UIElement
Re-exports UIFileInput
Re-exports UIForm
Re-exports UIGroup
Re-exports UIInput
Re-exports UIList
Re-exports UISelect
Re-exports UISeparator
Re-exports UISpacer
Re-exports UITextArea
Re-exports UITooltip

Jodit PRO

If you like Jodit - try Jodit PRO