On this page
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 2.3.0 Highlights
- Zero runtime dependencies across framework packages.
- Deterministic rich HTML and Markdown editing with source modes, selection-aware formatting, lists, tables, dialogs, undo/redo, governed autosave/uploads, and Chromium/Firefox/WebKit coverage.
- Centralized HTML sanitization, URL/origin policy, Trusted Types integration, CSP guidance, and a machine-verified trust-boundary inventory.
- Bounded cancellation, retry, payload, cache, persistence, realtime, push, RAD, AI, and MCP browser contracts.
- Expanded SVG-first chart support for operational, statistical, business, finance, dense composition, and cyclical visuals.
- Flint-compatible chart input mapping at the specification boundary.
- A first-party SVG icon registry with more than 1,000 interface icons.
- UI-only AI and MCP approval surfaces that keep privileged tool execution server-side.
- Release integrity checks, per-export TypeScript signature baselines, package tarball validation, and offline clean-install smoke testing.
- Corrected Markdown modal and drawer previews, reversible quote formatting, and consistent example navigation and UIF branding.
- Added cross-browser regression coverage for example navigation, branding, preview layouts, and Markdown quote behavior.
- Added a lockfile release guard that rejects package tarball URLs whose embedded version differs from the locked package version.
- Complete, copy-ready markup for every live component gallery preview.
- Multi-image and testimonial carousels using the existing accessible carousel contract.
- Dependency-free typed text with declarative options, lifecycle cleanup, and reduced-motion behavior.
- Copyable per-icon CSS and first-party Facebook, GitHub, Instagram, LinkedIn, X/Twitter, and YouTube marks.
- Stronger typography hierarchy, system-font fallbacks, semantic weights, text utilities, and semantic icon colors without a webfont dependency.
- Searchable navigation across every published example and component-gallery pattern.
- Complete 12-column, margin, and padding utility matrices with spacing values from zero through five.
- Copy-ready typography, list-group, counter, horizontal-tab, breadcrumb, button-group, theme, image-slider-generator, and widget-generator examples.
- Multi-item carousels with configurable visible-item and navigation-step counts plus accessible status updates.
- Persisted light and dark example themes applied before first paint with matching UIF logo variants.
- Corrected typed-text and testimonial samples, including hidden inactive testimonial slides.
- A documented security boundary that keeps arbitrary website crawling and XML export on governed servers.
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 |
| 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 examples are available at /platform/uif/examples.
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.