Install

Choose the setup that fits your page: an npm import for bundled apps, or a script tag for a quick start without a build step.

Install with npm

npm install @jnreis/briojs

import { createApp } from '@jnreis/briojs';

The package publishes tree-shakable ESM entry points. Import only the capabilities you use:

import { createApp } from '@jnreis/briojs';
import { state, effect, computed, batch } from '@jnreis/briojs/reactivity';
import { persist } from '@jnreis/briojs/persistence';
import { createRouter } from '@jnreis/briojs/router';
import { http, HttpError } from '@jnreis/briojs/http';
import { validate } from '@jnreis/briojs/forms';
import { createStepEngine } from '@jnreis/briojs/step';
import { moneyMask } from '@jnreis/briojs/money-mask';

Add development tools when you need them

The development tools are deliberately separate:

import { devtoolsPanel } from '@jnreis/briojs/devtools';

Import that entry before creating apps to enable the development inspector. All tooling is also available from the npm main entry without implicit activation:

import { createApp, enableDevtools, inspectDevtools, devtoolsPanel } from '@jnreis/briojs';
enableDevtools(); // Development only; before creating apps.

Unused devtools exports can be tree-shaken. Main-entry imports alone do not enable snapshotting; the dedicated @jnreis/briojs/devtools entry enables it automatically.

Browser bundles

Load one of the standalone bundles, not both:

<!-- Production: runtime without development tools or tracking hooks -->
<script src="https://cdn.jsdelivr.net/npm/@jnreis/briojs@4.0.0/dist/brio.min.js"></script>
<!-- During development, use this instead: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@jnreis/briojs@4.0.0/dist/brio.dev.min.js"></script> -->

For self-hosting, copy the desired scripts from node_modules/@jnreis/briojs/dist/ to your public assets. The /dist/ URLs below assume you serve them at that path. Pin core and plugins to the same version; load the scripts before mounting your app.

Both expose window.brio with createApp, state, signal, computed, effect, batch, flush, untrack, resource, createScope, onCleanup, getCurrentScope, and trustedHTML. Both dispatch the brio ready event after publishing the core API.

Add only the browser plugins you use

All plugins are optional browser scripts. Load only what you need, after the core and before application bootstrap:

<script src="/dist/brio.min.js"></script>
<script src="/dist/brio.router.min.js"></script>      <!-- Adds brio.createRouter -->
<script src="/dist/brio.persistence.min.js"></script> <!-- Adds brio.persist -->
<script src="/dist/brio.http.min.js"></script>        <!-- Adds brio.http, brio.HttpError -->
<script src="/dist/brio.forms.min.js"></script>       <!-- Adds brio.validate -->
<script src="/dist/brio.step.min.js"></script>        <!-- Adds brio.createStepEngine -->
<script src="/dist/brio.money-mask.min.js"></script>  <!-- Adds brio.moneyMask -->
<script src="/app.js"></script>

• Load order: core first, needed plugins second, application bootstrap last. Loading a plugin before the core throws. For deferred loading, wait for the needed scripts to finish, not just the core’s brio ready event.
• Shared runtime: plugins extend the existing window.brio and use its reactive engine and cleanup scopes. They do not dispatch another ready event, and work with the development core too.
• Optional features: no plugin above is included in either core bundle. Pattern masks and custom formatters remain core; money formatting is optional.
• ESM imports: the npm main entry retains tree-shakable named exports for convenience; each plugin also has the dedicated subpath shown above. Importing a plugin has no implicit application registration in ESM.

Choose the right core bundle

Bundle	Development tooling
brio.min.js	Compiles out devtools tracking hooks; no inspector or reactive state snapshotting.
brio.dev.min.js	Adds devtools, inspectDevtools, devtoolsPanel, and enableDevtools, with tracking enabled automatically.

For dynamic content, start with app.insert(); for step navigation, use createStepEngine(). The lower-level hydrateRoot and hydrateNode APIs are ESM-only.