https://github.com/ilhajs/ilha
A tiny, framework-free island architecture library.
https://github.com/ilhajs/ilha
edge framework full-stack hybrid island library node ssr template ui universal vanilla-javascript
Last synced: about 1 month ago
JSON representation
A tiny, framework-free island architecture library.
- Host: GitHub
- URL: https://github.com/ilhajs/ilha
- Owner: ilhajs
- License: mit
- Created: 2026-03-24T10:50:24.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-01T12:02:52.000Z (about 2 months ago)
- Last Synced: 2026-05-01T13:24:11.486Z (about 2 months ago)
- Topics: edge, framework, full-stack, hybrid, island, library, node, ssr, template, ui, universal, vanilla-javascript
- Language: TypeScript
- Homepage: https://ilha.build/
- Size: 5.53 MB
- Stars: 47
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
# Ilha
[](https://github.com/ilhajs/ilha/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/ilha)
[](https://discord.gg/WnVTMCTz74)
> Alpha is live
**Ilha** is a tiny, isomorphic web UI library built around the [islands architecture](https://www.patterns.dev/vanilla/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
- [Website](https://ilha.build)
- [Documentation](https://ilha.build/guide/getting-started/introduction)
- [Templates](https://github.com/ilhajs/ilha/tree/main/templates)
- [Discord](https://discord.gg/WnVTMCTz74)
- [Follow us on X](https://x.com/ilha_js)
---
## Getting Started
```sh
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](https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite) | `npx giget@latest gh:ilhajs/ilha/templates/vite` | [Open](https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite) |
| [Hono](https://github.com/ilhajs/ilha/tree/main/templates/hono) | `npx giget@latest gh:ilhajs/ilha/templates/hono` | [Open](https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/hono) |
| [Nitro](https://github.com/ilhajs/ilha/tree/main/templates/nitro) | `npx giget@latest gh:ilhajs/ilha/templates/nitro` | [Open](https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/nitro) |
| [Elysia](https://github.com/ilhajs/ilha/tree/main/templates/elysia) | `npx giget@latest gh:ilhajs/ilha/templates/elysia` | |
| [Electrobun](https://github.com/ilhajs/ilha/tree/main/templates/electrobun) | `npx giget@latest gh:ilhajs/ilha/templates/electrobun` | |
---
## Your First Island
Place a mount point anywhere in your HTML:
```html
```
Define your island and mount it:
```ts
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`
Count: ${state.count()}
Increase
Decrease
`,
);
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`](./packages/ilha) | Core island builder — state, events, SSR rendering, and DOM hydration |
| [`@ilha/router`](./packages/router) | Isomorphic SPA router with SSR support and a Vite file-system routing plugin |
| [`@ilha/store`](./packages/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](https://discord.gg/WnVTMCTz74) to connect with other Ilha developers.
---
## License
MIT