The Zubra guide#

Zubra compiles components written as HTML with a script and styles into standard web components: elements that work in plain HTML, in every major framework, and on the server.

Try it first: the playground compiles in your browser and runs your component in plain HTML, React and Vue side by side.

Start an app:

npm create zubra@latest my-app

It asks for a framework (none, React, Vue, Svelte, Solid, Preact, Lit, Angular or Astro) and writes a working app with one component, a dev server that updates components in place, and a browser test.

The tutorial#

Each step builds on the last, in about ten minutes each.

1. Your first component: props, state, events, and the dev loop.
2. Templates: conditions, lists, classes and styles, event modifiers, references.
3. Two-way props and events: what frameworks bind to, and why you rarely fire events by hand.
4. Composition and slots: components using components, and content passed in.
5. Forms: elements that are real form controls.
6. Async data: loading, errors and refetching, without effects.
7. Server rendering: HTML first, hydrated in place.
8. Read the output: what Zubra compiles to, and the platform rule behind each part.

Coming from a framework#

• Zubra for React developers
• Zubra for Vue developers
• Zubra for Svelte developers

Topics#

• Who Zubra is for: where a compiled web component earns its place, and where your framework is the right tool.
• What crosses the boundary: props, events, slots and forms do; render props, framework context and Suspense don't.
• Server rendering, honestly: what renders where, without JavaScript, and the gaps that remain.
• Zubra on other people's pages: embeds, extension content scripts, host isolation, tag names, and tables.
• Accessible widgets without a headless library: what Radix and shadcn/ui give React, from the platform, @zubra/runtime/primitives and Zag.js.
• Zubra with Tailwind, shadcn/ui, MUI and Bootstrap: how components get the app's styles, light DOM and shadow DOM, with an example app for each.

Reference#

The README is the reference: every feature, option and rule. docs/ has the rest (security, browser support).