> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Blocks
> Build type-safe, schema-driven subscription UI components — composable in any storefront.
`@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
Self-contained UI components with typed props and slots described by a JSON Schema. Familiar anatomy, framework-agnostic renderer.
Signal-based reactive state that remains synchronized across framework adapters, including Vue refs, React state, and Preact hooks.
Type-safe dependency injection over the DOM. Provide services once at the root; override on any sub-tree; any block can request them.
Domain APIs — subscriptions, customers, orders, products, schedules, auth, routing, workflows.
Connect a portal to the Juo Editor so operators can configure, theme, and translate blocks without code.
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.
Each block is authored in isolation — its props, its slots, and the [services](/docs/blocks/concepts/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 components as renderers, Composition API composables, and signal-as-ref interop.
Components and hooks, `useSignal` for reactive reads.
Same surface as React with Preact's hooks runtime.
Use `create-juo` to scaffold a blocks package. The [custom portal guide](/docs/blocks/guides/custom-portal) covers installation, entry points, and host application mounting.