VDUS Explained

VDUS — the Squilla Dynamic UI System — is the rendering protocol behind the admin SPA. It exists for a single reason: extensions ship their own admin UI, and we want those UIs to feel like part of the same app instead of a tab full of iframes.

What it does

The admin shell is a thin React app that does almost nothing on its own — auth, sidebar, and an extension loader. Every feature page (Media, Forms, Email, Settings…) is a React micro-frontend shipped by an extension. VDUS is the protocol that ties them together: a boot manifest the shell fetches once, a layout tree it can re-fetch over SSE when a feature page changes, an action handler that dispatches user gestures back to the right extension, and a shared component registry that lets extensions reuse the shell's primitives.

Why not just iframes

Iframes break navigation, focus, theming, keyboard shortcuts, and the back button. They also force every extension to ship its own React + design-system bundle. VDUS keeps everything in one document and one bundle: extensions register their micro-frontends as ES modules loaded via import-map shims, sharing react, @squilla/ui, @squilla/api, and @squilla/icons with the shell.

The five pieces

1. Boot manifest — the shell pulls one JSON document at startup describing the active extensions, their admin routes, sidebar entries, and field-type registrations.
2. Layout tree — each route resolves to a tree of React components the shell can render. Most of the tree is just “load extension X's component Y”.
3. SSE updates — when a backend mutation changes the current page (e.g. a list page after a delete), the server pushes a new layout tree over SSE rather than the client polling.
4. Action handler — user gestures (click, submit, change) dispatch typed actions; the handler routes each to the originating extension via the proxy, gets a response, and updates state.
5. Component registry — extensions register custom field types (e.g. media, form_selector) into a shared registry so any node-type schema can use them.

What this means in practice

If you're building an extension, your admin UI is just a Vite project that emits an ES module. You list its routes in the manifest. You import shared deps from the shell. The user navigates to your page; it loads alongside everything else; it shares the design system; it can use the form primitives from @squilla/ui; the backend can push live updates to it without you wiring up a websocket. That's VDUS.