Getting Started with Batoi UIF

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>

Recommended Integration

• 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.

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, and review the library examples under /assets/batoi-uif-main/examples/ for current component, table, chart, editor, and action patterns.