🦉 Owl Framework 🦉

Class based components with hooks, reactive state and concurrent mode

Try it online! you can experiment with the Owl framework in an online playground.

Project Overview

The Odoo Web Library (Owl) is a smallish (~<20kb gzipped) UI framework built by Odoo for its products. Owl is a modern framework, written in Typescript, taking the best ideas from React and Vue in a simple and consistent way. Owl's main features are:

• a declarative component system,
• a reactivity system based on hooks,
• concurrent mode by default,

Owl components are defined with ES6 classes and xml templates, uses an underlying virtual DOM, integrates beautifully with hooks, and the rendering is asynchronous.

Quick links:

• documentation,
• changelog (from Owl 1.x to 2.x),
• playground

Example

Here is a short example to illustrate interactive components:

const { Component, useState, mount, xml } = owl;

class Counter extends Component {
  static template = xml`
    <button t-on-click="() => state.value++">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class App extends Component {
  static template = xml`
    <div>
      <span>Hello Owl</span>
      <Counter />
    </div>`;

  static components = { Counter };
}

mount(App, document.body);

Note that the counter component is made reactive with the useState hook. Also, all examples here uses the xml helper to define inline templates. But this is not mandatory, many applications will load templates separately.

More interesting examples can be found on the playground application.

Documentation

Learning Owl

Are you new to Owl? This is the place to start!

• Tutorial: create a TodoList application
• Quick Overview
• How to start an Owl project
• How to test Components
• How to write Single File Components

Reference

You will find here a complete reference of every feature, class or object provided by Owl.

• Animations
• Browser
• Component
• Content
• Concurrency Model
• Configuration
• Context
• Environment
• Event Bus
• Event Handling
• Error Handling
• Hooks
• Mounting a component
• Miscellaneous Components
• Observer
• Props
• Props Validation
• QWeb Templating Language
• QWeb Engine
• Slots
• Tags
• Utils

Other Topics

This section provides miscellaneous document that explains some topics which cannot be considered either a tutorial, or reference documentation.

• Owl architecture: the Virtual DOM
• Owl architecture: the rendering pipeline
• Comparison with React/Vue
• Why did Odoo built Owl?

Installing Owl

Owl is available on npm and can be installed with the following command:

npm install @odoo/owl

If you want to use a simple <script> tag, the last release can be downloaded here:

• owl-1.4.7