use-dom

SKILL.md

Run web-only libraries in Expo apps by rendering them in webviews on native and as-is on web.

Supports any React web library (recharts, react-syntax-highlighter, canvas, WebGL) without modification by wrapping it in a DOM component file with the 'use dom'; directive

Passes serializable props and async functions from native to webview, enabling bidirectional communication between native and web contexts

Includes webview configuration options via the dom prop: scroll control, safe area behavior, manual sizing, and style overrides

Works with Expo Router navigation APIs; router state hooks require passing values as props from native parent components

Renders in WKWebView on iOS, WebView on Android, and as standard React on web with identical code

What are DOM Components?

DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like recharts, react-syntax-highlighter, or any React web library in your Expo app without modification.

When to Use DOM Components

Use DOM components when you need:

Web-only libraries — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs

Migrating web code — Bring existing React web components to native without rewriting

Complex HTML/CSS layouts — When CSS features aren't available in React Native

iframes or embeds — Embedding external content that requires a browser context

Canvas or WebGL — Web graphics APIs not available natively

When NOT to Use DOM Components

Avoid DOM components when: