@bureaucracy/svelte

Svelte 5 custom-element renderer for the Bureaucracy ViewContract. A backend declares a typed contract (table / form / detail); this package renders the interactive UI. No business logic on the frontend, no HTML on the backend.

This is the standalone renderer extracted from the bureaucracy Python project so it can be consumed by any frontend (and externalised later), not only the built-in Jinja admin.

What it renders

• <bureaucracy-table> — data table: 17 column types, sort / filter / paginate, editable + bulk columns, actions.
• <bureaucracy-form> — form view: 26 field types, conditional visibility, validation.
• <bureaucracy-detail> — read-only detail view.

All three are framework-agnostic custom elements, so they drop into any host (SvelteKit, plain HTML, etc.). Feed them a contract (and the data endpoint the contract declares); they do the rest.

Install

npm install @bureaucracy/svelte   # from verdaccio.c1.aipe.dev

Use

<script type="module">
  import "@bureaucracy/svelte";           // registers the custom elements
</script>
<link rel="stylesheet" href="@bureaucracy/svelte/tokens.css" />       <!-- light theme vars -->
<link rel="stylesheet" href="@bureaucracy/svelte/tokens-dark.css" />  <!-- [data-theme=dark] -->

<bureaucracy-table id="tasks"></bureaucracy-table>
<script type="module">
  document.getElementById("tasks").contract = tableContract; // TableContract JSON
</script>

TypeScript contract types (mirroring the Python SDK) are exported from @bureaucracy/svelte/types.

Theming

All visuals read from --bureaucracy-* design-token CSS custom properties (W3C DTCG source in tokens/, built to src/lib/tokens{,-dark}.css). Override them on :root to rebrand.

Develop

npm install
npm run build     # tokens + vite lib build → dist/
npm test