Ilha

April 28, 2026 · View on GitHub

Bundlephobia

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

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
Elysia	`npx giget@latest gh:ilhajs/ilha/templates/elysia`
Electrobun	`npx giget@latest gh:ilhajs/ilha/templates/electrobun`

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

Community

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

License

MIT