Reactive CSSbundle builder
/* Custom bundles · @reactivecss/core 0.9.0 */

Build only what you need.

Choose the Reactive CSS capabilities your project uses. We’ll resolve the dependencies and generate the configuration for an optimized bundle.

Core & State
Always included: compiler, state engine and scheduler.
Syntax and reference
--x: state(initial) · attr(name [, fallback]) / pick(…) / split(text, "d") in state() and set() · previous(--x) / direction(--x) as condition operands · ReactiveCSS.start/stop/refresh/stats/compile/describe/diagnostics

Reference:state()attr()pick() in state()split()

Syntax and reference
--x: state(initial, persist("key" [, local | session]))

Reference:persist()

Events & Actions
Syntax and reference
.x:on(event [, prevent()] [, stop()]) { --state: set(expr) | toggle() | increment(n) | decrement(n) | cycle(a, b) } · :on(keydown(Key)) / :on(outside(click)) · event(field), calc(), min(), max(), clamp(), round(), var(), mouse(), element(), viewport(), random() at event time · legacy: on: trigger(action, …), key(), outside(), prevent()

Reference:on::on()event()set()toggle()increment()decrement()cycle()prevent() and stop()Triggerskey()outside()Focus, reset, animation and transition triggers

Requires Events & actions.
Syntax and reference
:on(drag) / :on(drag(start | move | end | cancel)) · event(x | y | delta-x | delta-y | movement-x | movement-y | start-x | start-y)

Reference::on(drag)

Conditions & Selectors
Syntax and reference
when(condition, a, b) · :when(condition)

Reference:when():when()

Syntax and reference
:nth-var(--x)

Reference::nth-var()

History
Syntax and reference
previous(--x) · direction(--x) · :changed(--x)

Reference:previous()direction():changed()

Forms & DOM Bindings
Syntax and reference
--x: state(initial, bind(value | checked)) · bind: --x [closest(selector)] (a control bound to an ancestor's state) · :just-checked · :just-unchecked

Reference:bind:bind() in state():just-checked:just-unchecked

Syntax and reference
content: var(--x) | when(…) on elements (DOM text) · legacy: text: <value>

Reference:text:content (DOM text)

Syntax and reference
--attr-<attribute>: <value> · --x: state(initial, bind(attribute)) · legacy: attr: <attribute> <value>

Reference:attr:--attr-*

Focus & Accessibility
Requires Events & actions.Works with Form bindings (optional, not added).
Syntax and reference
focus: when(condition) | var(--boolean) | true | false

Reference:focus:

Syntax and reference
:blur (from a focus loss until the next focus)

Reference::blur

Values & Strings
Syntax and reference
random(min, max [, by step]) · pick(a, b, …) · --x: typed(value [, "<syntax>"])

Reference:typed()random()pick()

Geometry & Observers
Syntax and reference
live(expr, interval) · on(event, expr) · mouse(x|y [, local]) · viewport(width|height) · visible([threshold])

Reference:live()on()mouse()visible()viewport()

Syntax and reference
element(width) · element(height)

Reference:element()

Your bundle

Not built yet: the page generates the command, the CLI builds
Selected
Nothing: the core alone
Included
core
Measured: this bundle vs reactive-css.min.js, same metric per row
BytesThis bundleStandardDifference
minified45,367149,177−103,810 (70 %)
gzip16,90849,278−32,370 (66 %)
brotli15,36243,307−27,945 (65 %)

Build it

@reactivecss/core 0.9.0 · CLI and API
1 · Install
npm install --save-dev @reactivecss/core@0.9.0 esbuild
2 · Build
npx -p @reactivecss/core -p esbuild reactive-css build --features core --out public/reactive-css.min.js
3 · Load it
<script src="/reactive-css.min.js" defer></script>
The same build through the API (Node script)
build-reactive-css.mjs
// build-reactive-css.mjs · run with: node build-reactive-css.mjs
import { build } from '@reactivecss/core/bundle';

const result = await build({
  "features": [
    "core"
  ],
  "outfile": "public/reactive-css.min.js",
  "format": "iife",
  "minify": true
});
if (!result.ok) {
  for (const e of result.errors) console.error(`${e.code}: ${e.message}`);
  process.exit(1);
}
console.log(result.manifest.features.join(', '), result.manifest.sizes);

Analyze my CSS

the library’s compiler, in this page · nothing is sent

Only the pasted text is analyzed. Stylesheets loaded or created at runtime, inline style attributes and sheets you did not paste are not seen; a missing feature then shows up in ReactiveCSS.diagnostics. When unsure, use the full runtime.

Or don’t build anything

The standard bundle has every feature and needs no tooling: start with it, and build a custom one when size matters. The compact bundle is the same full runtime with a shorter feature registry in describe(); it is not a feature selection.

Measured for 0.9.0, in bytes
Bundlemingzipbrotli
reactive-css.min.js
standard: every feature		149,17749,27843,307
reactive-css.compact.min.js
every feature, compact describe()		128,63342,53037,611