Building front.js: A Secure-by-Default Islands Framework

React Server Components surfaced real security concerns around server closures and opaque data flow. I wanted a small framework that keeps the islands architecture benefits but makes security the default: explicit data flow, no eval, and a tiny runtime.

The Problem

Modern web stacks often introduce:

  • Complex hydration models
  • Large runtimes
  • Data leakage risks from server closures
  • Hidden execution paths in the browser

I needed an approach that keeps interactivity small, explicit, and safe.

The Solution

front.js is a secure-by-default, islands-first micro-framework. It hydrates only interactive components, keeps data flow explicit through JSON, and ships with a runtime under 5KB gzipped.

Key Features

  • Islands Architecture - Hydrate only what needs interactivity
  • Secure Data Flow - JSON-only props, no server closures
  • Tiny Runtime - <5KB gzipped, no build step required
  • Sanitized Rendering - uhtml templates to prevent XSS
  • Fine-Grained Reactivity - Simple val, run, and calc primitives

Technical Highlights

  • Explicit island markers via data-island and data-props
  • Zero-trust hydration with component name validation
  • No eval or string execution from the DOM
  • Framework agnostic - Works with plain HTML, Astro, HTMX

Impact

  • Safer client hydration by default
  • Faster pages by hydrating only interactive fragments
  • Simple DX without a build step

What Makes It Different

Most frameworks trade security for convenience. front.js keeps the API small and the data flow explicit, so there are fewer places for unsafe behavior to hide.

Tech Stack

  • Vanilla JavaScript (ES modules)
  • uhtml for sanitized rendering
  • Vitest for tests

Current Status

v0.0.2 Released:

  • Core runtime stable
  • Islands hydration working
  • Fine-grained reactivity implemented
  • Test suite and docs complete

Active Development:

  • @frontjs/actions for typed RPC workflows
  • More framework integrations

What I Learned

Islands architecture works best when data boundaries are strict. Security by default is less about adding features and more about removing unsafe patterns.

Links

A tiny runtime and explicit data flow make islands safe and predictable.