Installation

Alacris is ESM-only and has no dependencies. There is nothing to configure.

From a CDN

The fastest way to try it, and a perfectly good way to ship it. No bundler, no install:

<script type="module">
  import { define, html, signal } from 'https://unpkg.com/@alacris/core@0.11.3';

  define('hello-world', () => html`<p>hello</p>`);
</script>

<hello-world></hello-world>

Keep the version in the URL

These URLs pin @alacris/core@0.11.3. Dropping the version tracks whatever npm published last, and a later release can break the page. Bump the pin when you upgrade.

unpkg

import { define, html, signal } from 'https://unpkg.com/@alacris/core@0.11.3';
import { store } from 'https://unpkg.com/@alacris/core@0.11.3/dist/store.js';
import { createContext } from 'https://unpkg.com/@alacris/core@0.11.3/dist/context.js';

jsDelivr

import { define, html, signal } from 'https://cdn.jsdelivr.net/npm/@alacris/core@0.11.3/+esm';

import map

An import map lets you write bare specifiers without a bundler — the same thing this documentation site does for its live examples.

<script type="importmap">
  {
    "imports": {
      "@alacris/core": "https://unpkg.com/@alacris/core@0.11.3/dist/alacris.js",
      "@alacris/core/store": "https://unpkg.com/@alacris/core@0.11.3/dist/store.js",
      "@alacris/core/context": "https://unpkg.com/@alacris/core@0.11.3/dist/context.js"
    }
  }
</script>
<script type="module">
  import { define, html, signal } from '@alacris/core';
</script>

From npm

npm install @alacris/core

import { define, html, signal, computed, effect } from '@alacris/core';
import { store, selector } from '@alacris/core/store';
import { createContext, provide, consume } from '@alacris/core/context';

TypeScript declarations ship with the package. There is nothing to add.

Renamed from `alacris`

The runtime used to be the unscoped alacris package. It is now @alacris/core — same API, new specifier. The design system is a separate package, @alacris/ui.

A component library, not a blank runtime

If you want buttons, fields, and a theme rather than starting from define(...), install Alacris UI (@alacris/ui on npm). It is sixty-eight custom elements and a theme engine, and it works in any framework that can render a tag.

The entry points

Add-ons import the core rather than bundling it, so there is exactly one reactive graph at runtime however many you use.

Import	What it is	gzip
@alacris/core	signals, templates, styling, custom elements	6.56 kB
@alacris/core/store	deep reactive state, selector	1.03 kB
@alacris/core/context	the context protocol	0.54 kB
@alacris/core/signal	reactivity alone, no DOM	1.03 kB

If you use a bundler, anything you do not import is tree-shaken away — the package is marked sideEffects: false.

Do not mix `@alacris/core` and `@alacris/core/signal`

@alacris/core/signal is a standalone build for non-DOM use, such as a worker or a server. It carries its own copy of the reactive core, so signals created with it are in a different dependency graph from anything rendered by @alacris/core. If you are rendering, import your signals from @alacris/core.

Browser support

Alacris uses <template>, TreeWalker, custom elements and — for styles — constructable stylesheets, with a <style> fallback where those are missing.

That means Chrome and Edge 86+, Safari 16.4+, and Firefox 101+. There are no polyfills and no transpiled build; the published code is modern ESM.

Next

• Your first component — the whole model in one file
• Alacris UI catalog — every component, live
• Alacris UI — buttons, fields, and a theme, from npm