Skip to content

Repository files navigation

Ilha

Continuous Integration NPM Version Bundlephobia Discord

Beta 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@ilha/store for cross-island state on the same signal engine as the core
  • 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 SPA npx giget@latest gh:ilhajs/ilha/templates/vite-spa Open
Nitro SSR npx giget@latest gh:ilhajs/ilha/templates/nitro-ssr Open
Nitro + Hono SPA npx giget@latest gh:ilhajs/ilha/templates/nitro-hono-spa 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

Community

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


Contributors

Made with contrib.rocks.


License

MIT

Releases

Sponsor this project

Contributors

Languages