Batoi UIF Documentation
Batoi UIF is the dependency-free interface framework for building governed, accessible, and operationally useful Batoi Platform experiences.
It provides a practical browser-native foundation for server-rendered pages, product surfaces, workspace tools, dashboards, forms, registers, editors, data visualization, AI-assisted interfaces, realtime regions, push controls, mobile shells, and theme customization.
What UIF Covers
- Layout systems for public and authenticated application surfaces
- Interface controls for forms, buttons, filters, badges, overlays, dropdowns, drawers, modals, tabs, accordions, tables, and action areas
- SVG-first icons, charts, dashboards, statistical helpers, business charts, finance charts, and Flint-compatible chart inputs
- Rich HTML and Markdown editor surfaces that keep the source form field synchronized
- Declarative actions, animations, realtime regions, push controls, mobile shells, AI actions, and MCP approval widgets
- Theme tokens for brand color, accent, density, radius, and typography
- Micro App patterns for contained client-side application surfaces inside larger Batoi pages
UIF 3.0.0 Highlights
- A consolidated lifecycle, declarative attribute, action, event, state, error, component, and configuration contract.
- Curated All, RAD, Dashboard, Mobile, Desktop, and Agent package profiles over the same dependency-free runtime.
- Diagnostic migration support for v2 applications and an explicit strict v3 compatibility mode.
- Versioned design tokens, compact density, high contrast, forced-colors, reduced-motion, localization, and logical-direction RTL support.
- Exact origin-and-path URL capabilities, bounded parsing and resources, partitioned application/tenant/principal storage, and privacy-safe opt-in diagnostics.
- Governed, provider-neutral AI and MCP surfaces with same-origin transports, explicit approval, replay protection, progress, receipts, and server authority.
- Principal-owned Micro App and PWA persistence, bounded retry and capacity behavior, conflict recovery, and owner-scoped cleanup.
- Generated API, component-contract, design-token, migration, accessibility, security, SBOM, provenance, and artifact-integrity references.
- Cross-browser release journeys covering Chromium, Firefox, WebKit, and mobile Chromium.
Public Example Snapshot
The public asset copy in this repository is version 2.4.0. It includes the searchable Examples Home, copy-ready component patterns, theme persistence, utility matrices, typed text, testimonial behavior, and carousel and widget generators introduced through UIF 2.4.
The image-slider generator emits data-uif-items-per-slide and data-uif-step, but the current gallery does not include a live multi-item carousel exercising those generated values. Arbitrary website crawling and XML export are not browser examples; they require a governed server implementation.
Recommended Reading
| Page | Purpose |
|---|---|
| Getting Started | Learn how UIF is loaded and used inside Batoi pages |
| Micro Apps | Understand the contained client-side application model |
| Examples | Review the curated example applications |
| Components | Review current component families and interaction patterns |
| Editors | Implement rich HTML and Markdown editing, diagnostics, autosave, and governed uploads |
| Charts and Visualization | Review native chart families, Flint-compatible inputs, and browser-only visualization guidance |
| Chart Compatibility | Check native chart contracts, Flint name mappings, unsupported families, and chart QA expectations |
| MCP Support | Build MCP-ready approval, preview, validation, and audit surfaces while keeping privileged tools on the backend |
| Tables and Registers | Review local, remote, hybrid, responsive, and action-oriented table patterns |
| Tokens and Theming | Customize visual tokens and export theme CSS |
| Utilities and Generators | Use bounded layout utilities and copy-ready interface generators |
| Localization and RTL | Configure locale-aware formatting, messages, and logical-direction layouts |
| Package Profiles and Migration | Choose a v3 profile and migrate from diagnostic v2 behavior to strict v3 mode |
| API Reference | Review the current browser-facing usage patterns |
| Compatibility and Release Policy | Review browser baselines, API stability, artifact integrity, budgets, and release gates |
Browser Distribution
Use the built browser assets in server-rendered pages, PHP/RAD routes, or static HTML without requiring a frontend build step.
<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>For module-based examples, import from /assets/batoi-uif-main/dist/uif.esm.js.
Public Examples
The curated Batoi.com examples are available from /platform/uif and the Examples Home link on that page.
They demonstrate how UIF can support both focused patterns and fuller client-only applications.
The maintained public example gallery is available at https://www.batoi.com/assets/batoi-uif-main/examples/, including component, chart, icon, table, editor, event-action, professional showcase, and RAD examples.