A TypeScript framework for web apps. Rooted in custom elements, typed end-to-end, batteries included.

rooted is a framework for building web applications on top of native custom elements.
It gives you a typed component model, a typed router with per-route SEO, and a vertical-slice application layout. There is no virtual DOM, no signals, and no compiler step beyond standard TypeScript. Code reads top-to-bottom and does what it says.

import styles from './greeting.css'
import { component } from '@rooted/components'

export const Greeting = component({
  name: 'greeting',
  styles,
  onMount({ append, element }) {
    append(
      element('p', {
        textContent: 'Hello from rooted!',
      })
    )
  },
})

Contents

• Requirements
• Installation
• Quick start
• Packages
• Adapters
• Documentation
• Development

Requirements

Tool	Version
Node	≥ 22.0.0
pnpm	≥ 10.0.0
Vite	≥ 8.0.1

Installation

[!IMPORTANT] Rooted is in open beta. Install with @beta (a plain install gets an old alpha), pin exact versions, and read the beta program page for what that means and where feedback goes.

Install the pieces you actually use.

# Core: components and app bootstrap
pnpm add @rooted/components@beta

# Client-side router (also pulls in the Vite plugin for route discovery)
pnpm add @rooted/router@beta

# Shared state, web storage helpers, and DX/SEO tooling
pnpm add @rooted/store@beta @rooted/storage@beta
pnpm add -D @rooted/application@beta

Quick start

1. Write a component

// src/counter.mts
import styles from './counter.css'
import { component } from '@rooted/components'

export const Counter = component({
  name: 'counter',
  styles,
  onMount({ append, element }) {
    let count = 0

    const label = append(
      element('span', {
        textContent: '0',
      })
    )

    append(
      element('button', {
        textContent: 'Increment',
        on: {
          click() {
            count++
            label.textContent = String(count)
          },
        },
      })
    )
  },
})

2. Bootstrap the app

// src/main.mts
import { application } from '@rooted/components/application'
import { component } from '@rooted/components'
import { Counter } from './counter.mts'

const Application = component({
  name: 'app',
  onMount({ append, element }) {
    append(
      element('h1', {
        textContent: 'My App',
      })
    )
    append(Counter)
  },
})

application(Application) // mounts on #app by default

3. Add routing (optional)

Routes live next to the components they render. Each feature folder owns a _routes.mts file, and the Vite plugin discovers them at build time.

// src/articles/_routes.mts
import { route, token } from '@rooted/router'
import { Article } from './article.mts'

export const ArticleRoute = route`/articles/${token('id', Number)}/`(Article)

// src/main.mts
import { application } from '@rooted/components/application'
import { router } from '@rooted/router/application'
import { appRoutes } from './_routes.g.mts' // generated by the Vite plugin

const Router = router({
  home:     HomeComponent,
  notFound: NotFoundComponent,
  ...appRoutes,
})

application(
  component({
    name: 'app',
    onMount({ append }) {
      append(Router)
    },
  })
)

See the recipe-book example for a full vertical-slice app.

Packages

Package	What's in it
@rooted/components	The component() factory, the mount-context API, and the app bootstrap.
@rooted/router	Typed routes, gates, navigation helpers, and the Vite route-discovery plugin.
@rooted/localization	URL-based localization: locale route token, overlay dictionaries, and hreflang tooling.
@rooted/markdown	Build-time markdown rendering: a Vite plugin for .md files and a component to render the result.
@rooted/elements	Low-level DOM helpers used by components. Useful when you build elements without a component shell.
@rooted/events	Typed event helpers and global error utilities.
@rooted/observers	IntersectionObserver, MutationObserver and ResizeObserver that disconnect themselves when a signal aborts.
@rooted/store	A small synchronous store with update and change events. Not reactive.
@rooted/storage	Typed wrappers around localStorage, sessionStorage, and cookies.
@rooted/application

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