Render Options

render is how Ornata turns component state back into DOM output inside the component’s HTML contract. Each render callback returns a RenderOptions object for one resolved element or one item in a resolved element list.

Basic shape

JavaScript

render: {
    value() {
        return {
            text: String(this.state.count),
        };
    },
}

TypeScript

interface CounterElements {
    value: HTMLElement
};

render: {
    value() {
        return {
            text: String(this.state.count),
        };
    },
}

Available render outputs

Render callbacks can return: text, html, attributes, classes, style, dataset, and/or events. These options can be combined in a single render result.

text

Set text when you want to update textContent.

JavaScript

render: {
    label() {
        return {
            text: this.state.label,
        };
    },
}

TypeScript

interface ExampleElements {
    label: HTMLElement;
}

render: {
    label() {
        return {
            text: this.state.label,
        };
    },
}

html

Set html when you want to update innerHTML.

Use trusted HTML only

html writes directly to innerHTML. Only use it with trusted content or content you have sanitized first. If you only need to show plain text, prefer text instead.

JavaScript

render: {
    output() {
        return {
            html: `<strong>${this.state.message}</strong>`,
        };
    },
}

TypeScript

interface ExampleElements {
    output: HTMLElement;
}

render: {
    output() {
        return {
            html: `<strong>${this.state.message}</strong>`,
        };
    },
}

attributes

Use attributes for standard and boolean attributes.

JavaScript

render: {
    panel() {
        return {
            attributes: {
                hidden: !this.state.open,
                "aria-expanded": String(this.state.open),
            },
        };
    },
}

TypeScript

interface ExampleElements {
    panel: HTMLElement;
}

render: {
    panel() {
        return {
            attributes: {
                hidden: !this.state.open,
                "aria-expanded": String(this.state.open),
            },
        };
    },
}

Behavior summary:

• string values set the attribute
• true adds a boolean attribute
• false removes a boolean attribute
• null removes the attribute
• undefined leaves it unchanged

classes

Use classes for class toggling.

JavaScript

render: {
    item() {
        return {
            classes: {
                "is-active": this.state.active,
            },
        };
    },
}

TypeScript

interface ExampleElements {
    item: HTMLElement;
}

render: {
    item() {
        return {
            classes: {
                "is-active": this.state.active,
            },
        };
    },
}

Behavior summary:

• true adds the key to the class list
• false removes the key from the class list

style

Use style for inline style updates.

JavaScript

render: {
    panel() {
        return {
            style: {
                display: this.state.open ? "block" : "none",
            },
        };
    },
}

TypeScript

interface ExampleElements {
    panel: HTMLElement;
}

render: {
    panel() {
        return {
            style: {
                display: this.state.open ? "block" : "none",
            },
        };
    },
}

Behavior summary:

• string values set the style property
• null removes the property
• undefined leaves it unchanged

dataset

Use dataset for data-* updates.

JavaScript

render: {
    item() {
        return {
            dataset: {
                state: this.state.active ? "active" : "idle",
            },
        };
    },
}

TypeScript

interface ExampleElements {
    item: HTMLElement;
}

render: {
    item() {
        return {
            dataset: {
                state: this.state.active ? "active" : "idle",
            },
        };
    },
}

Behavior summary:

• string values set the dataset property
• null removes the dataset property
• undefined leaves it unchanged

events

Use events to attach event handlers.

JavaScript

render: {
    button() {
        return {
            events: {
                click: () => this.methods.increment(),
            },
        };
    },
}

TypeScript

interface ExampleElements {
    button: HTMLButtonElement;
}

render: {
    button() {
        return {
            events: {
                click: () => this.methods.increment(),
            },
        };
    },
}

Rendering lists with index

When the rendered element is an array, Ornata passes index in the render context.

JavaScript

render: {
    items({ index }) {
        const currentIndex = index ?? 0;

        return {
            classes: {
                "is-active": currentIndex === this.state.activeIndex,
            },
        };
    },
}

TypeScript

interface ExampleElements {
    items: HTMLElement[];
}

render: {
    items({ index }) {
        const currentIndex = index ?? 0;

        return {
            classes: {
                "is-active": currentIndex === this.state.activeIndex,
            },
        };
    },
}

This is especially useful for:

• tabs
• menus
• repeated buttons
• repeated panels
• filtered or selected lists

A good mental model

Render callbacks should describe DOM output, not general side effects or reusable business logic.

That usually means:

• render for visual and attribute updates
• watch for internal side effects and more complex DOM updates
• methods for named reusable actions and event handlers
• computed for derived state values