use-dom

Render web-only React components in Expo apps via webview.

Updated Aug 23, 2026

Search Tags:#migration #react native #web components #expo #dom #webview

Ready to run

npx skills add https://github.com/cgasgarth/opencode-config --skill use-dom-cgasgarth

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/cgasgarth/opencode-config/tree/main/skill/expo-app-design/skills/use-dom
Command: npx skills add https://github.com/cgasgarth/opencode-config --skill use-dom-cgasgarth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows you to seamlessly integrate web-only React libraries and existing web code into your Expo mobile applications, enabling incremental migration and leveraging the vast web ecosystem on native platforms.

Core Features & Use Cases

Web Library Integration: Use charting libraries (recharts), syntax highlighters, and other DOM-dependent web packages directly in your Expo app.
Incremental Migration: Gradually bring your React web components to native without a full rewrite.
Complex Layouts: Implement intricate HTML/CSS designs that are difficult or impossible with standard React Native components.
Use Case: Embed a complex data visualization chart built with recharts into your Expo app, which would otherwise require a native charting library or a separate webview implementation.

Quick Start

Create a new file with the 'use dom'; directive at the top to define a DOM component.

Frequently Asked Questions about use-dom

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

FAQPage Schema

How do I use web-only React components in an Expo React Native app?▼

You can use web-only React components in an Expo app by rendering them in a webview on native platforms using the 'use dom' directive. This bridges web libraries to native without requiring a full rewrite of your codebase.

Can I migrate my React web codebase to React Native incrementally?▼

Yes, you can migrate a React web codebase to React Native incrementally by rendering existing DOM-dependent components in isolated webviews. This allows you to gradually adopt native components while maintaining current web functionality.

Does Expo support rendering complex web libraries like charting tools on native?▼

Expo supports rendering complex web libraries like charting tools on native platforms by isolating them in a webview using DOM components. This allows packages like recharts to function without needing native equivalents.

What is the best way to render complex HTML and CSS layouts in React Native?▼

The best way to render complex HTML and CSS layouts in React Native is by using Expo DOM components. They allow you to implement intricate web designs directly within your application by leveraging isolated web rendering.

Do I need a separate webview implementation to use rich text editors in Expo?▼

You do not need a separate webview implementation to use rich text editors in Expo. By using the 'use dom' directive, the Skill handles webview rendering automatically for DOM-dependent packages.

Why use Expo DOM components instead of finding native alternatives for web libraries?▼

Use Expo DOM components instead of native alternatives to leverage the vast web ecosystem directly. It saves development time by allowing you to use existing web packages like syntax highlighters without searching for or integrating separate native libraries.