{"id":13494961,"url":"https://github.com/odoo/owl","last_synced_at":"2025-05-13T18:12:09.099Z","repository":{"id":37734991,"uuid":"178364606","full_name":"odoo/owl","owner":"odoo","description":"OWL: A web framework for structured, dynamic and maintainable applications","archived":false,"fork":false,"pushed_at":"2025-04-03T19:40:27.000Z","size":22719,"stargazers_count":1380,"open_issues_count":191,"forks_count":379,"subscribers_count":123,"default_branch":"master","last_synced_at":"2025-04-28T10:55:16.098Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://odoo.github.io/owl/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-29T08:29:59.000Z","updated_at":"2025-04-27T01:59:56.000Z","dependencies_parsed_at":"2023-10-24T15:30:34.974Z","dependency_job_id":"44f16cee-7e35-4000-8af1-a47d9efb6888","html_url":"https://github.com/odoo/owl","commit_stats":{"total_commits":1548,"total_committers":42,"mean_commits":"36.857142857142854","dds":0.227390180878553,"last_synced_commit":"606d14a399eb769368dd82bc8d2fb3b9f0d7ceab"},"previous_names":[],"tags_count":132,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odoo%2Fowl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odoo%2Fowl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odoo%2Fowl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odoo%2Fowl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odoo","download_url":"https://codeload.github.com/odoo/owl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000857,"owners_count":21997442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:29.931Z","updated_at":"2025-05-13T18:12:09.074Z","avatar_url":"https://github.com/odoo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Repositories"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🦉 \u003ca href=\"https://odoo.github.io/owl/\"\u003eOwl Framework\u003c/a\u003e 🦉\u003c/h1\u003e\n\n [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)\n[![npm version](https://badge.fury.io/js/@odoo%2Fowl.svg)](https://badge.fury.io/js/@odoo%2Fowl)\n[![Downloads](https://img.shields.io/npm/dm/@odoo%2Fowl.svg)](https://www.npmjs.com/package/@odoo/owl)\n\n_Class based components with hooks, reactive state and concurrent mode_\n\n**Try it online!** you can experiment with the Owl framework in an online [playground](https://odoo.github.io/owl/playground).\n\n## Project Overview\n\nThe Odoo Web Library (Owl) is a smallish (~\u003c20kb gzipped) UI framework built by\n[Odoo](https://www.odoo.com/) for its products. Owl is a modern\nframework, written in Typescript, taking the best ideas from React and Vue in a\nsimple and consistent way. Owl's main features are:\n\n- a declarative component system,\n- a fine grained reactivity system similar to Vue,\n- hooks\n- fragments\n- asynchronous rendering\n\nOwl components are defined with ES6 classes and xml templates, uses an\nunderlying virtual DOM, integrates beautifully with hooks, and the rendering is\nasynchronous.\n\nQuick links:\n\n- [documentation](#documentation),\n- [changelog](CHANGELOG.md) (from Owl 1.x to 2.x),\n- [playground](https://odoo.github.io/owl/playground)\n\n## Example\n\nHere is a short example to illustrate interactive components:\n\n```javascript\nconst { Component, useState, mount, xml } = owl;\n\nclass Counter extends Component {\n  static template = xml`\n    \u003cbutton t-on-click=\"() =\u003e state.value = state.value + props.increment\"\u003e\n      Click Me! [\u003ct t-esc=\"state.value\"/\u003e]\n    \u003c/button\u003e`;\n\n  state = useState({ value: 0 });\n}\n\nclass Root extends Component {\n  static template = xml`\n    \u003cspan\u003eHello Owl\u003c/span\u003e\n    \u003cCounter increment=\"2\"/\u003e`;\n\n  static components = { Counter };\n}\n\nmount(Root, document.body);\n```\n\nNote that the counter component is made reactive with the [`useState` hook](doc/reference/hooks.md#usestate).\nAlso, all examples here uses the [`xml` helper](doc/reference/templates.md#inline-templates) to define inline templates.\nBut this is not mandatory, many applications will load templates separately.\n\nMore interesting examples can be found on the\n[playground](https://odoo.github.io/owl/playground) application.\n\n## Documentation\n\n### Learning Owl\n\nAre you new to Owl? This is the place to start!\n\n- [Tutorial: create a TodoList application](doc/learning/tutorial_todoapp.md)\n- [How to start an Owl project](doc/learning/quick_start.md)\n- [How to test Components](doc/learning/how_to_test.md)\n\n### Reference\n\n- [Overview](doc/readme.md)\n- [App](doc/reference/app.md)\n- [Component](doc/reference/component.md)\n- [Component Lifecycle](doc/reference/component.md#lifecycle)\n- [Concurrency Model](doc/reference/concurrency_model.md)\n- [Dev mode](doc/reference/app.md#dev-mode)\n- [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)\n- [Environment](doc/reference/environment.md)\n- [Error Handling](doc/reference/error_handling.md)\n- [Event Handling](doc/reference/event_handling.md)\n- [Form Input Bindings](doc/reference/input_bindings.md)\n- [Fragments](doc/reference/templates.md#fragments)\n- [Hooks](doc/reference/hooks.md)\n- [Loading Templates](doc/reference/app.md#loading-templates)\n- [Mounting a component](doc/reference/app.md#mount-helper)\n- [Portal](doc/reference/portal.md)\n- [Precompiling templates](doc/reference/precompiling_templates.md)\n- [Props](doc/reference/props.md)\n- [Props Validation](doc/reference/props.md#props-validation)\n- [Reactivity](doc/reference/reactivity.md)\n- [Rendering SVG](doc/reference/templates.md#rendering-svg)\n- [Refs](doc/reference/refs.md)\n- [Slots](doc/reference/slots.md)\n- [Sub components](doc/reference/component.md#sub-components)\n- [Sub templates](doc/reference/templates.md#sub-templates)\n- [Templates (Qweb)](doc/reference/templates.md)\n- [Translations](doc/reference/translations.md)\n- [Utils](doc/reference/utils.md)\n\n### Other Topics\n\n- [Notes On Owl Architecture](doc/miscellaneous/architecture.md)\n- [Comparison with React/Vue](doc/miscellaneous/comparison.md)\n- [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)\n- [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)\n- [Notes on compiled templates](doc/miscellaneous/compiled_template.md)\n- [Owl devtools extension](doc/tools/devtools.md)\n\n## Installing Owl\n\nOwl is available on `npm` and can be installed with the following command:\n\n```\nnpm install @odoo/owl\n```\nIf you want to use a simple `\u003cscript\u003e` tag, the last release can be downloaded here:\n\n- [owl](https://github.com/odoo/owl/releases/latest)\n\n## Installing Owl devtools\n\nThe Owl devtools browser extension is also available in the [release](https://github.com/odoo/owl/releases/latest):\nUnzip the owl-devtools.zip file and follow the instructions depending on your browser:\n\n### Chrome\n\nGo to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.\nSelect the devtools-chrome folder and that's it, your extension is active! \nThere is a convenient refresh button on the extension card (still on the same admin page) to update your code. \nDo note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.\n\n### Firefox \nGo to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.\nSelect any file in the devtools-firefox folder and that's it, your extension is active! \nHere, you can use the reload button to refresh the extension.\n\nNote that you may have to open another window or reload your tab to see the extension working.\nAlso note that the extension will only be active on pages that have a sufficient version of owl.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodoo%2Fowl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodoo%2Fowl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodoo%2Fowl/lists"}