Batoi UIF API Reference

Batoi UIF API Reference

This page summarizes the browser-facing usage patterns currently used by Batoi.com examples.

The public source repository is available at github.com/batoisystems/batoi-uif.

Distribution Files

The paths below refer to the public website snapshot. Its version is independent from the current 3.0.0 source release and must be checked before deployment.

/assets/batoi-uif-main/dist/uif.css
/assets/batoi-uif-main/dist/uif.esm.js
/assets/batoi-uif-main/dist/uif.iife.js

ES Module Import

import {
  start,
  autoStart,
  mountIcons,
  icon,
  icons,
  initChart,
  initTable,
  initForm,
  initEditor,
  initTypedText,
  bindActions,
  bindRadActions,
  initDeclarativeFilters,
  createMicroAppStore,
  setDensity,
  setAccent,
  parseOptions,
  emit,
  on,
  registerPlugin
} from '/assets/batoi-uif-main/dist/uif.esm.js';

Classic Script Usage

<link rel="stylesheet" href="/assets/batoi-uif-main/dist/uif.css">
<script src="/assets/batoi-uif-main/dist/uif.iife.js"></script>
<script>
  BatoiUIF.autoStart(document);
</script>

autoStart() hydrates recognized declarative elements inside the supplied root. Use a route root instead of document when only one page section should be enhanced.

Declarative Components

Use data-uif for server-rendered controls that should be activated by UIF.

Common values include:

• table
• form
• editor
• chart
• dashboard
• animate
• typed-text
• realtime
• push
• mobile-shell
• ai-action
• tool-approval
• install-prompt

Icons

mountIcons();

Use icons when button labels, status indicators, or compact action controls need a familiar visual signal.

Typed Text

const controller = initTypedText(document.querySelector('[data-uif="typed-text"]'));
controller.destroy();

Typed text supports declarative strings and timing options. Its controller owns animation timers and cleanup; reduced-motion users receive the final text without animation.

Charts

The curated examples use SVG-first chart rendering for browser-only data visualization.

The library distribution exposes chart helpers for operational charts, compact metrics, business and finance visuals, statistical summaries, and Flint-compatible chart specs. Examples may also use route-scoped SVG rendering when a custom demo needs tight control.

<div
  data-uif="chart"
  data-uif-chart-format="flint"
  data-uif-chart-spec='{"chartType":"Grouped Bar Chart","encodings":{"x":{"field":"quarter"},"y":{"field":"revenue"},"color":{"field":"segment"}}}'
></div>

Tables, Forms, and Editors

initTable(document.querySelector('[data-uif="table"]'));
initForm(document.querySelector('[data-uif="form"]'));
initEditor(document.querySelector('[data-uif="editor"]'));

Tables support local, remote, and hybrid modes. Forms support declarative validation and field behavior. Editors support rich HTML and Markdown-oriented authoring surfaces while keeping the source field synchronized.

Multi-item Carousels

Use data-uif-items-per-slide to control the visible group and data-uif-step to control how many items previous and next navigation advances. Keep a data-uif-role="status" live region so the visible range is announced.

The public generator emits this markup. Treat it as generated source to review and integrate; the current public gallery does not include a live multi-item runtime demonstration.

Version 3 Profiles

Package-based applications can import namespace groups from @batoi/uif-profiles/rad, dashboard, mobile, desktop, agent, or all. Profiles compose existing UIF packages and do not create another runtime or relax package security boundaries.

Use @batoi/uif-profiles/compatibility during v2 migration. It retains v2 behavior and enables diagnostic reporting; strict v3 behavior is enabled explicitly after reported incompatibilities are resolved.

Actions and RAD Wiring

bindActions(root);
bindRadActions(root);
initDeclarativeFilters(root);

Use declarative actions for visibility, state, class, attribute, animation, storage, and event workflows. Use RAD bindings where server-rendered Batoi routes need governed AJAX behavior.

Micro App State

const store = createMicroAppStore({ status: 'draft' });

Use a small route-local store when a contained UIF surface needs predictable browser-side state without taking over the full page shell.

Integration Guidance

• Import UIF only on routes that need it.
• Do not load UIF globally into unrelated public pages.
• Keep application behavior under a bounded root element.
• Use backend proxies for production AI provider calls.
• Keep API keys out of persisted browser storage.