diff --git a/apps/website/static/llms-full.txt b/apps/website/static/llms-full.txt
new file mode 100644
index 00000000..49d40925
--- /dev/null
+++ b/apps/website/static/llms-full.txt
@@ -0,0 +1,7410 @@
+# Overview and Getting Started
+
+## What it is
+
+`@native-html/render` is an iOS/Android pure-JavaScript React Native component that translates HTML markup into 100% native React Native views (no WebView). It balances HTML/CSS standard compliance with lightweightness and is designed to be highly customizable: you can define custom renderers for specific tags (with control over children rendering), provide styles targeting tags, classes and ids, and tamper with the DOM. The best use cases are rendering predictable content where you know the tags and classes in advance — for example CMS output, API-delivered articles, or sections of a web page. It is not a web engine: it does not execute JavaScript, and it is not the right tool for arbitrary, unpredictable web content. If you need full web semantics, use `react-native-webview` instead (at the cost of performance, since it uses the system Web View).
+
+The package was previously published as `react-native-render-html`. The v1 release of `@native-html/native` follows exactly the same API, so migrating is plug-and-play.
+
+## Should I use it?
+
+Yes, if:
+
+- You want HTML translated into React Native views (see the Architecture page).
+- You want a design that balances HTML/CSS compliance with lightweightness.
+- You want extensive customization: custom renderers per tag, styling by tag/class/id, DOM tampering.
+
+No, if:
+
+- Your use case is very simple — you may prefer rolling a tiny renderer of your own (see "Reinvent the Wheel" below).
+- You need a full web engine with JavaScript execution and full Web standards support — use `react-native-webview` instead.
+
+Best use cases:
+
+- Predictable content where you know the tags and classes in advance (CMS, API endpoints).
+- Rendering article-like sections of a web page (see Root Selection under DOM tampering for selecting a sub-tree).
+- Not recommended for arbitrary, unpredictable content.
+
+## Install
+
+```bash
+npm install @native-html/render
+```
+
+```bash
+yarn add @native-html/render
+```
+
+The Foundry release is v6:
+
+```bash
+npm install --save-prod @native-html/render
+```
+
+## Minimal usage
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `
+<p style='text-align:center;'>
+  Hello World!
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+The `source` prop specifies the HTML content to load. It also supports a `uri` field for remote loading and a `dom` field for asynchronous DOM pre-processing (see Prerendering under DOM tampering).
+
+> Important: The `contentWidth` prop allows proper image scaling. See the Images page for details.
+
+> Tip: You can inspect the pre-render tree representation (Transient Render Tree) for any input — useful when authoring custom renderers or debugging layout.
+
+The pre-render tree for the example above looks like:
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="p">
+      <TPhrasing anonymous>
+        <TText anonymous data="Hello World!" />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+## Core libraries (monorepo packages)
+
+- `@native-html/css-processor` — CSS processing pipeline.
+- `@native-html/transient-render-engine` — engine that builds the Transient Render Tree (TRT) from parsed HTML.
+
+## Reinvent the Wheel: a 40-line HTML renderer
+
+To understand how `@native-html/render` works, here is a toy HTML renderer in about 40 lines. It has many limitations the real library overcomes, but it shows the core idea: parse HTML to a DOM-like tree, then recursively map nodes to React Native components.
+
+It uses `htmlparser2` to produce a proxy DOM representation.
+
+```jsx title="RenderHtml.jsx"
+import {Text, View} from 'react-native';
+import {parseDocument, ElementType} from 'htmlparser2';
+import React, {PureComponent} from 'react';
+
+export default class RenderHtml extends PureComponent {
+  ignoredTags = ['head'];
+  textTags = ['span', 'strong', 'em'];
+
+  renderTextNode(textNode, index) {
+    return <Text key={index}>{textNode.data}</Text>;
+  }
+
+  renderElement(element, index) {
+    if (this.ignoredTags.indexOf(element.name) > -1) {
+      return null;
+    }
+    const Wrapper = this.textTags.indexOf(element.name) > -1 ? Text : View;
+    return (
+      <Wrapper key={index}>
+        {element.children.map((c, i) => this.renderNode(c, i))}
+      </Wrapper>
+    );
+  }
+
+  renderNode(node, index) {
+    switch (node.type) {
+      case ElementType.Text:
+        return this.renderTextNode(node, index);
+      case ElementType.Tag:
+        return this.renderElement(node, index);
+    }
+    return null;
+  }
+
+  render() {
+    const document = parseDocument(this.props.html);
+    return document.children.map((c, i) => this.renderNode(c, i));
+  }
+}
+```
+
+What `render` does:
+
+1. `parseDocument` returns the root DOM node of the document.
+2. Map the root's children through `renderNode`.
+3. `renderNode` dispatches: text nodes go to `renderTextNode`, element nodes to `renderElement`, everything else (comments, scripts, stylesheets) returns `null`.
+
+`renderTextNode` is trivial. `renderElement` chooses between a React Native `Text` and `View` wrapper depending on whether the tag is in `textTags`. This is to avoid rendering glitches when embedding `View` inside `Text` — addressed properly via hoisting in the full library.
+
+> Note: We refer to "the DOM" and "DOM nodes" even though `htmlparser2` only exposes a subset of the DOM API for lightweightness.
+
+### When the toy is enough — and when it isn't
+
+You can extend the toy with relatively easy additions:
+
+1. Custom renderers for specific tags such as `<img>`, `<ul>`, etc.
+2. Styles for specific tags and classes.
+
+You will hit a substantial increase in complexity once you need:
+
+1. Inline styles — translate `style` attribute values into React Native compatible styles. Unsupported style values can crash the app natively.
+2. Whitespace collapsing — the rules from the `white-space` CSS property.
+3. URL resolution — relative URLs, `<base>` elements, etc.
+4. Hoisting — React Native does not handle `View` elements well inside `Text`, so block-like nodes inside phrasing context must be hoisted up the tree to render inside `View`s. See the transient-render-engine docs.
+5. Full CSS inheritance — for example, a `<div>` may have text properties such as `color`, but the default React Native mapping for `<div>` is `View`, which does not support text properties. The CSS processing pipeline handles this.
+
+`@native-html/render` handles all of the above and more out of the box.
+
+## FAQ
+
+### How To
+
+**How to intercept press events on links?**
+
+Use `renderersProps.a.onPress`. See the `RenderersProps` API reference (the `a` member).
+
+**I want to use a custom component to render some tags, how to do that?**
+
+Define custom renderers. See the Custom Rendering guide.
+
+**How to access the raw HTML from a custom renderer?**
+
+Use the `domNodeToHTMLString` utility.
+
+**How to render iframes?**
+
+Use `@native-html/iframe-plugin`.
+
+**How to set the default font size and family?**
+
+Use the `baseStyle` prop.
+
+**How to render inline images?**
+
+See "Example: Displaying Inline Images" in the Custom Renderers guide.
+
+**Aren't there better renderers for tables?**
+
+Yes, the default renderer is limited. Use `@native-html/table-plugin` or `@native-html/heuristic-table-plugin`.
+
+**How can I make textual content selectable?**
+
+Use the `defaultTextProps` prop to set `selectable: true` on all `Text` instances.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<span>
+  This text can be selected.
+</span>`
+};
+
+const defaultTextProps = {
+  selectable: true
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      defaultTextProps={defaultTextProps}
+    />
+  );
+}
+```
+
+Note: the end user will not be able to select across multiple blocks — this is a React Native limitation.
+
+### Troubleshooting
+
+**Warning: You seem to update the X prop of the Y component in short periods of time...**
+
+There is a detailed explanation on Stack Overflow under `@native-html/render, "You seem to update ..."`.
+
+**Custom font families don't work, what's happening?**
+
+You must register fonts available in your app with the `systemFonts` prop. This is called *font selection* and prevents native crashes from missing fonts. See Font Selection in the Textual content docs.
+
+Also: `fontWeight` and `fontStyle` modifiers (applied by default for tags such as `<h1>`) will cause the font to be missed on Android if you haven't registered your font with typefaces (for example via XML fonts).
+
+**Line breaks (`<br>`) seem to take up too much vertical space**
+
+Known bug. Use the `enableExperimentalBRCollapsing` prop. See Textual | Caveats | Line Breaks.
+
+**Isolated empty textual tags take up vertical space**
+
+Known bug. Use the `enableExperimentalGhostLinesPrevention` prop. See Textual | Caveats | Empty Tags.
+
+**Content after custom tags is not displayed, or appears inside instead of below**
+
+Typically happens when your custom tag is self-closing such as `<customtag />`. HTML5 strictly prohibits non-void elements from being self-closing, and a compliant parser must ignore the `/`. The parser therefore treats `<customtag />` as `<customtag>`, so any following content becomes a child of `<customtag>`. Two fixes:
+
+1. Replace `<customtag />` with `<customtag></customtag>` in your HTML.
+2. Set `recognizeSelfClosing` to `true` in the `htmlParserOptions` prop.
+
+**Sub and sup tags are not vertically shifted**
+
+Known React Native limitation, tracked on GitHub.
+
+**The application crashes on Android with react-native-screens**
+
+Likely a bug between `react-native-webview` and `react-native-screens`. See the Stack Overflow question "When rendering iframes, Android crashes while navigating back to stack screen".
+
+**Unable to resolve XXX from node_modules/YYY**
+
+Probably a package manager issue. See the Stack Overflow question "Unable to resolve XXX from module YYY".
+
+**Long image cannot show in full screen on Android**
+
+Limitation of Facebook's fresco library and the React Native `Image` component. Downsize the image.
+
+**Some anchors (`<a>`) are not accessible to screen readers**
+
+Because of a React Native bug, nested `Text` elements are not accessible, so a screen reader cannot identify `<a>` tags as links when they are grouped inside other textual elements. Example:
+
+```html
+<p>
+  Unfortunately,
+  <a href="https://domain.com">this hyperlink is not accessible</a>
+</p>
+```
+
+Luke Walczak from Callstack has a blog post explaining how to work around this issue. The workaround cannot be genericized — a fix in React Native itself is required.
+
+# Architecture and Data Flow
+
+Conceptual overview of how `RenderHTML` transforms an HTML string into React Native views: parsing, the Transient Render Engine (TRE), CSS processing, and the composite rendering pipeline.
+
+## Architecture Overview
+
+> Important: Consumers of this library can benefit greatly from understanding the basic data flow model to leverage its capabilities. Features such as props will touch on different areas of this data flow.
+
+### Hello World
+
+A minimal working example renders a simple HTML snippet through `RenderHTML`:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `
+<p style='text-align:center;'>
+  Hello World!
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+The resulting Transient Render Tree (TRT) for the snippet above is:
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="p">
+      <TPhrasing anonymous>
+        <TText anonymous data="Hello World!" />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+As laid out in the "Reinvent the Wheel" page, we need some logic to translate the DOM into a structure easily translatable into native elements. This data structure is called the Transient Render Tree (TRT), produced by the Transient Render Engine (TRE).
+
+### Data Flow
+
+The data-flow diagram (asset: `data-flow`) depicts the transformations involved in rendering an HTML snippet. The transformations from an HTML string to a React tree can be split into 3 steps:
+
+A. **HTML parsing.** The HTML code is parsed to form a DOM tree. This step is performed by the `htmlparser2` library.
+
+B. **TRT Construction.** The DOM tree is transformed into a TRT. Each node of this tree is referred to as a Transient Node (TNode) which has React Native compatible styles. This step is performed by `@native-html/transient-render-engine`.
+
+C. **Transient Render Tree Rendering.** The TRT is transformed into a React render tree (VDOM). TNodes are passed to internal and custom renderers.
+
+For more information on TRT construction, see the "Transient Render Engine" and "CSS Processing" sections below.
+
+## Transient Render Engine
+
+This section is an introduction to the TRE architecture.
+
+### Element Models
+
+**Element models** form the building block of the engine. These models specify how a DOM element of a particular tag should be translated. You can tamper with those models and add your own, making this library extremely customizable.
+
+#### HTMLElementModel
+
+To each standard tag is attached an **element model**, an instance of the `HTMLElementModel` class. Such a model has multiple fields describing different behaviors related to translation of those DOM elements. There are two ways to instantiate an element model:
+
+1. When changing an existing tag model with the `HTMLElementModel.extend` method. You can access default models via `defaultHTMLElementModels`.
+2. When registering a new tag with the `HTMLElementModel.fromCustomModel` static method.
+
+You will have to register custom and extended models with the `customHTMLElementModels` prop; see the "Custom Rendering" page for examples. Below is a list of fields that can be set when defining or extending HTML element models:
+
+- **`contentModel`** — How should this tag be translated? See the next subsection.
+- **`isVoid`** — Will be `true` for void elements, e.g. DOM elements which can't have children.
+- **`isOpaque`** — Will be `true` for elements whose children should not be translated. Useful for `<svg>` and other custom markups.
+- **`mixedUAStyles`** — Mixed User-Agent styles, e.g. default styles for this element. This is how default styles are set for tags.
+- **`getMixedUAStyles`** — A function which returns mixed UA styles given a minimal `TNodeDescriptor` and a DOM `Node`.
+- **`reactNativeProps`** — An object with three fields: `text`, `view` and `native`. Each field value is a props object that will be passed to the underlying native component at render time. Respectively for `Text`, `View` and all (catch-all).
+- **`getReactNativeProps`** — Serves the same purpose as `reactNativeProps`, but it's a function taking a `TNode` as first argument, pre-generated props as second argument (such as `accessibilityLabel` derived from `aria-label`) and the DOM `Element` as a third argument.
+
+#### HTMLContentModel
+
+There are 4 content models that can be attached to a tag:
+
+- **`textual`** — For elements which can be translated to `TText` or `TPhrasing`. Examples: `<span>`, `<strong>`, ...
+- **`block`** — For elements which can only be translated to `TBlock`. Examples: `<div>`, `<p>`, `<article>`, ...
+- **`mixed`** (rare) — For elements which can be translated to `TText`, `TPhrasing` or `TBlock`. The sole mixed elements are `<a>`, `<ins>` and `<del>`.
+- **`none`** — For elements which shall not be rendered and will be translated to `TEmpty`. Examples: `<button>`, `<map>`, ...
+
+A powerful feature of the **Foundry** engine is that the models attached to a tag name can be customized; see the "Custom Rendering" page.
+
+### Steps
+
+TRT construction is broadly comprised of three steps.
+
+#### Translation
+
+Each DOM element is translated to a `TNode`. The translation will abide by the following rules:
+
+- The root of the document will be translated to a `TDocument` node. This node has a special `context` field which holds metadata harvested in the `<head>` DOM element (see `DocumentMetadata`).
+- Text nodes will be translated to `TText`, and will be merged with a parent DOM element if the parent's **content model** is **textual** or **mixed** when they are its only child. For example, a Text node with no siblings whose parent is a `<span>` will be merged into a `TText` with `tagName` set to "span".
+- DOM elements whose content model is **textual** with multiple children will be translated to `TPhrasing` nodes.
+- DOM elements with children whose **content model** is **mixed** will be translated to `TPhrasing` if they only have `TPhrasing` or `TText` children, `TBlock` otherwise.
+- DOM elements whose **content model** is **block** will be translated to `TBlock` nodes.
+- DOM elements whose **content model** is **none** will be translated to `TEmpty`.
+- `<script>`, comments and `<style>` DOM nodes will be ignored.
+
+> Note: A DOM element might be untranslatable for a variety of reasons. For example, its name is not a standard HTML5 element and there is no custom HTML element model registered for it. Another reason is that it is an interactive element such as a form, input or button.
+
+In addition, inline styles, User Agent styles and mixed styles are processed by the CSS Processor; see "CSS Processing" below for more details.
+
+Below is an example of a **translation** transformation from HTML to TRT. The TRT is represented in a JSX-like format thanks to `TNode.snapshot()`.
+
+Input HTML:
+
+```html
+<a href="https://domain.com">
+This is
+<span>phrasing content</span>
+<img src="https://domain.com/logo.jpg" />
+    and this is <strong>too</strong>.
+</a>
+```
+
+Resulting TRT (translation step only):
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TPhrasing tagName="a" href="https://domain.com">
+      <TText anonymous data="\nThis is\n" />
+      <TText tagName="span" data="phrasing content" />
+      <TText anonymous data="\n" />
+      <TBlock tagName="img" src="https://domain.com/logo.jpg" />
+      <TText anonymous data="\n    and this is " />
+      <TText tagName="strong" data="too" />
+      <TText anonymous data=".\n" />
+    </TPhrasing>
+  </TBlock>
+</TDocument>
+```
+
+> Note: You will notice that a `<body>` has been added, and the root is an instance of `TDocument`. This process is called **normalization**, and is also performed by Web browsers.
+
+#### Hoisting
+
+The **hoisting phase** consists in enforcing a basic constraint:
+
+> Important — The Hoisting Constraint: A `TPhrasing` node should only have `TText`, `TPhrasing` and `TEmpty` nodes as children.
+
+Therefore, any `TBlock` child of a `TPhrasing` node will be recursively **hoisted** to the parent, until it meets that constraint. This constraint must be enforced to ensure that React Native `Text` elements have no `View` children, since it will break the default box model and might lead to bugs and inconsistencies. This constraint is depicted below:
+
+> Important — The View Constraint: React Native `Text` elements should not have `View` elements as children.
+
+On one hand `TBlock` will be translated to `View` elements, and on the other hand `TPhrasing` and `TText` nodes will be translated to `Text` elements. Therefore, enforcing **The Hoisting Constraint** in the TRT results in enforcing **The View Constraint** at render time. You can disable **hoisting** via the `dangerouslyDisableHoisting` prop, but be advised this is yet experimental.
+
+Below is an example of **translation + hoisting** transformation from HTML to TRT. Notice that contrary to the translate-only example, the `<a>` element is now wrapped in a `TBlock`. Also, text preceding and following the `<img>` tag are wrapped in an anonymous `TPhrasing` node.
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="a" href="https://domain.com">
+      <TPhrasing anonymous>
+        <TText anonymous data="\nThis is\n" />
+        <TText tagName="span" data="phrasing content" />
+        <TText anonymous data="\n" />
+      </TPhrasing>
+      <TBlock tagName="img" src="https://domain.com/logo.jpg" />
+      <TPhrasing anonymous>
+        <TText anonymous data="\n    and this is " />
+        <TText tagName="strong" data="too" />
+        <TText anonymous data=".\n" />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+#### Whitespace Collapsing
+
+The **whitespace collapsing phase** consists in implementing the algorithm associated with the `white-space` CSS property, depicted in the CSS Text Module Level 3 standard, by which insignificant white-spaces are removed from the TRT. You can disable it via the `dangerouslyDisableWhitespaceCollapsing` prop, but be advised this is yet experimental.
+
+Below is an example of **translating + hoisting + collapsing** transformation from HTML to TRT. Notice when comparing with the previous example, the line breaks and extraneous spaces have been removed.
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="a" href="https://domain.com">
+      <TPhrasing anonymous>
+        <TText anonymous data="This is " />
+        <TText tagName="span" data="phrasing content" />
+      </TPhrasing>
+      <TBlock tagName="img" src="https://domain.com/logo.jpg" />
+      <TPhrasing anonymous>
+        <TText anonymous data="and this is " />
+        <TText tagName="strong" data="too" />
+        <TText anonymous data="." />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+### Anatomy of a TNode
+
+A `TNode` has the following relevant fields (see `TNodeShape` for a reference):
+
+- **`attributes`** — The list of attributes attached to the underlying DOM Node.
+- **`id`** — The id attached to the underlying DOM Node.
+- **`classes`** — An array of classes associated with the underlying DOM Node.
+- **`domNode`** — The underlying DOM Node, if present.
+- **`tagName`** — The tag name attached to the underlying DOM Node.
+- **`parent`** — The parent `TNode`, if present, determined **before hoisting**.
+- **`nodeIndex`** — The position of this element relative to its parent, **after hoisting and collapsing**.
+- **`children`** — An array of `TNode` descendants to this node.
+- **`type`** — The **type** of this `TNode`. Either **text**, **phrasing**, **block**, **document** or **empty**.
+- **`markers`** — A registry of markers for this `TNode`. See the section below.
+- **`hasClass`** — A utility function to check if this node has the provided CSS class.
+- **`snapshot`** — A utility function to create a JSX-like string representation of this node and its children. **Very handy for debugging.**
+
+> Warning: The `styles` field, which is not listed here, **is not** consumable as a React Native component `style` prop.
+
+### Markers
+
+`Markers` form an abstraction in which one `TNode` provides semantic information to itself and all its descendants. For example, `<ins>` elements, which stand for "insertion" of content in the context of an edit, will provide the `edits` marker with value `"ins"` to all its descendants. Similarly, `<a>`, `<ol>` and `<ul>` elements will set their own markers. List markers such as `olNestLevel` are integers which are incremented each time a list is nested.
+
+Markers can also be derived from attributes. This is the case with `dir` and `lang` attributes. Finally, you can customize the markers extraction logic with the `setMarkersForTNode` prop and the eponymous HTML model field.
+
+## CSS Processing
+
+There are significant differences between the CSS standard and how styles are handled in React Native. Most notably, `Text` styles don't inherit from `View` styles. The reconciliation is handled by the TRE.
+
+### Inheritance
+
+As stated before, a React Native `View` cannot receive `textAlign` style. It could even crash the native app. The `@native-html/css-processor` and `@native-html/transient-render-engine` libraries handle inheritable CSS properties by merging inheritable properties in the TRT.
+
+CSS inheritance example — the HTML:
+
+```html
+<div style="text-align: center;">
+ This text is centered!
+</div>
+```
+
+…produces this TRT (the `text-align` style inherits down into the inner phrasing/text):
+
+```
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="div">
+      <TPhrasing anonymous>
+        <TText anonymous data="This text is centered!" />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+### Translation
+
+Every CSS property has a validator registered in the CSS processor, in charge of validating values for those rules. Validators are multipurposed:
+
+1. Handle special units such as absolute (`pt`), relative (`rem`) and keywords such as `small` (font-size) and `thin` (for borders) and translate those values in DIP (device independent pixels).
+2. Group properties by inheritability, native target (**block** for `View` and **text** for `Text`), and compatibility (**native** for properties translatable as native styles and **web** for other properties).
+3. Discard properties whose values are invalid.
+
+> Important: Special `inherit`, `initial` and `unset` values are not supported.
+
+### Mixed Styles Declaration
+
+Mixed styles declarations (`MixedStyleDeclaration`) are a blend between React Native styles (`ViewStyle`, `TextStyles`) and CSS properties such as those handled by the CSS processor. This format enables features that cannot be handled directly by the React Native style engine. For example `white-space` collapsing, `list-style-type`, font selection (see "Textual" page) or `object-fit` support in images (see "Images" page).
+
+```js title="A mixed styles declaration."
+const mixedStyles = {
+  whiteSpace: 'normal',
+  color: 'gray'
+}
+```
+
+### Specificity
+
+Despite its lack of complex selectors, CSS specificity will be honoured by this library. Most notably, a CSS property will be resolved by applying the following precedence in ascending order (latest will override formers):
+
+1. Inherited styles
+2. User Agent styles (see Transient Render Engine, **element model**)
+3. Tags styles (`tagsStyles` prop)
+4. Classes styles (`classesStyles` prop)
+5. IDs styles (`idsStyles` prop)
+6. Inline styles (`style` DOM node attribute)
+
+So inline styles will take precedence over IDs styles, which will take precedence over classes styles, …etc.
+
+> Important: `important!` directives, complex selectors such as `div > *`, pseudo-classes and pseudo-elements are not supported.
+
+## Rendering
+
+### Composite Rendering Architecture
+
+When you consume the `RenderHTML` component, you are actually using three distinct components. So this (**implicit composite**):
+
+```jsx
+<RenderHTML source={{ html }} />
+```
+
+is equivalent to this (**explicit composite**):
+
+```jsx
+<TRenderEngineProvider>
+  <RenderHTMLConfigProvider>
+    <RenderHTMLSource source={{ html }} />
+  </RenderHTMLConfigProvider>
+</TRenderEngineProvider>
+```
+
+You can actually use the **explicit** composite architecture by importing those components:
+
+```js
+import {
+  TRenderEngineProvider,
+  RenderHTMLConfigProvider,
+  RenderHTMLSource
+} from '@native-html/render';
+```
+
+> Tip: The great benefit of using **explicitly** this composite rendering architecture is that the engine and configuration can be put near the top of your App to factor the cost of instantiating the engine. This is **especially useful** for apps which will render hundreds to thousands of small snippets such as chat apps.
+
+Note that props of the `RenderHTML` component are split between the three layers of the rendering architecture:
+
+- **`TRenderEngineProvider`** — Takes all `RenderHTML` props pertaining to the Transient Render Engine layer such as `customHTMLElementModels`, `classesStyles` (all styling props) and DOM-related such as `domVisitors`, `selectDomRoot`, … See `TRenderEngineConfig` for a complete reference.
+- **`RenderHTMLConfigProvider`** — Takes all `RenderHTML` props pertaining to the Rendering layer such as `renderers`, `renderersProps`, `computeEmbeddedMaxWidth`, … See `RenderHTMLConfig` for a complete reference.
+- **`RenderHTMLSource`** — Takes all `RenderHTML` props pertaining to the document such as `source`, `onTTreeChange`, `contentWidth`. See `RenderHTMLSourceProps` for a complete reference.
+
+### Default TNode Renderers
+
+Each node of the TRT is translated to a React component in the `TNodeRenderer` component. Internally, `TNodeRenderer` will map each type of `TNode` to its dedicated component: `TDocumentRenderer` for `TDocument` nodes, `TBlockRenderer` for `TBlock` nodes, `TPhrasingRenderer` for `TPhrasing` nodes and `TTextRenderer` for `TText` nodes.
+
+Under the hood, `TPhrasingRenderer` and `TTextRenderer` use a React Native `Text` wrapper component, while `TBlockRenderer` and `TDocumentRenderer` use a React Native `View` wrapper component.
+
+Each renderer will pass styles provided by its underlying `TNode` to its React Native wrapper. Children are rendered thanks to the `TChildrenRenderer` component.
+
+### Custom Renderers
+
+Custom renderers are components defined for specific tags. They can be specified with the `renderers` prop, which is a mapping of tags with the corresponding components. See the "Custom Rendering" page. Also note that props targeting those renderers can be passed to a custom renderer via the `renderersProps` prop, which is a mapping of tag names with its corresponding props. Those props can be consumed from the custom renderer via the `useRendererProps` hook.
+
+### Internal Renderers
+
+Some tags such as `<img>`, `<ol>`, `<ul>` and `<a>` are handled by special renderers, namely **internal renderers**. Those renderers can be thought of as "internal custom renderers". See the "Images", "Lists" and "Anchors" pages.
+
+# Content Rendering Guide
+
+How specific HTML content types are rendered by the built-in internal renderers of `@native-html/render` — paragraphs and inline text, images, lists, and anchors/links.
+
+## Textual Content
+
+An overview of textual contents in `@native-html/render`.
+
+### Paragraphs
+
+Paragraphs have a default top and bottom margin. If you use the `enableExperimentalMarginCollapsing` prop, margins of adjacent blocks will collapse as per the CSS standard.
+
+The first paragraph in the example below has a font size set in rem. The margins between the first and second paragraphs are collapsed thanks to `enableExperimentalMarginCollapsing`.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="font-size: 1.2rem; padding: 0 10px;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua. Ut enim ad minim veniam, quis
+  nostrud exercitation ullamco laboris nisi ut aliquip
+  ex ea commodo consequat. 
+</p>
+<p style="color: purple; padding: 0 10px;">
+  Duis aute irure dolor in
+  reprehenderit in voluptate velit esse cillum dolore
+  eu fugiat nulla pariatur. Excepteur sint occaecat
+  cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum.
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      enableExperimentalMarginCollapsing={true}
+    />
+  );
+}
+```
+
+> Caution: `enableExperimentalMarginCollapsing` is considered experimental because the TRE (Transient Render Engine) doesn't support the `display` CSS property yet. Margin collapsing should not apply to flex layouts, while this prop will apply margin collapsing indiscriminately.
+
+### Whitespace Collapsing
+
+White space collapsing occurs in the eponym phase of the Transient Render Engine processing step. Insignificant whitespaces are removed from the tree, as per the algorithm depicted in CSS Text Module Level 3.
+
+> Note: The TRE strictly complies with this standard, although only `white-space: normal;` and `white-space: pre;` are supported at the moment.
+
+#### Example: 'white-space: normal'
+
+This is the default behavior, with the exception of a handful of tags such as `<pre>`. In the example below, the four line breaks and the second space after the comma have been removed.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<div style="white-space: normal; text-align: center;">
+<span>This is text!</span>
+
+This is <strong>bold</strong>,  <em>italics</em>.
+</div>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+#### Example: 'white-space: pre'
+
+You can set the `white-space` CSS property with inline styles **or** with classes, id and tags styles. In the example below the four line breaks and the second space after the comma have been preserved.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<div style="white-space: pre; text-align: center;">
+<span>This is text!</span>
+
+This is <strong>bold</strong>, <em>italics</em>.
+</div>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Preformatted Content
+
+Every white-space inside the `<pre>` tag is preserved while white-spaces outside are collapsed.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `
+<figure>
+  <pre>  ___________________________
+< I'm an expert in my field. >
+  ---------------------------
+    \\   ^__^ 
+    \\  (oo)\\_______
+       (__)\\       )\\/\\
+           ||----w |
+           ||     ||
+  </pre>
+  <figcaption>
+    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters. 
+  </figcaption>
+</figure>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+> Note: The default font for the `<pre>` tag is monospace and the `white-space` property is "pre". These default styles are set via the `HTMLElementModel` associated with this tag element model.
+
+### Font Selection
+
+CSS `font-family` and `font` properties allow a comma-separated list of fonts, but React Native styles `fontFamily` allows only one font name. With the TRE, you can instruct which fonts are available in the system (or fonts you have added), and it will pick the first match. The prop to achieve that is `systemFonts`.
+
+By default, a handful of fonts supported by the current platform are pre-registered (Android, iOS, MacOS and Windows). If you are using expo, just set this prop to `Constants.systemFonts`. You can also define how generic font names are resolved with the `fallbackFonts` prop.
+
+#### Example: Arial Font Selection
+
+This paragraph font family is set to "Arial" (will match on iOS, MacOS and Windows) and should fallback to sans-serif otherwise.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="font-family: 'Arial', sans-serif; padding: 10px;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua. Ut enim ad minim veniam, quis
+  nostrud exercitation ullamco laboris nisi ut aliquip
+  ex ea commodo consequat. 
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      enableExperimentalMarginCollapsing={true}
+    />
+  );
+}
+```
+
+#### Example: Courier New Font Selection
+
+This paragraph font family is set to "Courier New" (will match on iOS, MacOS and Windows) and should fallback to monospace otherwise.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="font-family: 'Courier New', monospace; padding: 10px;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua. Ut enim ad minim veniam, quis
+  nostrud exercitation ullamco laboris nisi ut aliquip
+  ex ea commodo consequat. 
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      enableExperimentalMarginCollapsing={true}
+    />
+  );
+}
+```
+
+#### Example: Space Mono Font Selection
+
+This paragraph font family is set to "Space Mono", which is loaded with Expo font loading helpers and registered via the `systemFonts` prop.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml, { defaultSystemFonts } from '@native-html/render';
+import { useFonts, SpaceMono_400Regular } from '@expo-google-fonts/space-mono';
+
+function FontLoader({ children }){
+  const [fontsLoaded] = useFonts({
+    'space-mono': SpaceMono_400Regular,
+  });
+  if (!fontsLoaded) {
+    return null;
+  }
+  return <>{children}</>;
+}
+
+const source = {
+  html: `<p style="font-family: 'space-mono'; padding: 10px;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua. Ut enim ad minim veniam, quis
+  nostrud exercitation ullamco laboris nisi ut aliquip
+  ex ea commodo consequat.
+</p>`
+};
+
+const systemFonts = ["space-mono", ...defaultSystemFonts];
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <FontLoader>
+      <RenderHtml
+        contentWidth={width}
+        source={source}
+        systemFonts={systemFonts}
+        enableExperimentalMarginCollapsing={true}
+      />
+    </FontLoader>
+  );
+}
+```
+
+> Caution: Fonts registered in `systemFonts` should not be surrounded with quotes; however you **can** surround the font name with quotes in inline and mixed styles, as per the CSS standard.
+
+### Caveats
+
+#### Line Breaks
+
+Line breaks work seamlessly with the `<br>` element. There is a known bug though in the Foundry release, where line breaks closing an inline formatting context will be printed while they should be ignored. According to the WHATWG HTML standard, a line break closing an inline formatting context should not be printed; in the example below there is an extraneous new line at the end of the sentence.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="background-color: yellow">
+  A line with a line break closing
+  an inline formatting context.<br>
+</p>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+Hopefully, the bug has been identified and since version 6.1.1 there is a workaround. You just need to pass the `enableExperimentalBRCollapsing` prop:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="background-color: yellow">
+  A line with a line break closing
+  an inline formatting context.<br>
+</p>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      enableExperimentalBRCollapsing={true}
+    />
+  );
+}
+```
+
+#### Empty Tags
+
+React Native has a weird behavior whereby empty `Text` elements span vertically on iOS and Android (referred to as "ghost lines"). The span element below is rendered as an empty `Text`, but it takes vertical space, approximately 20dpi, independent of font size and line height.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="background-color: yellow">
+  <span></span>
+</p>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+Since version 6.1.1, a new prop, `enableExperimentalGhostLinesPrevention`, prevents this behavior from happening. It will also handle multiple ghost elements:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="background-color: yellow">
+  <span></span>
+  <span></span>
+</p>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      enableExperimentalGhostLinesPrevention={true}
+    />
+  );
+}
+```
+
+## Images
+
+An overview of images in `@native-html/render`.
+
+> Note: Images are rendered with an **internal renderer**. The **content model** of images is `block`. This renderer covers the `<img>` tag. The `<picture>` tag is not yet supported.
+
+### Scaling
+
+#### Inline Styles
+
+The renderer will automatically scale images down to the available width, even when the provided inline style width is greater than the container width. You need to activate `enableExperimentalPercentWidth` for percent-width support in images. See `RenderersProps#img` for reference.
+
+> Important: You are strongly advised to provide a `contentWidth` property from the `useWindowDimensions` official hook to help this component handle the scaling.
+
+In the example below, image dimensions are set with inline styles. Both the `width`/`height` couple and the style attributes are evaluated, but the style attribute takes precedence. The relative width (50%) is computed against `contentWidth`.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<img
+  width="1200" height="800"
+  style="width: 50%; height: 100px; align-self: center;"
+  src="http://placeimg.com/1200/800/animals"
+/>`
+};
+
+const renderersProps = {
+  img: {
+    enableExperimentalPercentWidth: true
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderersProps={renderersProps}
+    />
+  );
+}
+```
+
+#### Object Fit
+
+This library supports the `object-fit` CSS property. In the example below, we set explicitly `object-fit: contain;` to letterbox the image in the container of width `50%` and height `100px`. Object-fit "cover", "contain", "fill" and "scale-down" values are supported, and will be translated to React Native "resizeMode" style property.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<img
+  width="1200" height="800"
+  style="object-fit: contain; width: 50%; height: 100px; align-self: center;"
+  src="http://placeimg.com/1200/800/animals"
+/>`
+};
+
+const renderersProps = {
+  img: {
+    enableExperimentalPercentWidth: true
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderersProps={renderersProps}
+    />
+  );
+}
+```
+
+> Tip: `object-fit` is a mixed style and thus you can use it in mixed styles declarations such as `tagsStyles`.
+
+#### Automatic Sizing
+
+The next image will be sized automatically thanks to the `contentWidth` and `computeEmbeddedMaxWidth` props. The latter allows you to set the maximum width from `contentWidth`, or disabling scaling by returning `Infinity`. This image has no inline style — its width and height are determined by the width and height attributes, scaled down to fit the result of `computeEmbeddedMaxWidth('img')`.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<img
+  width="1200" height="800"
+  src="http://placeimg.com/1200/800/nature"
+/>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Preloading
+
+Similarly to browsers, this library will place a print box before fetching image dimensions when both `width` and `height` attributes are provided, or the two dimensions are set in the `style` attribute. This is great to avoid layout shifts when images size jumps from 0 to the view box height, and is a hint to good web design.
+
+### Error Handling
+
+When an image is unreachable, the image renderer will print a box while preserving its requested dimensions. It will also display at the center of the box the content of the `alt` attribute.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<img
+  width="200" height="100"
+  alt="The Void"
+  src="http://example.tld/image.jpg"
+/>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Custom Renderer
+
+> Tip: You are kindly advised to read the Custom Rendering page before continuing.
+
+#### Via useInternalRenderer
+
+`useInternalRenderer` has a great advantage over using the `CustomRendererProps#InternalRenderer` prop: you have access to the internal component props. In this scenario, we display an interactive thumbnail which shows the full resolution image when pressed. To do so, we read the URI from the internal source prop (although we could also do this from the `TNode` `src` attribute), and mangle it to get our "thumbnail" URI. Press the image and a modal appears.
+
+```jsx
+import { useWindowDimensions, Modal, Button, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import RenderHtml, { useInternalRenderer } from '@native-html/render';
+
+function CustomImageRenderer(
+  props
+) {
+  const { Renderer, rendererProps } = useInternalRenderer('img', props);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const onPress = () => setIsModalOpen(true);
+  const onModalClose = () => setIsModalOpen(false);
+  const uri = rendererProps.source.uri;
+  const thumbnailSource = {
+    ...rendererProps.source,
+    uri: uri.replace('1200', '300').replace('800', '200')
+  };
+  return (
+    <View style={{ alignItems: 'center' }}>
+      <Renderer {...rendererProps} source={thumbnailSource} onPress={onPress} />
+      <Modal visible={isModalOpen} onRequestClose={onModalClose}>
+        <Renderer {...rendererProps} />
+        <Text>A full resolution image!</Text>
+        <Button title="Close Modal" onPress={onModalClose} />
+      </Modal>
+    </View>
+  );
+}
+
+const source = {
+  html: '<img src="https://dummyimage.com/1200x800">'
+};
+
+const tagsStyles = {
+  img: {
+    alignSelf: 'center'
+  }
+};
+
+const renderers = {
+  img: CustomImageRenderer
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      tagsStyles={tagsStyles}
+      renderers={renderers}
+    />
+  );
+}
+```
+
+#### By Reusing Internal Building Blocks
+
+You can reuse to your advantage some building blocks of the internal renderer thanks to the following exports:
+
+- **IMGElementContainer** — to render the container of the `<img>` element.
+- **IMGElementContentError** — to render the fallback view on error state.
+- **IMGElementContentLoading** — to render the fallback view on loading state.
+- **IMGElementContentSuccess** — to render the image on success state.
+- **useIMGElementState** — to get the state of the image resource fetching.
+
+In the below example, our custom renderer will display an activity indicator when the state is either "loading" or "success". This is for demonstration purposes, and of course you should handle the "success" state by rendering the `IMGElementContentSuccess` component, or a custom component displaying an image.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions, View, ActivityIndicator } from 'react-native';
+import RenderHtml, { IMGElementContainer, IMGElementContentError, IMGElementContentSuccess, useIMGElementProps, useIMGElementState } from '@native-html/render';
+
+function IMGElementContentLoading({ dimensions, altColor }) {
+  const loadingStyles = { justifyContent: 'center', alignItems: 'center' };
+  return (
+    <View style={[dimensions, loadingStyles]}>
+      <ActivityIndicator color={altColor} size="large" />
+    </View>
+  );
+}
+
+function CustomImageRenderer(
+  props
+) {
+  const imgElementProps = useIMGElementProps(props);
+  const state = useIMGElementState(imgElementProps);
+  let content;
+  if (state.type === 'error') {
+    content = React.createElement(IMGElementContentError, state);
+  } else {
+    content = React.createElement(IMGElementContentLoading, state);
+  }
+  return (
+    <IMGElementContainer
+      onPress={imgElementProps.onPress}
+      style={state.containerStyle}>
+      {content}
+    </IMGElementContainer>
+  );
+}
+
+const source = {
+  html: '<img src="http://placeimg.com/1200/800/architecture">'
+};
+
+const renderers = {
+  img: CustomImageRenderer
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderers={renderers}
+    />
+  );
+}
+```
+
+### Configuring
+
+#### Providing headers
+
+You can take advantage of the `provideEmbeddedHeaders` prop to pass headers to the image fetching conditionally. `provideEmbeddedHeaders` lets you pick headers for specific domains and works with multiple tags. For example, it can be used with the iframe plugin.
+
+```jsx
+import React from 'react';
+import RenderHtml from '@native-html/render';
+import { useWindowDimensions, Platform, PixelRatio } from 'react-native';
+
+function provideEmbeddedHeaders(uri, tagName) {
+  if (tagName === 'img') {
+    return {
+      Authorization: "Bearer XYZ",
+    };
+  }
+}
+
+const source = {
+  html: '<img src="https://www.fillmurray.com/200/100" />'
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      provideEmbeddedHeaders={provideEmbeddedHeaders}
+    />
+  );
+}
+```
+
+> Tip: In this example, we are using a Bearer token to access a restricted resource. We could also use headers to take advantage of the new Responsive Image Client Hints standard.
+
+#### Advanced configuration
+
+We can take advantage of the `renderersProps` prop to customize images behavior (see `RenderersProps#img`).
+
+## Lists
+
+An overview of lists in `@native-html/render`.
+
+> Note: Lists are rendered with an **internal renderer**. The **content model** of lists is `block`.
+
+> Tip: Lists marker rendering logic has been extracted to `@jsamr/react-native-li` and `@jsamr/counter-style` libraries for convenience. Feel free to use these outside of a `RenderHTML` component.
+
+### List Style Type
+
+List elements support the `list-style-type` CSS property, which defines how the marker pseudo-element of a list item should be rendered. In CSS terminology, a marker is a pseudo-element situated before elements with a `display` property set to `list-item`. See CSS Lists and Counters Module Level 3 for a standard reference, and `DefaultSupportedListStyleType` for a list of types supported by this library.
+
+### Ordered Lists
+
+Ordered list `<ol>` elements support by default 6 list style types:
+
+- `decimal`: 1, 2, 3 ... (the default)
+- `lower-alpha`: a, b, c ...
+- `upper-alpha`: A, B, C ...
+- `lower-greek`: α, β, γ ...
+- `lower-roman`: i, ii, iii ...
+- `upper-roman`: I, II, III ...
+
+Marker pseudo-elements will inherit from the styles of the `<ol>` tag.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<ol style="list-style-type: upper-roman; color: blue; font-weight: bold;">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+  <li>Seven</li>
+  <li>Eight</li>
+</ol>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+> Tip: You can plug-in one of the dozens of presets from `@jsamr/counter-style`, including Persian, Arabic, Hebrew, Thai, Katana, and more. See the chapter below.
+
+### Unordered Lists
+
+Unordered list `<ul>` elements support by default 5 list style types:
+
+- `disc`: "•" (the default)
+- `square`: "■"
+- `circle`: "○"
+- `disclosure-open`: "▼"
+- `disclosure-closed`: "▶"
+
+> Note: These markers are not rendered with UTF-8 characters, which might have a significant variety of shapes and sizes depending on fonts. Instead, geometric shapes are rendered.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<ul style="list-style-type: square;">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+  <li>Seven</li>
+  <li>Eight</li>
+</ul>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Defining and Customizing Markers Pseudo-Elements
+
+#### Using a Preset from @jsamr/counter-style
+
+The `customListStyleSpecs` prop allows you to create as many list type styles as you wish. Combined with the power of `@jsamr/counter-style`, you can plug-in one of the dozens of presets with a one-liner. See the example below using the **Thai** preset:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import thaiCounterStyle from '@jsamr/counter-style/presets/thai';
+
+const source = {
+  html: `<ul style="list-style-type: thai;">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+  <li>Seven</li>
+  <li>Eight</li>
+</ul>`
+};
+
+const customListStyleSpecs = {
+  thai: {
+    type: 'textual',
+    counterStyleRenderer: thaiCounterStyle
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      customListStyleSpecs={customListStyleSpecs}
+    />
+  );
+}
+```
+
+#### Creating a Counter Style
+
+`@jsamr/counter-style` allows you to create any counter style, translating strictly the `@counter-style` at-rule API defined in CSS Counter Styles Level 3 in a JavaScript API. In the example below, we create an alphabetic counter style for the Russian alphabet:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import CounterStyle from '@jsamr/counter-style';
+
+const source = {
+  html: `<ul style="list-style-type: lower-russian;">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+  <li>Seven</li>
+  <li>Eight</li>
+</ul>`
+};
+
+const customListStyleSpecs = {
+  'lower-russian': {
+    type: 'textual',
+    counterStyleRenderer: CounterStyle.alphabeticFromUnicodeRange(
+      0x430,
+      28
+    ).withSuffix(') ')
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      customListStyleSpecs={customListStyleSpecs}
+    />
+  );
+}
+```
+
+### Experimental RTL Mode
+
+Thanks to the `renderersProps` prop, you can enable experimental RTL support for lists (see `RenderersProps#ol` and `RenderersProps#ul`).
+
+> Note: For RTL mode to take effect, you need to have a `dir` attribute set for the list tag or one of its parents, or the `direction` style set for the list tag or one of its parents.
+
+#### Example: Unordered Lists
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<ul dir="rtl" style="list-style-type: disc;">
+  <li>واحد</li>
+  <li>اثنين</li>
+  <li>ثلاثة</li>
+  <li>أربعة</li>
+  <li>خمسة</li>
+  <li>ستة</li>
+  <li>سبعة</li>
+  <li>ثمانية</li>
+</ul>`
+};
+
+const renderersProps = {
+  ul: {
+    enableExperimentalRtl: true
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderersProps={renderersProps}
+    />
+  );
+}
+```
+
+#### Example: Ordered Lists Arabic
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import arabicIndic from '@jsamr/counter-style/presets/arabicIndic';
+
+const source = {
+  html: `<ol dir="rtl" style="list-style-type: arabic-indic;">
+  <li>واحد</li>
+  <li>اثنين</li>
+  <li>ثلاثة</li>
+  <li>أربعة</li>
+  <li>خمسة</li>
+  <li>ستة</li>
+  <li>سبعة</li>
+  <li>ثمانية</li>
+</ol>`
+};
+
+const renderersProps = {
+  ol: {
+    enableExperimentalRtl: true
+  }
+};
+
+const customListStyleSpecs = {
+  'arabic-indic': {
+    type: 'textual',
+    counterStyleRenderer: arabicIndic
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderersProps={renderersProps}
+      customListStyleSpecs={customListStyleSpecs}
+    />
+  );
+}
+```
+
+## Anchors
+
+An overview of anchors in `@native-html/render`.
+
+> Note: Anchors are rendered with an **internal renderer**. The **content model** of anchors is `mixed`.
+
+### Minimal Example
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<a
+  href="https://developer.mozilla.org/"
+  style="text-align:center;">
+    A link to MDN!
+</a>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+> Note: By default, pressing an anchor will open the link in the system browser. This is done with the React Native `Linking` API.
+
+### Block Example
+
+In the below example, the anchor will be translated to a `TNode` node, because some of its children (`<img>`) have a **block** content model. This is a feature of the **mixed content model**.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<a href="https://developer.mozilla.org/">
+  This text can be clicked.
+  <img src="http://placeimg.com/1200/800/nature" />
+  An the image too!
+</a>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Relative URLs
+
+The HTML standard allows relative URLs, for example when anchors have a `href` attribute with no origin, such as `<a href="contact.html">`. The new foundry release adheres closely to this standard, by extracting information about the `baseUrl` of the current page. Either by means of the `<base>` element, or by information contained in the `source` prop. Press any of the anchors and notice that the URL is being normalized from the base URL.
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<html>
+  <head>
+    <base href="https://developer.mozilla.org/"></base>
+  </head>
+  <body style="margin: 10px;">
+    <header>
+      <nav>
+        <strong>MDN Technologies</strong>
+        <a href="docs/Web/HTML">HTML</a>
+        <a href="docs/Web/CSS">CSS</a>
+        <a href="docs/Web/JavaScript">JavaScript</a>
+        <a href="docs/Web/HTTP">HTTP</a>
+        <a href="docs/Web/API">APIs</a>
+        <a href="docs/Web/MathML">MathML</a>
+      </nav>
+    </header>
+  </body>
+</html>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+> Tip: You can use the same URL normalization mechanism in your custom renderers thanks to the `useNormalizedUrl` hook.
+
+### Configuring
+
+We can take advantage of the `renderersProps` prop to customize anchors behavior (see `RenderersProps#a`). Anchors support the `onPress` prop to handle press events.
+
+```jsx
+import React from 'react';
+import RenderHtml from '@native-html/render';
+import { useWindowDimensions, Alert } from 'react-native';
+
+function onPress(event, href) {
+  Alert.alert(`You just pressed ${href}`);
+}
+
+const source = {
+  html: `<a
+  href="https://developer.mozilla.org/"
+  style="text-align:center;">
+    A link to MDN!
+</a>`
+};
+
+const renderersProps = {
+  a: {
+    onPress: onPress
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      renderersProps={renderersProps}
+    />
+  );
+}
+```
+
+# Customization Guides
+
+How to customize rendering in the `@native-html/render` monorepo — adding styles via `tagsStyles`/`classesStyles`/`idsStyles`/`baseStyle`, implementing custom renderers, and tampering with the DOM at parse time.
+
+## Styling
+
+> Tip: You are kindly advised to read the "CSS Processing" reference before continuing.
+
+### Inline Styles
+
+Inline styles set via the HTML `style` attribute are processed by the `@native-html/css-processor` library. You don't need to wonder if a CSS property will break your app: the CSS processor acts as a compatibility layer between React Native styles and CSS properties. This library gives you leverage on inline CSS processing via multiple props:
+
+- **`enableCSSInlineProcessing`** — Disable inline styles processing altogether.
+- **`allowedStyles`** — Whitelist the camel-cased CSS properties that you wish to be included.
+- **`ignoredStyles`** — Blacklist the camel-cased CSS properties that you wish to be excluded.
+
+Minimal Inline Styles Example:
+
+```html
+<p style="color: purple; font-size: 2rem;">
+  <span style="text-align: center; text-decoration-line: underline;">
+    Hello world!
+  </span>
+</p>
+```
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `<p style="color: purple; font-size: 2rem;">
+  <span style="text-align: center; text-decoration-line: underline;">
+    Hello world!
+  </span>
+</p>`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+    />
+  );
+}
+```
+
+### Props
+
+The `RenderHTML` component has four props to customize elements styles:
+
+- **`baseStyle`** — The styles for the root component. Inheritable styles will be inherited by all children.
+- **`idsStyles`** — Target elements with the HTML `id` attribute.
+- **`classesStyles`** — Target elements with the HTML `class` attribute.
+- **`tagsStyles`** — Target elements by tag name.
+
+Each of these props is a record mapping identifiers with a `MixedStyleDeclaration`.
+
+> Note: There is not (yet) a way to provide CSS selectors to target elements. Because it would require a full-featured CSS parser to build an AST, this feature might be supported in the future with an extension.
+
+### Mixed Style Records
+
+#### Introduction
+
+A mixed style declaration is an object similar to `StyleSheet`'s `create` method argument values. However, it supports a blend of React Native `ViewStyle`, `TextStyle` and camel-cased CSS properties. See "CSS Processing" for a complete reference.
+
+A mixed styles declaration record:
+
+```js
+const tagsStyles = {
+  body: {
+    whiteSpace: 'normal',
+    color: 'gray'
+  },
+  a: {
+    color: 'green'
+  }
+}
+```
+
+In the above snippet, mixed-style declarations are the objects defined as values of the `tagsStyles` record. A few important comments:
+
+- **`body` entry**. The `<body>` will always be present and can be confidently targeted, even when missing in the HTML snippet.
+- **`whiteSpace: 'normal'`**. This is the default property, with the exception of `<pre>` and a few other tags.
+- **`color: 'gray'` on body**. Thanks to CSS inheritance, all textual children of `<body>` will default to this property.
+- **`a` entry**. The TRE (Transient Render Engine) implements CSS specificity. A rule targeting the `<a>` element will override rules defined for its ancestors (in this case, `<body>`).
+
+> Caution: You should **never** provide styles from React Native `StyleSheet`. These will not work.
+
+#### Example
+
+Running The Mixed Style:
+
+```html
+<p style="text-align:center;">
+  Hello world!
+  <a href="#">A link!</a>
+</p>
+```
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+const source = {
+  html: `
+<p style="text-align:center;">
+  Hello world!
+  <a href="#">A link!</a>
+</p>
+`
+};
+
+const tagsStyles = {
+  body: {
+    whiteSpace: 'normal',
+    color: 'gray'
+  },
+  a: {
+    color: 'green'
+  }
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      tagsStyles={tagsStyles}
+    />
+  );
+}
+```
+
+## Custom Rendering
+
+The renderer API shipped since **Foundry** (v6) is at the same time more strict and more flexible. To get ready for this new API, you must understand some basics of the transient render tree produced by the TRE:
+
+1. During the transient render tree generation, every DOM node is translated to a `TNode`.
+2. `TText` nodes correspond to DOM `Text` nodes (**anonymous** `TText` nodes) or DOM elements whose children are DOM `Text` nodes (**named** `TText` nodes). So a `TText` node cannot have children, and its content is a string accessible with the `data` field.
+3. Thanks to **hoisting**, `TPhrasing` nodes can only have `TText` and `TPhrasing` nodes as children.
+4. `TBlock` nodes can have any children.
+
+> Tip: You are kindly advised to read the "Transient Render Engine" page before continuing!
+
+### Options for Custom Rendering
+
+You can customize rendering at two steps of the flow:
+
+1. During TRT (Transient Render Tree) generation, via HTML model definition.
+2. At (React) render time via custom renderers.
+
+These customizations are not exclusive, so you can use both approaches at the same time.
+
+### Model-based Custom Rendering
+
+#### Example: Registering a New Tag
+
+Let's say we have defined an advanced, powerful `<blue-circle>` Web Component for our website and we need to register a custom renderer for this tag. If we don't, the `<blue-circle>` elements will be translated to `TEmpty` and won't be rendered.
+
+> Important: We **must** register an **element model** for this tag because it is non-standard.
+
+> Important: Custom tags in HTML markup **must never be self-closing**. The HTML parser will not recognize non-void self-closing tags by default which will lead to unexpected outcomes.
+
+> Tip: We **may** register a custom component renderer, but this is not mandatory (see next chapter).
+
+For a more detailed explanation of the allowed parameters for the `HTMLElementModel.fromCustomModel` static method, see the "Transient Render Engine" doc.
+
+A Custom Tag rendered by defining an element model for this tag via `HTMLElementModel.fromCustomModel`:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml, { HTMLElementModel, HTMLContentModel } from '@native-html/render';
+
+const source = {
+  html: '<blue-circle></blue-circle>'
+};
+
+const customHTMLElementModels = {
+    'blue-circle': HTMLElementModel.fromCustomModel({
+      tagName: 'blue-circle',
+      mixedUAStyles: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        alignSelf: 'center',
+        backgroundColor: 'blue'
+      },
+      contentModel: HTMLContentModel.block
+    })
+  };
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      customHTMLElementModels={customHTMLElementModels}
+    />
+  );
+}
+```
+
+#### Example: Displaying Inline Images
+
+In the below example, we are changing the element model of the `<img>` tag to support inline rendering. For this purpose, we take advantage of the `customHTMLElementModels` prop.
+
+A usage of `customHTMLElementModels` prop to change the content model of `<img>` tags thanks to the `extend` method of `HTMLElementModel`:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml, { HTMLContentModel, defaultHTMLElementModels } from '@native-html/render';
+
+const source = {
+  html: `<p style="text-align:center">
+  Those are inline images!<br/><br/>
+  <strong>before</strong>
+  <img src="https://www.fillmurray.com/50/50" width="50" height="50" />&nbsp;
+  <img src="https://www.fillmurray.com/70/50" width="70" height="50" />&nbsp;
+  <strong>after</strong>
+</p>`
+};
+
+const customHTMLElementModels = {
+    img: defaultHTMLElementModels.img.extend({
+      contentModel: HTMLContentModel.mixed
+    })
+  };
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      customHTMLElementModels={customHTMLElementModels}
+    />
+  );
+}
+```
+
+> Note: We used the `HTMLElementModel.extend` method to change the **content model** for the `<img>` tag. This method is immutable: it creates a new `HTMLElementModel` instance. It is thus safe to use this method to create models for new tags derived from models of existing tags.
+
+> Caution: You cannot set the `contentModel` dynamically. This is currently a limitation of the TRE.
+
+### Component-based Custom Rendering
+
+#### Minimal Example
+
+You can register custom renderers components with the `renderers` prop.
+
+Stop talking, let's try it out. We're going to define a renderer for the `<h1>` element which supports press interactions:
+
+A custom renderer taking advantage of the `onPress` prop available in the `TDefaultRenderer` passed component:
+
+```jsx
+import React from 'react';
+import RenderHtml from '@native-html/render';
+import { useWindowDimensions, Alert } from 'react-native';
+
+function H1Renderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  const onPress = () => Alert.alert('pressed!');
+  return (
+    <TDefaultRenderer
+      {...props}
+      onPress={onPress}
+    />
+  );
+}
+
+const tagsStyles = {
+  article: {
+    marginHorizontal: 10
+  }
+};
+
+const source = {
+  html: `
+<article>
+  <h1>Press me!</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam.
+  </p>
+</article>
+`
+};
+
+const renderers = {
+  h1: H1Renderer
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      tagsStyles={tagsStyles}
+      source={source}
+      renderers={renderers}
+    />
+  );
+}
+```
+
+> Tip: The wrapper component injected when handling `onPress` for `TBlock` nodes is defined by the `GenericPressable` prop. You can also customize the highlight color with `pressableHightlightColor`. Also note that `onPress` works with textual nodes, in which case the eponymous prop of React Native `Text` element will be used instead.
+
+> Tip: `TDefaultRenderer` can receive a `textProps` prop which will be used when rendering a React Native `Text` element, and `viewProps` for `View` elements.
+
+#### Children Tampering
+
+Let's continue with a common requirement: injecting ads in the body of an article. More precisely, after the 2nd and 4th children. To achieve our goal, we are going to use the `TChildrenRenderer` component:
+
+A custom renderer taking advantage of the `TChildrenRenderer` component. When `TDefaultRenderer` is given children, those will replace the default children rendering logic, allowing great customizability:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions, View, Text } from 'react-native';
+import RenderHtml, { TChildrenRenderer } from '@native-html/render';
+
+function AdComponent() {
+  return (
+    <View
+      style={{ backgroundColor: 'purple', padding: 10, alignSelf: 'stretch' }}>
+      <Text style={{ color: 'white' }}>ad ad ad</Text>
+    </View>
+  );
+}
+
+function ArticleWithAds({
+  TDefaultRenderer,
+  tnode,
+  ...defaultRendererProps
+}) {
+  const firstChildrenChunk = tnode.children.slice(0, 2);
+  const secondChildrenChunk = tnode.children.slice(2, 4);
+  const thirdChildrenChunk = tnode.children.slice(4);
+  return (
+    <TDefaultRenderer tnode={tnode} {...defaultRendererProps}>
+      <TChildrenRenderer tchildren={firstChildrenChunk} />
+      {firstChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer tchildren={secondChildrenChunk} />
+      {secondChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer tchildren={thirdChildrenChunk} />
+    </TDefaultRenderer>
+  );
+}
+
+const source = {
+  html: `<article>
+    <p>Paragraph 1</p>
+    <p>Paragraph 2</p>
+    <p>Paragraph 3</p>
+    <p>Paragraph 4</p>
+    <p>Paragraph 5</p>
+  </article>`
+};
+
+const tagsStyles = {
+  article: {
+    marginHorizontal: 10
+  }
+};
+
+const renderers = {
+  article: ArticleWithAds
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      tagsStyles={tagsStyles}
+      renderers={renderers}
+    />
+  );
+}
+```
+
+The foundry API is powerful in terms of rendering customization. It is very easy to insert child elements, while preserving the internal rendering logic.
+
+> Tip: `TChildrenRenderer` can receive a `renderChild` prop (`TChildrenRendererProps`) to customize the rendering logic for each child.
+
+#### Renderer Props Summary
+
+A custom renderer will receive the below props:
+
+- **`tnode`** — The `TNode` to render.
+- **`TDefaultRenderer`** — The default fallback renderer for this `TNode`.
+- **`InternalRenderer`** — The internal renderer for this `tagName`. An internal renderer is like a custom renderer, but registered internally. If there is no internal renderer registered for this tag, `InternalRenderer` will be equal to `TDefaultRenderer`.
+- **`style`** — The flattened style object which should be passed to the root element returned by this component.
+- **`textProps`** — To use when you render a `Text`-based element (e.g. the `type` prop is `"text"`).
+- **`viewProps`** — To use when you render a `View`-based element (e.g. the `type` prop is `"block"`).
+- **`type`** — To check whether a `Text` (`"text"`) or `View` (`"block"`) is expected as the root element returned by this component.
+- **`propsFromParent`** — Props passed directly from the parent custom renderer via `TChildrenRenderer`. See the `propsForChildren` prop of `TChildrenRendererProps`.
+- **`renderIndex`** — The position relative to the parent React element, starting at 0.
+- **`renderLength`** — The total number of children of this React element parent. e.g. number of React element siblings + 1.
+
+See `CustomRendererProps` for a complete reference.
+
+## DOM Tampering
+
+This library offers rich integration with the `htmlparser2` ecosystem. Thanks to the new TRE, you can process DOM nodes **at parse time**. It implies that the operation doesn't require a tree traversal contrary to legacy versions, and thus adds up very little overhead.
+
+> Caution: One important downside is that **a DOM node's next sibling won't have been parsed yet**. However, the children and parent of this node are guaranteed to be attached to this node.
+
+### Altering the DOM Tree
+
+The API offers one prop, `domVisitors`, which is a record of 3 optional fields:
+
+- **`onDocument`** — Triggered when the root DOM `Document` has been parsed, at the very end of the parsing phase.
+- **`onElement`** — Triggered when a DOM `Element` has been parsed along with its children.
+- **`onText`** — Triggered when a DOM `Text` node has been parsed along with its content.
+
+These callbacks should not return anything. Instead, you should change the node or its children in place, or just read its content for inspection purposes.
+
+> Tip: You are invited to use the `domutils` library to handle DOM querying and manipulation (see example below). This library is already a direct dependency of `htmlparser2`.
+
+#### Example: Removing Elements
+
+Usage of `domVisitors.onElement` to remove the first two children of `ol` tags thanks to `removeElement` from `domutils`. Note that `isTag` from `domutils` is used to check if the child is a DOM element:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import { removeElement, isTag } from 'domutils';
+
+function onElement(element) {
+  // Remove the first two children of an ol tag.
+  if (element.tagName === 'ol') {
+    let i = 0;
+    for (const child of element.children) {
+      // Children might be text node or comments.
+      // We don't want to count these.
+      if (isTag(child) && i < 2) {
+        removeElement(child);
+        i++;
+      }
+    }
+  }
+}
+
+const source = {
+  html: `
+<ol>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+</ol>
+`
+};
+
+const domVisitors = {
+  onElement: onElement
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      domVisitors={domVisitors}
+    />
+  );
+}
+```
+
+#### Example: Altering Data
+
+Usage of `domVisitors.onText` to resolve handlebar-style variables in text nodes data. Note that this example might cost render time on very big documents since it will apply to every text node. You might want to add conditional logic to target text nodes children of specific tags:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+
+function onText(text) {
+  text.data = text.data.replace(/\{\{userName\}\}/g, 'John Doe');
+}
+
+const source = {
+  html: `
+<p style="text-align: center;">
+  Hi <strong>{{userName}}</strong>
+  you have news today!
+</p>
+`
+};
+
+const domVisitors = {
+  onText: onText
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      domVisitors={domVisitors}
+    />
+  );
+}
+```
+
+#### Example: Inserting Elements
+
+Usage of `domVisitors.onElement` to insert an `<img>` element at the top of every article thanks to the `prependChild` function from `domutils`. The source is extracted from the `data-cover-src` attribute of the article element:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import { prependChild } from 'domutils';
+import { Element } from 'domhandler';
+
+function onElement(element) {
+  // Add an image extracted from data-cover-src
+  // attr as first child of every article.
+  if (element.tagName === 'article') {
+    const cover = element.attribs['data-cover-src'];
+    if (cover) {
+      const img = new Element('img', {
+        src: cover
+      });
+      prependChild(element, img);
+    }
+  }
+}
+
+const source = {
+  html: `
+<article data-cover-src="https://picsum.photos/640/360">
+  <p style="padding: 10px;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit, sed do eiusmod tempor incididunt ut labore et
+    dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip
+    ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore
+    eu fugiat nulla pariatur. Excepteur sint occaecat
+    cupidatat non proident, sunt in culpa qui officia
+    deserunt mollit anim id est laborum.
+  </p>
+</article>
+`
+};
+
+const domVisitors = {
+  onElement: onElement
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      domVisitors={domVisitors}
+    />
+  );
+}
+```
+
+### Ignoring nodes
+
+Two props can be used to ignore nodes. `ignoredDomTags` is an array of lowercase tags to exclude, and `ignoreDomNode` is a function taking every parsed DOM node and offering you to reject it by returning `true`. Both props are processed at parse time.
+
+#### Example: Ignoring Nodes Conditionally
+
+Usage of `ignoreDomNode` to remove anchors children of `<p>` elements. Notice that the second argument to the `ignoreDomNode` function is used to perform assertions on the parent. Don't use `node.parent` since the node hasn't been attached yet:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import { isTag } from 'domutils';
+
+function ignoreDomNode(node, parent) {
+  // remove anchors children of <p> elements
+  return (
+    isTag(node) && node.name === 'a' && parent.name === 'p'
+  );
+}
+
+const source = {
+  html: `
+<p style="text-align: center">
+  <a href="">you're a noisy one, aren't you?</a>
+  Can you see the anchor? It has been ignored!
+</p>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      ignoreDomNode={ignoreDomNode}
+    />
+  );
+}
+```
+
+> Caution: When `ignoreDomNode` is invoked, the passed node has not been attached to its parent yet. But the parent is given as a second argument.
+
+### Root Selection
+
+This library provides the `selectDomRoot` prop to select a subtree to render. See example below.
+
+Usage of `selectDomRoot` with `findOne` from `domutils` to select a subtree to render:
+
+```jsx
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import RenderHtml from '@native-html/render';
+import { findOne } from 'domutils';
+
+function selectDomRoot(node) {
+  // Third argument set to 'true' for recursive search
+  return findOne((e) => e.name === 'article', node.children, true);
+}
+
+const source = {
+  html: `
+<body>
+  <nav>
+    <a href="/">home</a>
+    <a href="/contact">contact</a>
+  </nav>
+  <article style="padding: 10px;">
+    <header>
+      <h1>Lorem Impsum Dolor Sit!</h1>
+    </header>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit, sed do eiusmod tempor incididunt ut labore et
+      dolore magna aliqua. Ut enim ad minim veniam, quis
+      nostrud exercitation ullamco laboris nisi ut aliquip
+      ex ea commodo consequat. Duis aute irure dolor in
+      reprehenderit in voluptate velit esse cillum dolore
+      eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia
+      deserunt mollit anim id est laborum.
+    </p>
+  </article>
+  <footer>
+    Lorem ipsum inc, 2026
+  </footer>
+</body>
+`
+};
+
+export default function App() {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={source}
+      selectDomRoot={selectDomRoot}
+    />
+  );
+}
+```
+
+> Note: When `selectDomRoot` returns a falsy value, the initial root will be selected.
+
+### Prerendering
+
+In some scenarios, you might want to inspect the DOM **before** rendering, and even perform asynchronous operations based on your findings. Use cases might involve, for example:
+
+1. Fetching data from a Web API.
+2. Pre-caching media assets.
+
+To do so, we will take advantage of the composite rendering architecture (see "Rendering" doc) and the dom source feature:
+
+```jsx
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  TRenderEngineProvider,
+  RenderHTMLConfigProvider,
+  RenderHTMLSource,
+  useAmbientTRenderEngine
+} from '@native-html/render';
+import { findAll } from 'domutils';
+
+function isImgElement(node) {
+  return node.name === 'img';
+}
+
+function RenderSource({ html }) {
+  const [isDomReady, setIsDomReady] = useState(false);
+  // Let's use the TRE provided from the root of our app
+  // via TRenderEngineProvider to build the DOM
+  const engine = useAmbientTRenderEngine();
+  const dom = useMemo(() => engine.parseDocument(html), [html, engine]);
+  // Use effect to inspect the DOM
+  useEffect(function inspectDom(){
+    // Do any pre-rendering logic here
+    const images = findAll(isImgElement, dom, true);
+    // Do stuff with images such as preloading
+    // ...
+    // When preloading is done, set isDomReady to true!
+    setIsDomReady(true);
+  },[dom]);
+  return isDomReady ?
+    <RenderHTMLSource source={{ dom }} />
+    : null;
+}
+
+const html = `
+hello world!
+<img src='https://img.io/001.jpg' />
+`
+
+export default function App() {
+  return (
+    <TRenderEngineProvider>
+      <RenderHTMLConfigProvider>
+        <RenderSource html={html} />
+      </RenderHTMLConfigProvider>
+    </TRenderEngineProvider>
+  );
+}
+```
+
+Let's note a few important details in this example:
+
+1. `TRenderEngineProvider` accepts all `RenderHTML` component props pertaining to the Transient Render Engine layer such as `customHTMLElementModels`, `classesStyles` (all styling props) and DOM-related props such as `domVisitors`, `selectDomRoot`...
+2. `RenderHTMLConfigProvider` accepts all `RenderHTML` component props pertaining to the Rendering layer such as `renderers`, `renderersProps`, `computeEmbeddedMaxWidth`, ...
+3. `RenderHTMLSource` accepts all `RenderHTML` component props pertaining to the document such as `source`, `onTTreeChange`, `contentWidth`...
+4. The general recommendation for this three-layers rendering architecture is that the engine and configuration should be put near the top of your App to factor the cost of instantiating the engine. This is especially useful for apps which will render hundreds to thousands of small snippets such as chat apps.
+
+# Migration and Release Notes
+
+## Migrating from v5 to v6
+
+> Important: V6 is a brand new rewrite of the library, bringing amazing new features such as whitespace collapsing, list style type support, and enhanced performances. However, it will take some work to migrate your project to support the new API.
+
+### Props
+
+> Note: A good amount of props have had their name changes, while their behavior is similar or equivalent. The biggest endeavor will be to migrate custom renderers (see the Migrating Custom Renderers section).
+
+#### Props to Monitor
+
+| Prop                      | Remarks                                                                                                                                                                                                        |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `renderers`               | Each renderer function should be converted to a React Component. See the Custom Rendering guide and the Migrating Custom Renderers section below.                                                              |
+| `renderersProps`          | To access those props from a custom renderer, you should now use `useRendererProps` hook.                                                                                                                      |
+| `source`                  | A new type of source is available, `source.dom`. See DOM Tampering (prerendering) for a use case.                                                                                                              |
+| `computeEmbeddedMaxWidth` | You can now take advantage of `useComputeMaxWidthForTag` hook to consume max width from custom renderers.                                                                                                      |
+| `tagsStyles`              | Those styles are now mixed styles records, which are unlikely to break. See Styling Components.                                                                                                                |
+| `classesStyles`           | Those styles are now mixed styles records, which are unlikely to break. See Styling Components.                                                                                                                |
+| `allowedStyles`           | CSS properties are now camelCased.                                                                                                                                                                             |
+| `ignoredStyles`           | CSS properties are now camelCased.                                                                                                                                                                             |
+
+#### Renamed and Moved Props
+
+| v5                               | v6                                                  | Remarks                                                                                                                |
+| -------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `enableExperimentalPercentWidth` | `renderersProps.img.enableExperimentalPercentWidth` |                                                                                                                        |
+| `imagesInitialDimensions`        | `renderersProps.img.initialDimensions`              |                                                                                                                        |
+| `onLinkPress`                    | `renderersProps.a.onPress`                          |                                                                                                                        |
+| `onParsed`                       | `onTTreeUpdate`                                     | The structure has changed. See the Transient Render Engine documentation.                                              |
+| `listsPrefixesRenderers`         | `customListStyleSpecs`                              | The API has changed; see the Lists customization documentation (defining and customizing markers / pseudo-elements).   |
+| `ignoredTags`                    | `ignoredDomTags`                                    |                                                                                                                        |
+| `ignoreNodesFunction`            | `ignoreDomNode`                                     |                                                                                                                        |
+
+#### Discontinued Props
+
+| Prop                   | Remarks                                                                                                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `containerStyle`       | You can use `baseStyle` instead.                                                                                                                               |
+| `customWrapper`        |                                                                                                                                                                |
+| `ptSize`               |                                                                                                                                                                |
+| `baseFontStyle`        | You can use `baseStyle` instead.                                                                                                                               |
+| `alterData`            | You can use `domVisitors.onText` instead. See Dom Tampering (example: altering data).                                                                          |
+| `alterChildren`        | You can use `domVisitors.onElement` instead. See Dom Tampering (example: inserting elements).                                                                  |
+| `alterNode`            | You can use `domVisitors.onElement` instead. See Dom Tampering (example: removing elements).                                                                   |
+| `allowWhitespaceNodes` | White-space collapsing is now fully supported. See Transient Render Engine, whitespace collapsing.                                                             |
+
+#### Other Props
+
+Props not listed in the above sections are unchanged.
+
+### Migrating Custom Renderers
+
+#### Arguments Equivalence
+
+Let's start with a custom renderer from v5:
+
+```jsx title="renderers.jsx"
+const renderers = {
+  hr: (htmlAttribs, children, convertedCSSStyles, passProps) => {
+    return /* Whatever */;
+  }
+};
+```
+
+In v6, renderers are React components:
+
+```jsx title="renderers.jsx"
+const renderers = {
+  hr: ({
+    tnode,
+    onPress,
+    propsFromParent,
+    sharedProps,
+    style,
+    textProps,
+    type,
+    viewProps,
+    InternalRenderer,
+    TDefaultRenderer
+  }) => {
+    return /* Whatever */;
+  }
+};
+```
+
+> Tip: See `CustomRendererProps` for details on each of these props.
+
+Let's see now how arguments map from v5 to v6:
+
+| Argument (v5)                       | Prop Name (v6)                          | Remarks                                                                                                                                                                                                                                                          |
+| ----------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `htmlAttribs`                       | `tnode.attributes`                      | The TNode is the intermediary representation of the element to render. See the Architecture doc.                                                                                                                                                                |
+| `children`                          | Alternative exists.                     | You can still render children. However, instead of having access to the children as React elements, you can inspect `tnode.children` and render these with `TNodeChildrenRenderer`. This is much more flexible than the legacy API. See Custom Rendering guide. |
+| `convertedCSSStyles`                | `style`                                 | Those styles are flatten and can be easily inspected.                                                                                                                                                                                                            |
+| `passProps.renderersProps`          | Alternative exists.                     | You can access renderers prop for a specific tag via `useRendererProps` hook.                                                                                                                                                                                    |
+| `passProps.nodeIndex`               | `tnode.nodeIndex`                       |                                                                                                                                                                                                                                                                  |
+| `passProps.transientChildren`       | `tnode.children`                        |                                                                                                                                                                                                                                                                  |
+| `passProps.domNode`                 | `tnode.domNode`                         |                                                                                                                                                                                                                                                                  |
+| `passProps.parentWrapper`           | `type`                                  | Either `"text"` or `"block"`.                                                                                                                                                                                                                                    |
+| `passProps.data`                    | `tnode.data`                            | Available when `tnode.type === 'text'`                                                                                                                                                                                                                           |
+| `passProps.key`                     | N/A                                     | Keys don't need to be used anymore since renderers are components. The key is handled by the parent (`TNodeRenderer`).                                                                                                                                           |
+| `passProps.parentTag`               | `tnode.parent.tagName`                  |                                                                                                                                                                                                                                                                  |
+| `passProps.onLinkPress`             | Alternative exists.                     | You can access this prop via `useRendererProps('a').onPress`.                                                                                                                                                                                                    |
+| `passProps.tagsStyles`              | No Equivalent.                          |                                                                                                                                                                                                                                                                  |
+| `passProps.classesStyles`           | No Equivalent.                          |                                                                                                                                                                                                                                                                  |
+| `passProps.defaultTextProps`        | `textProps`                             |                                                                                                                                                                                                                                                                  |
+| `passProps.defaultWebViewProps`     | `sharedProps.defaultWebViewProps`       |                                                                                                                                                                                                                                                                  |
+| `passProps.computeEmbeddedMaxWidth` | `sharedProps.computeEmbeddedMaxWidth`   | A better option is to take advantage of `useComputeMaxWidthForTag` hook.                                                                                                                                                                                         |
+| `passProps.contentWidth`            | Alternative exists.                     | Access content width via `useContentWidth` hook.                                                                                                                                                                                                                 |
+
+#### Custom Tags
+
+Let's say we registered a renderer for `<bluecircle>` tag, which is non-standard. In v6, we must also register the **element model** for this tag. See the Custom Rendering guide (registering a new tag).
+
+### Other Exports
+
+| Export                      | Remarks                                                                                                           |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `getParentsTagsRecursively` | Discontinued.                                                                                                     |
+| `getClosestNodeParentByTag` | Discontinued.                                                                                                     |
+| `constructStyles`           | Discontinued. Not applicable since the styling logic has been totaly reframed and should be much more consistent. |
+| `domNodeToHTMLString`       | Unchanged.                                                                                                        |
+
+## Release Highlights
+
+### v6.0 (Foundry) — Beta Announcement (2021-06-07)
+
+After seven months of a long and exciting journey in alpha development and testing with the community, the first Foundry (v6) beta release of React Native Render HTML was announced. This process led the new API to mature, and the introduction of the beta stage marked the end of its instability. During the beta stage, fixes were brought to any issue reported by the community, and test coverage was expected to rise above 90%.
+
+#### Transient Render Engine
+
+The Transient Render Engine (TRE) transforms DOM nodes into a ready-to-render data structure called the Transient Render Tree (TRT), which is made of `TNodes`. It allows features such as **whitespace collapsing**, **hoisting**, **CSS inheritance** and more.
+
+A legitimate concern is whether it adds any overhead. The short answer is *no*, if we compare it to the legacy engine which had its own transient render structure. Moreover, this TRT construction process is benchmarked to safeguard its speed. In addition to the enumerated features, the new transient data structure offers obvious advantages for library consumers:
+
+- It is totally transparent and predictable; you can create snapshots of a `TNode` thanks to the `TNodeShape.snapshot()` method for an intuitive understanding of the engine internals. This feature is extremely handy for debugging and testing!
+- It's hackable by allowing to define custom **content models** for tags. Say hi to inline images!
+- It is shipped with a CSS processor which enforces strict translation rules from CSS to React Native styles. Say goodbye to native crashes caused by unsupported CSS properties! See the dedicated CSS processing article for reference.
+- It paves the way to server side (or build-time) pre-rendering in the future, and, why not, a react fiber and MDX builder.
+
+Below is an example of HTML transformation into a Transient Render Tree. This figure shows how HTML markup translates to a transient render tree structure. The markup for the TRT is JSX and has been produced by the `snapshot()` method. Notice that whitespace have collapsed!
+
+HTML input:
+
+```html
+<a href="https://domain.com">
+This is
+<span>phrasing content</span>
+<img src="https://domain.com/logo.jpg" />
+    and this is <strong>too</strong>.
+</a>
+```
+
+JSX snapshot output:
+
+```jsx
+<TDocument tagName="html">
+  <TBlock tagName="body">
+    <TBlock tagName="a" href="https://domain.com">
+      <TPhrasing anonymous>
+        <TText anonymous data="This is " />
+        <TText tagName="span" data="phrasing content" />
+      </TPhrasing>
+      <TBlock tagName="img" src="https://domain.com/logo.jpg" />
+      <TPhrasing anonymous>
+        <TText anonymous data="and this is " />
+        <TText tagName="strong" data="too" />
+        <TText anonymous data="." />
+      </TPhrasing>
+    </TBlock>
+  </TBlock>
+</TDocument>
+```
+
+> Tip: A detailed review of the Transient Render Engine has its dedicated article. You can also learn more about the new data flow in the Architecture article.
+
+#### Custom Renderers
+
+The new rendering API is an order of magnitude more powerful than the legacy. Custom renderers are now plain React Components instead of functions, and you have access to the underlying renderer for rich customization:
+
+```jsx title="Foundry Custom Renderer"
+import React from 'react';
+import { Alert } from 'react-native';
+
+function H1Renderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  const onPress = () => Alert.alert('pressed!');
+  return (
+    <TDefaultRenderer
+      {...props}
+      onPress={onPress}
+    />
+  );
+}
+```
+
+Default renderers support `onPress` and many more interesting props (see `TDefaultRendererProps`). Moreover, you can customize the rendering of children thanks to the `TChildrenRenderer` component:
+
+```jsx title="Foundry Custom Renderer with Children Tampering"
+import React from 'react';
+import { TChildrenRenderer } from 'react-native-render-html';
+import AdComponent from './AdComponent';
+
+function ArticleWithAds({
+  TDefaultRenderer,
+  tnode,
+  ...defaultRendererProps
+}) {
+  const firstChildrenChunk = tnode.children.slice(0, 2);
+  const secondChildrenChunk = tnode.children.slice(2, 4);
+  const thirdChildrenChunk = tnode.children.slice(4);
+  return (
+    <TDefaultRenderer tnode={tnode} {...defaultRendererProps}>
+      <TChildrenRenderer tchildren={firstChildrenChunk} />
+      {firstChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer tchildren={secondChildrenChunk} />
+      {secondChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer tchildren={thirdChildrenChunk} />
+    </TDefaultRenderer>
+  );
+}
+```
+
+This custom renderer will insert an `AdComponent` element after the second and fourth children of this `TNode`.
+
+Last but not least, custom renderers can reuse internal renderers (those special renderers displaying lists, images and anchors). For this purpose, you can use the `InternalRenderer` prop or `useInternalRenderer` hook.
+
+> Tip: Check out the Custom Rendering guide.
+
+#### Font Selection
+
+CSS `font-family` property allows a comma-separated list of fonts, while React Native `fontFamily` does not. Moreover, setting a font that is not available in the system will often lead to native crashes. To reconcile this inconsistency, the CSS Processor will try to match each font in a `font-family` property with a list of supported fonts available in the system by the library consumer. The prop to declare such fonts is `systemFonts`.
+
+> Tip: Check out the Font Selection section from the Textual guide.
+
+#### Revamped List Renderer
+
+The versatile new list component gives access to 47 markers presets for custom CSS Counter Styles; supports `list-style-type` CSS property and `start` attribute. There is also an experimental RTL feature!
+
+Note that the **thai** and **arabic indic** counters have been rendered via the `@jsamr/counter-style` presets, and the **russian** counter has been rendered with a custom, 2 lines-of-code counter renderer. Learn more about this fancy feature and examples in the dedicated Lists article.
+
+#### Extensible Internal Image Renderer
+
+The new internal image renderer is shipped with `object-fit` CSS property support. Moreover, **its building blocks are completely reusable for custom rendering**:
+
+- `IMGElementContainer` — To render the container of the `<img>` element.
+- `IMGElementContentError` — To render the fallback view on error state.
+- `IMGElementContentLoading` — To render the fallback view on loading state.
+- `IMGElementContentSuccess` — To render the image on success state.
+- `useIMGElementState` — To get the state of the image resource fetching.
+
+> Tip: Check out the Images article.
+
+#### Composite Rendering Architecture
+
+The three-layer rendering architecture shows its potential when rendering many HTML snippets at a time. It basically means that you can put configuration in a context to avoid the cost of instantiating the TRE too many times:
+
+```jsx
+<RenderHTML source={{ html }} />
+```
+
+is equivalent to this (**explicit 3 layers**):
+
+```jsx
+<TRenderEngineProvider>
+  <RenderHTMLConfigProvider>
+    <RenderHTMLSource source={{ html }} />
+  </RenderHTMLConfigProvider>
+</TRenderEngineProvider>
+```
+
+> Tip: Check out the rendering article.
+
+It also offers the ability to select the root of the document to render, and to inspect the DOM object asynchronously before rendering.
+
+> Tip: Check out the DOM Tampering guide.
+
+#### Massive Bug Squashing
+
+After merging the Foundry PR to master, **73% of open issues have been closed**. Most fixes stem from the efficiency and rigor of the new test-driven CSS processor and Transient Render Engine. Most notable areas of fixes:
+
+- **Unrecognized styles** crashing the app. The new CSS processor is strict and deterministic in what is translatable to React Native styles and what is not.
+- **Missing inheritable styles**. Styles inheritance and specificity are implemented and battle-tested in the TRE.
+- **List prefixes styles** not inheriting from parent styles (color...). The new list internal renderer takes them all.
+- **Missing HTML tags support**. The TRE now has explicit support for all the tags specified in the HTML5 WHATWG living standard. However, not all tags will be rendered. Tags with a **content model** set to `none` will not be rendered (you can override this model though). Check out the list of all tags and their models in the `defaultHTMLElementModels` definition.
+
+> Tip: Check out the release notes for more details.
+
+#### Production Readiness
+
+With all the bug fixes, high test coverage and API stability, entering the beta stage means **the Foundry release is now ready for production**. Test coverage for the CSS processor and TRE is **100%** (see the `native-html/render` repository). The `react-native-render-html` package has a test coverage above **64%**, and will rise to above **90%** by the end of the beta stage.
+
+For migration from v4 and v5, see the dedicated migration guide, and don't hesitate to ask for help in the Discord channel.
+
+> Note: Consulting — The author is available for consulting, to help you incorporate this library in your project or migrate from legacy versions. Contact via email or LinkedIn.
+
+### v6.2 (2021-10-23) — Accessibility and Richer Model-Based Rendering
+
+It has been over three months since the first final version of the Foundry release was made public. The 6.2 version focuses on two areas of improvements:
+
+1. Accessibility, and more specifically integration with *VoiceOver* and *TalkBack* screen readers;
+2. Richer model-based rendering, and the feature to define React Native props from those models.
+
+As you will discover through this reading, both are somehow related.
+
+> Info: bonus — This post also covers a due overview of features introduced in the previous 6.1 minor release.
+
+#### Model-Based Rendering Enhancements
+
+Model-based rendering via `RenderHTMLProps.customHTMLElementModels` prop has been a lightweight alternative to custom (component) renderers since the early stages of the Foundry release. However, it was limited to setting user agent styles (`HTMLElementModel.mixedUAStyles`), although those styles could be derived from the DOM node element attributes (the now-deprecated `HTMLElementModel.getUADerivedStyleFromAttributes`). The below example is a reminder on how those element models can be defined, for instance to register a new `<blue-circle>` tag which renders to a 50 by 50 blue circle:
+
+```js title="An Example of Model-Based Rendering"
+import RenderHTML, {
+  HTMLElementModel,
+  HTMLContentModel
+} from 'react-native-render-html';
+
+const customHTMLElementModels = {
+  'blue-circle': HTMLElementModel.fromCustomModel({
+    tagName: 'blue-circle',
+    mixedUAStyles: {
+      width: 50,
+      height: 50,
+      borderRadius: 25,
+      alignSelf: 'center',
+      backgroundColor: 'blue'
+    },
+    contentModel: HTMLContentModel.block
+  })
+};
+```
+
+> Important: Keep in mind that `HTMLElementModel.mixedUAStyles` has a lower specificity than styles passed to `RenderHTML` such as `RenderHTMLProps.tagsStyles`. See the CSS Processing guide section related to specificity for a refresher.
+
+Version 6.2 ships with a bunch of new fields for HTML element models which should increase model-based rendering adoption.
+
+##### `getMixedUAStyles`
+
+This field deprecates `HTMLElementModel.getUADerivedStyleFromAttributes`; it serves the same purpose but its signature has changed. It now receives the target `tnode` and DOM `element`, which lets us implement more fine-grained logic such as CSS-selector-like behaviors:
+
+```js title="Conditionnaly remove margins of 'ol' direct descendents of 'p' elements."
+import RenderHTML, {
+  defaultHTMLElementModels,
+  isDomElement
+} from 'react-native-render-html';
+
+const customHTMLElementModels = {
+  ol: defaultHTMLElementModels.ol.extend({
+    getMixedUAStyles(tnode, element) {
+      if (isDomElement(element.parent) && element.parent.tagName === 'p') {
+        return {
+          marginTop: 0,
+          marginBottom: 0
+        };
+      }
+    }
+  })
+};
+```
+
+However and as stated before, those styles will have a lower specificity than tags, classes and ID styles and as such, these are not "real" CSS selectors. Hopefully, CSS selectors will be implemented at some point (there is a feature request available to upvote). The hard challenge is that these should not impede performances.
+
+> Warning: Beware that this `tnode` is an instance of `TNodeDescriptor`, which is a minimal `tnode` shape available during the Transient Render Engine creation. You will not have access to `parent` or `children` fields, since the hierarchy is yet in the making. This is why we are using the second argument, `element`, to query the DOM hierarchy instead. For this very reason, you are advised to use the `domutils` library to query the DOM and create your conditional styling rules.
+
+##### `reactNativeProps`
+
+This field holds props that will be passed to the native component during the rendering phase. It is an object with three optional properties (for reference, the shape of this object is a `ReactNativePropsDefinitions`):
+
+1. `text`, to pass native props to `Text`-backed renderers;
+2. `view`, to pass native props to `View`-backed renderers;
+3. `native`, to pass props to either `View` or `Text`-backed renderers.
+
+In the next snippet, we are defining a custom tag, `<nav-widget>`, and setting accessibility props to any underlying native component for the render phase. We can also define `onPress`, which will cause the renderer to use the `RenderHTMLProps.GenericPressable` instead of the default `View` for block renderers.
+
+```js title="Defining React Native props in an HTML element model"
+import RenderHTML, {
+  HTMLContentModel,
+  HTMLElementModel
+} from 'react-native-render-html';
+
+const customHTMLElementModels = {
+  'nav-widget': HTMLElementModel.fromCustomModel({
+    tagName: 'nav-widget',
+    contentModel: HTMLContentModel.block,
+    reactNativeProps: {
+      native: {
+        accessibilityRole: 'link',
+        onPress() {
+          console.info('Pressed the nav widget!');
+        }
+      }
+    }
+  })
+};
+```
+
+However, this field is somehow limited in that it cannot depend on `tnode` attributes. This is where `HTMLElementModel.getReactNativeProps` comes to the rescue.
+
+##### `getReactNativeProps`
+
+The purpose of this field is identical to the `HTMLElementModel.reactNativeProps` field. It only differs in that instead of a plain object, it is a method which takes three arguments: a `tnode` (the Transient Node), the `preGeneratedProps` (props generated by the TRE such as accessibility props, see next section) and `element` (the DOM node). Finally, it returns a plain object (see `ReactNativePropsDefinitions`).
+
+In the example below, a custom `nav-widget` tag is registered. This time, we are handling `onPress` events conditionally, based on attributes of the `tnode`. The snippet uses a phony API, `appNavigatorController`, to navigate between screens. Such API is easy to implement with a globally-defined ref to a `react-navigation` "navigation" object.
+
+> Important: It is worth noting that you cannot use React hooks in those element model functions. But you can use any ad-hoc API to emit events, and glue that logic to hooks. If you really need React hooks, it might be simpler to create a custom component renderer.
+
+```js title="Defining React Native props based on the TNode in an HTML element model"
+import RenderHTML, {
+  HTMLContentModel,
+  HTMLElementModel
+} from 'react-native-render-html';
+import appNavigatorController from './appNavigatorController';
+
+const customHTMLElementModels = {
+  'nav-widget': HTMLElementModel.fromCustomModel({
+    tagName: 'nav-widget',
+    contentModel: HTMLContentModel.block,
+    getReactNativeProps(tnode) {
+      return {
+        native: {
+          accessibilityRole: 'link',
+          onPress() {
+            const targetScreen = tnode.attributes['data-target'];
+            const targetParams = tnode.attributes['data-params'];
+            appNavigatorController.navigate(
+              targetScreen,
+              targetParams ? JSON.parse(targetParams) : null
+            );
+          }
+        }
+      };
+    }
+  })
+};
+```
+
+> Tip: Don't forget that you can mix model-based and component-based rendering!
+
+#### Accessibility
+
+Screen readers integration has been worked on sparsely since the Foundry release, by addressing issues raised by the community, but until v6.2 there had not been structural improvements to cover the full range of required features. Thanks to the new Transient Render Engine, it has become very easy to define translations from HTML attributes to React Native props within the engine.
+
+##### Support for `aria-label` and `role` Attributes
+
+On one hand, `aria-label` is used to hint screen readers on how a specific node **and all its descendants** should be read out loud. It is especially useful to handle icons which don't have inner semantic meanings. This attribute has a React Native prop equivalent, namely `accessibilityLabel`, which serves the same purpose. On the other hand, `role` informs the screen reader of the target element nature and how a user might interact with it. This attribute roughly maps to React Native `accessibilityRole` prop, although the set of allowed values slightly differs.
+
+> Warning: Remember that a majority of interactive elements will not be rendered by this library. You must change their content model to `HTMLContentModel.block` in order for them to be rendered. Nevertheless, those interactive element models are already shipped with the appropriate `accessibilityRole` prop.
+
+The new Transient Render Engine will from now on translate both attributes to their React Native counterparts.
+
+##### Accessible `<a>` Tags
+
+`<a>` tags now receive an `accessibilityRole="link"` prop when their `href` attribute is non-empty. To link that part with model enhancements seen in the previous section, let's see how we could set an accessibility hint by extending the HTML model:
+
+```ts
+import RenderHTML, { defaultHTMLElementModels } from 'react-native-render-html';
+
+const customHTMLElementModels = {
+  a: defaultHTMLElementModels.a.extend((aModel) => ({
+    reactNativeProps: {
+      ...aModel.reactNativeProps,
+      native: {
+        ...aModel.reactNativeProps?.native,
+        accessibilityHint: 'Open in your system web browser.'
+      }
+    }
+  }))
+};
+```
+
+Notice that the `HTMLElementModel.extend` method can now take a generator function. Pretty convenient to merge nested fields!
+
+> Warning: Because of a React Native bug, nested `Text` elements are not accessible, which means that the screen reader will not be able to identify `<a>` tags as links when grouped with other textual elements. Below is an example:
+>
+> ```html
+> <p>
+>   Unfortunately,
+>   <a href="https://domain.com">this hyperlink is not accessible</a>
+> </p>
+> ```
+>
+> Luke Walczak from Callstack explains how to circumvent this issue in a great post. Unfortunately, this workaround cannot be genericized and we will have to wait for an upstream fix.
+
+##### Enhanced Accessibility for `<img>` Tags
+
+`<img>` tags have been accessible since the Foundry beta. But the accessibility props were set after the loading was complete. We have found that changing accessibility annotations on the fly can degrade aural experiences and have provided a fix.
+
+> Info: `accessibilityRole="image"` will be set for `<img>` only when either `alt` or `aria-label` attribute is present.
+
+##### Accessible `<h1-6>` Tags
+
+React Native has a "header" accessibility role which screen reader users depend on widely to identify quickly the content hierarchy of a screen. Until this release, `react-native-render-html` did not pass the appropriate role to heading tags.
+
+#### Other Enhancements
+
+##### Support for `user-select` CSS property
+
+With the new Transient Render Engine featuring React Native prop generation, it has become very easy to pass the `selectable` prop to React Native `Text` components based on the presence of `user-select` CSS property. Usage example:
+
+```html
+<p style="user-select: none">
+  This line is not selectable.<br />
+  <span>Neither is that one.</span>
+</p>
+```
+
+> Important: Please note that this is not full support. The TRE will map `user-select: none;` to `selectable={false}` and any other value to `selectable={true}`.
+
+#### v6.1 Catch-up
+
+A release notes post wasn't published for v6.1; these features are covered here.
+
+##### `enableExperimentalBRCollapsing` Prop
+
+This **recommended prop** allows consumers to circumvent a bug in the Foundry release where line breaks (`<br>`) would be printed erroneously, such as at the end of a paragraph. Its default is yet `false` to avoid introducing breaking changes but it will be enabled by default in the next major release.
+
+> Tip: Read the complete explanation for this prop in the textual content guide (line breaks section).
+
+##### `enableExperimentalGhostLinesPrevention` Prop
+
+This **recommended prop** allows to circumvent a React Native bug where empty `Text` elements would be printed as ghost lines of fixed height (around 20 dpi). Its default is yet `false` to avoid introducing breaking changes but it will be enabled by default in the next major release.
+
+> Tip: Read the complete explanation for this prop in the textual content guide (empty tags section).
+
+##### `provideEmbeddedHeaders` Prop
+
+A function prop which allows to generate HTTP headers for remote resources. It currently works with `<img>` and `<iframe>` tags (since version 2.6 of the `@native-html/iframe-plugin` library).
+
+> Tip: See for example how it can be used with images in the image content guide (providing headers section).
+
+##### `bypassAnonymousTPhrasingNodes` Prop
+
+This prop, `true` by default, makes the React rendering layer bypass grouping (anonymous) `TPhrasing` nodes which have only one child. It is best understood by example. For instance, the following HTML snippet:
+
+```html
+<p>A sentence.</p>
+```
+
+will produce the below Transient Render Tree:
+
+```xml
+<TBlock tagName="p">
+  <TPhrasing>
+    <TText>A sentence.</TText>
+  </TPhrasing>
+</TBlock>
+```
+
+which by default rendering rules, would be translated to the below React render tree:
+
+```xml
+<View>
+  <Text>
+    <Text>A sentence.</Text>
+  </Text>
+</View>
+```
+
+However, when `bypassAnonymousTPhrasingNodes` prop is `true` (the default), the render tree will be simplified to:
+
+```xml
+<View>
+  <Text>A sentence.</Text>
+</View>
+```
+
+This behavior is preferred for many reasons. The most simple one is that it simplifies the render tree. The less React elements there are, the best it is performance-wise. Moreover, there are a lot of React Native bugs related to nested `Text` nodes, so this simplification limits the number of occurrences of those bugs.
+
+# Tutorial: Building a WebView-Free Blog App
+
+## Part I — Create A WebView-free Blog App with React Native Render HTML
+
+Screenshot caption: Article body (dark theme).
+
+The Foundry Release beta is out, and I wanted to show you its powerful capabilities with a very common use-case: rendering an article from a Blog. For this case study, we will use the official React Native blog, which is build on [Docusaurus](https://docusaurus.io/). The App will feature:
+
+- A list of articles fetched from an RSS Feed;
+- An aside table of content displayed in a drawer layout;
+- A scroll-to-section feature when pressing a TOC entry.
+
+This study will be a good opportunity to learn or revisit important techniques to master this library. Also note that the implementation, especially targeted CSS classes are inherently tied to how the website is structured. Since the React Native blog is built on Docusaurus, the implementation should be very easy to transpose in other docusaurus-based blogs.
+
+Now, let's get to the heart of it.
+
+> Tip: The source code of this case study is available in the `main` branch of this repo: [`jsamr/rnrh-blog`](https://github.com/jsamr/rnrh-blog). The `enhanced` branch contains a few more features beyond this tutorial, such as a refined UI, dark mode, caching with [react-queries](https://react-query.tanstack.com/)... etc. You can try out the **enhanced** version right now with expo, see [the project page](https://expo.io/@jsamr/react-native-blog) for instructions.
+
+> Tip: If you have any question or remarks regarding this tutorial, [you're welcome in our Discord channel](https://discord.gg/dbEMMJM).
+
+### Introduction
+
+I propose starting with the end-result, and then explain how we got there. The App has two screens:
+
+1. The Home screen, displaying a list of articles fetched from a RSS feed.
+2. The Article screen, displaying the body of the article and a side-menu to navigate into sections.
+
+The navigation is handled by [React Navigation](https://reactnavigation.org/) library, and most of the components come from [React Native Paper](https://reactnativepaper.com/).
+
+> Important: The steps laid out in this tutorial won't cover the **enhanced** implementation such as seen in below gallery. We will focus on simplicity and won't spend much time on theming. But you can always check out the enhanced implementation here: [`jsamr/rnrh-blog` (enhanced branch)](https://github.com/jsamr/rnrh-blog/tree/enhanced)
+
+#### Gallery
+
+Screenshot captions: Home (dark), Article body (dark), Article side menu (dark). Home (light), Article body (light), Article side menu (light).
+
+### Getting Started
+
+We will use Expo cli to initiate the project. If you don't have it installed yet, install the cli globally:
+
+```bash
+npm install -g expo-cli
+```
+
+After which, create the project. We will use TypeScript and yarn, but of course you're free to set a plain JavaScript project instead.
+
+```bash
+expo init rnrh-blog -t expo-template-blank-typescript --name Blog --yarn
+```
+
+Then we need to install dependencies required for this project:
+
+```bash
+cd rnrh-blog
+expo install @react-navigation/native@^5 @react-navigation/stack@^5 \
+     react-native-screens react-native-safe-area-context \
+     react-native-rss-parser@^1 react-native-render-html \
+     react-native-paper@^4 react-native-gesture-handler events
+```
+
+Now, run
+
+```bash
+yarn android
+```
+
+to launch the App in an android emulator.
+
+### Setting Up Navigation
+
+#### Declare the Routes in TypeScript
+
+Create a new `shared-types.ts` file in the root of your project with the following definitions:
+
+```ts title="shared-types.ts"
+export type RootStackParamList = {
+  Home: undefined;
+  Article: ArticleParams;
+};
+
+export interface ArticleParams {
+  url: string;
+  title: string;
+}
+```
+
+These types define the names of the routes supported by our stack navigator, and the types of their params. Notice that the `Article` route takes a `url` and `title` for display.
+
+#### Create the Routes Components
+
+Add two files, `screens/HomeScreen.tsx` and `screens/ArticleScreen.tsx`:
+
+```tsx title="screens/HomeScreen.tsx"
+import React from 'react';
+import { Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView>
+      <Text>Welcome to the React Native Blog!</Text>
+    </SafeAreaView>
+  );
+}
+```
+
+```tsx title="screens/ArticleScreen.tsx"
+import React, { useEffect } from 'react';
+import { StackScreenProps } from '@react-navigation/stack';
+import { RootStackParamList } from '../shared-types';
+
+type ArticleScreenProps = StackScreenProps<RootStackParamList, 'Article'>;
+
+function useSetTitleEffect({ route, navigation }: ArticleScreenProps) {
+  useEffect(
+    function setTitle() {
+      navigation.setOptions({ title: route.params.title });
+    },
+    [route.params.title, navigation]
+  );
+}
+
+export default function ArticleScreen(props: ArticleScreenProps) {
+  useSetTitleEffect(props);
+  return null;
+}
+```
+
+> Note: In the `ArticleScreen` component, we define an effect to set the screen title displayed in the header based on a route parameter. The logic is internal to the [React Navigation](https://reactnavigation.org/) library.
+
+#### Create the Root Navigator
+
+Replace the current `App.tsx` with the following:
+
+```tsx title="App.tsx"
+import { createStackNavigator } from '@react-navigation/stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { RootStackParamList } from './shared-types';
+import HomeScreen from './screens/HomeScreen';
+import ArticleScreen from './screens/ArticleScreen';
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            headerShown: false
+          }}>
+          <Stack.Screen
+            name="Home"
+            options={{ title: 'Blog' }}
+            component={HomeScreen}
+          />
+          <Stack.Screen
+            name="Article"
+            options={{ headerShown: true }}
+            component={ArticleScreen}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+}
+```
+
+You should finally see a screen displaying "Welcome to the React Native Blog"! Great, the structure is ready: from now on, we can implement each of those screens.
+
+> Tip: If you are not familiar with React Navigation, you could benefit from reading its [Stack Navigator documentation](https://reactnavigation.org/docs/stack-navigator) before going further.
+
+**Now, we're ready to implement the RSS feed list. Let's jump to Part II.**
+
+## Part II — Create A WebView-free Blog App with React Native Render HTML
+
+This article is the part II of the *Create a WebView-free Blog App with React Native Render HTML* serie. See also Part I and Part III.
+
+> Tip: The source code of this case study is available in the `main` branch of this repo: [`jsamr/rnrh-blog`](https://github.com/jsamr/rnrh-blog). The `enhanced` branch contains a few more features beyond this tutorial, such as a refined UI, dark mode, caching with [react-queries](https://react-query.tanstack.com/)... etc. You can try out the **enhanced** version right now with expo, see [the project page](https://expo.io/@jsamr/react-native-blog) for instructions.
+
+> Tip: If you have any question or remarks regarding this tutorial, [you're welcome in our Discord channel](https://discord.gg/dbEMMJM).
+
+### The Home Screen
+
+Let's get back to our `HomeScreen.tsx` file. Below are the steps to get to a functional component:
+
+1. Fetch the RSS feed items. We'll do this in the `useRssFeed` hook.
+2. Render a `FlatList` filled with the fetched items.
+3. Render individual items in a `FeedItemDisplay` component.
+
+#### The `useRssFeed` Hook
+
+First of all, we'll define the `FeedItem` TypeScript interface in `shared-types.ts`. This is the shape of items parsed by the RSS parser.
+
+```tsx title="shared-types.ts"
+// ... previous exports
+
+export interface FeedItem {
+  title: string;
+  links: [{ url: string }];
+  description: string;
+  published: string;
+}
+```
+
+Then, let's define the hook in the `hooks/useRssFeed.ts` file.
+
+```tsx title="hooks/useRssFeed.ts"
+import { useState, useEffect, useCallback } from 'react';
+import * as rssParser from 'react-native-rss-parser';
+import { FeedItem } from '../shared-types';
+
+export default function useRssFeed(feed: string) {
+  const [{ isRefreshing, refreshId, items }, setRssState] = useState({
+    items: null as null | FeedItem[],
+    isRefreshing: true,
+    refreshId: 0
+  });
+  const refresh = useCallback(() => {
+    setRssState((s) => ({
+      ...s,
+      isRefreshing: true,
+      refreshId: s.refreshId + 1
+    }));
+  }, []);
+  useEffect(
+    function loadFeed() {
+      let cancelled = false;
+      (async function () {
+        const response = await fetch(feed);
+        if (response.ok) {
+          const data = await response.text();
+          const feed = await rssParser.parse(data);
+          !cancelled &&
+            setRssState((s) => ({
+              ...s,
+              items: (feed.items as unknown) as FeedItem[],
+              isRefreshing: false
+            }));
+        } else {
+          !cancelled &&
+            setRssState((s) => ({
+              ...s,
+              isRefreshing: false
+            }));
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    },
+    [refreshId, feed]
+  );
+  return { refresh, isRefreshing, items };
+}
+```
+
+This hook uses an effect to load the feed, and store the retrieved items in a local state (`items`). A few remarks:
+
+1. We provide a `refresh` function to trigger a new fetch along with a `isRefreshing` state.
+2. The effect callback returns a cleanup function to avoid setting state on unmounted components. Not doing this is considered an antipattern, see [this guide](https://dev.to/pallymore/clean-up-async-requests-in-useeffect-hooks-90h) for a deep dive.
+
+Last but not least, if you are using TypeScript, you will need to add module definitions for rss-parser. Put this file in the `hooks` folder:
+
+```ts title="hooks/react-native-rss-parser.d.ts"
+declare module 'react-native-rss-parser';
+```
+
+#### The `FeedItemDisplay` Component
+
+We are going to define this component in the `components` directory, like so:
+
+```tsx title="components/FeedItemDisplay.tsx"
+import { NavigationProp, useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+import { Card, Text } from 'react-native-paper';
+import { FeedItem, RootStackParamList } from '../shared-types';
+
+export default function FeedItemDisplay({ item }: { item: FeedItem }) {
+  const date = new Date(Date.parse(item.published));
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const url = item.links[0].url;
+  const onPress = useCallback(() => {
+    navigation.navigate('Article', { url: url, title: item.title });
+  }, [url]);
+  return (
+    <Card
+      style={{
+        marginHorizontal: 10,
+        paddingRight: 10
+      }}
+      onPress={onPress}>
+      <Card.Title
+        titleNumberOfLines={2}
+        title={item.title}
+        titleStyle={{ lineHeight: 26 }}
+        subtitle={date.toLocaleDateString()}
+      />
+      <Card.Content>
+        <Text numberOfLines={3}>{item.description}</Text>
+      </Card.Content>
+    </Card>
+  );
+}
+```
+
+This component barely displays a `FeedItem` in a `Card` component from `react-native-paper`. Besides, it allows navigation to the "Article" route when pressed.
+
+#### The List Component
+
+Since we have the data consumable with a hook, and individual items, let's rewrite the default export of `screens/HomeScreen.tsx`:
+
+```tsx
+import React from 'react';
+import { FlatList, ListRenderItem, View } from 'react-native';
+// ... other imports
+import FeedItemDisplay from '../components/FeedItemDisplay';
+import useRssFeed from '../hooks/useRssFeed';
+
+function Separator() {
+  return <View style={{ height: 10 }} />;
+}
+
+const renderItem: ListRenderItem<FeedItem> = function renderItem({ item }) {
+  return <FeedItemDisplay item={item} />;
+};
+
+export default function HomeScreen() {
+  const { items, refresh, isRefreshing } = useRssFeed(
+    'https://reactnative.dev/blog/rss.xml'
+  );
+  return (
+    <SafeAreaView style={{ flexGrow: 1 }}>
+      <FlatList
+        onRefresh={refresh}
+        refreshing={isRefreshing}
+        data={items}
+        renderItem={renderItem}
+        ListFooterComponent={Separator}
+        ItemSeparatorComponent={Separator}
+        ListHeaderComponent={Separator}
+      />
+    </SafeAreaView>
+  );
+}
+```
+
+Screenshot caption: Blog article home list.
+
+Great! Thus you should be able to see the list on your app. Press a card and you'll see an empty Article screen showing up. Note that we are using a `Separator` component for consistent spacing above, below and between items.
+
+> Tip: If you are unfamiliar with the `FlatList` component, [check out the official guide](https://reactnative.dev/docs/using-a-listview).
+
+> Note: You can drag-to-refresh the list to fetch the RSS feed again. This is thanks to `onRefresh` and `refreshing` props of the `FlatList` component.
+
+Now it's time to refine the Article screen!
+
+### The Article Screen
+
+To render the article, we'll need to follow the below steps:
+
+1. Fetch the HTML from the given URL;
+2. Parse the HTML to build a DOM;
+3. Extract headings from the DOM;
+4. Render the headings in a Drawer and the DOM in a `ScrollView` with `RenderHTMLSource`.
+
+One important note is that we must use the explicit composite rendering architecture (see the Rendering doc) because we want access to the DOM object from the controlling component to easily extract headings, which is more tedious when using the implicit composite architecture (e.g., with the `RenderHTML` component).
+
+#### Setting up the Composite Rendering Architecture
+
+Explicit composite rendering implies that we will replace `RenderHTML` with `RenderHTMLSource`, which will have two ascendants in the render tree: a `TRenderEngineProvider` and a `RenderHTMLConfigProvider`. Those parents will respectively share an engine instance and configuration with any `RenderHTMLSource` descendant.
+
+A good place to put those providers is the very root of the application. For that end, we will create a `components/WebEngine.tsx` and load it from `App.tsx`:
+
+```tsx title="components/WebEngine.tsx"
+import * as React from 'react';
+import {
+  RenderHTMLConfigProvider,
+  TRenderEngineProvider,
+  TRenderEngineConfig,
+} from 'react-native-render-html';
+import { findOne } from 'domutils';
+
+const selectDomRoot: TRenderEngineConfig["selectDomRoot"] = (node) =>
+  findOne((e) => e.name === "article", node.children, true);
+
+const ignoredDomTags = ["button"];
+
+export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
+  // Every prop is defined outside of the function component.
+  // This is important to prevent extraneous rebuilts of the engine.
+  return (
+    <TRenderEngineProvider
+      ignoredDomTags={ignoredDomTags}
+      selectDomRoot={selectDomRoot}>
+      <RenderHTMLConfigProvider enableExperimentalMarginCollapsing>
+        {children}
+      </RenderHTMLConfigProvider>
+    </TRenderEngineProvider>
+  );
+}
+```
+
+A few remarks on different props used here:
+
+- `TRenderEngineConfig.ignoreDomTags` prop to ignore irrelevant tags;
+- `TRenderEngineConfig.selectDomRoot` prop to select the first DOM element to render;
+- `RenderHTMLConfig.enableExperimentalMarginCollapsing` prop to collapse vertical margins.
+
+We will go back to this component later to refine the appearance. For the time being, we'll focus on features. A final step is to import the `WebEngine` from the root component:
+
+```tsx {2,8,28} title="App.tsx"
+// ... other imports
+import WebEngine from './components/WebEngine';
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+export default function App() {
+  return (
+    <WebEngine>
+      <SafeAreaProvider>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerShown: false
+            }}>
+            <Stack.Screen
+              name="Home"
+              options={{ title: 'Blog' }}
+              component={HomeScreen}
+            />
+            <Stack.Screen
+              name="Article"
+              options={{ headerShown: true }}
+              component={ArticleScreen}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </SafeAreaProvider>
+    </WebEngine>
+  );
+}
+```
+
+#### Rendering the Article
+
+##### The `ArticleBody` Component
+
+Let's implement an `ArticleBody` component which sole purpose is to display the rendered DOM when it's ready, and a loading indicator when it's not:
+
+```tsx title="components/ArticleBody.tsx"
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useWindowDimensions } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { RenderHTMLSource, Document } from 'react-native-render-html';
+import { ActivityIndicator } from 'react-native-paper';
+
+function LoadingDisplay() {
+  return (
+    <View style={styles.loading}>
+      <ActivityIndicator color="#61dafb" size="large" />
+    </View>
+  );
+}
+
+const HZ_MARGIN = 10;
+
+export default function ArticleBody({ dom }: { dom: Document | null }) {
+  const { width } = useWindowDimensions();
+  const availableWidth = Math.min(width, 500);
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.content,
+        { width: availableWidth }
+      ]}>
+      {dom ? (
+        <RenderHTMLSource
+          contentWidth={availableWidth - 2 * HZ_MARGIN}
+          source={{
+            dom
+          }}
+        />
+      ) : (
+        <LoadingDisplay />
+      )}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+  },
+  content: {
+    flexGrow: 1,
+    alignSelf: "center",
+    paddingHorizontal: HZ_MARGIN,
+    // leave some space for the FAB
+    paddingBottom: 65
+  },
+  loading: {
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+```
+
+Note that the `RenderHTMLSourceProps.source` prop can take a `dom`, `uri` or `html` field. Just as a reminder, we need to use the `dom` source variant because we will have to query headings displayed in a Drawer menu.
+
+##### Back to the `ArticleScreen`
+
+We need to produce a `dom` object to feed the `ArticleBody` component we have just defined. We propose two hooks to produce this object:
+
+- `useFetchHtml(url: string)` to fetch the HTML;
+- `useArticleDom(url: string)` to create a DOM.
+
+Add this new file in `hooks/useArticleDom.ts`:
+
+```tsx title="hooks/useArticleDom.ts"
+import { useEffect, useState, useMemo } from 'react';
+import { useAmbientTRenderEngine } from 'react-native-render-html';
+
+function useFetchHtml(url: string) {
+  const [fetechState, setState] = useState({
+    html: null as string | null,
+    error: null as string | null
+  });
+  useEffect(
+    function fetchArticle() {
+      let cancelled = false;
+      (async function () {
+        const response = await fetch(url);
+        if (response.ok) {
+          const html = await response.text();
+          !cancelled && setState({ html, error: null });
+        } else {
+          !cancelled &&
+            setState({
+              html: null,
+              error: `Could not load HTML. Received status ${response.status}`
+            });
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    },
+    [url]
+  );
+  return fetechState;
+}
+
+export default function useArticleDom(url: string) {
+  const engine = useAmbientTRenderEngine();
+  const { html } = useFetchHtml(url);
+  const dom = useMemo(() => {
+    if (typeof html === 'string') {
+      return engine.parseDocument(html);
+    }
+    return null;
+  }, [html, engine]);
+  return {
+    dom
+  };
+}
+```
+
+The important stuff is happening in the `useArticleDom` hook. We're using `useAmbientTRenderEngine` hook to get the instance of the Transient Render Engine provided by `TRenderEngineProvider`, which in turns offers the `TRenderEngine.parseDocument` method to transform an HTML string into a DOM. Moreover, note that because we passed `TRenderEngineConfig.selectDomRoot` prop to select the first `<article>` met, the returned `dom` object will be an `<article>` element. Everything else such as `<header>`, `<footer>` and other elements will be ignored.
+
+Finally, let's consume this hook from the `ArticleScreen` component and render an `ArticleBody`:
+
+```tsx title="screens/ArticleScreen"
+// ... other imports
+import ArticleBody from '../components/ArticleBody';
+import useArticleDom from '../hooks/useArticleDom';
+
+// ... other definitions
+
+export default function ArticleScreen(props: ArticleScreenProps) {
+  useSetTitleEffect(props);
+  const { dom } = useArticleDom(props.route.params.url);
+  return <ArticleBody dom={dom} />;
+}
+```
+
+Fantastic! It's now rendering the whole article. **It's very ugly though, and significantly divergent from the webpage layout, but we'll address that later**.
+
+Screenshot caption: Blog article body, unstyled.
+
+#### The Drawer Layout
+
+We want to display a menu on the right. For this purpose, we will use the [`DrawerLayout`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/drawer-layout/) component from `react-native-gesture-handler`.
+
+Let's include this component in the `ArticleScreen` component:
+
+```tsx title="screens/ArticleScreen"
+import React, { useCallback, useEffect, useRef } from 'react';
+// ... other imports
+import { StyleSheet } from 'react-native';
+import { DrawerLayout } from 'react-native-gesture-handler';
+import { FAB } from 'react-native-paper';
+
+// ... other definitions
+
+function useDrawer() {
+  const drawerRef = useRef<DrawerLayout>(null);
+  const openDrawer = useCallback(() => {
+    drawerRef.current?.openDrawer();
+  }, []);
+  const closeDrawer = useCallback(() => {
+    drawerRef.current?.closeDrawer();
+  }, []);
+  return {
+    drawerRef,
+    openDrawer,
+    closeDrawer
+  };
+}
+
+export default function ArticleScreen(props: ArticleScreenProps) {
+  useSetTitleEffect(props);
+  const { dom } = useArticleDom(props.route.params.url);
+  const { drawerRef, openDrawer } = useDrawer();
+  const renderToc = useCallback(function renderSceneContent() {
+    return null;
+  }, []);
+  return (
+    <DrawerLayout
+      drawerPosition="right"
+      drawerWidth={300}
+      renderNavigationView={renderToc}
+      ref={drawerRef}>
+      <ArticleBody dom={dom} />
+      <FAB
+        style={styles.fab}
+        color="#61dafb"
+        icon="format-list-bulleted-square"
+        onPress={openDrawer}
+      />
+    </DrawerLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  fab: {
+    position: 'absolute',
+    bottom: 15,
+    right: 15,
+    backgroundColor: 'white'
+  }
+});
+```
+
+#### Extracting headings
+
+Now, let's get back to `useArticleDom` hook and use an effect to extract headings from the DOM:
+
+```ts {1,3-4,10,18-33,36} title="hooks/useArticleDom.ts"
+import { useEffect, useState, useMemo } from 'react';
+// ... other imports
+import { findAll } from 'domutils';
+import { Element } from 'domhandler';
+
+// useFetchHtml
+
+export default function useArticleDom(url: string) {
+  const engine = useAmbientTRenderEngine();
+  const [headings, setHeadings] = useState<Element[]>([]);
+  const { html } = useFetchHtml(url);
+  const dom = useMemo(() => {
+    if (typeof html === 'string') {
+      return engine.parseDocument(html);
+    }
+    return null;
+  }, [html, engine]);
+  useEffect(
+    function extractHeadings() {
+      if (dom != null) {
+        // We know the DOM hierarchy is going to be document → body → article
+        // because the engine will always ensure that a root document
+        // and a body are present. This process is called normalization.
+        const article = (dom.children[0] as Element)?.children[0] as Element;
+        const headers = findAll(
+          (elm) => elm.tagName === 'h2' || elm.tagName === 'h3',
+          article.children
+        );
+        setHeadings(headers);
+      }
+    },
+    [dom]
+  );
+  return {
+    dom,
+    headings
+  };
+}
+```
+
+The effect is pretty straightforwards. It uses `findAll` from `domutils` to extract all `h2` and `h3` tags, and finally update the `headings` state. We are now ready to define a new `TOC` component to render those headings in the drawer.
+
+#### The `TOC` Component
+
+Let's start by defining a `TOCEntry` component in `components/TOCEntry.tsx`:
+
+```tsx title="components/TOCEntry.tsx"
+import React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export default function TOCEntry({
+  headerName,
+  tagName,
+  active,
+  onPress
+}: {
+  headerName: string;
+  tagName: string;
+  active: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      style={[styles.container, active && styles['container--active']]}
+      onPress={onPress}
+      android_ripple={{ color: '#baebf3' }}>
+      <Text
+        style={[
+          styles.label,
+          styles[`label--${tagName as 'h2' | 'h3'}` as const]
+        ]}>
+        {headerName}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+    paddingRight: 20,
+    marginLeft: 10,
+    borderRadius: 10,
+    paddingVertical: 10
+  },
+  'container--active': {
+    backgroundColor: "rgba(186, 235, 243, 0.5)"
+  },
+  label: {
+    textAlign: 'right',
+    fontSize: 14,
+    color: 'rgb(28, 30, 33)'
+  },
+  'label--h2': {
+    fontSize: 18
+  },
+  'label--h3': {}
+});
+```
+
+The `TOCEntry` renders a `Pressable` which label is styled depending of the `tagName` (h2 or h3) and whether it's active (e.g. selected). Now we're ready to define the `TOC` component in `components/TOC.tsx`:
+
+```tsx title="components/TOC.tsx"
+import React, { useState } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { textContent } from 'domutils';
+import { Element } from 'domhandler';
+import TOCEntry from './TOCEntry';
+
+export default function TOC({
+  headings,
+  onPressEntry
+}: {
+  headings: Element[];
+  onPressEntry?: (name: string) => void;
+}) {
+  const [activeEntry, setActiveEntry] = useState(
+    headings.length ? textContent(headings[0]) : ''
+  );
+  return (
+    <ScrollView
+      contentContainerStyle={styles.scrollContent}
+      style={styles.scrollView}>
+      <View style={styles.scrollBackground} />
+      {headings.map((header) => {
+        const headerName = textContent(header);
+        const onPress = () => {
+          setActiveEntry(headerName);
+          onPressEntry?.(headerName);
+        };
+        return (
+          <TOCEntry
+            active={headerName === activeEntry}
+            key={headerName}
+            onPress={onPress}
+            tagName={header.tagName}
+            headerName={headerName}
+          />
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'white',
+    opacity: 0.92,
+    paddingRight: 10
+  },
+  scrollContent: {
+    flex: 1,
+    paddingVertical: 20,
+    position: 'relative'
+  },
+  scrollBackground: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    borderRightWidth: 1,
+    marginRight: 10,
+    borderColor: 'rgba(125,125,125,0.3)'
+  }
+});
+```
+
+Finally, we must render the `TOC` component in the `ArticleScreen`:
+
+```tsx {2,10-18} title="screens/ArticleScreen.tsx"
+// other imports
+import TOC from '../components/TOC';
+
+// ...
+
+export default function ArticleScreen(props: ArticleScreenProps) {
+  useSetTitleEffect(props);
+  const { dom, headings } = useArticleDom(props.route.params.url);
+  const { drawerRef, openDrawer } = useDrawer();
+  const onPressEntry = useCallback((entry: string) => {
+    // We'll handle that later
+  }, []);
+  const renderToc = useCallback(
+    function renderToc() {
+      return <TOC headings={headings} onPressEntry={onPressEntry} />;
+    },
+    [headings]
+  );
+  return (
+    <DrawerLayout
+      drawerPosition="right"
+      drawerWidth={300}
+      renderNavigationView={renderToc}
+      ref={drawerRef}>
+      <ArticleBody dom={dom} />
+      <FAB
+        style={styles.fab}
+        color="#61dafb"
+        icon="format-list-bulleted-square"
+        onPress={openDrawer}
+      />
+    </DrawerLayout>
+  );
+}
+
+// styles
+```
+
+Now, you should have a drawable TOC!
+
+Screenshot caption: Blog article side menu.
+
+However, pressing an entry won't do anything. **It is hence time to tackle the implementation of the tap-to-scroll feature! Let's jump to Part III.**
+
+## Part III — Create A WebView-free Blog App with React Native Render HTML
+
+This article is the part III of the *Create a WebView-free Blog App with React Native Render HTML* serie. See also Part I and Part II.
+
+> Tip: The source code of this case study is available in the `main` branch of this repo: [`jsamr/rnrh-blog`](https://github.com/jsamr/rnrh-blog). The `enhanced` branch contains a few more features beyond this tutorial, such as a refined UI, dark mode, caching with [react-queries](https://react-query.tanstack.com/)... etc. You can try out the **enhanced** version right now with expo, see [the project page](https://expo.io/@jsamr/react-native-blog) for instructions.
+
+> Tip: If you have any question or remarks regarding this tutorial, [you're welcome in our Discord channel](https://discord.gg/dbEMMJM).
+
+### Tap To Scroll Feature
+
+#### The `Scroller` Class
+
+We'll put all the scrolling logic in a `Scroller` class that we'll later use with hooks. Create this new file: `utils/Scroller.ts`:
+
+```ts title="utils/Scroller.ts"
+import { MutableRefObject } from "react";
+import { LayoutChangeEvent, Platform, ScrollViewProps } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { EventEmitter } from "events";
+
+// This is the min distance from the top edge of the scroll view
+// to select a heading
+const MIN_DIST_FROM_TOP_EDG = 15;
+
+export default class Scroller {
+  private ref: MutableRefObject<ScrollView | null>;
+  private entriesMap: Record<string, number> = {};
+  private entriesCoordinates: Array<[string, number]> = [];
+  private eventEmitter = new EventEmitter();
+  private lastEntryName = "";
+  private offset = 0;
+
+  constructor(ref: MutableRefObject<ScrollView | null>) {
+    this.ref = ref;
+  }
+
+  handlers: ScrollViewProps = {
+    onContentSizeChange: () => {
+      this.entriesCoordinates = Object.entries(this.entriesMap).sort(
+        (a, b) => a[1] - b[1]
+      );
+    },
+    onScroll: ({ nativeEvent }) => {
+      const offsetY =
+        nativeEvent.contentOffset.y - this.offset + MIN_DIST_FROM_TOP_EDG;
+      const layoutHeight = nativeEvent.layoutMeasurement.height;
+      // We use a conditional to avoid overheading the JS thread on Android.
+      // On iOS, scrollEventThrottle will do the work.
+      if (Platform.OS !== "android" || Math.abs(nativeEvent.velocity!.y) < 1) {
+        for (let i = 0; i < this.entriesCoordinates.length; i++) {
+          const [entryName, lowerBound] = this.entriesCoordinates[i];
+          const upperBound =
+            i < this.entriesCoordinates.length - 1
+              ? this.entriesCoordinates[i + 1][1]
+              : lowerBound + layoutHeight;
+          if (offsetY >= lowerBound && offsetY < upperBound) {
+            if (entryName !== this.lastEntryName) {
+              this.eventEmitter.emit("select-entry", entryName);
+              this.lastEntryName = entryName;
+            }
+            break;
+          }
+        }
+      }
+    },
+  };
+
+  setOffset(offset: number) {
+    this.offset = offset;
+  }
+
+  addSelectedEntryListener(listener: (entryName: string) => void) {
+    this.eventEmitter.addListener("select-entry", listener);
+  }
+
+  removeSelectedEntryListener(listener: (entryName: string) => void) {
+    this.eventEmitter.removeListener("select-entry", listener);
+  }
+
+  registerScrollEntry(name: string, layout: LayoutChangeEvent) {
+    this.entriesMap[name] = layout.nativeEvent.layout.y;
+  }
+
+  scrollToEntry(entryName: string) {
+    if (entryName in this.entriesMap) {
+      this.ref.current?.scrollTo({
+        y: this.entriesMap[entryName] + this.offset - MIN_DIST_FROM_TOP_EDG,
+        animated: true,
+      });
+    }
+  }
+}
+```
+
+Below is a summary of each member in this class.
+
+- `constructor` — The constructor takes a `ScrollView` ref to enable the `scrollToEntry` method.
+- `addSelectedEntryListener` — A method to listen to selected entry changes. This will be useful in the table of content drawer to update the active entry on scroll.
+- `removeSelectedEntryListener` — A method to free a listener to selected entry changes.
+- `registerScrollEntry` — A method to be used with `onLayout` in order to store the coordinates of each entry in the body of the article.
+- `handlers` — Event handlers to be passed to a `ScrollView` component. The `onScroll` handler will be used to update the selected entry in the table of content drawer.
+- `setOffset` — A method to set the offset of the `headings` container. Because of the DOM structure offered by Docusaurus which looks like:
+
+  ```html
+  <article>
+    <header>...</header>
+    <div class="markdown">
+      <h2>...</h2>
+      <h3>...</h3>
+    </div>
+  </article>
+  ```
+
+  the computed headings tags coordinates will be relative to the `<div>` rather than relative to the `ScrollView` content, and we need to adjust to that.
+- `scrollToEntry` — A method to imperatively scroll to the given entry name.
+
+#### Sharing the `Scroller` in a React Context
+
+Let's start by creating a scroller context and export the relevant hook and provider:
+
+```ts title="utils/scroller.tsx"
+import React, { createContext, PropsWithChildren, useContext } from "react";
+import Scroller from './Scroller';
+
+const scrollerContext = createContext<Scroller>(null as any);
+
+export function useScroller(): Scroller {
+  return useContext(scrollerContext);
+}
+
+export function ScrollerProvider({
+  children,
+  scroller
+}: PropsWithChildren<{ scroller: Scroller }>) {
+  return (
+    <scrollerContext.Provider value={scroller}>
+      {children}
+    </scrollerContext.Provider>
+  );
+}
+```
+
+Then we can provide a `scroller` instance from the `ArticleScreen` component, and scroll to the targeted entry on menu entry press.
+
+```tsx {1,3-4,8-15,22-26,34,41,49} title="screens/ArticleScreen.tsx"
+import React, { useCallback, useEffect, useRef, useMemo } from "react";
+// ... other imports
+import Scroller from "../utils/Scroller";
+import { ScrollerProvider } from "../utils/scroller";
+
+// other hooks
+
+function useScrollFeature(scrollerDep: any) {
+  const scrollViewRef = useRef<null | ScrollView>(null);
+  const scroller = useMemo(() => new Scroller(scrollViewRef), [scrollerDep]);
+  return {
+    scroller,
+    scrollViewRef,
+  };
+}
+
+export default function ArticleScreen(props: ArticleScreenProps) {
+  useSetTitleEffect(props);
+  const url = props.route.params.url;
+  const { dom, headings } = useArticleDom(url);
+  const { drawerRef, openDrawer, closeDrawer } = useDrawer();
+  const { scrollViewRef, scroller } = useScrollFeature(url);
+  const onPressEntry = useCallback((entry: string) => {
+    closeDrawer();
+    scroller.scrollToEntry(entry);
+  }, [scroller]);
+  const renderToc = useCallback(
+    function renderToc() {
+      return <TOC headings={headings} onPressEntry={onPressEntry} />;
+    },
+    [headings]
+  );
+  return (
+    <ScrollerProvider scroller={scroller}>
+      <DrawerLayout
+        drawerPosition="right"
+        drawerWidth={300}
+        renderNavigationView={renderToc}
+        ref={drawerRef}
+      >
+        <ArticleBody scrollViewRef={scrollViewRef} dom={dom} />
+        <FAB
+          style={styles.fab}
+          color="#61dafb"
+          icon="format-list-bulleted-square"
+          onPress={openDrawer}
+        />
+      </DrawerLayout>
+    </ScrollerProvider>
+  );
+}
+
+// styles
+```
+
+Finally, we must consume the `scrollViewRef` in the `ArticleBody` component, and pass the `Scroller.handlers` event handlers to the `ScrollView` component:
+
+```tsx {3,9,12,16,19} title="components/ArticleBody.tsx"
+import React, { useCallback } from "react";
+// ... other imports
+import { useScroller } from "../utils/scroller";
+
+// other definitions
+
+export default function ArticleBody({
+  dom,
+  scrollViewRef
+}: {
+  dom: Document | null;
+  scrollViewRef: any;
+}) {
+  const { width } = useWindowDimensions();
+  const availableWidth = Math.min(width, 500);
+  const scroller = useScroller();
+  return (
+    <ScrollView
+      {...scroller.handlers}
+      style={styles.container}
+      ref={scrollViewRef}
+      scrollEventThrottle={100}
+      // other props
+    >
+      {/* ... */}
+    </ScrollView>
+  );
+}
+```
+
+Great! Nevertheless we have yet two unaddressed issues:
+
+- Update selected entry on scroll in the `TOC`;
+- Register headings layouts. We will use a custom renderer for that purpose.
+
+#### Listening to Entry Changes in `TOC`
+
+First of all, I propose to factor the logic of adding a listener to selected entry changes in a separate hook (`hooks/useOnEntryChangeEffect.ts`):
+
+```ts title="hooks/useOnEntryChangeEffect.ts"
+import { useEffect } from "react";
+import { useScroller } from "../utils/scroller";
+
+export default function useOnEntryChangeEffect(
+  onEntryChange: (entryName: string) => void
+) {
+  const scroller = useScroller();
+  useEffect(
+    function updateActiveTargetOnScroll() {
+      scroller.addSelectedEntryListener(onEntryChange);
+      return () => scroller.removeSelectedEntryListener(onEntryChange);
+    },
+    [scroller, onEntryChange]
+  );
+}
+```
+
+Then, we just need to consume this hook from the `TOC` component:
+
+```ts {2,14} title="components/TOC.tsx"
+// ...other imports
+import useOnEntryChangeEffect from "../hooks/useOnEntryChangeEffect";
+
+export default function TOC({
+  headings,
+  onPressEntry,
+}: {
+  headings: Element[];
+  onPressEntry?: (name: string) => void;
+}) {
+  const [activeEntry, setActiveEntry] = useState(
+    headings.length ? textContent(headings[0]) : ""
+  );
+  useOnEntryChangeEffect(setActiveEntry);
+  // ...
+}
+```
+
+#### Register Headings Layouts
+
+The `Scroller` is still missing the coordinates of each heading to be able to properly `scrollToEntry`. For this purpose, we are going to create a custom renderer (see the Custom Renderers guide) for `<h2>` and `<h3>` tags. We will also need to register a `<header>` renderer to store the header height. If you remember well, the DOM has a structure like below:
+
+```html
+<article>
+  <!-- We need to account for the header height -->
+  <header>...</header>
+  <div class="markdown">
+    <h2>...</h2>
+    <h3>...</h3>
+  </div>
+</article>
+```
+
+Let's get back to `components/WebEngine.tsx` and register both renderers here:
+
+```tsx title="components/WebEngine.tsx"
+import React, { useCallback } from "react";
+import {
+  CustomBlockRenderer,
+  CustomTagRendererRecord,
+  RenderHTMLConfigProvider,
+  TRenderEngineProvider,
+  TRenderEngineConfig,
+} from "react-native-render-html";
+import { findOne, textContent } from "domutils";
+import { useScroller } from "../utils/scroller";
+import { LayoutChangeEvent } from "react-native";
+
+const HeadingRenderer: CustomBlockRenderer = function HeaderRenderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  const scroller = useScroller();
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      scroller.registerScrollEntry(textContent(props.tnode.domNode!), e);
+    },
+    [scroller]
+  );
+  return <TDefaultRenderer {...props} viewProps={{ onLayout }} />;
+};
+
+const HeaderRenderer: CustomBlockRenderer = function HeaderRenderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  const scroller = useScroller();
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      scroller.setOffset(e.nativeEvent.layout.y + e.nativeEvent.layout.height);
+    },
+    [scroller]
+  );
+  return <TDefaultRenderer {...props} viewProps={{ onLayout }} />;
+};
+
+const renderers: CustomTagRendererRecord = {
+  h2: HeadingRenderer,
+  h3: HeadingRenderer,
+  header: HeaderRenderer,
+};
+
+const selectDomRoot: TRenderEngineConfig["selectDomRoot"] = (node) =>
+  findOne((e) => e.name === "article", node.children, true);
+
+const ignoredDomTags = ["button", "footer"];
+
+export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
+  // Every prop is defined outside of the function component.
+  // This is important to prevent extraneous rebuilts of the engine.
+  return (
+    <TRenderEngineProvider
+      ignoredDomTags={ignoredDomTags}
+      selectDomRoot={selectDomRoot}
+    >
+      <RenderHTMLConfigProvider
+        renderers={renderers}
+        enableExperimentalMarginCollapsing
+      >
+        {children}
+      </RenderHTMLConfigProvider>
+    </TRenderEngineProvider>
+  );
+}
+```
+
+Because the `<h2>`, `<h3>` and `<header>` tags have a content model set to **block**, they will be rendered in a `View`, so we can pass `onLayout` in `TDefaultRendererProps.viewProps` prop.
+
+Hence we're done with the tap-to-scroll feature! But the `ArticleBody` is still pretty ugly, so we'll use some styles and fixes to prettify it!
+
+### Styling Refinements
+
+#### Fixing the Avatar
+
+The avatar should be 50x50 and its container displayed in row. We are going to fix it in two steps:
+
+1. By targeting the container class with styles to display in row;
+2. By setting a custom `<img>` renderer to fix the size.
+
+So let's edit the `components/WebEngine` to apply those fixes:
+
+```tsx {5,9,15-21,26,31-63,70} title="components/WebEngine"
+import React, { useCallback } from "react";
+import {
+  CustomBlockRenderer,
+  CustomTagRendererRecord,
+  MixedStyleRecord,
+  RenderHTMLConfigProvider,
+  TRenderEngineProvider,
+  TRenderEngineConfig,
+  useInternalRenderer,
+} from "react-native-render-html";
+// ... other imports
+
+// HeaderRenderer
+
+const ImageRenderer: CustomBlockRenderer = function ImageRenderer(props) {
+  const { Renderer, rendererProps } = useInternalRenderer("img", props);
+  if (props.tnode.parent?.hasClass("avatar__photo")) {
+    return <Renderer {...rendererProps} width={50} height={50} />;
+  }
+  return <Renderer {...rendererProps} />;
+};
+
+const renderers: CustomTagRendererRecord = {
+  h2: HeadingRenderer,
+  h3: HeadingRenderer,
+  img: ImageRenderer
+};
+
+// ... other definitions
+
+const classesStyles: MixedStyleRecord = {
+  avatar: {
+    marginTop: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+  },
+  avatar__photo: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    overflow: "hidden",
+  },
+  avatar__intro: {
+    flexShrink: 1,
+    alignItems: "flex-start",
+  },
+  avatar__name: {
+    fontWeight: "bold",
+    flexGrow: 0,
+    marginBottom: 10,
+  },
+  avatar__subtitle: {
+    color: "rgb(118, 118, 118)",
+    fontWeight: "bold",
+    lineHeight: 16,
+  },
+  "avatar__photo-link": {
+    borderRadius: 25,
+    marginRight: 10,
+    overflow: "hidden",
+  },
+}
+
+export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <TRenderEngineProvider
+      ignoredDomTags={ignoredDomTags}
+      selectDomRoot={selectDomRoot}
+      classesStyles={classesStyles}
+      // other props
+    >
+    {/*...*/}
+    </TRenderEngineProvider>
+  );
+}
+```
+
+#### Fixing Paragraphs in `<li>` Elements
+
+Paragraphs nested in `<li>` elements have top and bottom margins, which is undesirable. To fix the issue, we're going to add a custom `<p>` renderer like so:
+
+```tsx title="components/WebEngine.tsx"
+// renderers and imports
+
+const ParagraphRenderer: CustomBlockRenderer = function ParagraphRenderer({
+  TDefaultRenderer,
+  tnode,
+  ...props
+}) {
+  const marginsFix =
+    tnode.markers.olNestLevel > -1 || tnode.markers.ulNestLevel > -1
+      ? { marginTop: 0, marginBottom: 0 }
+      : null;
+  return (
+    <TDefaultRenderer
+      {...props}
+      tnode={tnode}
+      style={[props.style, marginsFix]}
+    />
+  );
+};
+
+const renderers: CustomTagRendererRecord = {
+  // ... other renderers
+  p: ParagraphRenderer
+};
+```
+
+> Note: We are using `markers` which contain the current nest level of `ol` and `ul` elements to assess if we are rendering inside a list. See `Markers`.
+
+#### Discard `#` anchors appended to Headings by Docusaurus
+
+These elements have a `"hash-link"` class, so we can use `ignoreDomNode` to discard them:
+
+```tsx {5,15-16,25} title="components/WebEngine.tsx"
+import React, { useCallback } from "react";
+import {
+  CustomBlockRenderer,
+  CustomTagRendererRecord,
+  isDomElement,
+  MixedStyleRecord,
+  RenderHTMLConfigProvider,
+  TRenderEngineProvider,
+  TRenderEngineConfig,
+  useInternalRenderer,
+} from "react-native-render-html";
+
+// ...
+
+const ignoreDomNode: TRenderEngineConfig["ignoreDomNode"] = (node) =>
+  isDomElement(node) && !!node.attribs.class?.match(/hash-link/);
+
+export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
+  // Every prop is defined outside of the function component.
+  // This is important to prevent extraneous rebuilts of the engine.
+  return (
+    <TRenderEngineProvider
+      ignoredDomTags={ignoredDomTags}
+      selectDomRoot={selectDomRoot}
+      ignoreDomNode={ignoreDomNode}
+      // ...
+    >
+      {/*...*/}
+    </TRenderEngineProvider>
+  );
+}
+```
+
+Great! Now the `#` characters have been removed.
+
+Screenshot caption: Blog article body, code issue.
+
+However, code samples look pretty ugly:
+
+- They're missing padding;
+- They should be horizontally scrollable and lines should not wrap;
+- A monospace font should be used;
+- Whitespaces should be preserved.
+
+So, let's fix it!
+
+#### Fixing Code Samples
+
+Code samples are rendered by Docusaurus in a `<pre class="prism-code">` tag. We need to fix two issues:
+
+- Define a custom renderer for `pre` tags, which renders inside a `ScrollView` when matching the `"prism-code"` class.
+- Define a custom renderer for `span` tags. We need to do that because the whole code block is rendered inside a `code` element with a `display: flex; flex-direction: column`. However, `code` is translated to a React Native `Text` since his element model is **textual**. To work around this issue, we can inject line breaks after each `span` element with a CSS `token-line` class which content does not end with a new line.
+
+```tsx title="components/WebEngine.tsx"
+// ...other imports
+import { TChildrenRenderer } from 'react-native-render-html';
+import { ScrollView } from 'react-native-gesture-handler';
+
+// ...
+
+const PreRenderer: CustomBlockRenderer = function PreRenderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  if (props.tnode.hasClass("prism-code")) {
+    return (
+      <ScrollView horizontal style={props.style}>
+        <TDefaultRenderer
+          {...props}
+          style={{ flexGrow: 1, flexShrink: 1, padding: 10 }}
+        />
+      </ScrollView>
+    );
+  }
+  return <TDefaultRenderer {...props} />;
+};
+
+function tnodeEndsWithNewLine(tnode: TNode): boolean {
+  if (tnode.type === "text") {
+    return tnode.data.endsWith("\n");
+  }
+  const lastChild = tnode.children[tnode.children.length - 1];
+  return lastChild ? tnodeEndsWithNewLine(lastChild) : false;
+}
+
+const SpanRenderer: CustomTextualRenderer = function SpanRenderer({
+  TDefaultRenderer,
+  ...props
+}) {
+  if (props.tnode.hasClass("token-line") && !tnodeEndsWithNewLine(props.tnode)) {
+    return (
+      <TDefaultRenderer {...props}>
+        <TChildrenRenderer tchildren={props.tnode.children} />
+        {"\n"}
+      </TDefaultRenderer>
+    );
+  }
+  return <TDefaultRenderer {...props} />;
+};
+
+const renderers: CustomTagRendererRecord = {
+  // ... other renderers
+  span: SpanRenderer,
+  pre: PreRenderer,
+};
+
+const classesStyles: MixedStyleRecord = {
+  // ... other classes styles
+  "prism-code": {
+    backgroundColor: "#282c34",
+    fontFamily: "monospace",
+    borderRadius: 10,
+    fontSize: 14,
+    lineHeight: 14 * 1.6,
+    flexShrink: 0,
+  },
+};
+```
+
+Screenshot caption: Blog article body, code fixed.
+
+That's looking much better. We're almost done!
+
+#### Final Touch
+
+We could add a few more styles to match the React Native blog styles:
+
+```tsx title="components/WebEngine.tsx"
+import {
+  // ...
+  MixedStyleDeclaration,
+  // ...
+} from "react-native-render-html";
+
+// other imports and declarations
+
+const tagsStyles: MixedStyleRecord = {
+  a: {
+    color: "#1c1e21",
+    backgroundColor: "rgba(187, 239, 253, 0.3)",
+  },
+  li: {
+    marginBottom: 10,
+  },
+  img: {
+    alignSelf: "center",
+  },
+  h4: {
+    marginBottom: 0,
+    marginTop: 0,
+  },
+  code: {
+    backgroundColor: "rgba(0, 0, 0, 0.06)",
+    fontSize: 14,
+  },
+  blockquote: {
+    marginLeft: 0,
+    marginRight: 0,
+    paddingLeft: 20,
+    paddingRight: 20,
+    backgroundColor: "#fff8d8",
+    borderLeftWidth: 10,
+    borderLeftColor: "#ffe564",
+  },
+};
+
+const baseStyle: MixedStyleDeclaration = {
+  color: "#1c1e21",
+  fontSize: 16,
+  lineHeight: 16 * 1.8,
+};
+
+export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <TRenderEngineProvider
+      // ...
+      tagsStyles={tagsStyles}
+      baseStyle={baseStyle}>
+      {/*...*/}
+    </TRenderEngineProvider>
+  );
+}
+```
+
+Screenshot caption: Blog article body, refined.
+
+### Epilogue
+
+#### Frustrating React Native Text Limitations
+
+As a final note, I'd like to mention a few frustrating limitations in React Native that prevented me from replicating more accurately the official blog styles:
+
+1. `backgroundColor` spans to the full line-box of text elements, whereas in CSS, it only spans to the text content-area. See a complete explanation [in this excellent article on CSS text styling](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align).
+2. `padding` and `border` are ignored in nested text elements.
+
+All these features are required to get the official blog appealing anchors styles. Instead we have backgrounds overlapping each other, which becomes weird when there is a high density of anchors. This is because, as stated before, the `backgroundColor` spans to the entire height of the line box, instead of spanning to the content area.
+
+#### Going Further
+
+You can take a look at the [`enhanced` branch of the project](https://github.com/jsamr/rnrh-blog/tree/enhanced) and see how the below features have been implemented:
+
+- Cached queries with `react-queries`;
+- Dark mode (follows system mode);
+- Progressive rendering for fast time to first contentful paint via `FlatList`;
+- Collapsible header with `react-native-reanimated` (v2);
+- Video support with `expo-av`.
+
+That's all for this tutorial! Don't forget to [give us a star](https://github.com/meliorence/react-native-render-html) if you enjoy this library. You can also [follow me on Twitter](https://twitter.com/jsamrn), and [rate this library on Open Base](https://openbase.com/js/react-native-render-html?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge).
+
+# API Reference
+
+Public-facing React API of the `@native-html/render` monorepo. This document
+consolidates the user-facing components and hooks exported from the package:
+the top-level `RenderHTML` component and its supporting providers
+(`TRenderEngineProvider`, `RenderHTMLConfigProvider`, `RenderHTMLSource`), the
+generic `TNodeRenderer` / `TNodeChildrenRenderer` building blocks for custom
+renderers, the `IMGElement` family of components for advanced image rendering
+customization, and the React hooks for accessing ambient render state
+(`useSharedProps`, `useContentWidth`, `useRendererProps`,
+`useDocumentMetadata`, etc.) plus the image state machines (`useIMGElementState`,
+`useIMGElementStateWithCache`) and the `useInternalRenderer` escape hatch for
+custom renderers.
+
+## Components
+
+React Components exported by this library.
+
+### IMGElement
+
+```ts
+function IMGElement(props: IMGElementProps): ReactElement
+```
+
+A component to render images based on an internal loading state. It will
+attempt to draw a box of paint dimensions before retrieving the physical
+dimensions of the image to avoid layout shifts. See also `useIMGElementState`,
+`IMGElementContainer`, `IMGElementContentSuccess`, `IMGElementContentLoading`
+and `IMGElementContentError` for customization.
+
+`IMGElementProps` extends `UseIMGElementStateProps` and adds:
+
+- `containerProps?: Omit<ViewProps, 'style'>` — props forwarded to the outer
+  container view.
+- `onPress?: PressableProps['onPress']` — a callback triggered on press.
+- `testID?: string` — test ID for the container.
+
+Inherited from `UseIMGElementStateProps`:
+
+- `alt?: string` — alt text extract from the `alt` attribute.
+- `altColor?: string` — alt color; defaults to the `color` for this `TNode`.
+- `cachedNaturalDimensions?: ImageDimensions` — natural ("physical")
+  dimensions when known *a priori*. Saves an API call and filesystem access via
+  `Image.getSize`.
+- `computeMaxWidth?: (contentWidth: number) => number` — when provided, the
+  print image will have a max width depending on the `contentWidth` prop.
+- `contentWidth?: number` — the `contentWidth` from `RenderHTMLProps`.
+- `enableExperimentalPercentWidth?: boolean` — allow experimental percent width
+  for the print dimensions computation (relative to `contentWidth`).
+- `height?: string | number` — value of the `height` attribute.
+- `initialDimensions?: ImageDimensions` — rendered dimensions prior to
+  retrieving natural dimensions of the image.
+- `objectFit?: WebBlockStyles['objectFit']` — value of the `object-fit` CSS
+  property.
+- `source: ImageURISource` — the source to paint.
+- `style?: StyleProp<ImageStyle>` — the style for this image.
+- `width?: string | number` — value of the `width` attribute.
+
+### IMGElementContainer
+
+```ts
+function IMGElementContainer(
+  props: PropsWithChildren<
+    Pick<IMGElementProps, 'onPress' | 'testID'> &
+      Omit<ViewProps, 'style'> & { style: ViewStyle }
+  >
+): ReactElement
+```
+
+Container for the `IMGElement` component. Renders a `GenericPressable` if
+`onPress` is provided, otherwise a plain `View`. The `style` is flattened so
+that `width` / `height` are dropped from the container (delegated to the
+inner image / placeholder).
+
+### IMGElementContentAlt
+
+```ts
+function IMGElementContentAlt(
+  props: PropsWithChildren<IMGElementStateBase & { testID?: string }>
+): ReactElement
+```
+
+Alt view for the `IMGElement` component. Renders a `View` with
+`accessibilityRole="image"` and an italic `Text` for the `alt` content.
+Used as the fallback "image" view in error cases.
+
+Key fields from `IMGElementStateBase`:
+- `alt?: string`, `altColor?: string`, `containerStyle: ViewStyle`,
+  `dimensions: ImageDimensions`, `source: ImageURISource`.
+
+### IMGElementContentError
+
+```ts
+function IMGElementContentError(props: IMGElementStateError): ReactElement
+```
+
+Default error view for the `IMGElement` component. Internally renders
+`IMGElementContentAlt` with `testID="image-error"`.
+
+`IMGElementStateError` extends `IMGElementStateBase` with:
+- `error: Error`
+- `type: 'error'`
+
+### IMGElementContentLoading
+
+```ts
+function IMGElementContentLoading(
+  props: PropsWithChildren<IMGElementStateLoading>
+): ReactElement
+```
+
+Default loading view for the `IMGElement` component. Renders a `View`
+sized to `state.dimensions` with `testID="image-loading"`.
+
+`IMGElementStateLoading` extends `IMGElementStateBase` with `type: 'loading'`.
+
+### IMGElementContentSuccess
+
+```ts
+function IMGElementContentSuccess(props: IMGElementStateSuccess): ReactElement
+```
+
+Default success "image" view for the `IMGElement` component. Renders a
+React Native `Image` with the merged `style = [defaultImageStyle, dimensions,
+imageStyle]` and forwards image errors through `state.onError`.
+
+`IMGElementStateSuccess` extends `IMGElementStateBase` with:
+- `imageStyle: ImageStyle` — image-only style extracted from `IMGElement.style`.
+- `onError: (error: Error) => void` — error callback for the underlying image.
+- `type: 'success'`.
+
+### RenderHTML
+
+```ts
+function RenderHTML(props: RenderHTMLProps): ReactElement
+```
+
+Render HTML text in native views. This is the top-level convenience
+component; internally it composes `TRenderEngineProvider`,
+`RenderHTMLConfigProvider`, and `RenderHTMLSource`.
+
+> Remarks: If your application uses many instances of this component, you
+> should share the render engine across those instances via the
+> `TRenderEngineProvider` and `RenderHTMLConfigProvider` components, and
+> render the HTML with `RenderHTMLSource` instead. That should significantly
+> increase performance.
+
+> Warning: It must never be a child of a React Native `Text` element, as the
+> layout will break.
+
+`RenderHTMLProps` is the union of three interfaces:
+- `RenderHTMLConfig` — config consumed by `RenderHTMLConfigProvider`
+  (extends `RenderHTMLSharedProps` + `RenderHTMLPassedProps`, plus
+  `remoteErrorView`, `remoteLoadingView`, `renderers`).
+- `RenderHTMLSourceProps` — `source`, `contentWidth`, `onHTMLLoaded`,
+  `onTTreeChange`, `onDocumentMetadataLoaded`.
+- `TRenderEngineConfig` — engine options such as `allowedStyles`,
+  `baseStyle`, `classesStyles`, `customHTMLElementModels`,
+  `domVisitors`, `emSize`, `enableCSSInlineProcessing`,
+  `enableUserAgentStyles`, `fallbackFonts`, `htmlParserOptions`,
+  `idsStyles`, `ignoreDomNode`, `ignoredDomTags`, `ignoredStyles`,
+  `selectDomRoot`, `setMarkersForTNode`, `systemFonts`, `tagsStyles`,
+  plus experimental flags.
+
+Key `RenderHTMLSharedProps` (used everywhere via `useSharedProps`):
+- `GenericPressable?: ComponentType<GenericPressableProps>` — wrapper for
+  pressable elements (defaults to `TouchableNativeFeedback`-based on Android,
+  `TouchableHighlight`-based elsewhere).
+- `WebView?: ComponentType<any>` — WebView used by plugins; defaults to
+  `() => null`.
+- `bypassAnonymousTPhrasingNodes?: boolean` — when `true` (default), anonymous
+  `TPhrasing` parents of a lonely `TText` are not wrapped in an extra `Text`.
+- `computeEmbeddedMaxWidth?: (contentWidth: number, tagName: string) => number`
+  — function returning a max width per tag. Defaults to `(c) => c`.
+- `customListStyleSpecs?: Record<string, ListStyleSpec>` — extra list style
+  type specs (see `@jsamr/counter-style`).
+- `debug?: boolean` — log a `TDocument` snapshot after each TTree
+  invalidation. Defaults to `false`.
+- `defaultTextProps?: TextProps`, `defaultViewProps?: ViewProps`,
+  `defaultWebViewProps?: any` — defaults for the corresponding native
+  elements.
+- `enableExperimentalBRCollapsing?: boolean` — follow HTML closely and
+  ignore `<br>` closing an inline formatting context. Defaults `false`.
+- `enableExperimentalGhostLinesPrevention?: boolean` — work around RN's
+  20dpi blank line. Defaults `false`.
+- `enableExperimentalMarginCollapsing?: boolean` — CSS margin collapsing.
+  Defaults `false`.
+- `pressableHightlightColor?: string` — ripple/highlight color.
+  Defaults `rgba(38, 132, 240, 0.2)`.
+- `provideEmbeddedHeaders?: EmbeddedHeadersProvider` — return per-URI
+  request headers for embedded elements.
+
+Key `RenderHTMLPassedProps`:
+- `renderersProps?: Partial<RenderersProps>` — props consumed by custom
+  renderers via `useRendererProps`. Augment via module declaration merging.
+
+```tsx
+import RenderHTML from '@native-html/render';
+
+const source = { html: '<p>Hello <strong>world</strong></p>' };
+
+export default function Page({ width }: { width: number }) {
+  return <RenderHTML source={source} contentWidth={width} />;
+}
+```
+
+### RenderHTMLConfigProvider
+
+```ts
+function RenderHTMLConfigProvider(
+  props: PropsWithChildren<RenderHTMLConfig>
+): ReactElement
+```
+
+Provides configuration for `RenderHTMLSource` descendants, to be used in
+conjunction with `TRenderEngineProvider`. The split between the two
+providers lets you share the heavy `TRenderEngine` instance while varying
+shared/render config locally.
+
+`RenderHTMLConfig` extends `RenderHTMLSharedProps` and `RenderHTMLPassedProps`
+plus:
+- `remoteErrorView?: (source: HTMLSourceUri) => ReactElement` — replace the
+  default error display when remote content fails.
+- `remoteLoadingView?: (source: HTMLSourceUri) => ReactElement` — replace the
+  default loader for remote content.
+- `renderers?: CustomTagRendererRecord` — record of custom tag renderers.
+
+```tsx
+import {
+  TRenderEngineProvider,
+  RenderHTMLConfigProvider,
+  RenderHTMLSource
+} from '@native-html/render';
+
+function App() {
+  return (
+    <TRenderEngineProvider>
+      <RenderHTMLConfigProvider>
+        <RenderHTMLSource source={{ html: '<p>One</p>' }} contentWidth={360} />
+        <RenderHTMLSource source={{ html: '<p>Two</p>' }} contentWidth={360} />
+      </RenderHTMLConfigProvider>
+    </TRenderEngineProvider>
+  );
+}
+```
+
+### RenderHTMLSource
+
+```ts
+const RenderHTMLSource: MemoExoticComponent<
+  (props: RenderHTMLSourceProps) => ReactElement
+>
+```
+
+A React component to render HTML snippets. Useful when you have to load
+dozens of HTML snippets with the same config; performance is expected to
+improve in such scenarios. Memoized: it re-renders only when `source` or
+other props change by shallow equality.
+
+> Warning: This component requires `TRenderEngineProvider` and
+> `RenderHTMLConfigProvider` as parents.
+
+`RenderHTMLSourceProps`:
+- `source: HTMLSource` — the source to render. Discriminated union of
+  `HTMLSourceInline ({ html, baseUrl? })`, `HTMLSourceUri ({ uri, method?,
+  body?, headers? })`, or `HTMLSourceDom ({ dom, baseUrl? })`.
+- `contentWidth?: number` — width of the content. Recommended:
+  `useWindowDimensions().width` minus padding. Defaults to
+  `Dimensions.get('window').width`.
+- `onHTMLLoaded?: (html: string) => void` — invoked when HTML is available.
+- `onTTreeChange?: (ttree: TDocument) => void` — invoked when the transient
+  render tree changes.
+- `onDocumentMetadataLoaded?: (metadata: DocumentMetadata) => void` —
+  invoked when document metadata is available.
+
+### TNodeChildrenRenderer
+
+```ts
+function TNodeChildrenRenderer(props: TNodeChildrenRendererProps): ReactElement
+```
+
+A component to render all children of a `TNode`. For `'text'` tnodes, it
+returns the raw text data. Otherwise it delegates to `renderChildren` using
+the props produced by `useTNodeChildrenProps`.
+
+`TNodeChildrenRendererProps` extends `TChildrenBaseProps`:
+- `tnode: TNode` — the parent tnode whose children should be rendered.
+- `disableMarginCollapsing?: boolean` — opt-out of experimental margin
+  collapsing for this collection.
+- `propsForChildren?: Partial<PropsFromParent>` — propagated to children via
+  `propsFromParent`.
+- `renderChild?: (props: TChildProps) => ReactNode` — wrap each rendered
+  child.
+
+### TNodeRenderer
+
+```ts
+const TNodeRenderer: MemoExoticComponent<
+  <T extends TNode>(props: TNodeRendererProps<T>) => ReactElement | null
+>
+```
+
+A component to render any `TNode`. Internally dispatches by `tnode.type`
+('block' / 'document' / 'text' / 'phrasing' / 'empty') and delegates either
+to a registered internal renderer, a `TDefaultRenderer`, or to the textual
+content / block content renderer functions.
+
+`TNodeRendererProps<T extends TNode>`:
+- `tnode: T` — the tnode to render.
+- `renderIndex: number` — index relative to its React parent (not the same as
+  `TNodeShape.index`).
+- `renderLength: number` — total count of siblings in the React tree.
+- `propsFromParent?: PropsFromParent` — props propagated by parents.
+
+Also re-exports `TDefaultBlockRenderer`, `TDefaultPhrasingRenderer`,
+`TDefaultTextRenderer`.
+
+### TRenderEngineProvider
+
+```ts
+function TRenderEngineProvider(
+  props: PropsWithChildren<TRenderEngineConfig>
+): ReactElement
+```
+
+A React component to share a `TRenderEngine` instance across different
+rendered contents via `RenderHTMLSource`. Significantly enhances performance
+in applications with many distinct rendered snippets (e.g. chat apps).
+Children consume the engine through `useAmbientTRenderEngine`.
+
+Accepts all `TRenderEngineConfig` props described under `RenderHTML`
+(e.g. `allowedStyles`, `baseStyle`, `tagsStyles`, `classesStyles`,
+`idsStyles`, `customHTMLElementModels`, `enableCSSInlineProcessing`,
+`enableUserAgentStyles`, `domVisitors`, `ignoredDomTags`, `ignoreDomNode`,
+`htmlParserOptions`, `selectDomRoot`, `setMarkersForTNode`, `systemFonts`,
+`fallbackFonts`, `emSize`, `dangerouslyDisableHoisting`,
+`dangerouslyDisableWhitespaceCollapsing`).
+
+## Hooks
+
+React Hooks exported by this library.
+
+### useAmbientTRenderEngine
+
+```ts
+function useAmbientTRenderEngine(): TRenderEngine
+```
+
+Use the ambient transient render engine. Returns the `TRenderEngine`
+instance from the closest `TRenderEngineProvider`. In `__DEV__`, logs an
+error if no provider is in the tree.
+
+### useComputeMaxWidthForTag
+
+```ts
+function useComputeMaxWidthForTag(tagName: string): (cw: number) => number
+```
+
+Compute max width for a given tag, using
+`RenderHTMLProps.computeEmbeddedMaxWidth` and
+`RenderHTMLProps.contentWidth` under the hood. Returns a memoized callback
+which, given a contentWidth, returns the maximum width for `tagName`.
+
+### useContentWidth
+
+```ts
+function useContentWidth(): number | undefined
+```
+
+A hook to get access to the ambient `contentWidth` provided through
+`contentWidthContext` (set by `RenderHTMLSource`).
+
+### useDocumentMetadata
+
+```ts
+function useDocumentMetadata(): DocumentMetadata
+```
+
+Get access to the parsed HTML metadata anywhere in the render tree.
+
+`DocumentMetadata` fields:
+- `baseTarget: '_blank' | '_self' | '_parent' | '_top'` — default anchor
+  target behavior.
+- `baseUrl: string` — precedence: `<base />` element > `source.baseUrl` >
+  origin of `source.uri`.
+- `dir: 'ltr' | 'rtl'` — from `dir` attribute of `<html>`.
+- `lang: string` — from `lang` attribute of `<html>`.
+- `links: DocumentContext['links']` — array of attributes from `<link>` tags.
+- `meta: DocumentContext['meta']` — array of attributes from `<meta>` tags.
+- `title: string` — content of the `<title>` element.
+
+### useIMGElementProps
+
+```ts
+function useIMGElementProps(
+  props: InternalRendererProps<TBlock>
+): IMGElementProps
+```
+
+A hook to produce props consumable by the `IMGElement` component from
+custom renderer props. Internally calls `useContentWidth`,
+`useRendererProps('img')`, `useComputeMaxWidthForTag('img')`,
+`useNormalizedUrl(src)`, and `getNativePropsForTNode`. Extracts `alt`,
+`altColor`, `width`, `height`, `objectFit` from the tnode attributes /
+styles.
+
+### useIMGElementState
+
+```ts
+function useIMGElementState(props: UseIMGElementStateProps): IMGElementState
+```
+
+Compute concrete dimensions from image natural dimensions and constraints.
+It will fetch the image (via `Image.getSize` / `Image.getSizeWithHeaders`)
+and get its dimensions.
+
+> Remark: If you know the dimensions beforehand, use
+> `useIMGElementStateWithCache` instead to save a network request and prevent
+> a layout shift.
+
+Returns `IMGElementState`, a tagged union:
+- `IMGElementStateLoading` (`type: 'loading'`)
+- `IMGElementStateSuccess` (`type: 'success'`, includes `onError`,
+  `imageStyle`)
+- `IMGElementStateError` (`type: 'error'`, includes `error: Error`)
+
+All share `IMGElementStateBase`: `alt?`, `altColor?`, `containerStyle`,
+`dimensions`, `source`.
+
+### useIMGElementStateWithCache
+
+```ts
+function useIMGElementStateWithCache(
+  props: UseIMGElementStateWithCacheProps
+): IMGElementStateError | IMGElementStateSuccess
+```
+
+Useful when one has access to image natural dimensions prior to loading.
+The `cachedNaturalDimensions` prop must be passed to immediately compute
+concrete dimensions. Skips the loading state and the network roundtrip to
+fetch image size.
+
+`UseIMGElementStateWithCacheProps = UseIMGElementStateProps &
+Required<Pick<UseIMGElementStateProps, 'cachedNaturalDimensions'>>`.
+
+### useInternalRenderer
+
+```ts
+function useInternalRenderer<T extends TagName>(
+  tagName: T,
+  props: InternalRendererProps<any>
+): T extends InternalSpecialRenderedTag
+  ? InternalRendererConfig<ReturnType<(typeof specialRenderersConfig)[T]['hook']>>
+  : InternalRendererConfig<TDefaultRendererProps<any>>
+```
+
+Reuse internal renderers logic for infinite customization.
+
+> Remark: `tagName` must be invariant — it cannot change. You would otherwise
+> break the rules of hooks.
+
+Parameters:
+- `tagName` — **invariant** tag name to extend. The four special tags with
+  dedicated hooks/elements are `img`, `ol`, `ul`, `a`.
+- `props` — the props passed to the custom renderer.
+
+Returns `InternalRendererConfig<P>`:
+- `Renderer: ComponentType<P>` — the internal React component (e.g.
+  `IMGElement`, `OLElement`, `ULElement`) or `TDefaultRenderer` for other
+  tags.
+- `rendererProps: P` — the props prepared by the corresponding internal hook
+  (e.g. `useIMGElementProps`).
+
+### useNormalizedUrl
+
+```ts
+function useNormalizedUrl(initialUrl: string): string
+```
+
+Transforms relative and protocol-relative URLs to absolute URLs as per
+RFC1808. The base URL is determined by the `<base />` element, `source.uri`
+or `source.baseUrl`.
+
+> Remarks:
+> - If there is no `baseUrl` and the initial URL is relative, this hook
+>   returns the initial URL.
+> - If the initial URL is absolute, this hook returns the initial URL.
+
+### useRendererProps
+
+```ts
+function useRendererProps<
+  RendererProps extends RenderersProps = RenderersProps,
+  K extends keyof RendererProps = keyof RendererProps
+>(tagName: K): RendererProps[K]
+```
+
+Consume props from `RenderHTMLProps.renderersProps` for the given tag name.
+Inside custom renderers this is the canonical way to read user-supplied
+config (e.g. `renderersProps.img`, `renderersProps.a.onPress`).
+
+Built-in keys on `RenderersProps`:
+- `a: AElementConfig` — anchor element config (`onPress`).
+- `img: ImgElementConfig` — image element config
+  (`enableExperimentalPercentWidth`, `initialDimensions`).
+- `ol: ListElementConfig`, `ul: ListElementConfig` — list element config
+  (`enableDynamicMarkerBoxWidth`, `enableExperimentalRtl`,
+  `enableRemoveBottomMarginIfNested`, `enableRemoveTopMarginIfNested`,
+  `getFallbackListStyleTypeFromNestLevel`, `markerBoxStyle`,
+  `markerTextStyle`).
+
+> TypeScript users: extend `RenderersProps` via module augmentation:
+
+```ts
+declare module '@native-html/render' {
+  interface RenderersProps {
+    div?: {
+      customProp: boolean;
+    };
+  }
+}
+```
+
+### useSharedProps
+
+```ts
+function useSharedProps(): RenderHTMLAmbiantSharedProps
+```
+
+Use shared props for the surrounding `RenderHTML`/`RenderHTMLConfigProvider`
+tree (see `RenderHTMLSharedProps`). Returns a memoized object with all
+shared options (e.g. `debug`, `defaultTextProps`, `defaultViewProps`,
+`computeEmbeddedMaxWidth`, `enableExperimentalMarginCollapsing`,
+`customListStyleSpecs`, etc.).
+
+### useTNodeChildrenProps
+
+```ts
+function useTNodeChildrenProps(
+  props: TNodeChildrenRendererProps
+): TChildrenRendererProps
+```
+
+Especially useful when one needs to tamper with children in a custom
+renderer. Should be used with `TChildrenRenderer`. It computes whether
+margin collapsing should apply (based on the experimental flag and tnode
+type) and returns props ready to feed `TChildrenRenderer`.
+
+Example — a custom renderer which inserts ads in an article:
+
+```tsx
+function ArticleRenderer(props) {
+  const { tnode, TDefaultRenderer, ...defaultRendererProps } = props;
+  const tchildrenProps = useTNodeChildrenProps(props);
+  const firstChildrenChunk = tnode.children.slice(0, 2);
+  const secondChildrenChunk = tnode.children.slice(2, 4);
+  const thirdChildrenChunk = tnode.children.slice(4, 5);
+  return (
+    <TDefaultRenderer tnode={tnode} {...defaultRendererProps}>
+      <TChildrenRenderer {...tchildrenProps} tchildren={firstChildrenChunk} />
+      {firstChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer {...tchildrenProps} tchildren={secondChildrenChunk} />
+      {secondChildrenChunk.length === 2 ? <AdComponent /> : null}
+      <TChildrenRenderer {...tchildrenProps} tchildren={thirdChildrenChunk} />
+    </TDefaultRenderer>
+  );
+}
+```
+
+`TChildrenRendererProps` extends `TChildrenBaseProps`:
+- `tchildren: ReadonlyArray<TNode>` — children to render.
+- `disableMarginCollapsing?`, `propsForChildren?`, `renderChild?` — inherited
+  from `TChildrenBaseProps`.
+
+**Scope:** TypeScript types and internal/utility exports of the `@native-html/render` monorepo: TNode shape, element models, content models, renderer props/records, CSS prop-key types and processor config, image-state types, tag-name constants, and other helper exports.
+
+## TRE Types
+
+Transient Render Engine types: the `TNode` tree, content/element models, and TStyles shapes.
+
+### TNode
+
+```ts
+type TNode = TBlock | TDocument | TEmpty | TPhrasing | TText;
+```
+
+A transient render node — a ready-to-render data structure produced by the TRE.
+
+### TNodeType
+
+```ts
+type TNodeType = 'block' | 'phrasing' | 'text' | 'empty' | 'document';
+```
+
+Discriminant literal for `TNodeShape`.
+
+### TNodeShape
+
+Shared properties for all `TNode` types. Parameterized by the literal type.
+
+```ts
+interface TNodeShape<T extends TNodeType> {
+  readonly attributes: Record<string, string>;
+  readonly id: string | null;
+  readonly classes: string[];
+  readonly domNode: Element | null;
+  readonly tagName: string | null;             // null for anonymous hoist nodes / some TText
+  readonly parent: TDocument | TBlock | TPhrasing | null; // before hoisting
+  readonly nodeIndex: number;                  // position after hoisting/collapsing
+  readonly children: ReadonlyArray<TNode>;
+  readonly displayName: string;                // debug
+  readonly type: T;
+  readonly isUnregistered: boolean;            // true when tag is unknown + no custom renderer
+  readonly markers: Readonly<Markers>;
+  readonly styles: TStylesShape;               // raw; prefer getNativeStyles()
+  snapshot(options?: Partial<TNodePrintOptions>): string;
+  hasClass(className: string): boolean;
+  matchContentModel(contentModel: HTMLContentModel): boolean;
+  getNativeStyles(): T extends 'text' | 'phrasing' ? NativeTextStyles : NativeBlockStyles;
+  getWebStyles(): WebTextStyles & WebBlockStyles;
+  getReactNativeProps: () => ReactNativePropsSwitch | null;
+}
+```
+
+Markers are immutable and may be reference-shared from parent to child.
+
+### TBlock
+
+```ts
+interface TBlock extends TNodeShape<'block'> {
+  readonly tagName: string;
+  readonly domNode: Element;
+}
+```
+
+Transient render node rendered as a React Native `View`.
+
+### TPhrasing
+
+```ts
+interface TPhrasing extends TNodeShape<'phrasing'> {}
+```
+
+Rendered in React Native `Text`. Children are `TText`, `TPhrasing`, or `TEmpty`.
+
+### TText
+
+```ts
+interface TText extends TNodeShape<'text'> {
+  readonly data: string;
+  readonly textNode: Text;
+}
+```
+
+Leaf textual node. Rendered in React Native `Text`.
+
+### TDocument
+
+```ts
+interface TDocument extends TNodeShape<'document'> {
+  readonly context: Readonly<DocumentContext>;
+}
+```
+
+Root of a transient render tree, with metadata about the document.
+
+### TEmpty
+
+```ts
+interface TEmpty extends TNodeShape<'empty'> {
+  readonly domNode: Element;
+}
+```
+
+Non-renderable element (content model = `none`).
+
+### TNodeDescriptor
+
+A minimal TNode shape accessible at instantiation — passed to `SetMarkersForTNode` and `getMixedUAStyles`.
+
+```ts
+interface TNodeDescriptor {
+  readonly attributes: Record<string, string>;
+  readonly id: string | null;
+  readonly classes: string[];
+  readonly domNode: Element | null;
+  readonly tagName: string | null;
+  readonly markers: Readonly<Markers>;
+  hasClass(className: string): boolean;
+}
+```
+
+### TNodePrintOptions
+
+```ts
+interface TNodePrintOptions {
+  withStyles: boolean;
+  withNodeIndex: boolean;
+}
+```
+
+Options for `TNodeShape.snapshot()`.
+
+### ExtractTNodeFromType
+
+```ts
+type ExtractTNodeFromType<Type> = Type extends TNodeType
+  ? Type extends 'block' ? TBlock
+  : Type extends 'phrasing' ? TPhrasing
+  : Type extends 'text' ? TText
+  : Type extends 'empty' ? TEmpty
+  : Type extends 'document' ? TDocument
+  : never
+  : never;
+```
+
+### DocumentContext
+
+Metadata extracted from the `<head>` tag, attached to `TDocument`.
+
+```ts
+interface DocumentContext {
+  charset: string;
+  baseHref: string;
+  baseTarget: '_blank' | '_self' | '_parent' | '_top';
+  lang: string;
+  dir: 'ltr' | 'rtl';
+  title: string;
+  meta: { name: string; value: string }[];
+  links: Record<string, string>[];
+}
+```
+
+### Markers
+
+```ts
+interface Markers {
+  anchor: boolean;                          // default false
+  edits: 'ins' | 'del' | 'none';            // default 'none'
+  direction: 'ltr' | 'rtl';                 // default 'ltr'
+  lang: string;
+  olNestLevel: number;                      // -1 when not in an ol
+  ulNestLevel: number;                      // -1 when not in a ul
+  extend(this: Markers): Markers;
+  toString(): string;
+}
+```
+
+Markers form an abstraction in which one node provides semantic information to itself and all its descendants (e.g. `<ins>` provides `{edits: 'ins'}`). Custom renderers consume them to convey semantic meaning. The shape can be extended via module augmentation.
+
+> Treat as immutable. Marker instances may be shared from parent to children for performance.
+
+### SetMarkersForTNode
+
+```ts
+type SetMarkersForTNode = (
+  targetMarkers: Markers,
+  parentMarkers: Readonly<Markers>,
+  tnode: TNodeDescriptor,
+) => void;
+```
+
+Function called during tree construction to mutate the `targetMarkers` of a node.
+
+### HTMLContentModel
+
+```ts
+enum HTMLContentModel {
+  block = 'block',       // → TBlock
+  textual = 'textual',   // → TPhrasing or TText
+  mixed = 'mixed',       // → TBlock, TPhrasing or TText
+  none = 'none',         // → TEmpty
+}
+```
+
+Determines how a tag is translated into the transient render tree.
+
+### ElementCategory
+
+```ts
+type ElementCategory =
+  | 'anchor' | 'textual' | 'tabular' | 'edits' | 'embedded'
+  | 'sectioning' | 'grouping' | 'interactive' | 'untranslatable';
+```
+
+HTML5-derived classification used by `NativeElementModel`.
+
+### ElementModelBase
+
+The base shape for all element models — both native (built-in HTML) and custom.
+
+```ts
+interface ElementModelBase<T extends string> {
+  readonly tagName: T;
+  readonly isOpaque?: boolean;             // translated TNode has no children
+  readonly isVoid?: boolean;               // void elements (br, img, hr...)
+  readonly mixedUAStyles?: MixedStyleDeclaration;
+  readonly reactNativeProps?: ReactNativePropsDefinitions;
+  setMarkersForTNode?: SetMarkersForTNode;
+  /** @deprecated use getMixedUAStyles */
+  getUADerivedStyleFromAttributes?: (
+    attributes: Record<string, string>, markers: Markers,
+  ) => MixedStyleDeclaration | null;
+  getMixedUAStyles?: (
+    tnode: TNodeDescriptor, element: Element,
+  ) => MixedStyleDeclaration | null | undefined | void;
+  getReactNativeProps?: (
+    tnode: ExtractTNodeFromType<TNodeType>,
+    preGeneratedProps: ReactNativePropsSwitch | null,
+    element: Element,
+  ) => ReactNativePropsDefinitions | null | undefined | void;
+}
+```
+
+`getReactNativeProps` merge order (latest wins): `reactNativeProps` → auto-generated-from-attributes → return value.
+
+### NativeElementModel
+
+```ts
+interface NativeElementModel<T extends string = TagName, C = ElementCategory>
+  extends ElementModelBase<T> {
+  readonly category: C;
+}
+```
+
+Spec for tags belonging to the HTML4/HTML5 standard.
+
+### CustomElementModel
+
+```ts
+interface CustomElementModel<T extends string, M extends HTMLContentModel>
+  extends ElementModelBase<T> {
+  readonly contentModel: M;
+  readonly tagName: T;
+}
+```
+
+Spec used with `HTMLElementModel.fromCustomModel()`.
+
+### HTMLElementModelShape
+
+```ts
+interface HTMLElementModelShape<T extends string, M extends HTMLContentModel>
+  extends ElementModelBase<T> {
+  readonly contentModel: M;
+  readonly isVoid: boolean;
+  readonly isOpaque: boolean;
+}
+```
+
+### HTMLElementModel (class)
+
+Engine internals for tags — default styles (UAStyles), content model, hoisting behavior.
+
+```ts
+class HTMLElementModel<T extends string, M extends HTMLContentModel>
+  implements HTMLElementModelShape<T, M> {
+  readonly tagName: T;
+  readonly contentModel: M;
+  readonly isOpaque: boolean;
+  readonly isVoid: boolean;
+  readonly mixedUAStyles?: MixedStyleDeclaration;
+  readonly reactNativeProps?: ReactNativePropsDefinitions;
+  readonly getUADerivedStyleFromAttributes: NativeElementModel['getUADerivedStyleFromAttributes'];
+  readonly getMixedUAStyles: NativeElementModel['getMixedUAStyles'];
+  readonly getReactNativeProps: NativeElementModel['getReactNativeProps'];
+  readonly setMarkersForTNode?: SetMarkersForTNode;
+
+  static fromCustomModel<CT extends string, CM extends HTMLContentModel>(
+    template: CustomElementModel<CT, CM>,
+  ): HTMLElementModel<CT, CM>;
+
+  static fromNativeModel<TN extends TagName, E extends ElementCategory>(
+    nativeElementModel: NativeElementModel<TN, E>,
+  ): HTMLElementModel<TN,
+        E extends 'anchor' | 'edits' ? HTMLContentModel.mixed
+      : E extends 'tabular' | 'sectioning' | 'grouping' ? HTMLContentModel.block
+      : E extends 'textual' ? HTMLContentModel.textual
+      : HTMLContentModel.none>;
+
+  isTranslatableBlock(): boolean;
+  isTranslatableTextual(): boolean;
+
+  extend<CM extends HTMLContentModel>(
+    merger: (shape: HTMLElementModelShape<T, CM>) => Partial<HTMLElementModelShape<T, CM>>,
+  ): HTMLElementModel<T, CM>;
+  extend<CM extends HTMLContentModel>(
+    shape: Partial<HTMLElementModelShape<T, CM>>,
+  ): HTMLElementModel<T, CM>;
+}
+```
+
+### HTMLElementModelRecord
+
+```ts
+type HTMLElementModelRecord = Record<string, HTMLElementModel<string, HTMLContentModel>>;
+```
+
+### HTMLModelRecord
+
+```ts
+type HTMLModelRecord<T extends string = TagName, M extends HTMLContentModel = HTMLContentModel>
+  = { [k in T]: HTMLElementModel<k, M> };
+```
+
+### TStylesShape
+
+A record of styles organized in logical chunks: native vs web, block vs text target, flow (inheritable) vs retain (non-inheritable).
+
+```ts
+interface TStylesShape {
+  readonly nativeTextFlow:  CSSProcessedProps['native']['text']['flow'];
+  readonly nativeBlockFlow: CSSProcessedProps['native']['block']['flow'];
+  readonly nativeTextRet:   CSSProcessedProps['native']['text']['retain'];
+  readonly nativeBlockRet:  CSSProcessedProps['native']['block']['retain'];
+  readonly webTextFlow:     CSSProcessedProps['web']['text']['flow'];
+  readonly webBlockRet:     CSSProcessedProps['web']['block']['retain'];
+}
+```
+
+### NativeBlockStyles / NativeTextStyles / WebBlockStyles / WebTextStyles
+
+Processed style aliases derived from `TStylesShape`:
+
+```ts
+type NativeBlockStyles = TStylesShape['nativeBlockFlow'] & TStylesShape['nativeBlockRet'];
+type NativeTextStyles  = TStylesShape['nativeBlockFlow'] & TStylesShape['nativeBlockRet']
+                      & TStylesShape['nativeTextFlow']  & TStylesShape['nativeTextRet'];
+type WebTextStyles     = TStylesShape['webTextFlow'];
+type WebBlockStyles    = TStylesShape['webBlockRet'];
+```
+
+### TRenderEngine (class)
+
+```ts
+class TRenderEngine {
+  constructor(options?: TRenderEngineOptions);
+  parseDocument(html: string): Document;
+  buildTTreeFromDoc(document: Document | Element): TDocument;
+  buildTTree(html: string): TDocument;
+  getHTMLElementsModels(): HTMLModelRecord<string>;
+}
+```
+
+### TRenderEngineOptions
+
+Options passed to the `TRenderEngine` constructor.
+
+```ts
+interface TRenderEngineOptions<E extends string = never> {
+  readonly cssProcessorConfig?: Partial<CSSProcessorConfig>;
+  readonly htmlParserOptions?: Readonly<HTMLParserOptions>;
+  readonly stylesConfig?: StylesConfig;
+  readonly customizeHTMLModels?: (defaults: DefaultHTMLElementModelsStatic) => HTMLModelRecord<TagName | E>;
+  readonly removeLineBreaksAroundEastAsianDiscardSet?: boolean; // default false
+  readonly ignoredDomTags?: string[];
+  readonly domVisitors?: DomVisitorCallbacks;
+  readonly ignoreDomNode?: (node: Node, parent: NodeWithChildren) => boolean | void | unknown;
+  readonly selectDomRoot?: (node: NodeWithChildren) => any;
+  readonly setMarkersForTNode?: SetMarkersForTNode;
+  readonly dangerouslyDisableHoisting?: boolean;
+  readonly dangerouslyDisableWhitespaceCollapsing?: boolean;
+}
+```
+
+### TRenderEngineConfig
+
+Configuration for the `TRenderEngineProvider` React component (a superset of `TRenderEngineOptions` exposed through props).
+
+```ts
+interface TRenderEngineConfig {
+  allowedStyles?: CSSPropertyNameList;
+  baseStyle?: MixedStyleDeclaration;
+  classesStyles?: MixedStyleRecord;
+  customHTMLElementModels?: HTMLElementModelRecord;
+  dangerouslyDisableHoisting?: boolean;
+  dangerouslyDisableWhitespaceCollapsing?: boolean;
+  domVisitors?: DomVisitorCallbacks;
+  emSize?: number;
+  enableCSSInlineProcessing?: boolean;       // default true
+  enableUserAgentStyles?: boolean;           // default true
+  fallbackFonts?: FallbackFontsDefinitions;
+  htmlParserOptions?: HtmlParserOptions;     // default { decodeEntities: true }
+  idsStyles?: MixedStyleRecord;
+  ignoreDomNode?: (node: Node, parent: NodeWithChildren) => boolean | void | unknown;
+  ignoredDomTags?: string[];
+  ignoredStyles?: CSSPropertyNameList;
+  selectDomRoot?: TRenderEngineOptions['selectDomRoot'];
+  setMarkersForTNode?: SetMarkersForTNode;
+  systemFonts?: string[];
+  tagsStyles?: MixedStyleRecord;
+}
+```
+
+> Warning: any change to these props rebuilds the engine and re-assembles all transient trees.
+
+### StylesConfig
+
+```ts
+interface StylesConfig {
+  readonly tagsStyles?: MixedStyleRecord;     // specificity 1
+  readonly classesStyles?: MixedStyleRecord;  // specificity 10
+  readonly idsStyles?: MixedStyleRecord;      // specificity 100
+  readonly baseStyle?: Readonly<MixedStyleDeclaration>;
+  readonly enableCSSInlineProcessing?: boolean;
+  readonly enableUserAgentStyles?: boolean;
+}
+```
+
+### MixedStyleRecord
+
+```ts
+type MixedStyleRecord<T extends string = string> = Readonly<Record<T, MixedStyleDeclaration>>;
+```
+
+### DomVisitorCallbacks
+
+```ts
+interface DomVisitorCallbacks {
+  onDocument?(document: Document): void;
+  onElement?(element: Element): void;
+  onText?(text: Text): void;
+}
+```
+
+### DefaultHTMLElementModelsStatic
+
+```ts
+type DefaultHTMLElementModelsStatic = typeof defaultHTMLElementModels;
+```
+
+A typed record of all built-in `HTMLElementModel` instances keyed by lowercase tag name, with the correct `HTMLContentModel` literal for each. Examples:
+
+```ts
+{
+  a:    HTMLElementModel<'a',    HTMLContentModel.mixed>;
+  div:  HTMLElementModel<'div',  HTMLContentModel.block>;
+  span: HTMLElementModel<'span', HTMLContentModel.textual>;
+  img:  HTMLElementModel<'img',  HTMLContentModel.block>;
+  br:   HTMLElementModel<'br',   HTMLContentModel.textual>;
+  link: HTMLElementModel<'link', HTMLContentModel.none>;
+  // ...all HTML4/HTML5 tags supported by TRE
+}
+```
+
+## CSS Types
+
+Types and configuration coming from `@native-html/css-processor`. The naming scheme classifies each property along three axes:
+
+- **Compat:** `native` (passed to RN `style` props) vs `web` (TRE-only).
+- **Display:** `text` vs `block` target.
+- **Propagation:** `flow` (inherits) vs `retain` (own only).
+
+Plus shape: long-hand vs short-hand, translatable vs untranslatable.
+
+### CSSProperties
+
+```ts
+type CSSProperties = Record<string, any>;
+```
+
+### CSSPropertyCompatCategory
+
+```ts
+type CSSPropertyCompatCategory = 'native' | 'web';
+```
+
+### CSSPropertyDisplayCategory
+
+```ts
+type CSSPropertyDisplayCategory = 'text' | 'block';
+```
+
+### CSSPropertyPropagationCategory
+
+```ts
+type CSSPropertyPropagationCategory = 'flow' | 'retain';
+```
+
+### CSSPropagationRegistry
+
+```ts
+type CSSPropagationRegistry = Record<CSSPropertyPropagationCategory, CSSProperties>;
+```
+
+### CSSDisplayRegistry
+
+```ts
+type CSSDisplayRegistry = Record<CSSPropertyDisplayCategory, CSSPropagationRegistry>;
+```
+
+### CSSPropertySpecs
+
+```ts
+interface CSSPropertySpecs<
+  C extends CSSPropertyCompatCategory = CSSPropertyCompatCategory,
+  D extends CSSPropertyDisplayCategory = CSSPropertyDisplayCategory,
+  P extends CSSPropertyPropagationCategory = CSSPropertyPropagationCategory
+> {
+  readonly compatCategory: C;
+  readonly displayCategory: D;
+  readonly propagationCategory: P;
+}
+```
+
+### CSSProcessorConfig
+
+```ts
+interface CSSProcessorConfig {
+  readonly absoluteLengthUnitsMultiplicators: CSSAbsoluteLengthUnitsMultiplicators;
+  readonly absoluteBorderWidthsPixelMap: Record<CSSHardcodedBorderWidth, number>;
+  readonly relativeFontSizesCoefficientMap: Record<CSSRelativeHarcodedFontSize, number>;
+  readonly absoluteFontSizesPixelMap: Record<CSSAbsoluteHardcodedFontSize, number>;
+  readonly inlinePropertiesBlacklist: CSSPropertyNameList;
+  readonly inlinePropertiesWhitelist: CSSPropertyNameList | null;
+  readonly rootFontSize: number;
+  readonly skipFontFamilyValidation?: boolean;
+  isFontSupported(fontName: string): boolean | string;
+}
+```
+
+### CSSPropertyNameList
+
+```ts
+type CSSPropertyNameList = Array<
+  CSSLongNativeTranslatableBlockPropKey | CSSLongNativeTranslatableTextPropKey
+>;
+```
+
+Used by `allowedStyles` / `ignoredStyles`.
+
+### CSSLengthUnit
+
+```ts
+type CSSLengthUnit =
+  | 'cm' | 'mm' | 'in' | 'px' | 'pt' | 'pc'
+  | 'em' | 'ex' | 'ch' | 'rem'
+  | 'vw' | 'vh' | 'vmin' | 'vmax' | '%';
+```
+
+### CSSAbsoluteLengthUnit
+
+```ts
+type CSSAbsoluteLengthUnit = Extract<CSSLengthUnit, 'in' | 'cm' | 'mm' | 'px' | 'pt' | 'pc'>;
+```
+
+### CSSAbsoluteLengthUnitsMultiplicators
+
+```ts
+type CSSAbsoluteLengthUnitsMultiplicators = Record<Exclude<CSSAbsoluteLengthUnit, 'px'>, number>;
+```
+
+### CSSHardcodedBorderWidth
+
+```ts
+type CSSHardcodedBorderWidth = 'thin' | 'medium' | 'thick';
+```
+
+### CSSAbsoluteHardcodedFontSize
+
+```ts
+type CSSAbsoluteHardcodedFontSize =
+  'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+```
+
+### CSSRelativeHarcodedFontSize
+
+```ts
+type CSSRelativeHarcodedFontSize = 'smaller' | 'larger';
+```
+
+### CSSListStyleTypePropertyBase
+
+A long union covering all `list-style-type` values: `none`, `disc`, `circle`, `square`, the decimal/roman/alpha series, all CJK forms, hebrew/armenian/georgian, devanagari, ethiopic-numeric, and many more — see source `processor-types.d.ts` for the full list.
+
+### MixedStyleDeclaration
+
+A style object that mixes a subset of `ViewStyle`, `TextStyle`, and special entries such as `whiteSpace` / `listStyleType`. Sizes (`fontSize`, `borderWidth`, etc.) accept numbers or CSS strings with units (em, rem, %, keywords like `larger`/`thin`).
+
+```ts
+type MixedStyleDeclaration =
+    Omit<CSSFlattenProcessedTypes, MixedSizeCSSPropertiesKeys>
+  & WebTextFlowProperties
+  & WebBlockRetainProperties
+  & ExtraNativeTextStyle
+  & ExtraNativeViewStyle
+  & ExtraNativeShortStyle
+  & ExtraNativeUntranslatedLongStyles
+  & { [k in MixedSizeCSSPropertiesKeys]?: number | string };
+```
+
+### CSSFlattenProcessedTypes
+
+```ts
+type CSSFlattenProcessedTypes =
+    CSSProcessedProps['native']['text']['flow']
+  & CSSProcessedProps['native']['block']['flow']
+  & CSSProcessedProps['native']['text']['retain']
+  & CSSProcessedProps['native']['block']['retain'];
+```
+
+All processed inline-style outputs flattened.
+
+### MixedSizeCSSPropertiesKeys
+
+```ts
+type MixedSizeCSSPropertiesKeys =
+  | 'fontSize' | 'borderWidth' | 'letterSpacing'
+  | 'bottom' | 'left' | 'top' | 'right'
+  | 'width' | 'height' | 'flexBasis'
+  | 'borderRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius'
+  | 'borderTopLeftRadius' | 'borderTopRightRadius'
+  | 'borderBottomWidth' | 'borderLeftWidth' | 'borderRightWidth'
+  | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop'
+  | 'margin' | 'marginHorizontal' | 'marginVertical'
+  | 'maxWidth' | 'maxHeight' | 'minWidth' | 'minHeight'
+  | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop'
+  | 'paddingHorizontal' | 'paddingVertical';
+```
+
+These accept CSS unit strings as well as numbers.
+
+### WebTextFlowProperties
+
+```ts
+interface WebTextFlowProperties extends Partial<Record<CSSLongWebTextFlowedPropKey, any>> {
+  whiteSpace?: 'normal' | 'pre';
+  listStyleType?: CSSListStyleTypePropertyBase | string;
+}
+```
+
+### WebBlockRetainProperties
+
+```ts
+interface WebBlockRetainProperties {
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+```
+
+### NativeTextStyleKey
+
+```ts
+type NativeTextStyleKey = Exclude<keyof TextStyle, keyof ViewStyle>;
+```
+
+Keys that are exclusive to RN `TextStyle`.
+
+### CSSShortPropsKey
+
+```ts
+type CSSShortPropsKey = Extract<keyof StandardShorthandProperties,
+  'background' | 'border' | 'borderColor' | 'borderRadius' | 'borderWidth'
+  | 'flex' | 'flexFlow' | 'font' | 'margin' | 'padding' | 'textDecoration'>;
+```
+
+Shorthand properties pre-translated via css-to-react-native.
+
+### CSSShortTextPropKey
+
+```ts
+type CSSShortTextPropKey = Extract<CSSShortPropsKey, 'textDecoration' | 'font'>;
+```
+
+### CSSShortBlockPropKey
+
+```ts
+type CSSShortBlockPropKey = Exclude<CSSShortPropsKey, CSSShortTextPropKey>;
+```
+
+### CSSShortNativeTranslatableBlockPropKey
+
+```ts
+type CSSShortNativeTranslatableBlockPropKey = Exclude<CSSShortPropsKey, CSSShortTextPropKey>;
+```
+
+### CSSFlowedPropKey
+
+Long-hand inheritable CSS keys.
+
+```ts
+type CSSFlowedPropKey = Extract<keyof StandardLonghandProperties,
+  'borderCollapse' | 'borderSpacing' | 'captionSide' | 'color' | 'cursor' | 'direction'
+  | 'emptyCells' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontVariant' | 'fontWeight'
+  | 'font' | 'letterSpacing' | 'lineHeight' | 'listStyleImage' | 'listStylePosition'
+  | 'listStyleType' | 'listStyle' | 'orphans' | 'quotes' | 'textAlign' | 'textIndent'
+  | 'textTransform' | 'visibility' | 'whiteSpace' | 'widows' | 'wordSpacing'>;
+```
+
+### CSSLongNativeTextPropKey
+
+```ts
+type CSSLongNativeTextPropKey = Extract<keyof StandardLonghandProperties,
+  Exclude<NativeTextStyleKey, CSSUnimplementedNativePropKey>>;
+```
+
+### CSSLongNativeBlockPropKey
+
+```ts
+type CSSLongNativeBlockPropKey = Extract<keyof StandardLonghandProperties | 'borderStyle',
+  Exclude<keyof ViewStyle, CSSUnimplementedNativePropKey>>;
+```
+
+### CSSNativePropKey
+
+```ts
+type CSSNativePropKey =
+  CSSLongNativeTextPropKey | CSSLongNativeBlockPropKey | CSSShortPropsKey;
+```
+
+### Misc CSS prop-key alias unions
+
+These are pure boolean combinations of the above (`Extract` / `Exclude` of long/short × native/web × translatable/untranslatable × text/block × flow/retain):
+
+- `CSSLongNativeTranslatableTextPropKey` — `Exclude<CSSLongNativeTextPropKey, CSSLongNativeUntranslatableTextPropKey>`.
+- `CSSLongNativeUntranslatableTextPropKey` — `never` (no untranslatable text long-hands today).
+- `CSSLongNativeTranslatableTextFlowedPropKey` — `Extract<CSSLongNativeTextPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeTranslatableTextRetainedPropKey` — `Exclude<CSSLongNativeTextPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeUntranslatableTextFlowedPropKey` — `Extract<CSSLongNativeUntranslatableTextPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeUntranslatableTextRetainedPropKey` — `Exclude<CSSLongNativeUntranslatableTextPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeTranslatableBlockPropKey` — `Exclude<CSSLongNativeBlockPropKey, CSSLongNativeUntranslatableBlockPropKey>`.
+- `CSSLongNativeUntranslatableBlockPropKey` — `Extract<CSSLongNativeBlockPropKey, 'position'>`.
+- `CSSLongNativeTranslatableBlockFlowedPropKey` — `Extract<CSSLongNativeTranslatableBlockPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeTranslatableBlockRetainedPropKey` — `Exclude<CSSLongNativeTranslatableBlockPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeUntranslatableBlockFlowedPropKey` — `Extract<CSSLongNativeUntranslatableBlockPropKey, CSSFlowedPropKey>`.
+- `CSSLongNativeUntranslatableBlockRetainedPropKey` — `Exclude<CSSLongNativeUntranslatableBlockPropKey, CSSFlowedPropKey>`.
+- `CSSLongWebTextFlowedPropKey` — `Extract<keyof StandardLonghandProperties, 'whiteSpace' | 'listStyleType' | 'userSelect'>`.
+- `CSSLongWebTextRetainedPropKey` — `Extract<keyof StandardLonghandProperties, never>` (currently empty).
+
+### Native style extras
+
+```ts
+type ExtendedNativeViewStyleKeys = keyof ViewStyle | keyof ImageStyle;
+
+type NativeDirectionalStyleKeys = Extract<ExtendedNativeViewStyleKeys,
+  'borderBottomEndRadius' | 'borderBottomStartRadius' | 'borderTopEndRadius' | 'borderTopStartRadius'
+  | 'borderEndColor' | 'borderEndWidth' | 'borderStartColor' | 'borderStartWidth'
+  | 'marginEnd' | 'marginStart' | 'paddingEnd' | 'paddingStart' | 'start' | 'end'>;
+
+type ExtraNativeShortViewStyleKeys = Extract<ExtendedNativeViewStyleKeys,
+  'marginHorizontal' | 'marginVertical' | 'paddingHorizontal' | 'paddingVertical'>;
+
+type ExtraNativeLongViewStyleKeys = Exclude<
+  Exclude<ExtendedNativeViewStyleKeys, CSSShortPropsKey>,
+  CSSLongNativeBlockPropKey | CSSUnimplementedNativePropKey
+  | NativeDirectionalStyleKeys | ExtraNativeShortViewStyleKeys
+>;
+
+type ExtraNativeTextStyleKeys = Exclude<
+  Exclude<NativeTextStyleKey, CSSShortPropsKey>,
+  CSSLongNativeTextPropKey | CSSUnimplementedNativePropKey
+>;
+
+type NativeShortKeys = Extract<CSSShortPropsKey, NativeTextStyleKey | keyof ViewStyle>;
+
+type ExtraNativeShortStyle = Pick<TextStyle & ViewStyle, ExtraNativeShortViewStyleKeys | NativeShortKeys>;
+type ExtraNativeTextStyle  = Partial<Pick<TextStyle, ExtraNativeTextStyleKeys>>;
+type ExtraNativeViewStyle  = Partial<Pick<ViewStyle & ImageStyle, ExtraNativeLongViewStyleKeys | ExtraNativeShortViewStyleKeys>>;
+type ExtraNativeUntranslatedLongStyles = Pick<ViewStyle, CSSLongNativeUntranslatableBlockPropKey>;
+```
+
+These cover RN-specific style keys that lie outside the standard CSS prop-key partitions (directional logical properties, horizontal/vertical shorthands, etc.) so they can still be carried through `MixedStyleDeclaration`.
+
+## Renderer Types
+
+Props passed to default, internal, and custom renderers. Types live in `@native-html/render`.
+
+### TNodeRendererProps
+
+```ts
+interface TNodeRendererProps<T extends TNode> {
+  propsFromParent?: PropsFromParent;
+  renderIndex: number;          // React-tree index, after hoisting
+  renderLength: number;         // total React-tree siblings
+  tnode: T;
+}
+```
+
+### RendererBaseProps
+
+Abstract base for renderer prop interfaces.
+
+```ts
+interface RendererBaseProps<T extends TNode> extends TNodeRendererProps<T> {
+  nativeProps?: StylessReactNativeProps & { style?: StyleProp<ViewStyle> };
+  onPress?: (e: GestureResponderEvent) => void;
+  textProps: TextProps;
+  type: 'text' | 'block';
+  viewProps: ViewProps;
+}
+```
+
+`nativeProps.style`, `textProps.style`, `viewProps.style` have higher specificity than the TNode's computed styles.
+
+### TDefaultRendererProps
+
+```ts
+interface TDefaultRendererProps<T extends TNode> extends RendererBaseProps<T> {
+  TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;
+  children?: ReactNode;
+  propsForChildren?: Partial<PropsFromParent>;
+  style: T extends TText | TPhrasing
+    ? StyleProp<TextStyle>
+    : StyleProp<ViewStyle>;
+}
+```
+
+### InternalRendererProps
+
+```ts
+interface InternalRendererProps<T extends TNode> extends RendererBaseProps<T> {
+  TDefaultRenderer: TDefaultRenderer<T>;
+  TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;
+  sharedProps: RenderHTMLAmbiantSharedProps;
+  style: T extends TText | TPhrasing ? NativeTextStyles : NativeBlockStyles;
+}
+```
+
+### CustomRendererProps
+
+```ts
+interface CustomRendererProps<T extends TNode> extends InternalRendererProps<T> {
+  InternalRenderer: InternalRenderer<T>;   // may equal TDefaultRenderer when no internal renderer exists
+}
+```
+
+### TDefaultRenderer
+
+```ts
+type TDefaultRenderer<T extends TNode> = ComponentType<TDefaultRendererProps<T>>;
+```
+
+Fallback renderer for any `TNode`. Behavior switches on `tnode.type`.
+
+### InternalRenderer
+
+```ts
+type InternalRenderer<T extends TNode> = ComponentType<InternalRendererProps<T>>;
+```
+
+Internal custom renderer for tags with engine-side specifics (e.g. `<img>`, `<a>`, `<ol>`, `<ul>`).
+
+### CustomRenderer
+
+```ts
+type CustomRenderer<T extends TNode> = ComponentType<CustomRendererProps<T>>;
+```
+
+User-provided renderer (the `renderers` prop on `RenderHTML`).
+
+### CustomBlockRenderer / CustomTextualRenderer / CustomMixedRenderer
+
+```ts
+type CustomBlockRenderer   = CustomRenderer<TBlock>;
+type CustomTextualRenderer = CustomRenderer<TText | TPhrasing>;
+type CustomMixedRenderer   = CustomRenderer<TBlock | TPhrasing | TText>;
+```
+
+Use the right type based on the tag's content model for TypeScript intellisense.
+
+### InternalBlockRenderer / InternalMixedRenderer / InternalTextualRenderer
+
+```ts
+type InternalBlockRenderer   = InternalRenderer<TBlock>;
+type InternalMixedRenderer   = InternalRenderer<TBlock | TPhrasing | TText>;
+type InternalTextualRenderer = InternalRenderer<TPhrasing | TText>;
+```
+
+### CustomTagRendererRecord
+
+```ts
+type CustomTagRendererRecord = Record<string,
+  CustomBlockRenderer | CustomTextualRenderer | CustomMixedRenderer>;
+```
+
+### InternalTextContentRenderer
+
+```ts
+type InternalTextContentRenderer = ComponentType<TNodeSubRendererProps<TText>> & {
+  isNativeInternalTextRenderer: true;
+};
+```
+
+Renderer for non-printable text nodes (`<wbr>`, `<br>`).
+
+### InternalSpecialRenderedTag
+
+```ts
+type InternalSpecialRenderedTag = 'img' | 'ol' | 'ul' | 'a';
+```
+
+Tags that have internal renderers wired into `useInternalRenderer`.
+
+### InternalRendererConfig
+
+```ts
+interface InternalRendererConfig<P> {
+  Renderer: ComponentType<P>;
+  rendererProps: P;
+}
+```
+
+Return shape of `useInternalRenderer`.
+
+### TChildProps
+
+```ts
+interface TChildProps {
+  childElement: ReactElement;
+  childTnode: TNode;
+  index: number;
+  key: string | number;
+  propsFromParent: PropsFromParent;
+}
+```
+
+### TChildrenBaseProps
+
+```ts
+interface TChildrenBaseProps {
+  disableMarginCollapsing?: boolean;
+  propsForChildren?: Partial<PropsFromParent>;
+  renderChild?: (props: TChildProps) => ReactNode;
+}
+```
+
+### TChildrenRendererProps
+
+```ts
+interface TChildrenRendererProps extends TChildrenBaseProps {
+  tchildren: ReadonlyArray<TNode>;
+}
+```
+
+### TNodeChildrenRendererProps
+
+```ts
+interface TNodeChildrenRendererProps extends TChildrenBaseProps {
+  tnode: TNode;
+}
+```
+
+### PropsFromParent
+
+```ts
+interface PropsFromParent extends Record<string, any> {
+  collapsedMarginTop: number | null;
+}
+```
+
+Props anonymous nodes pass from their parents to their children.
+
+### RenderersProps
+
+```ts
+interface RenderersProps extends Record<string, any> {
+  a: AElementConfig;
+  img: ImgElementConfig;
+  ol: ListElementConfig;
+  ul: ListElementConfig;
+}
+```
+
+Custom-renderer props by tag. Extensible via module augmentation.
+
+### AElementConfig
+
+```ts
+interface AElementConfig {
+  onPress?: (
+    event: GestureResponderEvent,
+    href: string,                       // normalized via useNormalizedUrl
+    htmlAttribs: Record<string, string>,
+    target: '_blank' | '_self' | '_parent' | '_top',
+  ) => void;
+}
+```
+
+### ImgElementConfig
+
+```ts
+interface ImgElementConfig {
+  enableExperimentalPercentWidth?: boolean;
+  initialDimensions?: ImageDimensions;  // memoize when changing
+}
+```
+
+### ListElementConfig
+
+```ts
+interface ListElementConfig {
+  enableDynamicMarkerBoxWidth?: boolean;            // default false
+  enableExperimentalRtl?: boolean;                  // default false
+  enableRemoveBottomMarginIfNested?: boolean;       // default true
+  enableRemoveTopMarginIfNested?: boolean;          // default true
+  getFallbackListStyleTypeFromNestLevel?: (nestLevel: number) => DefaultSupportedListStyleType;
+  markerBoxStyle?: StyleProp<ViewStyle>;
+  markerTextStyle?: TextStyle;
+}
+```
+
+### RenderHTMLPassedProps
+
+```ts
+interface RenderHTMLPassedProps {
+  renderersProps?: Partial<RenderersProps>;
+}
+```
+
+### RenderHTMLSharedProps
+
+Props shared across renderers; available through `useSharedProps`. Memoize them — any change invalidates the whole tree.
+
+```ts
+interface RenderHTMLSharedProps {
+  GenericPressable?: ComponentType<GenericPressableProps>;
+  WebView?: ComponentType<any>;
+  bypassAnonymousTPhrasingNodes?: boolean;        // default true
+  computeEmbeddedMaxWidth?: (contentWidth: number, tagName: string) => number;
+  customListStyleSpecs?: Record<string, ListStyleSpec>;
+  debug?: boolean;                                // default false
+  defaultTextProps?: TextProps;
+  defaultViewProps?: ViewProps;
+  defaultWebViewProps?: any;
+  enableExperimentalBRCollapsing?: boolean;       // default false
+  enableExperimentalGhostLinesPrevention?: boolean; // default false
+  enableExperimentalMarginCollapsing?: boolean;   // default false
+  pressableHightlightColor?: string;              // default rgba(38,132,240,0.2)
+  provideEmbeddedHeaders?: EmbeddedHeadersProvider;
+}
+```
+
+### RenderHTMLAmbiantSharedProps
+
+```ts
+type RenderHTMLAmbiantSharedProps =
+    Required<Pick<RenderHTMLSharedProps, SharedPropsWithoutFallback>>
+  & Omit<RenderHTMLSharedProps, SharedPropsWithoutFallback>;
+// SharedPropsWithoutFallback = Exclude<keyof RenderHTMLSharedProps,
+//   'provideEmbeddedHeaders' | 'GenericPressable' | 'customListStyleSpecs'>;
+```
+
+Shape returned by `useSharedProps()` — defaults filled in for all keys except the three explicitly nullable fallbacks.
+
+### RenderHTMLConfig
+
+Props for `RenderHTMLConfigProvider`.
+
+```ts
+interface RenderHTMLConfig extends RenderHTMLSharedProps, RenderHTMLPassedProps {
+  remoteErrorView?: (source: HTMLSourceUri) => ReactElement;
+  remoteLoadingView?: (source: HTMLSourceUri) => ReactElement;
+  renderers?: CustomTagRendererRecord;
+}
+```
+
+### RenderHTMLSourceProps
+
+Props for the `RenderHTMLSource` component.
+
+```ts
+interface RenderHTMLSourceProps {
+  contentWidth?: number;
+  onDocumentMetadataLoaded?: (documentMetadata: DocumentMetadata) => void;
+  onHTMLLoaded?: (html: string) => void;
+  onTTreeChange?: (ttree: TDocument) => void;
+  source: HTMLSource;
+}
+```
+
+### RenderHTMLProps
+
+Props for the top-level `<RenderHTML />` component.
+
+```ts
+interface RenderHTMLProps extends RenderHTMLConfig, RenderHTMLSourceProps, TRenderEngineConfig {}
+```
+
+### HTMLSource
+
+```ts
+type HTMLSource = HTMLSourceInline | HTMLSourceDom | HTMLSourceUri;
+
+interface HTMLSourceInline { baseUrl?: string; html: string; }
+
+interface HTMLSourceDom    { baseUrl?: string; dom: Element | Document; } // dom must come from TRE.parseDocument
+
+interface HTMLSourceUri {
+  body?: string;
+  headers?: Record<string, string>;
+  method?: string;
+  uri: string;
+}
+```
+
+### DocumentMetadata
+
+Available through `useDocumentMetadata()` after parsing.
+
+```ts
+interface DocumentMetadata {
+  baseTarget: DocumentContext['baseTarget'];
+  baseUrl: string;                   // base from <base/>, source.baseUrl, or source.uri origin
+  dir: 'ltr' | 'rtl';
+  lang: string;
+  links: DocumentContext['links'];
+  meta: DocumentContext['meta'];
+  title: string;
+}
+```
+
+### GenericPressableProps
+
+```ts
+interface GenericPressableProps extends AccessibilityProps {
+  borderless?: boolean;
+  onPress?: TouchableHighlightProps['onPress'];
+  style?: StyleProp<ViewStyle>;
+}
+```
+
+### ReactNativeProps
+
+```ts
+type ReactNativeProps =
+    Pick<ViewProps, Extract<keyof ViewProps, Exclude<keyof TextProps, 'style'>>>
+  & Pick<TextProps, Extract<keyof TextProps, Exclude<keyof ViewProps, 'style'>>>
+  & { style?: StyleProp<Pick<ViewStyle, Extract<keyof ViewStyle, keyof TextStyle>>> };
+```
+
+Props valid on both `Text` and `View`.
+
+### StylessReactNativeProps / StylessReactNativeTextProps / StylessReactNativeViewProps
+
+```ts
+type StylessReactNativeTextProps = Omit<TextProps, 'style'>;
+type StylessReactNativeViewProps = Omit<ViewProps, 'style'> & { onPress?: () => void };
+type StylessReactNativeProps     = Omit<ReactNativeProps, 'style'> & { onPress?: () => void };
+```
+
+### ReactNativePropsDefinitions
+
+```ts
+type ReactNativePropsDefinitions = {
+  text?:   StylessReactNativeTextProps;
+  view?:   StylessReactNativeViewProps;
+  native?: StylessReactNativeProps;
+};
+```
+
+Used by `ElementModelBase.reactNativeProps` and `getReactNativeProps`.
+
+### ReactNativePropsSwitch
+
+```ts
+type ReactNativePropsSwitch = {
+  text?: StylessReactNativeTextProps;
+  view?: StylessReactNativeViewProps;
+};
+```
+
+The shape returned by `TNodeShape.getReactNativeProps()`.
+
+### UnitaryCounterRendererProps
+
+```ts
+type UnitaryCounterRendererProps = {
+  color: string;
+  fontSize: number;
+  index: number;
+  lineHeight: number;
+} & Pick<MixedStyleDeclaration, 'fontFamily' | 'fontStyle' | 'fontWeight' | 'fontVariant'>;
+```
+
+### TextualListStyleSpec / UnitaryListStyleSpec / ListStyleSpec
+
+```ts
+interface TextualListStyleSpec {
+  counterStyleRenderer: CounterStyleRenderer;
+  type: 'textual';
+}
+interface UnitaryListStyleSpec {
+  Component: ComponentType<UnitaryCounterRendererProps>;
+  counterStyleRenderer: CounterStyleRenderer;
+  type: 'unitary';
+}
+type ListStyleSpec = TextualListStyleSpec | UnitaryListStyleSpec;
+```
+
+### DefaultSupportedListStyleType
+
+```ts
+type DefaultSupportedListStyleType =
+  | 'none' | 'disc' | 'circle' | 'square'
+  | 'decimal' | 'decimal-leading-zero'
+  | 'lower-roman' | 'upper-roman'
+  | 'lower-greek' | 'lower-alpha' | 'lower-latin'
+  | 'upper-alpha' | 'upper-latin'
+  | 'disclosure-open' | 'disclosure-closed';
+```
+
+### TNodeSubRendererProps (internal)
+
+```ts
+interface TNodeSubRendererProps<T extends TNode> extends TNodeRendererProps<T> {
+  TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;
+  sharedProps: RenderHTMLAmbiantSharedProps;
+}
+```
+
+## Image Element Types
+
+Types backing the `IMGElement` family and the `useIMGElement*` hooks.
+
+### ImageDimensions
+
+```ts
+interface ImageDimensions { height: number; width: number; }
+```
+
+### IncompleteImageDimensions
+
+```ts
+interface IncompleteImageDimensions {
+  height: number | null;
+  width: number | null;
+}
+```
+
+### UseIMGElementStateProps
+
+Inputs accepted by `useIMGElementState`.
+
+```ts
+interface UseIMGElementStateProps {
+  alt?: string;
+  altColor?: string;
+  cachedNaturalDimensions?: ImageDimensions;
+  computeMaxWidth?: (contentWidth: number) => number;
+  contentWidth?: number;
+  enableExperimentalPercentWidth?: boolean;
+  height?: string | number;
+  initialDimensions?: ImageDimensions;
+  objectFit?: WebBlockStyles['objectFit'];
+  source: ImageURISource;
+  style?: StyleProp<ImageStyle>;
+  width?: string | number;
+}
+```
+
+### UseIMGElementStateWithCacheProps
+
+```ts
+type UseIMGElementStateWithCacheProps =
+    UseIMGElementStateProps
+  & Required<Pick<UseIMGElementStateProps, 'cachedNaturalDimensions'>>;
+```
+
+Force-required `cachedNaturalDimensions` to skip the network round-trip.
+
+### IMGElementProps
+
+```ts
+interface IMGElementProps extends UseIMGElementStateProps {
+  containerProps?: Omit<ViewProps, 'style'>;
+  onPress?: PressableProps['onPress'];
+  testID?: string;
+}
+```
+
+### IMGElementState
+
+```ts
+type IMGElementState = IMGElementStateError | IMGElementStateSuccess | IMGElementStateLoading;
+```
+
+The discriminated state machine for `IMGElement`.
+
+### IMGElementStateBase
+
+```ts
+interface IMGElementStateBase {
+  alt?: string;
+  altColor?: string;
+  containerStyle: ViewStyle;
+  dimensions: ImageDimensions;
+  source: ImageURISource;
+}
+```
+
+### IMGElementStateSuccess
+
+```ts
+interface IMGElementStateSuccess extends IMGElementStateBase {
+  imageStyle: ImageStyle;
+  onError: (error: Error) => void;
+  type: 'success';
+}
+```
+
+### IMGElementStateLoading
+
+```ts
+interface IMGElementStateLoading extends IMGElementStateBase {
+  type: 'loading';
+}
+```
+
+### IMGElementStateError
+
+```ts
+interface IMGElementStateError extends IMGElementStateBase {
+  error: Error;
+  type: 'error';
+}
+```
+
+### EmbeddedHeadersProvider
+
+```ts
+type EmbeddedHeadersProvider = <T extends EmbeddedWithHeadersTagName>(
+  uri: string,
+  tagName: T,
+  params: EmbeddedWithHeadersParamsMap[T],
+) => Record<string, string> | null | void;
+```
+
+### EmbeddedWithHeadersTagName
+
+```ts
+type EmbeddedWithHeadersTagName = Exclude<EmbeddedTagNames, 'svg' | 'canvas' | 'math'>;
+```
+
+### EmbeddedWithHeadersParamsMap
+
+```ts
+interface EmbeddedWithHeadersParamsMap
+  extends Record<EmbeddedWithHeadersTagName, Record<string, unknown>> {
+  img: { printHeight?: number; printWidth?: number };
+}
+```
+
+### FallbackFontsDefinitions
+
+```ts
+interface FallbackFontsDefinitions {
+  monospace: string;
+  'sans-serif': string;
+  serif: string;
+}
+```
+
+## Tag-name Constants and Categories
+
+String-literal unions identifying tag groups per the HTML5 spec.
+
+### TagName
+
+```ts
+type TagName =
+  | AnchorTagName | TextLevelTagNames | EditsTagNames | EmbeddedTagNames
+  | TabularTagNames | GroupingTagNames | SectioningTagNames
+  | InteractiveTagNames | UntranslatableTagNames;
+```
+
+### AnchorTagName
+
+```ts
+type AnchorTagName = 'a';
+```
+
+### TextLevelTagNames
+
+```ts
+type TextLevelTagNames =
+  | 'em' | 'strong' | 'strike' | 'small' | 'big' | 's' | 'cite' | 'q'
+  | 'dfn' | 'abbr' | 'acronym' | 'ruby' | 'rt' | 'rp' | 'data' | 'time'
+  | 'tt' | 'code' | 'var' | 'samp' | 'kbd' | 'sup' | 'sub'
+  | 'i' | 'b' | 'u' | 'mark' | 'bdi' | 'bdo' | 'span' | 'br' | 'wbr';
+```
+
+### EditsTagNames
+
+```ts
+type EditsTagNames = 'ins' | 'del';
+```
+
+### EmbeddedTagNames
+
+```ts
+type EmbeddedTagNames =
+  'audio' | 'canvas' | 'embed' | 'iframe' | 'img' | 'math'
+  | 'object' | 'picture' | 'svg' | 'video';
+```
+
+### TabularTagNames
+
+```ts
+type TabularTagNames =
+  'table' | 'tbody' | 'thead' | 'tfoot' | 'tr' | 'td' | 'th';
+```
+
+### GroupingTagNames
+
+```ts
+type GroupingTagNames =
+  'p' | 'hr' | 'pre' | 'blockquote' | 'ol' | 'ul' | 'dir' | 'menu'
+  | 'li' | 'dl' | 'dt' | 'dd' | 'figure' | 'figcaption'
+  | 'main' | 'div' | 'xmp' | 'listing' | 'plaintext';
+```
+
+### SectioningTagNames
+
+```ts
+type SectioningTagNames =
+  'body' | 'article' | 'section' | 'nav' | 'aside'
+  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hgroup'
+  | 'header' | 'footer' | 'address';
+```
+
+### InteractiveTagNames
+
+```ts
+type InteractiveTagNames =
+  'form' | 'label' | 'input' | 'button' | 'select' | 'progress'
+  | 'meter' | 'fieldset' | 'legend' | 'textarea' | 'output'
+  | 'details' | 'summary' | 'dialog';
+```
+
+### AttribTagNames
+
+```ts
+type AttribTagNames =
+  'accesskey' | 'datalist' | 'source' | 'track' | 'caption'
+  | 'colgroup' | 'col' | 'option' | 'optgroup' | 'param';
+```
+
+### MetadataTagNames
+
+```ts
+type MetadataTagNames = 'head' | 'title' | 'base' | 'link' | 'meta';
+```
+
+### UnsupportedTagNames
+
+```ts
+type UnsupportedTagNames = 'area' | 'map';
+```
+
+### UntranslatableTagNames
+
+```ts
+type UntranslatableTagNames =
+  AttribTagNames | UnsupportedTagNames | MetadataTagNames;
+```
+
+## Other Exports and Utilities
+
+Functions, default values, and re-exported entries that don't fit the above buckets.
+
+### TRenderEngine (re-export)
+
+The TRE class. See "TRE Types" → "TRenderEngine (class)" above. The `index.mdx` page in `Other Exports` points to the same constructor.
+
+### TChildrenRenderer (component re-export)
+
+```ts
+const TChildrenRenderer: FunctionComponent<TChildrenRendererProps>;
+```
+
+Renders a collection of TNodes; pair with `useTNodeChildrenProps`.
+
+### isDomElement
+
+```ts
+function isDomElement(node: any): node is Element;
+```
+
+Type guard for `domhandler` `Element`.
+
+### isDomText
+
+```ts
+function isDomText(node: any): node is Text;
+```
+
+Type guard for `domhandler` `Text`.
+
+### domNodeToHTMLString
+
+```ts
+function domNodeToHTMLString(
+  root: Node | null,
+  reporter?: DomNodeToHtmlReporter,
+  depth?: number,
+): string;
+```
+
+Serialize a DOM tree back to its HTML string representation.
+
+### DomNodeToHtmlReporter
+
+```ts
+interface DomNodeToHtmlReporter {
+  (node: Node | null, depth: number, html: string): void;
+}
+```
+
+Per-node callback invoked during HTML stringification.
+
+### getNativePropsForTNode
+
+```ts
+function getNativePropsForTNode<T extends TPhrasing | TText | TBlock>(
+  props: TDefaultRendererProps<T>,
+): T extends TBlock ? ViewProps & { onPress?: () => void } : TextProps;
+```
+
+Extract the React Native props that would be passed to `Text` / `View` / `GenericPressable` by `TDefaultRenderer`. Use when wrapping a different native component (e.g. `Animated.Text`).
+
+### collapseTopMarginForChild
+
+```ts
+function collapseTopMarginForChild(
+  n: number,
+  tchildren: readonly TNode[],
+): number | null;
+```
+
+Compute the collapsed top margin for the n-th child. Returns `null` when no collapsing applies.
+
+### splitBoxModelStyle
+
+```ts
+function splitBoxModelStyle(styles: NativeBlockStyles | NativeTextStyles): {
+  boxModelStyle: /* margin/padding/border/positioning subset */;
+  otherStyle:    /* remainder */;
+};
+```
+
+Separate box-model styles from the rest — useful when wrapping a `Text` in a `View` to apply padding/borders that `Text` cannot.
+
+### buildTREFromConfig
+
+```ts
+function buildTREFromConfig(props: TRenderEngineConfig): TRenderEngine;
+```
+
+Build a `TRenderEngine` from the same configuration object the `TRenderEngineProvider` accepts. Useful in tests and for debugging the TRE layer.
+
+### setMarkersForTNode
+
+Re-export of `SetMarkersForTNode` documented under TRE Types — the type alias for marker-mutator functions.
+
+### markers
+
+Re-export of the `Markers` interface documented under TRE Types.
+
+### defaultHTMLElementModels
+
+A typed map of every built-in `HTMLElementModel` keyed by tag name — full shape is `DefaultHTMLElementModelsStatic` documented above. Use `defaultHTMLElementModels.a.extend({...})` to derive a custom model.
+
+### defaultSystemFonts
+
+```ts
+const defaultSystemFonts: string[];
+```
+
+A handful of platform-default font names — fork via `[...defaultSystemFonts, 'MyFont']` and pass into `RenderHTMLProps.systemFonts`. On Expo, prefer `Constants.systemFonts`.
+
+### defaultListStyleSpecs
+
+```ts
+const defaultListStyleSpecs: Record<DefaultSupportedListStyleType, ListStyleSpec>;
+```
+
+Built-in counter-style renderers for `none`, `disc`, `circle`, `square`, `decimal`, the roman / alpha / greek series, and `disclosure-*`.
+
+### useAmbientTRenderEngine
+
+```ts
+function useAmbientTRenderEngine(): TRenderEngine;
+```
+
+Access the `TRenderEngine` instance provided by the closest `TRenderEngineProvider`.
+
+### useComputeMaxWidthForTag
+
+```ts
+function useComputeMaxWidthForTag(tagName: string): (cw: number) => number;
+```
+
+Resolve the max-width function configured via `computeEmbeddedMaxWidth` for a given tag.
+
+### useContentWidth
+
+```ts
+function useContentWidth(): number;
+```
+
+Read the ambient `contentWidth` from context.
+
+### useDocumentMetadata
+
+```ts
+function useDocumentMetadata(): DocumentMetadata;
+```
+
+Access parsed HTML metadata from the closest `RenderHTMLSource`.
+
+### useNormalizedUrl
+
+```ts
+function useNormalizedUrl(initialUrl: string): string;
+```
+
+Normalize a relative or protocol-relative URL into an absolute one using the active `baseUrl` (from `<base>`, `source.baseUrl`, or `source.uri`). RFC 1808 semantics.
+
+### useRendererProps
+
+```ts
+function useRendererProps<R extends RenderersProps = RenderersProps, K extends keyof R = keyof R>(
+  tagName: K,
+): R[K];
+```
+
+Read the deep-merged renderer props for a given tag (the `renderersProps[tagName]` from `RenderHTMLProps`).
+
+### useSharedProps
+
+```ts
+function useSharedProps(): RenderHTMLAmbiantSharedProps;
+```
+
+Read the resolved `RenderHTMLSharedProps` (defaults filled in).
+
+### useTNodeChildrenProps
+
+```ts
+function useTNodeChildrenProps(props: TNodeChildrenRendererProps): TChildrenRendererProps;
+```
+
+Translate `TNodeChildrenRenderer`-style props (with `tnode`) into `TChildrenRenderer` props (with `tchildren`) — useful when slicing a TNode's children into chunks (e.g. injecting ads between paragraphs).
+
+### useIMGElementState / useIMGElementStateWithCache / useIMGElementProps
+
+```ts
+function useIMGElementState(props: UseIMGElementStateProps): IMGElementState;
+
+function useIMGElementStateWithCache(
+  props: UseIMGElementStateWithCacheProps,
+): IMGElementStateError | IMGElementStateSuccess;
+
+function useIMGElementProps(props: InternalRendererProps<TBlock>): IMGElementProps;
+```
+
+Build the image state machine in custom renderers or convert internal renderer props into props consumable by `IMGElement`.
+
+### useInternalRenderer
+
+```ts
+function useInternalRenderer<T extends TagName>(
+  tagName: T,
+  props: InternalRendererProps<any>,
+): T extends InternalSpecialRenderedTag
+  ? InternalRendererConfig<ReturnType<typeof specialRenderersConfig[T]['hook']>>
+  : InternalRendererConfig<TDefaultRendererProps<any>>;
+```
+
+Reuse internal renderer logic for custom renderers. `tagName` must be invariant.
+
+## Externals
+
+Re-exports of `domhandler` DOM types (the same shapes returned by `htmlparser2`/`parseDocument`). The component models above hold references to these.
+
+### Node
+
+`domhandler` base node. Fields:
+
+```ts
+type Node = /* abstract */;
+// Common fields (inherited by Document/Element/Text/NodeWithChildren):
+//   parent: ParentNode | null
+//   prev:   ChildNode  | null
+//   next:   ChildNode  | null
+//   startIndex: number | null         // requires withStartIndices
+//   endIndex:   number | null         // requires withEndIndices
+//   sourceCodeLocation?: SourceCodeLocation | null  // parse5 only
+//   type: ElementType
+// Method:
+//   cloneNode<T extends Node>(this: T, recursive?: boolean): T;
+```
+
+### NodeWithChildren
+
+```ts
+interface NodeWithChildren extends Node {
+  children: ChildNode[];
+}
+```
+
+Abstract base for any node that can contain children.
+
+### Document
+
+```ts
+interface Document extends NodeWithChildren {
+  type: ElementType.Root;
+  'x-mode'?: 'no-quirks' | 'quirks' | 'limited-quirks';  // parse5 only
+}
+```
+
+DOM root produced by `TRenderEngine.parseDocument(html)`.
+
+### Element
+
+```ts
+interface Element extends NodeWithChildren {
+  type: ElementType.Tag | ElementType.Script | ElementType.Style;
+  name: string;                          // tag name (lowercase)
+  attribs: Record<string, string>;
+  // x-attribsNamespace?: ...            // parse5 only
+  // x-attribsPrefix?: ...               // parse5 only
+}
+```
+
+A DOM element node. The `domNode` referenced from `TNodeShape.domNode` is always an `Element`.
+
+### Text
+
+```ts
+interface Text extends Node {
+  type: ElementType.Text;
+  data: string;
+}
+```
+
+A text node. `TText.textNode` is a `Text`.
+
+## Implementation notes
+
+- `TNodeShape`, `TBlock`, `TPhrasing`, `TText`, `TDocument`, `TEmpty`, `TNodeDescriptor`, `TNodeType`, `TNodePrintOptions`, `Markers`, `SetMarkersForTNode`, `DocumentContext`, `NativeBlockStyles`, `NativeTextStyles`, `WebBlockStyles`, `WebTextStyles`, `ExtractTNodeFromType` are declared in `packages/transient-render-engine/lib/typescript/tree/tree-types.d.ts`.
+- `HTMLElementModel`, `HTMLElementModelShape`, `HTMLContentModel`, `defaultHTMLElementModels`, `DefaultHTMLElementModelsStatic`, `ElementModelBase`, `NativeElementModel`, `CustomElementModel`, `ElementCategory`, `TagName` and all `*TagNames` aliases live in `packages/transient-render-engine/lib/typescript/model/*.d.ts`.
+- All CSS prop-key aliases, `CSSProcessorConfig`, `MixedStyleDeclaration`, `CSSFlattenProcessedTypes`, `MixedSizeCSSPropertiesKeys`, `WebTextFlowProperties`, `WebBlockRetainProperties`, and native-style extras come from `packages/css-processor/lib/typescript/{config,property-types,native-types,processor-types,CSSProcessor}.d.ts`.
+- `ReactNativeProps`, `ReactNativePropsDefinitions`, `ReactNativePropsSwitch`, `StylessReactNativeProps`, `StylessReactNativeTextProps`, `StylessReactNativeViewProps` live in `packages/transient-render-engine/lib/typescript/helper-types.d.ts`.
+- Renderer prop interfaces (`TNodeRendererProps`, `RendererBaseProps`, `TDefaultRendererProps`, `InternalRendererProps`, `CustomRendererProps`, `TChildProps`, `TChildrenBaseProps`, `TChildrenRendererProps`, `TNodeChildrenRendererProps`, `PropsFromParent`, `RenderersProps`, `RenderHTMLSharedProps`, `RenderHTMLAmbiantSharedProps`, `RenderHTMLConfig`, `RenderHTMLSourceProps`, `RenderHTMLProps`, `HTMLSource*`, `DocumentMetadata`, `GenericPressableProps`, `ImageDimensions`, `*ListStyleSpec`, `DefaultSupportedListStyleType`, `UnitaryCounterRendererProps`, `EmbeddedHeadersProvider`, `FallbackFontsDefinitions`, `HTMLElementModelRecord`, `AElementConfig`, `ImgElementConfig`, `ListElementConfig`) live in `packages/render/lib/typescript/shared-types.d.ts`.
+- Image-state and `IMGElement` prop types live in `packages/render/lib/typescript/elements/img-types.d.ts`.
+- `Custom*Renderer`, `Internal*Renderer`, `CustomTagRendererRecord`, `InternalTextContentRenderer` live in `packages/render/lib/typescript/render/render-types.d.ts`.
+- `useInternalRenderer`, `InternalSpecialRenderedTag`, `InternalRendererConfig` live in `packages/render/lib/typescript/hooks/useInternalRenderer.d.ts`.
+- Helpers (`buildTREFromConfig`, `collapseTopMarginForChild`, `splitBoxModelStyle`, `domNodeToHTMLString`, `getNativePropsForTNode`, `DomNodeToHtmlReporter`) live in `packages/render/lib/typescript/helpers/*.d.ts`.
+- Externals (`Document`, `Element`, `Node`, `NodeWithChildren`, `Text`) come from the `domhandler` package and are re-exported through `@native-html/transient-render-engine`.
+
+# Contributing and Development
+
+## Getting Help
+
+### A User's Guide to Getting Help
+
+### Decision table
+
+Please read all the entries bellow before choosing the one that best fits your case, and proceed with the recommendations.
+
+| Issue |
+|---|
+| I am encountering a failure |
+| The library is not honoring an area of the CSS/HTML standard |
+| The library is not behaving as it claims or should |
+| I want to do X with this library, is it possible? |
+| I am having trouble to understand how to use a specific feature |
+
+### I am encountering a failure.
+
+I am using `@native-html/render` and I am witnessing a failure such as:
+
+- A Red screen of death during development that is caused by an object of this library;
+- A failure while building the app for production;
+- A crash or exception when rendering a component of this library.
+
+**Recommendations**
+
+1. Read the [FAQ](https://native-html.github.io/render/docs/faq).
+2. Take a look at [native-html-render on StackOverflow](https://stackoverflow.com/questions/tagged/native-html-render) or [react-native-render-html on StackOverflow](https://stackoverflow.com/questions/tagged/react-native-render-html) for similar questions.
+3. Take a look at [our issue tracker](https://github.com/native-html/render/issues) for similar questions.
+4. If you still don't have a solution, you can choose one or more:
+   - A. Submitting a Bug Report (see Contributing > Opening Tickets).
+   - B. Going to [our Discord #support channel](https://discord.gg/dbEMMJM).
+
+### The library is not honoring an area of the CSS/HTML standard.
+
+For example, it doesn't render tag YYY or replicate the behavior of attribute XXX. This library is not meant for an exact compliance with the standard. First and foremost, because React Native imposes some constraints that we cannot overcome, and secondly, because the philosophy of the library is to let you customize rendering to fit your needs rather than strictly honoring the standards. Finally, because the [`react-native-webview`](https://github.com/react-native-community/react-native-webview) library fits this purpose.
+
+However, we are always open to feature requests and propositions for enhancement regarding better compliance with the standards. You're more than welcomed to open a ticket (see Contributing > Opening Tickets) and discuss the feature on [our #general Discord channel](https://discord.gg/dbEMMJM).
+
+### The library is not behaving as it claims or should.
+
+For example:
+
+A. The documentation says something, but the behavior differs.
+B. The library should obviously have the behavior I'm expecting, but it doesn't.
+
+**Recommendations**
+
+1. Make sure your HTML snippet is compliant with the HTML5 spec.
+   - A. Go to [https://validator.w3.org/nu/](https://validator.w3.org/nu/).
+   - B. Select "Check by text input"
+   - C. Paste your snippet in the body of the document.
+   - D. Press "Check"
+2. Make sure your issue isn't covered [by the docs](https://native-html.github.io/render/docs/intro).
+3. Read the [FAQ](https://native-html.github.io/render/docs/faq).
+4. Take a look at [native-html-render on StackOverflow](https://stackoverflow.com/questions/tagged/native-html-render) or [react-native-render-html on StackOverflow](https://stackoverflow.com/questions/tagged/react-native-render-html) for similar questions.
+5. Take a look at [our issue tracker](https://github.com/native-html/render/issues) for similar questions.
+6. If you still don't have a solution, you can choose one or more:
+   - A. Submitting a Bug Report (see Contributing > Opening Tickets).
+   - B. Going to [our Discord #support channel](https://discord.gg/dbEMMJM). Please note that if your issue is not trivial, we will probably ask you to fill a bug report anyway.
+
+### I want to do X with this library, is it possible?
+
+**Recommendations**
+
+1. Make sure the feature isn't covered [by the docs](https://native-html.github.io/render/docs/intro).
+2. Read the [FAQ](https://native-html.github.io/render/docs/faq).
+3. Take a look at [native-html-render on StackOverflow](https://stackoverflow.com/questions/tagged/native-html-render) or [react-native-render-html on StackOverflow](https://stackoverflow.com/questions/tagged/react-native-render-html) for similar questions.
+4. Take a look at [our issue tracker](https://github.com/native-html/render/issues) for similar questions.
+5. If you still don't have an answer, you can choose one or more:
+   - A. [Opening a StackOverflow post](https://stackoverflow.com/questions/ask) with the `@native-html/render` tag.
+   - B. Submitting a Feature Request (see Contributing > Proposing a Feature or Enhancement).
+   - C. Going to [our Discord #support channel](https://discord.gg/dbEMMJM).
+
+### I am having trouble to understand how to use a specific feature of this library.
+
+**Recommendations**
+
+1. Carefully [read the docs](https://native-html.github.io/render/docs/intro).
+2. Read the [FAQ](https://native-html.github.io/render/docs/faq).
+3. If you still find difficult to use this feature, then we are lacking good documentation, and we should fix it. Go to [our Discord #support channel](https://discord.gg/dbEMMJM) and we will help you out.
+
+## Contributing
+
+### A Contributors' Guide
+
+> Note: If you're starting to read this guide, well thanks for willing to contribute to this project! Your effort will be very much appreciated. **If you need help**, take a look at our dedicated document (see Getting Help).
+
+### Opening Tickets
+
+After you've read the relevant sections of this document, you can open a ticket through GitHub here: [https://github.com/native-html/render/issues/new/choose](https://github.com/native-html/render/issues/new/choose). Make sure you follow the appropriate template.
+
+> Note: The art of filling good reports is as important and valued as the art of producing readable, maintainable code. Developers tend to rush when filling reports because their initiative stems from a place of frustration. This is very well understandable, but ineffective regarding the goal of solving one's problem. Consider the _time investment / benefits_ ratio: by filling a detailed bug report, you might have committed a chunk of your valuable time. But **your chances of having a fix merged rapidly have considerably increased**.
+
+> Warning: By not following our guidelines and templates, you risk having your ticket closed without notice. Sorry about that... our time is also valuable, and we cannot help you if you don't help us in the process!
+
+#### Submitting a Bug
+
+> Caution: If you would like to report a problem, take a look around and see if someone already opened an issue about it (see the Getting Help section). If you are certain this is a new, unreported bug, you can submit a bug report [by opening a new issue](https://github.com/native-html/render/issues/new/choose).
+
+The most important quality of your bug report is **reproducibility**. It means we can easily reproduce and investigate the bug to fix it as quickly as possible. If you've never heard of a "minimal reproducible example", take a look at this guide: [https://stackoverflow.com/help/mcve](https://stackoverflow.com/help/mcve). Bellow is a table of different types of reproductions:
+
+> Tip: If you add screencasts, screenshots, debugging information, or any insights that can help us identify the failure as quickly as possible, you can consider each a bonus.
+
+| Reproduction | Efficiency | Information |
+|---|---|---|
+| Regression Test | Highest | Offering a PR with a Test which reproduces the issue is the most efficient way to have your bug fixed rapidly. More details on the **dedicated section** (see Bug Reproduction). You are still required to open a bug report ticket, but you will be able to skip many steps. |
+| Snack | High | A **Snack** is very convenient for you and for us. You can [**start from our template**](https://snack.expo.io/@jsamr/rnrhtml-template). **Make sure you set the appropriate version of this library.** |
+| Git | High | A Git reproduction is as efficient as a Snack, albeit it might be a little extra work for you. |
+| Code Snippet | Low | A snippet is better than nothing, but we don't consider it _high quality_ and might take more time to investigate. Please consider put your snippet into a **Snack**. It will take you 2 minutes to configure. |
+
+Second important thing: try-out the latest version, including pre-releases! For more information on this topic, read the [Versions section of the README](https://github.com/native-html/render#versions). If you can try `master` branch, that would be even better, but we don't require it because it could contain breaking changes. To do so, simply run the following command:
+
+```bash
+npm install "github:native-html/render#master"
+```
+
+#### Proposing a Feature or Enhancement
+
+* Feature requests and enhancements **must** be submitted [in our Canny feature tracker](https://native-html.canny.io/features).
+* You can, **in addition**, consider writing an RFC (see Request For Comments) and offering it as a PR.
+
+> Tip: You or your company need a feature? Consider [sponsorship or consultancy](https://github.com/sponsors/jsamr) and it will be delivered ASAP.
+
+### Pull Requests
+
+> Note: We require some criterion to accept a pull request. But don't worry, we're also willing to help. You're encouraged to start a [Github draft](https://github.blog/2019-02-14-introducing-draft-pull-requests/) and we will be glad to help you build it and make it comply with our requirements. If you have any question or need advise regarding your contribution, you can also ping us in our [Discord #contributing channel](https://discord.gg/MwrZmBb).
+
+#### Bug Fixes
+
+If your PR fixes a bug, you are required to implement a regression test to prove your fix is effective, but **don't worry, we will help you**. The simplest way is to look at [our test folder](https://github.com/native-html/render/tree/master/packages/render-html/src/__tests__) and copy/paste an existing _regression test_ to get inspiration. You are also advised to read our developing guide (see Development). If you know what the test should do, but don't know how to implement the test, you can add a "Testing Plan" section in the body of your PR.
+
+#### Bug Reproduction
+
+When you submit a bug ticket, the fastest path for us to resolve the issue is by providing a bug reproduction. Take a glance at [our test folder](https://github.com/native-html/render/tree/master/packages/render-html/src/__tests__) and get inspiration by looking at _regression tests_. You are also advised to read our developing guide (see Development). The PR is ready _when the test fails_.
+
+#### Features
+
+> Note: We recommend you use the [draft Github option](https://github.blog/2019-02-14-introducing-draft-pull-requests/) when you start a Feature PR!
+
+If your PR provides new features, it means that the API of this library will likely change. You will be required to test the new feature. Take a look at [our test folder](https://github.com/native-html/render/tree/master/packages/render-html/src/__tests__). You are also advised to read our developing guide (see Development). If you're lost, we will be glad to help you, either on discord or within the PR on GitHub.
+
+#### Request For Comments
+
+> Note: RFC are propositions for new methods, behaviors and other API capabilities, or the exploration of an algorithmic challenge that is specific to this library. These are not Internet Society's RFCs! We don't have a rich multi-stage process. An RFC is either a draft, in discussion, or adopted (merged). We thereafter use versioning to polish and enhance those specifications.
+
+RFC purpose is to offer drafts for new ideas which goes relatively in depth regarding the issues, consequences and caveats of a peculiar feature. We don't have strict requirements, but the structure should loosely resemble the following:
+
+1. Problem Frame (what is the context and which issues this enhancement or feature will address).
+2. Requirements (what are the behaviors required for this feature to be supported?).
+
+You can take a look at drafts in [the `rfc` folder](https://github.com/native-html/render/tree/master/rfc) for inspiration.
+
+> Note: We require RFCs to be written in **AsciiDoc**. If you know markdown, it is very easy to pick and it ends-up much more powerful and versatile. Their documentation is of excellent quality, as proven by their [writer's guide](https://asciidoctor.org/docs/asciidoc-writers-guide/).
+
+#### Other
+
+For other type of contributions (documentation, enhancements), we don't _a priori_ require anything particular.
+
+## Development
+
+### Participating in RNRH development
+
+### Initializing the project
+
+Clone the project:
+
+```
+git clone git@github.com:native-html/render.git
+```
+
+Then yarn-install:
+
+```
+cd @native-html/render
+yarn install
+```
+
+### Package sources
+
+Package sources are located in `packages/render-html`.
+
+### Scripts
+
+The project is using Yarn Berry's workspaces. There is an alias to work from `@native-html/render` workspace:
+
+```
+yarn render
+```
+
+You can then run the following commands:
+
+| Most significant scripts | Description |
+|---|---|
+| `yarn render-html test:jest --watch` | Launch jest test in watch mode |
+| `yarn render-html test:ts` | Run Typescript typechecking |
+| `yarn render-html test:lint` | Run linter |
+| `yarn render-html build` | Transpile TS to ES |
+
+### Demo app
+
+```
+yarn build:tools
+yarn render-html build
+```
+
+From now-on, you should be able to try out the demo app with
+
+```
+yarn demo start
+```
+
+### Documentation
+
+All the doc pages are React components available in `doc-tools/doc-pages/src/pages` and are built for both the Discovery expo app and website.
+
+## Maintaining and Releasing
+
+### A Maintainers' Guide
+
+### Semantic Versioning
+
+We _must_ follow Semantic Versioning rules when publishing packages, and especially:
+
+- Never publish breaking changes, including regarding tooling and installation, between two versions of the same MAJOR.
+- Keep the semantics right between MINOR and PATCHES. MINORs convey new features while patches convey fixes.
+
+If you have a doubt, read the Semantic Versioning standard, v2.0 at [https://semver.org](https://semver.org). It's not that long.
+
+### Branching
+
+#### Development branches
+
+The branching system is highly coupled with Semantic Versioning. We support backporting fixes to different MAJOR versions. To do so, we adopt the following conventions:
+
+- `master` is the ultimate development branch for the upmost MAJOR, accepting PRs, fixes, new features... etc.
+- Any development branch for a MAJOR strictly inferior to master's MAJOR will have a name composed with the following pattern:
+
+```
+dev/MAJOR.x
+```
+
+These development branches will be used to cherry-pick backports from `master`.
+
+#### Release branches
+
+> Note: Release branches target a MAJOR.MINOR release. Patches within this minor will get merged. This is especially useful to hold references to documentation for a specific release while accounting for the fact it can be a moving target.
+
+Release branches have a name composed with the following pattern:
+
+```
+release/MAJOR.MINOR
+```
+
+#### Transient branches
+
+> Warning: Transient branches should never be worked on by more than one person at a time, unless authors are completely aware of their collaboration.
+
+> Note: Transient branches should be based on master and rebased before merging to `master`. They should be deleted after merged to master.
+
+These branches are meant for short-term development cycles such as pull requests. These branches' names should follow the following pattern:
+
+```
+PREFIX/QUALIFIER
+```
+
+| PREFIX | Description | QUALIFIER | Examples |
+|---|---|---|---|
+| `feat` | New features | The issue number this feat will cover, or a slug summarizing the feature | `feat/001` `feat/inline-css` |
+| `fix` | Bug fixes | The issue number this fix will address, or a slug summarizing this fix. | `fix/001` `fix/start-attribute` |
+| `reg` | (Anti) regression tests | The issue number this test will reproduce. | `reg/001` |
+| `tests` | Coverage or other tests | A slug summarizing the areas covered by the test(s). | `tests/image-renderer` |
+| `rfc` | Requests For Comments | A slug summarizing the area covered by the RFC. | `rfc/whitespaces` |
+| `opt` | Optimizations | The issue number this optimization will address, or a slug summarizing the optimization. | `opt/103` `opt/rendering-cycles` |
+
+### Publishing
+
+> Caution: Pre-releases should be prepared from `master` or `dev/MINOR.x` (see Branching).
+
+The publishing cycle entails pre-releases, which are usually tagged on npm with `next`. The table below describes the relationship between releases names, npm tags and their semantics. Custom npm tags can also be used to denote a new MAJOR version in early-stage development.
+
+| Release type | Npm tag | Version suffix | Description |
+|---|---|---|---|
+| Unstable | `unstable` | `-alpha.x` | Features and API can evolve. |
+| Frozen | `next` | `-beta.x` | Features are frozen. Eventually, new fixes and optimizations can be merged. |
+| Stable | `latest` `release/MAJOR.MINOR` | _none_ | Stable releases. |
+
+#### Pre-releases
+
+##### Prerequisites
+
+- [ ] Tests are passing;
+- [ ] I'm on the `master` (or a `dev/MINOR.x` branch if I'm backporting fixes);
+- [ ] If the release is frozen, I've updated the changelog with a `next` entry;
+- [ ] I have changed the version in  `package.json`;
+- [ ] I have commited my changes;
+- [ ] I have tagged this very commit with `v<semver>`, replacing `<semver>` with the version in `package.json`.
+
+##### Steps
+
+We use [release-it](https://github.com/release-it/release-it) utility to release new versions. You will need to provide a GIHUB_TOKEN environment variable to publish the release on Github.
+
+1. Run
+
+   ```
+   yarn render-html release-it --preRelease=beta --npm.tag=next 
+   ```
+
+   for a beta or
+
+   ```
+   yarn render-html release-it --preRelease=alpha --npm.tag=unstable
+   ```
+
+   for an alpha release. Eventually, edit manually the CHANGELOG.md file to add extra information.
+2. If this is the first pre-release, create a new issue on Github to be pinned, asking for feedback for this pre-release. This issue must have the `release` label.
+3. Release the new documentation website with
+
+   ```
+   yarn publish:website
+   ```
+
+   You will need to pass a USER environment variable to this command if your github user has a different name than your logged system user.
+4. Release the new discovery app with
+
+   ```
+   yarn publish:discovery
+   ```
+
+#### Releases
+
+##### Prerequisites
+
+- [ ] Tests are passing;
+- [ ] I'm on the `master` (or a `dev/MINOR.x` branch if I'm backporting fixes);
+- [ ] I've updated the changelog with a `<version>` entry;
+- [ ] I have changed the version in `package.json`;
+- [ ] I have commited my changes;
+- [ ] I have tagged this very commit with `v<semver>`, replacing `<semver>` with the version in `package.json`.
+
+##### Steps
+
+We use [release-it](https://github.com/release-it/release-it) utility to release new versions. You will need to provide a GIHUB_TOKEN environment variable to publish the release on Github.
+
+1. Run
+
+   ```
+   yarn render-html release-it
+   ```
+
+   Eventually, edit manually the CHANGELOG.md file to add extra information.
+2. Release the new documentation website with
+
+   ```
+   yarn publish:website
+   ```
+
+   You will need to pass a USER environment variable to this command if your github user has a different name than your logged system user.
+3. Release the new discovery app with
+
+   ```
+   yarn publish:discovery
+   ```
+
+**If this publication was a backport (from a `dev/MINOR.x` branch), you must cherry-pick the version commit into master.**
+
+A. Checkout and pull master
+
+```
+git switch master
+git pull
+```
+
+B. Cherry-pick the commit you have previously made on `dev/MINOR.x` branch.
+
+```
+git cherry-pick <commit-id>
+```
+
+If you must resolve conflicts, make sure:
+
+- [ ] The new changelog entry is positioned in the appropriate order;
+- [ ] The `package.json` version remains the upmost.
+
+## Documentation Tooling
+
+Documentation primitives for both mobile app and website.
diff --git a/apps/website/static/llms.txt b/apps/website/static/llms.txt
new file mode 100644
index 00000000..2a308f90
--- /dev/null
+++ b/apps/website/static/llms.txt
@@ -0,0 +1,70 @@
+# @native-html/render
+
+> A WebView-free, pure-JavaScript React Native component that renders HTML into 100% native iOS and Android views. Powered by the Transient Render Engine (TRE): an HTML5-compliant pipeline that parses HTML, builds a Transient Render Tree (TRT) of `TNode`s, processes CSS into React Native styles (with inheritance, specificity, font selection, and whitespace collapsing), and renders the tree through composable internal and custom renderers. This is the monorepo (formerly `react-native-render-html`); core packages include `@native-html/render`, `@native-html/transient-render-engine`, and `@native-html/css-processor`.
+
+This `llms.txt` is a navigation guide for the live documentation at https://native-html.github.io/render/. For a single consolidated file covering all topics, see [llms-full.txt](https://native-html.github.io/render/llms-full.txt).
+
+When unsure where a topic lives:
+- "What is this library / minimal example / FAQ" → Getting Started
+- "How does an HTML string become native views / what is TRE / how does CSS resolve" → Architecture & Data Flow
+- "How are paragraphs / images / lists / anchors rendered out of the box" → Content
+- "How do I style / write a custom renderer / mutate the DOM at parse time" → Guides
+- "Migrating from v5 / what changed in v6.x" → Migration & Releases
+- "End-to-end worked example" → Tutorial
+- "API: props, components, hooks signatures" → API Reference
+- "How to contribute, run tests, cut a release" → Contributing
+
+## Getting Started
+
+- [Introduction](https://native-html.github.io/render/docs/intro): What `@native-html/render` is, when to use it (vs. `react-native-webview`), install, minimal `RenderHtml` example, the published-tree TRT shape, and monorepo package list.
+- [Reinvent the Wheel](https://native-html.github.io/render/docs/reinvent-the-wheel): A 40-line toy renderer that motivates the real engine by showing what a hand-rolled implementation would look like.
+- [FAQ](https://native-html.github.io/render/docs/faq): Links, fonts, lists, tables, accessibility, common bugs and workaround props.
+
+## Architecture & Data Flow
+
+- [Architecture](https://native-html.github.io/render/docs/architecture): Overview of the three-stage pipeline and the composite rendering architecture (`TRenderEngineProvider` + `RenderHTMLConfigProvider` + `RenderHTMLSource`).
+- [Transient Render Engine](https://native-html.github.io/render/docs/flow/transient-render-engine): TRT construction, element models (`HTMLElementModel`, content models: textual/block/mixed/none), TNode anatomy and the four types (`TDocument` / `TBlock` / `TPhrasing` / `TText`), translation/hoisting/whitespace-collapsing steps, markers.
+- [CSS Processing](https://native-html.github.io/render/docs/flow/css-processing): CSS inheritance/specificity rules, mixed style declarations, native vs. web style maps.
+- [Rendering](https://native-html.github.io/render/docs/flow/rendering): How TNodes are turned into React Native views, internal renderer dispatch, and the rendering lifecycle.
+
+## Content
+
+- [Textual](https://native-html.github.io/render/docs/content/textual): Paragraphs, whitespace collapsing (`normal`/`pre`), preformatted blocks, font selection via `systemFonts`/`fallbackFonts`, and the `enableExperimentalBRCollapsing` / `enableExperimentalGhostLinesPrevention` workaround props.
+- [Images](https://native-html.github.io/render/docs/content/images): Scaling, `object-fit`, automatic sizing via `contentWidth`/`computeEmbeddedMaxWidth`, error/loading states, `useInternalRenderer`, the `IMGElement*` building blocks, `provideEmbeddedHeaders`.
+- [Lists](https://native-html.github.io/render/docs/content/lists): Supported `list-style-type` values, `customListStyleSpecs`, `@jsamr/counter-style` presets, experimental RTL.
+- [Anchors](https://native-html.github.io/render/docs/content/anchors): Default `Linking` behavior, mixed content model, relative-URL resolution via `<base>`, `renderersProps.a.onPress`, `useNormalizedUrl`.
+
+## Guides
+
+- [Styling](https://native-html.github.io/render/docs/guides/styling): `baseStyle`, `tagsStyles`, `classesStyles`, `idsStyles` (mixed-style declarations, not `StyleSheet`), inline-style processing knobs (`enableCSSInlineProcessing` / `allowedStyles` / `ignoredStyles`).
+- [Custom Rendering](https://native-html.github.io/render/docs/guides/custom-renderers): Model-based (`customHTMLElementModels`, `HTMLElementModel.fromCustomModel` / `extend`) and component-based (`renderers` prop, `TChildrenRenderer` for children tampering, `useInternalRenderer`, `useRendererProps`).
+- [DOM Tampering](https://native-html.github.io/render/docs/guides/dom-tampering): `domVisitors` (`onDocument` / `onElement` / `onText`) with `domutils`/`domhandler` examples; `ignoredDomTags` / `ignoreDomNode`; `selectDomRoot`; the explicit-composite prerendering pattern with `useAmbientTRenderEngine`.
+
+## Migration & Releases
+
+- [Migration Guide](https://native-html.github.io/render/docs/migration-guide): v5 → v6 ("Foundry") migration — props to monitor, renamed/moved/discontinued props, and a v5-vs-v6 arguments-equivalence table for custom renderers.
+- [Foundry Release Announcement](https://native-html.github.io/render/blog/2021/06/07/foundry-announcement): v6.0 release highlights — TRE, custom renderers, font selection, list renderer, image renderer building blocks, composite architecture, accessibility groundwork.
+- [What's New in v6.2?](https://native-html.github.io/render/blog/2021/10/23/6-2-updates): Richer model-based rendering via `getMixedUAStyles` / `reactNativeProps` / `getReactNativeProps`; accessibility for `aria-label`, `role`, `<a>`, `<img>`, `<h1-6>`; `user-select` support.
+
+## Tutorial
+
+- [Blog App Part I](https://native-html.github.io/render/blog/2021/06/27/create-blog-app-rnrh-I): Sets up an Expo + React Navigation + React Native Paper project and an RSS-driven home list.
+- [Blog App Part II](https://native-html.github.io/render/blog/2021/06/28/create-blog-app-rnrh-II): Implements an `ArticleScreen` using the explicit composite architecture plus `useAmbientTRenderEngine` to parse the article DOM ahead of render, with a drawer-based table of contents.
+- [Blog App Part III](https://native-html.github.io/render/blog/2021/06/29/create-blog-app-rnrh-III): Adds tap-to-scroll via a `Scroller` class shared through React context, custom renderers for `<h1>`/`<h2>`/`<header>`, and styling refinements.
+
+## API Reference
+
+- [API Index](https://native-html.github.io/render/api): Full list of all exported symbols — components, hooks, types, constants.
+- [RenderHTML Props](https://native-html.github.io/render/api/renderhtmlprops): All props accepted by the `RenderHTML` component — the primary integration point.
+- Key components: [RenderHTML](https://native-html.github.io/render/api/renderhtml), [RenderHTMLSource](https://native-html.github.io/render/api/renderhtmlsource), [RenderHTMLConfigProvider](https://native-html.github.io/render/api/renderhtmlconfigprovider), [TRenderEngineProvider](https://native-html.github.io/render/api/trenderengineprovider), [TDefaultRenderer](https://native-html.github.io/render/api/tdefaultrenderer), [TChildrenRenderer](https://native-html.github.io/render/api/tchildrenrenderer), [IMGElement](https://native-html.github.io/render/api/imgelement).
+- Key hooks: [useInternalRenderer](https://native-html.github.io/render/api/useinternalrenderer), [useRendererProps](https://native-html.github.io/render/api/userendererprops), [useAmbientTRenderEngine](https://native-html.github.io/render/api/useambienttrenderengine), [useNormalizedUrl](https://native-html.github.io/render/api/usenormalizedurl), [useContentWidth](https://native-html.github.io/render/api/usecontentwidth).
+- Key types: [TNode](https://native-html.github.io/render/api/tnode), [MixedStyleDeclaration](https://native-html.github.io/render/api/mixedstyledeclaration), [HTMLElementModel](https://native-html.github.io/render/api/htmlelementmodel), [CustomRenderer](https://native-html.github.io/render/api/customrenderer), [Markers](https://native-html.github.io/render/api/markers).
+
+## Contributing
+
+- [GitHub Repository](https://github.com/native-html/render): Source code, issues, and pull requests.
+- [Help & Support](https://github.com/native-html/render/blob/main/HELP.adoc): Decision tree for getting help (FAQ → StackOverflow → issues → Discord).
+- [Contributing Guide](https://github.com/native-html/render/blob/main/CONTRIBUTING.adoc): Opening tickets, bug-report reproducibility tiers, RFCs, draft-PR workflow, Yarn Berry workspaces, testing commands, and the release process.
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/native-html-render): Community Q&A tagged `native-html-render`.
+- [Discord](https://discord.gg/dbEMMJM): Real-time community chat.
+- [npm](https://www.npmjs.com/package/@native-html/render): Published package.