Skip to main content
@juo/blocks is a library for building self-contained UI components — blocks — that present and manipulate subscription data. Each block has props and slots described by a type-safe schema — familiar anatomy from Vue, React, or Preact components. Blocks consume domain services (subscriptions, customers, orders, products…) through type-safe contexts and can be composed into pages. The library is framework-agnostic at its core — renderers are plain functions, and thin adapters add idiomatic ergonomics for Vue, React, and Preact when needed. Wrap any block in a web component to mount it from HTML.

​
What the library provides

Blocks

Self-contained UI components with typed props and slots described by a JSON Schema. Familiar anatomy, framework-agnostic renderer.

Reactivity

Signal-based reactive state that remains synchronized across framework adapters, including Vue refs, React state, and Preact hooks.

Contexts

Type-safe dependency injection over the DOM. Provide services once at the root; override on any sub-tree; any block can request them.

Services

Domain APIs — subscriptions, customers, orders, products, schedules, auth, routing, workflows.

Editor

Connect a portal to the Juo Editor so operators can configure, theme, and translate blocks without code.

Localization

Translate copy alongside content, with overrides flowing through the same context tree as services.

​
Composition model

A page is represented as a root block. Blocks expose slots through their schema, and slots contain child blocks. This creates a recursive tree in which each block can define its own structure and dependencies. A cyan juo-page route='/' frame containing two side-by-side amber juo-extension-root frames — 'aside' on the left with a purple juo-block Menu showing five icon-and-label rows, and 'main' on the right stacking a purple juo-block SubscriptionList with placeholder list rows above a purple juo-block Upsell rendering a thumbnail, two pitch lines, and an 'Add' button. Each block is authored in isolation — its props, its slots, and the services it consumes. Routing, mounting, and composition are handled by the host portal.

​
Framework adapters

Concept examples use the plain DOM renderer. Framework adapters provide native integration patterns, including useContext, useSignal, and framework-native components, while preserving the same registry, context tree, and signal-based reactivity model.

Vue

Vue components as renderers, Composition API composables, and signal-as-ref interop.

React

Components and hooks, useSignal for reactive reads.

Preact

Same surface as React with Preact’s hooks runtime.
Use create-juo to scaffold a blocks package. The custom portal guide covers installation, entry points, and host application mounting.