The secure-by-default, islands-first micro-framework
Three primitives: val, run, calc.
Zero build step. No magic. Just fine-grained reactivity for server-rendered HTML.
front.js is built on three tiny, powerful primitives.
Fine-grained reactive state. Holds a value and notifies subscribers when it changes.
const count = val(0);
Auto-executing side effects. Automatically tracks dependencies and re-runs when they change.
run(() => console.log(count()));
Derived state. Computes a value based on other values and caches the result.
const double = calc(() => count() * 2);
A real interactive island. No build step required.
Two steps: Render HTML, then Hydrate with JavaScript.
Mark interactive areas with data-island.
<div
data-island
data-component="Counter"
data-props='{"start": 10}'
></div>
<!-- Load front.js -->
<script type="module" src="/front.js"></script>
Define components using val, run, and html.
import { html, val, register, hydrate } from 'front-js';
function Counter(props) {
// 1. Define State
const count = val(props.start || 0);
// 2. Return Render Function
return () => html`
<button onclick=${() => count(count() - 1)}>-</button>
<span>${count()}</span>
<button onclick=${() => count(count() + 1)}>+</button>
`;
}
register('Counter', Counter);
hydrate();JSON-only data flow. No function serialization. No server closures crossing trust boundaries.
Write HTML and JavaScript. That's it. No bundlers, no transpilers, no configuration.
Less than 5KB gzipped. Hard limit enforced in CI. Every byte counts.