Example

Here is a short example to illustrate interactive components:

import { Component, QWeb } from 'owl'
import { xml } from 'owl/tags'

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

  state = { value: 0 };

  increment() {
    this.state.value++;
  }
}

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

  static components = { Counter };
}

const app = new App({ qweb: new QWeb() });
app.mount(document.body);

More interesting examples can be found on the playground application.

OWL's Design Principles

OWL is designed to be used in highly dynamic applications where changing requirements are common and code needs to be maintained by large teams.

XML based: templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with xpaths.
templates compilation in the browser: this may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.
no toolchain required: this is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on npm.

Owl is not designed to be fast nor small (even though it is quite good on those two topics). It is a no nonsense framework to build applications. There is only one way to define components (with classes).

If you are interested in a comparison with React or Vue, you will find some more information here.

Documentation

The complete documentation can be found here. The most important sections are:

Found an issue in the documentation? A broken link? Some outdated information? Submit a PR!

Installing/Building

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

Some npm scripts are available:

Command	Description
`npm install`	install every dependency required for this project
`npm run build`	build a bundle of owl in the /dist/ folder
`npm run minify`	minify the prebuilt owl.js file
`npm run test`	run all tests
`npm run test:watch`	run all tests, and keep a watcher
`npm run tools`	build tools applications, start a static server (see here)
`npm run tools:watch`	same as `tools`, but with a watcher to rebuild owl

License

OWL is LGPL licensed.