OWL (Odoo Web Library) is Odoo's JavaScript framework for the frontend. It replaced the older widget architecture and resembles React and Vue: components, reactive state, hooks, and templates. In Odoo 18, OWL 2 is the standard.
Components
An OWL component is a JavaScript class with an XML template. State is managed with useState. Props are passed from parent to child. Lifecycle methods: setup, onMounted, onWillUnmount. If you know React or Vue, you'll recognize the pattern.
Templates
QWeb templates in XML, same syntax as backend templates but rendered in the browser. t-esc for text, t-foreach for loops, t-if for conditions. Templates are compiled to efficient JavaScript at build.
Hooks
useService provides access to Odoo services (RPC, notification, action). useEnv gives the environment object with configuration. useRef for DOM reference. Same hook pattern as React, but adapted to Odoo's architecture.
RPC calls
ORM calls from the frontend: this.env.services.rpc('/web/dataset/call_kw', { model, method, args, kwargs }). Fetch data, create records, call server methods. Everything asynchronous with promises.
Registries
Odoo uses registries to connect components to views, field widgets, and actions. Register your component as a field widget: registry.category('fields').add('my_widget', MyWidget). It appears as a choice in views.
Debugging
Odoo Debug Mode (Settings → Activate Developer Mode). Browser DevTools with OWL DevTools extension. Console.log works, but OWL's reactive system can make it hard to trace state changes manually.