A modern, lightweight UI framework for applications that scale

Owl 3.0.0 Alpha: This is an alpha release. The API and features are subject to change without notice.

The fastest way to discover Owl is the online playground. It features interactive examples, a live editor, and showcases all major features: reactivity, components, plugins, and more. It also includes guided tutorials and is the recommended way to learn about Owl.

Owl is a modern UI framework (~20kb gzipped, zero dependencies) written in TypeScript, built by Odoo. It powers Odoo's web client, one of the largest open-source business applications, but is equally suited for small projects and prototypes.

Key features:

• Signal-based reactivity — Explicit, composable, and debuggable state management
• Plugin system — Type-safe, composable sharing of state and services
• Class-based components — Familiar OOP patterns with ES6 classes
• Declarative templates — XML templates with a clean syntax
• Async rendering — Concurrent mode for smooth user experiences

import { Component, signal, computed, mount, xml } from "@odoo/owl";

class TodoList extends Component {
  static template = xml`
    <input placeholder="Add todo..." t-on-keydown="this.onKeydown"/>
    <ul>
      <t t-foreach="this.todos()" t-as="todo" t-key="todo.id">
        <li t-att-class="{ done: todo.done }">
          <input type="checkbox" t-model="todo.done"/>
          <t t-out="todo.text"/>
        </li>
      </t>
    </ul>
    <p t-if="this.remaining() > 0">
      <t t-out="this.remaining()"/> item(s) remaining
    </p>`;

  todos = signal.Array([
    { id: 1, text: "Learn Owl", done: false },
    { id: 2, text: "Build something", done: false },
  ]);

  remaining = computed(() => this.todos().filter((t) => !t.done).length);

  onKeydown(ev) {
    if (ev.key === "Enter" && ev.target.value) {
      this.todos.push({
        id: Date.now(),
        text: ev.target.value,
        done: false,
      });
      ev.target.value = "";
    }
  }
}

mount(TodoList, document.body);

This example demonstrates Owl's reactivity: todos is a signal, remaining is a computed value that updates automatically, and the UI reacts to changes without manual subscription management.

The documentation below is for Owl 3. For the Owl 2 documentation, see the owl-2.x branch.

• Playground — Interactive examples and live coding
• Tutorial: Getting Started — Learn Owl fundamentals step by step
• Tutorial: Todo List — Build a full TodoMVC app
• Tutorial: Hibou OS — Build a desktop-like interface

• API Reference — A complete list of everything exported by the Owl library
• App — Configure and mount an Owl application to the DOM
• Component — Define components with lifecycle methods and static properties
• Error Handling — Catch and recover from errors in components
• Event Handling — Handle DOM events with t-on directives
• Form Bindings — Bind form inputs to reactive state with t-model
• Hooks — Use lifecycle hooks and other built-in hooks in components
• Plugins — Share state and services across components with type-safe plugins
• Props — Pass data to child components with validation and defaults
• Reactivity — Manage state with signals, computed values, and reactive objects
• Refs — Access DOM elements from components with t-ref
• Resources and Registries — Ordered reactive collections for shared data
• Slots — Compose components with named and dynamic slot content
• Template Syntax — Write XML templates with QWeb directives
• Translations — Translate templates and dynamic strings
• Types Validation — Validate data structures at runtime with a declarative schema

• Owl 3.x Release Notes — Complete guide to all changes in Owl 3
• Design Principles
• Why we built Owl
• Architecture Notes
• Comparison with React/Vue

npm install @odoo/owl

Or download directly: latest release

The Owl devtools extension helps debug your applications with component tree inspection, state visualization, and performance profiling. Download it from the releases page.

Owl is released under the LGPL v3 license.