Renderer API Reference

These docs provide a reference to how template AST are rendered to the DOM for UI components.

Semantic currently uses Google’s Lit as its primary rendering engine, with the possibility of supporting other rendering targets in the future.

Installation

The renderer is included as part of the component package:

npm install @semantic-ui/component

API Sections

• Lit Renderer - Core rendering engine based on Lit
• Lit Directives - Custom directives for reactive rendering

Basic Usage

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

const renderer = new LitRenderer({
  ast: templateAST,
  data: {
    user: { name: 'John' }
  },
  template: parentTemplate
});

const html = renderer.render();