# meliorence/react-native-render-html

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/meliorence-react-native-render-html).**

3,644 stars · 627 forks · TypeScript · bsd-2-clause

## Links

- GitHub: https://github.com/meliorence/react-native-render-html
- Homepage: https://meliorence.github.io/react-native-render-html/
- awesome-repositories: https://awesome-repositories.com/repository/meliorence-react-native-render-html.md

## Topics

`android` `css` `customizable` `html` `ios` `react-native` `render` `styling`

## Description

This project is an HTML-to-native renderer and cross-platform UI component that transforms web-standard markup into native mobile components. It functions as a CSS-to-native style engine and a customizable HTML parser, allowing web content to be displayed in mobile applications without the use of a full web view.

The library is distinguished by its ability to intercept and modify the HTML DOM tree before rendering, enabling the injection of custom components, the filtering of specific nodes, and the overriding of default element translation models. It also implements a sophisticated style resolution system that handles CSS inheritance, specificity, and the mapping of standard CSS properties to compatible native styles.

The system covers a broad range of content rendering capabilities, including native link rendering with click interception and comprehensive media management to prevent layout shifts. It provides specialized processing for HTML lists, preformatted text, and CSS-standard whitespace collapsing, while offering tools for system font resolution and render tree inspection.

## Tags

### User Interface & Experience

