Skip to main content
Batoi UIF Docs

Getting Started with Batoi UIF

Route-scoped setup guidance for adding Batoi UIF components and behavior to existing application pages.

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 Getting Started with Batoi UIF
On this page

Getting Started with Batoi UIF

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

The public website shell can continue to use its existing layout while UIF powers a contained workspace, chart, form, register, editor, table, 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">

For classic server-rendered pages, load the IIFE bundle and start declarative UIF behavior after the route markup is present.

<script src="/assets/batoi-uif-main/dist/uif.iife.js"></script>
<script>
  BatoiUIF.autoStart(document);
</script>

For module-based route scripts, import the functions needed by the route.

<script type="module">
import { start, mountIcons, initChart } from '/assets/batoi-uif-main/dist/uif.esm.js';

const root = document.querySelector('[data-uif-demo]');
start(root);
mountIcons(root);
initChart(root.querySelector('[data-uif="chart"]'));
</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.
  • Prefer declarative data-uif components when the server can render the initial state.
  • 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.

Version 3 Package Profiles

For package-based applications, choose the smallest package or curated profile that describes the application: RAD, Dashboard, Mobile, Desktop, or Agent. The All profile is intended for applications and tooling that deliberately need the complete namespace surface.

Existing v2 applications can begin with the compatibility profile, enable diagnostics, remove reported legacy behavior, and then opt into strict v3 mode. Browser distribution files remain appropriate for HTML-first pages that do not use a package graph.

Minimal Micro App Root

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

Declarative Component Root

<section data-uif-demo="register">
  <table data-uif="table" data-uif-options='{"mode":"local","search":true,"selectable":true}'>
    <!-- server-rendered header and rows -->
  </table>
</section>

Where to Go Next

Read the Micro Apps guide before building richer browser-side examples, review Package Profiles and Migration, and use the Examples Home for the currently deployed component, table, chart, editor, and action patterns.