Introduction

What is Olum?

Unlike frameworks that use a virtual DOM, Olum compiles your components at build time into optimized JavaScript. The result is smaller bundles, faster load times, and better Core Web Vitals — without sacrificing developer experience.

At its core, Olum is built on three ideas:

• Signals first: Fine-grained reactivity with no virtual DOM overhead.
• Compile-time magic: Your templates are compiled to surgical DOM updates.
• Progressive adoption: Start small and scale to full SSR/SSG as you grow.

Quick Start

The fastest way to get started is with the official CLI. It scaffolds a full project with TypeScript, routing, and dev server configured:

npx create-olum@latest my-app
cd my-app
npm install
npm run dev

Manual Installation

Prefer to set things up yourself? Install Olum into an existing project:

# npm
npm install olum

# pnpm
pnpm add olum

# yarn
yarn add olum

Your First Component

Olum components live in .olumfiles. Here's a reactive greeting with a live input:

// src/App.olum
import { signal } from 'olum'

export default function App() {
  const name = signal('World')

  return (
    <div class="app">
      <h1>Hello, {name}!</h1>
      <input
        value={name}
        on:input={(e) => name.value = e.target.value}
        placeholder="Type a name..."
      />
    </div>
  )
}

// src/main.ts
import { createApp } from 'olum'
import App from './App.olum'

createApp(App).mount('#app')