- [CSS-to-Native Style Translators](https://awesome-repositories.com/f/user-interface-experience/css-to-native-style-translators.md) — Processes CSS properties into compatible native styles and validates font declarations against system fonts. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/css-processing))
- [HTML to Native Converters](https://awesome-repositories.com/f/user-interface-experience/html-to-native-converters.md) — Transforms HTML markup into a native component tree via an intermediate data structure.
- [Cross-Platform Rendering](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/web-based-native-ui/cross-platform-rendering.md) — Renders web-standard HTML content into native mobile user interfaces without utilizing a web view.
- [CSS-Driven Styling Engines](https://awesome-repositories.com/f/user-interface-experience/css-driven-styling-engines.md) — Translates CSS properties and inheritance rules into compatible native styles for mobile view hierarchies.
- [CSS Whitespace Collapsers](https://awesome-repositories.com/f/user-interface-experience/css-whitespace-collapsers.md) — Removes insignificant white-spaces from HTML content following CSS standards to ensure consistent text layout. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/transient-render-engine))
- [Custom Element Renderers](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers.md) — Defines custom renderers and behaviors for specific HTML tags to control their native appearance. ([source](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md))
- [Custom Component Injection](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection.md) — Allows replacing default HTML tag renders with user-defined native components for specialized behavior.
- [Element Translation Models](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/element-translation-models.md) — Defines how specific HTML tags are translated into native views by modifying custom element models. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/transient-render-engine))
- [Customizable HTML Parsers](https://awesome-repositories.com/f/user-interface-experience/customizable-html-parsers.md) — Provides a customizable parser that intercepts the DOM tree to inject components or filter nodes before rendering.
- [HTML-to-Native Renderers](https://awesome-repositories.com/f/user-interface-experience/html-to-native-renderers.md) — Transforms HTML markup into native mobile components by parsing the DOM and applying CSS styles.
- [Image Placeholders](https://awesome-repositories.com/f/user-interface-experience/image-placeholders.md) — Reserves space using placeholder boxes based on image attributes to prevent content jumping during load. ([source](https://meliorence.github.io/react-native-render-html/docs/content/images))
- [Native HTML Image Renderers](https://awesome-repositories.com/f/user-interface-experience/native-html-image-renderers.md) — Displays images within HTML content by scaling them to fit container width and applying object-fit properties. ([source](https://meliorence.github.io/react-native-render-html/docs/content/images))
- [Native UI Renderers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/native-ui-renderers.md) — Transforms HTML markup into a native component tree by assembling a style-compatible intermediate tree. ([source](https://cdn.jsdelivr.net/gh/meliorence/react-native-render-html@master/README.md))
- [HTML Link Converters](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/native-ui-renderers/html-link-converters.md) — Converts anchor tags into clickable native elements and resolves relative addresses using a specified base location. ([source](https://meliorence.github.io/react-native-render-html/docs/content/anchors))
- [Aspect Ratio Preserving Resizing](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/image-bounding-boxes/aspect-ratio-preserving-resizing.md) — Resizes images and embedded content to fit screen width while preserving the original aspect ratio. ([source](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md))
- [Style Inheritance Systems](https://awesome-repositories.com/f/user-interface-experience/style-inheritance-systems.md) — Implements a style engine that propagates visual properties from parent HTML elements down to their native descendants. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/css-processing))
- [Style Specificity Resolution](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-specificity-resolution.md) — Applies styles based on a strict precedence hierarchy where inline styles override IDs, classes, and tags. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/css-processing))
- [HTML-to-Native Text Renderers](https://awesome-repositories.com/f/user-interface-experience/text-rendering/html-to-native-text-renderers.md) — Transforms HTML text elements into native views while managing margin collapsing and whitespace according to CSS rules. ([source](https://meliorence.github.io/react-native-render-html/docs/content/textual))
- [Structural Behavior Modifiers](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/structural-behavior-modifiers.md) — Modifies the structural behavior of tags, such as switching block-level elements to inline. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/custom-renderers))
- [Tag-Based Style Mappings](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/style-to-element-mappings/tag-based-style-mappings.md) — Maps styles to HTML elements based on tag name, class, or ID to override default rendering. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/styling))
- [Image Dimension Constraints](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/interface-configuration-definitions/component-attributes/attribute-overrides/image-dimension-constraints.md) — Sets maximum widths and initial load dimensions for images to prevent viewport overflow and layout instability. ([source](https://github.com/meliorence/react-native-render-html/blob/release/4.2/README.md))
- [Cumulative Layout Shift Prevention](https://awesome-repositories.com/f/user-interface-experience/cumulative-layout-shift-prevention.md) — Prevents layout shifts by calculating image dimensions and reserving space before asynchronous assets load.
- [HTML Content Processing](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing.md) — Intersects the parsing process to alter node data or children before native conversion. ([source](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md))
- [Content Prerendering](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/content-prerendering.md) — Parses and inspects the DOM tree before rendering to pre-cache media and fetch data for improved page loads. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering))
- [Error Placeholders](https://awesome-repositories.com/f/user-interface-experience/image-placeholders/error-placeholders.md) — Displays placeholder boxes containing alt text when an image source is unreachable. ([source](https://meliorence.github.io/react-native-render-html/docs/content/images))
- [Native HTML List Renderers](https://awesome-repositories.com/f/user-interface-experience/native-html-list-renderers.md) — Transforms ordered and unordered HTML lists into native views using configurable markers and custom counter styles. ([source](https://meliorence.github.io/react-native-render-html/docs/content/lists))
- [Virtual Node Lifecycle Interception](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/virtual-node-trees/virtual-node-lifecycle-interception.md) — Intercepts the virtual node tree lifecycle to modify DOM elements or inject components before rendering.
- [Image Rendering Overrides](https://awesome-repositories.com/f/user-interface-experience/rich-text-renderers/image-rendering-overrides.md) — Provides custom implementations for image components to add interactivity or alternative loading states. ([source](https://meliorence.github.io/react-native-render-html/docs/content/images))
- [Semantic Content Markers](https://awesome-repositories.com/f/user-interface-experience/semantic-content-markers.md) — Assigns semantic metadata to HTML elements based on tags or attributes to inform styling and behavior. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/transient-render-engine))
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Provides support for applying standard CSS classes and styles to HTML elements using native style objects. ([source](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md))
- [Inline Style Processing](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/inline-style-processing.md) — Converts HTML style attributes into native styles via a compatibility layer that filters unsupported properties. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/styling))
- [DOM Node Filtering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/predicate-based-filtering/dom-node-filtering.md) — Selectively excludes specific HTML tags or nodes from the final render based on custom logic. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering))
- [Whitespace Collapsing Engines](https://awesome-repositories.com/f/user-interface-experience/whitespace-collapsing-engines.md) — Processes text nodes to ensure consistent native text layout by collapsing whitespace according to CSS standards.

### Mobile Development

- [Native Styling Integration](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/native-styling-integration.md) — Provides a compatibility layer that translates standard CSS properties into native mobile styling primitives.

### Software Engineering & Architecture

- [Intermediate Render Trees](https://awesome-repositories.com/f/software-engineering-architecture/trees/tree-node-reorderers/dom-node-manipulators/intermediate-render-trees.md) — Transforms HTML DOM nodes into an intermediate data structure to manage CSS inheritance and whitespace. ([source](https://meliorence.github.io/react-native-render-html/))
- [View Hierarchy Traversers](https://awesome-repositories.com/f/software-engineering-architecture/recursive-validation-engines/recursive-tree-traversers/view-hierarchy-traversers.md) — Recursively traverses the parsed HTML structure to assemble a corresponding hierarchy of native views.

### Web Development

- [Component-Based Renderers](https://awesome-repositories.com/f/web-development/html-rendering/component-based-renderers.md) — Maps standard HTML tags and attributes to native functional UI components. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/rendering))
- [Style Cascading Engines](https://awesome-repositories.com/f/web-development/interactive-element-styling/style-cascading-engines.md) — Implements a style cascading engine to resolve final element styles based on CSS specificity and inheritance rules.
- [Preformatted Text Rendering](https://awesome-repositories.com/f/web-development/preformatted-text-rendering.md) — Preserves all whitespace and line breaks within preformatted tags to maintain source visual layout. ([source](https://meliorence.github.io/react-native-render-html/docs/content/textual))
- [Advanced CSS Styling](https://awesome-repositories.com/f/web-development/web-standards/advanced-css-styling.md) — Implements advanced formatting capabilities like whitespace collapsing and list-style types that exceed standard native style engines. ([source](https://meliorence.github.io/react-native-render-html/docs/flow/css-processing))

### Data & Databases

- [Browser Resource Interceptions](https://awesome-repositories.com/f/data-databases/data-loading-optimizations/loading-interception/browser-resource-interceptions.md) — Intercepts anchor clicks to trigger custom logic and prevent default browser page reloads. ([source](https://meliorence.github.io/react-native-render-html/docs/content/anchors))
- [DOM Content Modification](https://awesome-repositories.com/f/data-databases/key-value-stores/key-deletion/dom-content-modification.md) — Alters the parsed HTML structure via callbacks to remove elements or update text before rendering. ([source](https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering))

### Security & Cryptography

- [HTML Content Filters](https://awesome-repositories.com/f/security-cryptography/application-and-system-security/browser-security/content-filtering-blocking/content-filtering/html-content-filters.md) — Blocks specific tags, CSS rules, or node patterns to sanitize and filter content. ([source](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md))