Batoi UIF Docs

Getting Started with Batoi UIF

Start Reading Open GitHub
On this page

Getting Started with Batoi UIF

Batoi UIF can be used as a route-scoped enhancement inside an existing Batoi public or product page.

The public website shell can continue to use its existing Bootstrap-based layout while UIF powers a contained workspace, chart, form, register, theme tool, or AI-assisted app surface.

Route-Scoped Loading

Load UIF only where it is needed.

<link rel="stylesheet" href="/assets/batoi-uif-main/dist/uif.css">
<script type="module">
import { mountIcons } from '/assets/batoi-uif-main/dist/uif.esm.js';

mountIcons();
</script>
  • Keep the page shell responsible for navigation, breadcrumbs, and footer.
  • Keep UIF inside a bounded application root.
  • Use route-specific CSS for layout glue.
  • Keep browser-only demos free from server upload unless a governed endpoint is intentionally added.
  • Document what the user can try and what the application exports.

Minimal Micro App Root

<section data-uif-demo="theme-builder">
  <header>
    <h2>Theme Builder</h2>
  </header>
  <main>
    <!-- UIF controls and preview -->
  </main>
</section>

Where to Go Next

Read the Micro Apps guide before building richer browser-side examples.