Open Source · LGPL-3.0

The React + Odoo bridge
that just works

odoo-react is a two-layer open-source framework that lets you build React 19 + Mantine 8 components inside any Odoo view — without Shadow DOM hacks, without Enterprise, without touching Odoo core.

View on GitHub Live Demo →

4,400+

Automated tests

88%

Code coverage

Odoo 16–19

Version support

LGPL-3.0

Open source license

Architecture

Three layers. Clean separation.

Kernel handles generic micro-frontend infrastructure. Bridge handles Odoo integration. Addons handle business logic. Nothing leaks between layers.

Layer 01

Kernel

@shachain/react-micro-frontend

Host-agnostic micro-frontend infrastructure. React-to-Web-Component engine, Mantine theme, i18n bootstrap, shared entry stubs. No Odoo dependency — runs in any host.

Layer 02

Bridge

@shachain/odoo-react

Odoo integration layer. OWL service injection, cross-version RPC adapter (16/17/18/19), SystemJS importmap bootstrap, MantineProvider-per-component strategy.

Layer 03

Addons

sc_react_* / odoo_react_*

Consumer addons built on the bridge. Each is an independent System.register chunk with its own vite.config.ts. Zero coupling between addons at the JS layer.

Design decisions

Why we built it this way

No Shadow DOM

Mantine Portals (Modal, Drawer, Menu) render to document.body. CSS variables inherit correctly across all Odoo versions — no workarounds, no style leakage.

SystemJS Architecture

Bypasses Odoo's asset bundler entirely. Works on Odoo 16–19 without Enterprise, without modifying Odoo core, without version conflicts.

Test-Driven by Default

4,400+ automated tests, 88% coverage. RED-GREEN-REFACTOR workflow built in — every commit is verified. Vitest + Playwright Component Tests.

Multi-Version Support

One codebase targets Odoo 16, 17, 18, and 19. RPC and ORM differences are handled by the bridge adapter — your code stays clean.

Quick start

From zero to React component
in Odoo in 5 minutes

Install the bridge addon, register your component with defineAddon(), and drop a Web Component tag in any Odoo view. No webpack, no separate build server, no iframe.

1Install odoo_react_bridge from the App Store
2Scaffold a new addon: npx @shachain/create-odoo-addon my_addon
3Define components in react/index.ts
4npm run build → System.register chunk in static/lib/
5Use <my-component /> in any Odoo XML view

// react/index.ts

import { defineAddon } from '@shachain/odoo-react';

import MyDashboard from './components/MyDashboard';

export default defineAddon({

specifier: 'my_addon',

components: {

'my-dashboard': MyDashboard,

}

});

<my-dashboard

record-id="{{ record.id.value }}"

The React + Odoo bridgethat just works