Batoi UIF Docs

Batoi UIF Architecture

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

Start Reading Open GitHub
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 local distribution from /assets/batoi-uif-main/dist/.

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