use-dom

Run React web components verbatim in Expo apps via webview.

34|2|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/FilenCloudDienste/filen-ts --skill use-dom-filenclouddienste
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/FilenCloudDienste/filen-ts/tree/main/.claude/skills/use-dom
Command: npx skills add https://github.com/FilenCloudDienste/filen-ts --skill use-dom-filenclouddienste

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you reuse existing React web code inside an Expo app by running it in a controlled webview environment while still rendering as-is on web.

Core Features & Use Cases

  • Use Expo DOM components to render verbatim web UI: Render DOM-based React components in a webview on native platforms while behaving naturally on web.
  • Incremental migration of web libraries: Bring in web-only libraries (e.g., charts, syntax highlighters, rich editors) without rewriting them for React Native.
  • Expose native actions to webview code: Pass async functions from native to the DOM component to trigger alerts, save data, and other native behaviors.
  • Use Cases: Migrating existing UI, building complex HTML/CSS layouts, embedding iframes/embeds, and using canvas/WebGL where native equivalents are limited.

Quick Start

Create a new component file and add the directive 'use dom' at the top, then export a single default React component that accepts a typed dom prop from expo/dom.

Frequently Asked Questions about use-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run existing React web components inside an Expo app?

To run React web components inside an Expo app, use a 'use dom' directive at the top of your component file. The Skill renders verbatim DOM-based UI in a webview on native platforms while behaving naturally on web for incremental migration.

Can I use web-only libraries like charts and rich editors in Expo without rewriting them?

Yes, you can use web-only libraries like charts and rich editors in Expo without rewriting them. The Skill runs existing web code in a controlled webview environment, allowing you to migrate complex HTML/CSS layouts incrementally.

How do I call native functions from a DOM component rendered in a webview?

You call native functions from a DOM component by passing async functions from native to the webview code. This deterministic native-to-web action passing allows you to trigger alerts, save data, and execute other native behaviors directly.

Does Expo support rendering canvas and WebGL content on native platforms?

Yes, Expo supports rendering canvas and WebGL content on native platforms using this Skill. It targets scenarios where native equivalents are limited by embedding canvas or WebGL elements via a webview-driven environment.

What is the best way to incrementally migrate a React web app to React Native?

The best way to incrementally migrate a React web app to React Native is using a 'use dom' directive to render verbatim web UI inside Expo. This allows you to bring in web-only libraries and complex layouts without a full rewrite.

Are there limitations when embedding iframes in Expo using DOM components?

Embedding iframes in Expo using DOM components requires a root-level SKILL.md entry defining discoverable metadata. The Skill supports embeddings via a webview-driven environment, but you must use a typed expo/dom DOMProps prop for proper integration.