Skip to content

ilhajs/ilha

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 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

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

Sponsor this project

 

Contributors

Languages