Every UI component that inherits from the UIElement class must have a component decorator.
This decorator is responsible for calling setStatus('ready') after the new UI() operation.
Other decorators will only start their work when the component is ready to function.

class UIHeight extends UIElement {
  public state = {
    height: 10

  protected onChangeHeight() {
    this.container.style.height = this.state.height + 'px';

class UIWidth extends UIHeight {
  public state = {
    height: 10,
    width: 10

  protected onChangeWidth() {
    this.container.style.width = this.state.width + 'px';

  constructor(jodit: IJodit) {
    console.log(this.componentStatus); // beforeReady

const elm = new UIWidth(jodit);
console.log(elm.componentStatus); // ready
elm.state.width = 100;

By using the decorator, the component's status will be set to ready automatically after instantiation.
You can access the component's status using the componentStatus property.
However, if you prefer to manage the readiness of a component independently,
you can choose not to use the decorator.
In such cases, you can manually set the component's status using setStatus('ready').

class UIData extends UIElement {
  public state = {
    data: {}

  protected onChangeWidth() {
    this.container.innerText = this.state.data.content;

  protected onReady() {
    alert("I'm ready");

const elm = new UIData(jodit);

fetch('index.php').then(resp => {
  elm.state.data = resp.json();

In the above example, the UIData component sets its status to ready manually after fetching data from index.php.
The onReady hook is then triggered, displaying an alert message.

You can interact with and explore the code examples:

Edit Decorators


component<T>(constructorFunction): T

Decorate components and set status isReady after constructor

Type parameters

Name Type
T extends ComponentCompatible


Name Type Description
constructorFunction T Component constructor class



Defined in