React Advanced Odontogram - v2.2.1

🦷 React Advanced Odontogram

📖 Full documentation is available per language:

🇬🇧 English · 🇩🇪 Deutsch · 🇪🇸 Español · 🇫🇷 Français · 🇮🇹 Italiano · 🇭🇺 Magyar · 🇵🇱 Polski · 🇧🇷 Português (BR) · 🇸🇰 Slovenčina · 🇷🇺 Русский · 🇸🇦 العربية · 🇨🇳 简体中文

An interactive, SVG-based dental odontogram (dental chart) editor for React + TypeScript — with a full periodontal charting module, multi-surface caries/restorations, endodontic/prosthetic states, FDI/Universal/Palmer numbering, HL7 FHIR R4 export/import, optional ICDAS scoring, and a 12-language UI.

🔗 Live demo: https://react-odontogram-modul.vercel.app/
📚 API docs: https://zoliqua.github.io/React-Odontogram-Modul/

Odontogram editor preview

📦 Installation

npm install react-advanced-odontogram react react-dom

Requirements: React 18 or 19 (peer dependency); a bundler that supports the exports field and ESM (Vite, webpack 5, Next.js, Rollup, esbuild, Parcel). The package is ESM-only.

🚀 Quick start

Render OdontogramShell and import the stylesheet once:

import { OdontogramShell } from "react-advanced-odontogram";
import "react-advanced-odontogram/style.css";

export function Chart() {
  return <OdontogramShell language="en" numberingSystem="FDI" darkMode={false} />;
}

The imperative state API, the standalone PerioChart component, the guided tour, and all public types are named exports from the same entry point (OdontogramShell is also the default export):

import {
  OdontogramShell,        // also the default export
  PerioChart,             // standalone periodontal chart
  getOdontogramSummary,
  exportStatus, importStatus,   // JSON state serialization / hydration
  exportFhir, exportSvg, exportImage,
  setReadOnly, startIntroTour,
} from "react-advanced-odontogram";

SSR: the component is client-only (reads the DOM on mount). In Next.js render it in a Client Component ("use client") or via a client-only dynamic import. Assets are self-contained — tooth/icon SVGs are inlined into the bundle; there is no runtime asset fetch to configure. One instance per page in this release (engine state is a module-level singleton).

🦷 Periodontal charting

Full-mouth periodontal chart

Per-site probing depth, gingival margin, bleeding on probing (+ suppuration) at the six standard sites, with derived CAL, recession and whole-mouth %BOP; a graphical full-mouth perio chart (CEJ line, mm guide grid, pocket/margin curve, anatomical diamond index tiles), 2017 staging/grading, and per-site FHIR export (LOINC periodontal panel 74029-0). Available as an Odontogram | Periodontal Status view toggle and as a separately-invocable PerioChart component.

✨ Highlights

🦷 Permanent / primary / implant / missing teeth; substrate, restorations (crown/inlay/onlay/veneer/bridge × materials), removable & implant prosthetics
🔍 Multi-surface caries & fillings (ICDAS / CARS severity, root & radiographic caries), endo & AAE pulp diagnosis, apical diagnosis, peri-implant status, wear, discoloration, orthodontics
🩺 Full periodontal module (see above) + 2017 classification
🔗 HL7 FHIR R4 export/import; JSON export/import with migrations
🖼️ PNG / JPG / SVG chart export and a PDF report (jsPDF, lazy-loaded)
🔢 FDI / Universal / Palmer numbering · 🌐 12 UI languages (HU/EN/DE/ES/IT/SK/PL/RU/PT-BR/AR/ZH/FR, Arabic RTL) · 🎨 theming via --odon-* CSS variables · 🧩 plugin system · ⌨️ keyboard accessibility

📖 Documentation

Per-language guides are linked at the top of this file. Full API reference (TypeDoc):

📚 https://zoliqua.github.io/React-Odontogram-Modul/