What is Aegis?

Zero-build reactive UI engine.

One ES module. No build step. No dependencies. Your server renders the HTML; Aegis wakes up the parts that need to be alive.

<!-- rendered by Django / Rails / Laravel / Go / PHP … -->
<div data-aegis="counter" data-start="5">
    <button>Clicked 5 times</button>
</div>

<script type="module">
import { island } from './aegis.js';

island('counter', ({ props, signal, html }) => {
    const count = signal(props.start);
    return html`<button @click=${() => count.value++}>Clicked ${count} times</button>`;
}, { types: { start: Number } });
// no mount() call: every [data-aegis] on the page is hydrated after island()
</script>

Mental model — 4 rules#

1. ${x.value} is a snapshot, ${x} and ${() => …} are live. A signal or a function in a template re-renders on change; a plain value renders once (dev warns with E019).
2. Everything lives in a scope. Effects, listeners, timers and resources created inside island() / component() / mount() die with the component. Outside a scope you get E001.
3. Use the ctx versions. on, effect, interval, observe from the setup context are bound to the component's scope; the imported ones are not.
4. Data never goes through innerHTML. Data goes through ${} in html`` (text nodes, never parsed). Server HTML goes through swap() / adopt().

Runnable versions of every example: recipes/ (open recipes/index.html), playground.html — edit, run, share a link — and demo/admin.html, a complete admin app (hash router, table with search and paging, optimistic mutations, forms with server errors, a 50k-line virtual log, offline settings, theme, i18n) on a mock server.