import { component } from '@rooted/components'

type ArticleCardOptions = {
	title: string
	summary: string
}

export const ArticleCard = component<ArticleCardOptions>({
	name: 'article-card',
	onMount({ append, element, options }) {
		append(
			element('article', {
				children: [
					element('h2', {
						textContent: options.title,
					}),
					element('p', {
						textContent: options.summary,
					}),
				],
			})
		)
	},
})

Web components framework

Typed end-to-end. No virtual DOM, no signals, no custom compiler. Just TypeScript and custom elements.

Get started

View demo

GitHub

Component model

A typed component factory built on native custom elements. Components read top-to-bottom and do what they say.

Typed router

Route definitions as TypeScript types. Per-route SEO, typed navigation, and route discovery at build time.

State and storage

A simple synchronous shared-state container and typed wrappers for localStorage, sessionStorage, and cookies.

Pick what you need

Each package is independent. Use the router, skip state management, add storage later. Nothing is bundled together.

Deployment adapters

Deploy to Azure Static Web Apps, GitHub Pages, Netlify, Vercel, Cloudflare, and more. Or run behind Express or Fastify.