🦷 DenCT — Dental CBCT Viewer

📖 API reference — the full component props, imperative ref, and /core exports. Documentation per language:

🇬🇧 English · 🇩🇪 Deutsch · 🇪🇸 Español · 🇭🇺 Magyar

DenCT is an embeddable dental CBCT / CT DICOM viewer for React + TypeScript. Load several CTs at once and switch between them; MPR and true-3D views (with render presets, colormaps and a low/medium/high quality control), panoramic (OPG) reconstruction along the dental arch, perpendicular cross-sections, guided implant planning with nerve/sinus/neighbour safety clearances and bone quality (Misch D1–D5), a printable drill-guide (STL) export, and configurable image (PNG/JPG) and PDF report exports — all in a 4-language UI (EN/DE/ES/HU). Everything runs locally in the browser — no upload. Built on Cornerstone3D and vtk.js.

🔗 Repository: https://github.com/ZoliQua/Dental-CBCT-Viewer

---

📦 Installation

npm install dental-cbct-viewer react react-dom

Requirements: React 18 or 19 (peer dependency); a bundler that supports the exports field, ESM, Web Workers and WASM (Vite, webpack 5, Next.js, Rollup). The heavy imaging libraries (Cornerstone3D, vtk.js, jsPDF, dicom-parser) are regular dependencies and are installed for you.

⚠️ Cross-origin isolation. The DICOM decode workers use SharedArrayBuffer, so the host page must be served with:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Without these headers, image decoding will not run.

🚀 Quick start

Render DicomViewer and import the stylesheet once:

import { DicomViewer } from "dental-cbct-viewer";
import "dental-cbct-viewer/style.css";

export function Planner() {
  return (
    <div style={{ height: "100vh" }}>
      <DicomViewer lang="en" />
    </div>
  );
}

The viewer fills its parent, so give it a sized container. Dark mode is the default and is scoped to the viewer's own root — it never touches the host page's theme.

🎛️ Imperative API (ref)

import { useRef } from "react";
import { DicomViewer, type DicomViewerHandle } from "dental-cbct-viewer";
import "dental-cbct-viewer/style.css";

function App() {
  const ref = useRef<DicomViewerHandle>(null);

  return (
    <>
      <button onClick={() => ref.current?.loadSample()}>Load sample</button>
      <button onClick={() => ref.current?.exportPdf()}>Export PDF</button>
      <DicomViewer
        ref={ref}
        initialLayout="1+3"
        onImplantsChange={(implants) => console.log(implants.length, "implants")}
        onPlanChange={(plan) => localStorage.setItem("plan", JSON.stringify(plan))}
      />
    </>
  );
}

Handle methods: getImplants, addImplant, updateImplant, removeImplant, getPlan, loadPlan, loadStudy(files), loadSample, setLayout, setActiveView, exportPdf, exportGuideStl.

Props: patientId, patientName, initialPlan, initialLayout, lang, onPlanChange, onImplantsChange, className, embedded.

🧩 Framework-free core (/core)

Pure, React-free building blocks run in Node, tests or your own logic — the implant data model + system catalog and all the geometry/analysis math:

import {
  IMPLANT_SYSTEMS, getImplantSystem,   // implant catalog
  implantWorldAxis, evaluateImplant,   // geometry + nerve/sinus/neighbour safety
  classifyBone, sampleImplantBoneHU,   // Misch D1–D5 bone quality
} from "dental-cbct-viewer/core";

The heavy CSG kernel (drill-guide Boolean via manifold-3d) is loaded lazily, so importing /core for the geometry/safety helpers stays light.

✨ Highlights

• 🗂️ Multi-study — load several CTs (DICOM folders, .dcm files, GALILEOS and OneVolume/Morita folders) into a left-panel series tree and switch between them instantly; each study keeps its own plan
• 🧊 True-3D volume rendering with render presets (incl. translucent X-ray), colormaps (Grayscale / Cool / Warm / Spectral / Inverted) and a Low/Medium/High quality control, intersecting slice planes and a crop box
• 🩻 MPR (axial / sagittal / coronal) with linked crosshairs, plus panoramic (OPG) reconstruction and tiltable cross-sections along a draggable dental arch curve
• 🦷 Guided implant planning — 3D implant + drill sleeve, nerve / sinus / neighbour safety clearances, bone quality (Misch D1–D5, indicative class from uncalibrated CBCT gray values at the implant site)
• 🖨️ Printable drill guide (STL) via constructive solid geometry (manifold-3d). The exported guide has no integrated drill stop and no metal sleeve, and tissue fit requires a registered surface scan — verify the fit on a printed model before any clinical use.
• 🖼️ Image export (PNG/JPG) — pick views, resolution, on-image info to burn in, separate files or one grid — and a configurable PDF report (toggle header fields and sections, portrait/landscape; jsPDF with a bundled Unicode font so Hungarian accents render)
• 🔗 Plan save/load (JSON), imperative ref API, controlled props/callbacks
• 🔒 100% local — DICOM parsing, rendering and exports run in the browser; nothing is uploaded
• 🌐 4 UI languages (EN / DE / ES / HU) · 🌓 self-scoped dark mode · 🧱 embeddable

⚙️ Notes for host bundlers

• Vite: works out of the box.
• Next.js / webpack 5: render the viewer in a client component ("use client") — it reads the DOM on mount. Ensure the COOP/COEP headers above are set (e.g. via next.config.js headers). Worker/WASM assets are pre-bundled into the package.

🔒 Security & privacy

• No network egress. The viewer never uploads scans or patient data — all parsing, rendering and exports happen in the browser. It contacts no analytics or third-party host; the only fetch is for its own bundled sample asset. Exported PDF/PNG/STL/plan files are user-initiated downloads.
• Untrusted input is bounded. Decompression enforces an output budget (gzip-bomb safe), the native-volume decoders validate geometry against hard caps before allocating, and plan JSON is parsed with a strict field allowlist (no prototype pollution).
• Content-Security-Policy. The hosted demo ships a strict CSP (connect-src 'self', object-src 'none', no unsafe-eval for scripts). When you embed the component, set an appropriate CSP on your host page — the library needs script-src 'wasm-unsafe-eval' and worker-src blob: for the WASM decode workers, plus the COOP/COEP headers below.

📄 License & disclaimer

MIT © Zoltán Dul. Bundled Roboto font under Apache-2.0 (see LICENSE).

Medical disclaimer: research/demonstration software only — not a certified medical device and not for clinical diagnosis, treatment planning, precise measurement or implant workflows.