OWL Documentation | OWL

🦉">

Skip to content

Appearance

MenuReturn to top

OWL Documentation ​<br>Owl is a modern UI framework (~30kb 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.<br>Key features:<br>Signal-based reactivity — Explicit, composable, and debuggable state management<br>Plugin system — Type-safe, composable sharing of state and services<br>Class-based components — Familiar OOP patterns with ES6 classes<br>Declarative templates — XML templates with a clean syntax<br>Async rendering — Concurrent mode for smooth user experiences<br>No toolchain required — Works directly in the browser with native ES modules<br>Quick Example ​<br>javascriptimport { Component, signal, mount, xml } from "@odoo/owl";

class Counter extends Component {<br>static template = xml`<br>div class="counter"><br>button t-on-click="this.decrement">-button><br>span t-out="this.count()"/><br>button t-on-click="this.increment">+button><br>div>`;

count = signal(0);

increment() {<br>this.count.set(this.count() + 1);<br>decrement() {<br>this.count.set(this.count() - 1);

mount(Counter, document.body);<br>count is a signal: calling this.count() reads it, and this.count.set(...) updates it. When the value changes, Owl re-renders the component automatically — no manual subscriptions needed.