Skip to content

ilhajs/ilha

Repository files navigation

Ilha

Alpha is live

Ilha is a tiny, isomorphic web UI library built around the islands architecture — ship minimal JavaScript, hydrate only what matters.

Features

  • Universal rendering — SSR, static generation, hybrid, and edge rendering out of the box
  • Fine-grained reactivity — signal-based state with no virtual DOM and no compiler required
  • Flexible scope — progressively enhance server-rendered HTML, or build fully self-contained apps
  • SSR + hydration — render on the server, restore state on the client with zero flicker
  • File-system routing — optional Vite plugin for automatic, convention-based routing
  • Shared global state — zustand-shaped store backed by the same signal engine as the core
  • Typed forms — schema-driven form binding with per-field error tracking and dirty state
  • Backend agnostic — integrates with any backend; first-class Nitro and Hono support
  • Prompt-sized source — small enough to fit the entire codebase into an AI context window
  • Type-safe by default — first-class TypeScript support throughout

Quick Navigation


Getting Started

npm install ilha
# or with Bun
bun add ilha

Templates

Scaffold a project in seconds with one of the official starters:

Template Command Sandbox
Vite npx giget@latest gh:ilhajs/ilha/templates/vite Open
Hono npx giget@latest gh:ilhajs/ilha/templates/hono Open
Nitro npx giget@latest gh:ilhajs/ilha/templates/nitro Open

Your First Island

Place a mount point anywhere in your HTML:

<body>
  <div data-ilha="counter"></div>
</body>

Define your island and mount it:

import ilha, { html, mount } from "ilha";

const counter = ilha
  .state("count", 0)
  .on("[data-action=increase]@click", ({ state }) => state.count(state.count() + 1))
  .on("[data-action=decrease]@click", ({ state }) => state.count(state.count() - 1))
  .render(
    ({ state }) => html`
      <p>Count: ${state.count}</p>
      <button data-action="increase">Increase</button>
      <button data-action="decrease">Decrease</button>
    `,
  );

mount({ counter });

mount() auto-discovers every [data-ilha] element on the page and activates the matching island.


Packages

This monorepo contains the following packages:

Package Description
ilha Core island builder — state, events, SSR rendering, and DOM hydration
@ilha/router Isomorphic SPA router with SSR support and a Vite file-system routing plugin
@ilha/store Zustand-shaped global store backed by alien-signals — share state across islands
@ilha/form Typed form binding via Standard Schema — submission, validation, and error state with no extra dependencies

Community

Have questions or want to share what you're building? Join our Discord to connect with other Ilha developers.


License

MIT

Packages

 
 
 

Contributors

Languages