Showcase

Each demo below runs entirely in your browser via Sandpack. Sandpack installs the published @blac/core and @blac/react packages from its CDN, so you’re running the real API — not a mock or workspace build.

Every embed is fully editable. Hit View code, change a file, and watch the preview hot-reload. Click Open in CodeSandbox (top-right of the editor) to fork the sandbox and keep experimenting.

First load

The preview may take a few seconds on first load while Sandpack resolves the dependency tree from CDN. Subsequent loads are cached.

Counter

The minimum viable BlaC app. One CounterCubit holds { count, lastAction }. The component calls cubit methods — no action objects, no reducers, no dispatch.

• Cubit — subclass with a typed initial state
• patch() — partial-merge update; emit() for a full replace
• useBloc() — returns [state, cubit] (no provider needed)

Todo list

Multiple components consume the same TodoCubit without any extra wiring — no context, no prop-drilling. Derived getters (filteredItems, activeCount) live on the cubit and recompute whenever state changes.

• Reactive list state — add, toggle, remove, filter
• Derived getters on the Cubit class
• Multiple unrelated components, all reading the same singleton

Registration form

FormCubit tracks every field’s value and touched flag, plus computed errors, isValid, and progress. Validation logic stays in the cubit — the components are pure view.

• Per-field touched state — errors surface only after blur
• Derived errors getter returns only fields that fail
• Progress bar driven by a computed percentage, no local state

Analytics dashboard

Two independent Cubits — StatsCubit (counters + live simulation) and ActivityCubit (event log) — coexist without a provider. A useEffect in App writes to the activity log whenever stats refresh, showing cross-cubit coordination via React effects instead of this.depend().

• Two Cubits used in the same tree, no shared provider
• Live simulation with setInterval managed inside the cubit
• Cross-cubit coordination via React effects

Messenger not included

The messenger scenario was scoped out of this gallery. It requires several blocs, a mock service layer, real-time typing indicators, and a multi-file component tree that is too large to be self-contained as a Sandpack string module. It remains available in the apps/examples workspace for local exploration.

What to try

Once a demo loads, hit View code and try these edits to explore the API:

• Counter — add a double method to CounterCubit that calls this.patch({ count: this.state.count * 2 }).
• Todo — add a prioritize(id) method and a priority field to the Todo interface; sort filteredItems by priority.
• Form — add a fourth field (e.g. username) and a uniqueness rule to errors.
• Dashboard — wire StatsCubit to ActivityCubit using this.depend() inside StatsCubit.tick() so the log updates without a React effect.