On this page
Batoi UIF Micro Apps
A Batoi UIF Micro App is a contained client-side application surface that runs inside a larger Batoi page without owning the whole page shell.
It is useful when a page needs a real working tool, but the surrounding route still belongs to Batoi.com, Batoi Platform, or another product experience.
Contract
A UIF Micro App should have:
- a bounded root element
- route-scoped CSS and JavaScript
- visible controls and state
- clear input and output behavior
- browser-only state unless a governed endpoint is configured
- documentation explaining purpose, structure, and extension points
Responsibilities
| Layer | Responsibility |
|---|---|
| Public shell | Header, footer, navigation, breadcrumbs, page-level layout |
| Route pagepart | Micro App markup and documentation blocks |
| Route prepart | UIF CSS and route-scoped styling |
| Route postpart | UIF JavaScript imports and app behavior |
| Markdown docs | Durable guidance and examples |
Example Root
<section class="uif-workbench" data-uif-demo="data-visualization">
<textarea data-uif-csv-input></textarea>
<select data-uif-chart-type></select>
<svg data-uif-chart></svg>
</section>Good Use Cases
- CSV visualization tools
- AI app composers
- theme builders
- governed workflow forms
- operational dashboards
- resource registers
- editor-backed content tools
- realtime status panels
- mobile shell previews
- MCP approval widgets
State and Hydration
Use BatoiUIF.autoStart(root) or start(root) to hydrate declarative UIF behavior inside the Micro App root. Use createMicroAppStore() when the app needs predictable browser-side state shared across controls, previews, and exports.
Production Notes
Client-side examples can be useful without a server. Production applications should use governed service endpoints for identity, audit, persistence, rate limiting, and API key protection.