<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Owl</a> 🦉</h1> <p align="center"> <strong>A modern, lightweight UI framework for applications that scale</strong> </p>

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

Try it now

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.

What is 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

Quick Example

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.

Documentation

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

Getting Started

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

Reference

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

Misc

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

Installation

npm install @odoo/owl

Or download directly: latest release

Devtools

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

License

Owl is released under the LGPL v3 license.

Owl

Install / Use

README