Renderer

@semantic-ui/renderer is the last step in producing a component. Component defines it, the template compiler turns its template into an AST, and the renderer turns that AST into DOM and keeps it in sync with state.

The AST describes structure, never how that structure is produced, so the renderer behind it is swappable. Two engines ship with the framework: native renders directly to DOM and is the default, lit renders through lit-html.

Reference Only Most projects never import this package. Components pull the native engine in through @semantic-ui/component, and the components guide covers everything you need to build with them.

Installation

The renderer can be used standalone to render an AST without the component layer.

npm install @semantic-ui/renderer

Basic Usage

Components select an engine by name.

import { defineComponent } from '@semantic-ui/component';

defineComponent({
  tagName: 'my-card',
  template,
  renderingEngine: 'lit',
});

Omitting renderingEngine uses native.

API Sections

• Rendering Engines - Registering an engine, and the modules an engine reuses.
• Native Renderer - The default engine, and per-expression reactivity.
• Server Rendering - How server output and hydration work.
• Lit Renderer - The engine contract implemented against lit-html.