Skip to main content

Getting started

@nikpnevmatikos/html-renderer renders HTML in React Native. It is written in TypeScript, ships zero native modules, and gives you real CSS: a stylesheet prop that accepts selectors and resolves them with proper specificity.

Why this renderer​

  • Zero native code. Works on iOS, Android and web (via react-native-web), and in Expo Go without a dev build.
  • New Architecture compatible out of the box. There is nothing native to migrate.
  • Real CSS stylesheets. Type, class, id, descendant and child selectors, with specificity and source order per the spec.
  • A transient render tree. HTML is parsed to a DOM, resolved into a styled render tree, and emitted as <Text>, <View> and <Image> elements.
  • Full style inheritance and cascade, plus the box-model basics.
  • Extensible. Custom renderers, custom element models, DOM transform hooks and per-renderer config. Plugin packages use the same API.
  • Entity-encoded input handled. HTML that arrives as &lt;p&gt;hello&lt;/p&gt; from a CMS or API, even double-encoded, is detected and rendered as HTML.
  • Typed end-to-end and covered by 130+ unit tests.

Install​

npm install @nikpnevmatikos/html-renderer

Peer dependencies: react >= 18 and react-native >= 0.73.

Quick start​

import { HtmlRenderer } from '@nikpnevmatikos/html-renderer';

export default function Screen() {
  return (
    <HtmlRenderer
      html={`<h1>Hello</h1><p>This is <strong>bold</strong> and <a href="https://x.dev">a link</a>.</p>`}
    />
  );
}

That is the whole integration. Everything else on this site is optional: styling, custom rendering, plugins.

Try it without installing​

The repository's example app runs in Expo Snack. Open it, edit the HTML or the stylesheet, and watch the preview update:

Open the example in Snack

Snack must be on Expo SDK 56 or newer for the <video> section, because older Snack runtimes do not ship expo-video.

Where next​