Skip to main content
Batoi UIF Docs

Batoi UIF Architecture

Understand how Batoi UIF fits into Batoi routes, public shells, product surfaces, and client-side micro apps.

Version 3.0.0 Version 3 active maintenance Reviewed Aug 11, 2026 Next review Nov 11, 2026
Start Reading Open GitHub Report documentation issue

Owner: Batoi Engineering Reviewed by: Batoi UIF Maintainers Source revision: b2f3478

Start FastLoad UIF in server-rendered pages and initialize declarative behavior. Chart SupportReview native SVG chart types, Flint mappings, and deferred advanced charts. Micro AppsBuild contained app surfaces that live inside larger Batoi routes. AI and MCPDesign approval UI while privileged tool execution stays server-side.
Browse Batoi UIF Documentation Batoi UIF Architecture
On this page

Batoi UIF Architecture

Batoi UIF is designed to work inside existing Batoi pages without forcing every route to adopt a new shell.

The public page or product route owns the page chrome. UIF owns the contained interface surface.

Architecture Diagram

Public Shell Header Breadcrumbs Footer Route Files pagepart prepart postpart UIF Micro App Controls State Exports

Layers

LayerResponsibility
Route controllerLoads metadata, selects content, prepares page state
PagepartRenders the Micro App root and documentation blocks
PrepartLoads UIF CSS and route-scoped styles
PostpartLoads UIF JavaScript and initializes behavior
UIF libraryProvides reusable interface primitives, icons, charts, and helpers

Integration Boundary

Use UIF when a page needs an application-like workspace, not just static content.

Good boundaries include:

  • a dashboard panel
  • a workflow form
  • a register
  • a data visualization studio
  • an AI app composer
  • a theme builder

Avoid loading UIF globally unless the whole product shell is designed around it.

Source and Runtime

The Batoi.com public examples load the reviewed public UIF distribution served with the example gallery.

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