diff --git a/.playwright/screenshots/enriched-text-all-headings.png b/.playwright/screenshots/enriched-text-all-headings.png
new file mode 100644
index 00000000..39bce62c
Binary files /dev/null and b/.playwright/screenshots/enriched-text-all-headings.png differ
diff --git a/.playwright/screenshots/enriched-text-all-list-types.png b/.playwright/screenshots/enriched-text-all-list-types.png
new file mode 100644
index 00000000..88c3a6da
Binary files /dev/null and b/.playwright/screenshots/enriched-text-all-list-types.png differ
diff --git a/.playwright/screenshots/enriched-text-blockquote-code-codeblock.png b/.playwright/screenshots/enriched-text-blockquote-code-codeblock.png
new file mode 100644
index 00000000..cd7fc5f5
Binary files /dev/null and b/.playwright/screenshots/enriched-text-blockquote-code-codeblock.png differ
diff --git a/.playwright/screenshots/enriched-text-checkbox-list-checked.png b/.playwright/screenshots/enriched-text-checkbox-list-checked.png
new file mode 100644
index 00000000..bc9b6ca0
Binary files /dev/null and b/.playwright/screenshots/enriched-text-checkbox-list-checked.png differ
diff --git a/.playwright/screenshots/enriched-text-checkbox-list-empty-items.png b/.playwright/screenshots/enriched-text-checkbox-list-empty-items.png
new file mode 100644
index 00000000..043e5a24
Binary files /dev/null and b/.playwright/screenshots/enriched-text-checkbox-list-empty-items.png differ
diff --git a/.playwright/screenshots/enriched-text-checkbox-list-unchecked.png b/.playwright/screenshots/enriched-text-checkbox-list-unchecked.png
new file mode 100644
index 00000000..7ad09936
Binary files /dev/null and b/.playwright/screenshots/enriched-text-checkbox-list-unchecked.png differ
diff --git a/.playwright/screenshots/enriched-text-images-inline.png b/.playwright/screenshots/enriched-text-images-inline.png
new file mode 100644
index 00000000..50f458c4
Binary files /dev/null and b/.playwright/screenshots/enriched-text-images-inline.png differ
diff --git a/.playwright/screenshots/enriched-text-images-inside-list.png b/.playwright/screenshots/enriched-text-images-inside-list.png
new file mode 100644
index 00000000..40eb481e
Binary files /dev/null and b/.playwright/screenshots/enriched-text-images-inside-list.png differ
diff --git a/.playwright/screenshots/enriched-text-images-placeholder-inline.png b/.playwright/screenshots/enriched-text-images-placeholder-inline.png
new file mode 100644
index 00000000..e54cc989
Binary files /dev/null and b/.playwright/screenshots/enriched-text-images-placeholder-inline.png differ
diff --git a/.playwright/screenshots/enriched-text-images-placeholder-list.png b/.playwright/screenshots/enriched-text-images-placeholder-list.png
new file mode 100644
index 00000000..aa9bebc3
Binary files /dev/null and b/.playwright/screenshots/enriched-text-images-placeholder-list.png differ
diff --git a/.playwright/screenshots/enriched-text-line-wrapping.png b/.playwright/screenshots/enriched-text-line-wrapping.png
new file mode 100644
index 00000000..db75829e
Binary files /dev/null and b/.playwright/screenshots/enriched-text-line-wrapping.png differ
diff --git a/.playwright/screenshots/enriched-text-mentions.png b/.playwright/screenshots/enriched-text-mentions.png
new file mode 100644
index 00000000..8f467d81
Binary files /dev/null and b/.playwright/screenshots/enriched-text-mentions.png differ
diff --git a/.playwright/screenshots/enriched-text-newlines-spaces.png b/.playwright/screenshots/enriched-text-newlines-spaces.png
new file mode 100644
index 00000000..9fb1af06
Binary files /dev/null and b/.playwright/screenshots/enriched-text-newlines-spaces.png differ
diff --git a/.playwright/screenshots/enriched-text-ordered-list-empty-items.png b/.playwright/screenshots/enriched-text-ordered-list-empty-items.png
new file mode 100644
index 00000000..0bd291b8
Binary files /dev/null and b/.playwright/screenshots/enriched-text-ordered-list-empty-items.png differ
diff --git a/.playwright/screenshots/enriched-text-ordered-list.png b/.playwright/screenshots/enriched-text-ordered-list.png
new file mode 100644
index 00000000..aa9932a1
Binary files /dev/null and b/.playwright/screenshots/enriched-text-ordered-list.png differ
diff --git a/.playwright/screenshots/enriched-text-rich-text.png b/.playwright/screenshots/enriched-text-rich-text.png
new file mode 100644
index 00000000..44174ec4
Binary files /dev/null and b/.playwright/screenshots/enriched-text-rich-text.png differ
diff --git a/.playwright/screenshots/enriched-text-unordered-list-empty-items.png b/.playwright/screenshots/enriched-text-unordered-list-empty-items.png
new file mode 100644
index 00000000..e1b9a06d
Binary files /dev/null and b/.playwright/screenshots/enriched-text-unordered-list-empty-items.png differ
diff --git a/.playwright/screenshots/enriched-text-unordered-list.png b/.playwright/screenshots/enriched-text-unordered-list.png
new file mode 100644
index 00000000..5f98bdc9
Binary files /dev/null and b/.playwright/screenshots/enriched-text-unordered-list.png differ
diff --git a/.playwright/tests/enrichedTextVisual.spec.ts b/.playwright/tests/enrichedTextVisual.spec.ts
new file mode 100644
index 00000000..63723852
--- /dev/null
+++ b/.playwright/tests/enrichedTextVisual.spec.ts
@@ -0,0 +1,235 @@
+import { test, expect, type Locator, type Page } from '@playwright/test';
+
+test.setTimeout(90_000);
+
+const sel = {
+  root: '[data-testid="test-enriched-text-root"]',
+  htmlInput: '[data-testid="test-enriched-text-html-input"]',
+  setValueButton: '[data-testid="test-enriched-text-set-value-button"]',
+  valueOutput: '[data-testid="test-enriched-text-value-output"]',
+  display: '[data-testid="test-enriched-text-display"]',
+  displayInner: '[data-testid="test-enriched-text-display"] .et-view',
+} as const;
+
+function displayLocator(page: Page): Locator {
+  return page.locator(sel.display);
+}
+
+async function gotoTestEnrichedText(page: Page): Promise<void> {
+  await page.goto('/test-enriched-text');
+  await page.waitForSelector(sel.displayInner);
+}
+
+async function setEnrichedTextValue(page: Page, html: string): Promise<void> {
+  await page.fill(sel.htmlInput, html);
+  await page.click(sel.setValueButton);
+
+  await expect
+    .poll(async () => (await page.locator(sel.valueOutput).textContent()) ?? '')
+    .toBe(html);
+}
+
+test.describe('EnrichedText display visual regression', () => {
+  const cases: { name: string; snapshot: string; html: string }[] = [
+    {
+      name: 'rich text: heading, bold, italic and link',
+      snapshot: 'enriched-text-rich-text.png',
+      html: [
+        '<html>',
+        '<h3>Heading</h3>',
+        '<p>Some <b>bold</b> and <i>italic</i> text.</p>',
+        '<p><b>S</i>om</i>e</b> <b>mix</b><i>ed</i> <s>t<u>ex</u>t</s>.</p>',
+        '<p>A <a href="https://example.com">link</a> here.</p>',
+        '<p>A bold <a href="https://example.com">l<b>in<b/>k</a> here.</p>',
+        '</html>',
+      ].join(''),
+    },
+    {
+      name: 'unordered list',
+      snapshot: 'enriched-text-unordered-list.png',
+      html: '<html><ul><li>Alpha</li><li>Beta</li><li>Gamma</li></ul></html>',
+    },
+    {
+      name: 'unordered list with empty items',
+      snapshot: 'enriched-text-unordered-list-empty-items.png',
+      html: '<html><h4>Empty lists</h4><ul><li></li><li>Alpha</li><li></li><li>Gamma</li><li></li></ul><p>bottom</p></html>',
+    },
+    {
+      name: 'ordered list',
+      snapshot: 'enriched-text-ordered-list.png',
+      html: '<html><ol><li>One</li><li>Two</li><li>Three</li></ol></html>',
+    },
+    {
+      name: 'ordered list with empty items',
+      snapshot: 'enriched-text-ordered-list-empty-items.png',
+      html: '<html><h4>Empty lists</h4><ol><li></li><li>One</li><li></li><li>Three</li><li></li></ol><p>bottom</p></html>',
+    },
+    {
+      name: 'checkbox list all unchecked',
+      snapshot: 'enriched-text-checkbox-list-unchecked.png',
+      html: '<html><ul data-type="checkbox"><li>one</li><li>two</li></ul></html>',
+    },
+    {
+      name: 'checkbox list with checked item',
+      snapshot: 'enriched-text-checkbox-list-checked.png',
+      html: '<html><ul data-type="checkbox"><li checked>one</li><li>two</li></ul></html>',
+    },
+    {
+      name: 'checkbox list with empty items',
+      snapshot: 'enriched-text-checkbox-list-empty-items.png',
+      html: '<html><h4>Empty lists</h4><ul data-type="checkbox"><li></li><li checked>one</li><li></li><li>three</li><li checked></li></ul><p>bottom</p></html>',
+    },
+  ];
+
+  for (const c of cases) {
+    test(c.name, async ({ page }) => {
+      await gotoTestEnrichedText(page);
+      await setEnrichedTextValue(page, c.html);
+
+      await expect(displayLocator(page)).toHaveScreenshot(c.snapshot);
+    });
+  }
+});
+
+test.describe('visual: complex lists and layouts', () => {
+  const cases = [
+    {
+      name: 'all 3 types of the list at once',
+      snapshot: 'enriched-text-all-list-types.png',
+      html: [
+        '<html>',
+        '<ul><li>Bullet item</li></ul>',
+        '<ol><li>Numbered item</li></ol>',
+        '<ul data-type="checkbox"><li checked>Checked item</li><li>Unchecked item</li></ul>',
+        '</html>',
+      ].join(''),
+    },
+  ];
+
+  for (const c of cases) {
+    test(c.name, async ({ page }) => {
+      await gotoTestEnrichedText(page);
+      await setEnrichedTextValue(page, c.html);
+      await expect(displayLocator(page)).toHaveScreenshot(c.snapshot);
+    });
+  }
+});
+
+test.describe('visual: typography, blocks, and wrapping', () => {
+  const cases = [
+    {
+      name: 'all 6 headings',
+      snapshot: 'enriched-text-all-headings.png',
+      html: '<html><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6></html>',
+    },
+    {
+      name: 'blockquote, code, codeblock',
+      snapshot: 'enriched-text-blockquote-code-codeblock.png',
+      html: [
+        '<html>',
+        '<blockquote><p>This is a blockquote. Blockquote for quoting in a block.</p></blockquote>',
+        '<p>Here is some <code>inline code</code> mixed in text.</p>',
+        '<codeblock><p>function test() {</p><p>  return true;</p><p>}</p></codeblock>',
+        '</html>',
+      ].join(''),
+    },
+    {
+      name: 'multiple newlines and multiple spaces',
+      snapshot: 'enriched-text-newlines-spaces.png',
+      html: [
+        '<html>',
+        '<p>Word        spaced        out        a        lot.</p>',
+        '<p><br></p>',
+        '<p><br></p>',
+        '<p>Text after empty newlines.</p>',
+        '</html>',
+      ].join(''),
+    },
+    {
+      name: 'line wrapping',
+      snapshot: 'enriched-text-line-wrapping.png',
+      html: [
+        '<html>',
+        '<p>This is a standard paragraph with enough text that it should naturally wrap to the next line when it reaches the edge of the container.</p>',
+        '<p>SuperLongWordWithoutAnySpacesThatShouldForceTheWordBreakOrOverflowWrapRuleToKickInAndPreventTheLayoutFromBreakingHorizontally</p>',
+        '</html>',
+      ].join(''),
+    },
+  ];
+
+  for (const c of cases) {
+    test(c.name, async ({ page }) => {
+      await gotoTestEnrichedText(page);
+      await setEnrichedTextValue(page, c.html);
+      await expect(displayLocator(page)).toHaveScreenshot(c.snapshot);
+    });
+  }
+});
+
+test.describe('visual: mentions', () => {
+  test('display mentions', async ({ page }) => {
+    await gotoTestEnrichedText(page);
+    await setEnrichedTextValue(
+      page,
+      '<html><p>Hello <mention indicator="@" text="@John Doe">@Jo<s>hn D</s>oe</mention>!</p></html>'
+    );
+    await expect(displayLocator(page)).toHaveScreenshot(
+      'enriched-text-mentions.png'
+    );
+  });
+});
+
+test.describe('visual: images', () => {
+  test.beforeEach(async ({ page }) => {
+    const routePattern = '**/pw-e2e-ok.png';
+    const pngBody = Buffer.from(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+      'base64'
+    );
+    await page.route(routePattern, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'image/png',
+        body: pngBody,
+      });
+    });
+
+    // Abort broken image to force placeholder
+    const brokenPattern = '**/pw-e2e-broken.png';
+    await page.route(brokenPattern, (route) => route.abort());
+  });
+
+  const cases = [
+    {
+      name: 'inline images next to some text',
+      snapshot: 'enriched-text-images-inline.png',
+      html: '<html><p>Start text <img src="/pw-e2e-ok.png" width="40" height="40" /> end text.</p></html>',
+    },
+    {
+      name: 'inline images inside list',
+      snapshot: 'enriched-text-images-inside-list.png',
+      html: '<html><ul><li>Bullet item <img src="/pw-e2e-ok.png" width="20" height="20" /> with image.</li></ul></html>',
+    },
+    {
+      name: 'image placeholder display next to some text',
+      snapshot: 'enriched-text-images-placeholder-inline.png',
+      html: '<html><p>Look at this broken <img src="/pw-e2e-broken.png" width="60" height="60" /> picture.</p></html>',
+    },
+    {
+      name: 'image placeholder inside lists',
+      snapshot: 'enriched-text-images-placeholder-list.png',
+      html: '<html><ol><li>List with a broken image <img src="" width="20" height="20" /> inside.</li></ol></html>',
+    },
+  ];
+
+  for (const c of cases) {
+    test(c.name, async ({ page }) => {
+      await gotoTestEnrichedText(page);
+      await setEnrichedTextValue(page, c.html);
+
+      await page.waitForTimeout(100);
+
+      await expect(displayLocator(page)).toHaveScreenshot(c.snapshot);
+    });
+  }
+});
diff --git a/apps/example-web/src/App.css b/apps/example-web/src/App.css
index ab8b5de9..cce452ab 100644
--- a/apps/example-web/src/App.css
+++ b/apps/example-web/src/App.css
@@ -29,6 +29,10 @@ body {
   align-items: center;
 }
 
+.enriched-text-container {
+  width: 100%;
+}
+
 .app-title {
   font-size: 24px;
   font-weight: bold;
diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx
index 8ad87c25..7cf449f5 100644
--- a/apps/example-web/src/App.tsx
+++ b/apps/example-web/src/App.tsx
@@ -14,9 +14,10 @@ import {
   type OnSubmitEditing,
   type OnChangeMentionEvent,
   type OnMentionDetected,
+  EnrichedText,
 } from 'react-native-enriched-html';
 import { WEB_DEFAULT_HTML_STYLE } from './defaultHtmlStyle';
-import type { NativeSyntheticEvent } from 'react-native';
+import type { NativeSyntheticEvent, TextStyle } from 'react-native';
 import { EditorActions } from './components/EditorActions';
 import { SetValueModal } from './components/SetValueModal';
 import { ImageModal } from './components/ImageModal';
@@ -53,6 +54,8 @@ function App() {
   const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
 
+  const [enrichedTextValue, setEnrichedTextValue] = useState('');
+
   const isLinkActive = !!editorState?.link.isActive;
   const hasLinkUrl = currentLink.url.length > 0;
   const hasLinkSpan = currentLink.start !== 0 || currentLink.end !== 0;
@@ -226,6 +229,18 @@ function App() {
     }
   };
 
+  const handleSetEnrichedTextValue = () => {
+    ref.current
+      ?.getHTML()
+      .then((html) => {
+        setEnrichedTextValue(html);
+      })
+      .catch((error: unknown) => {
+        setEnrichedTextValue('');
+        console.error('Failed to get HTML:', error);
+      });
+  };
+
   return (
     <div className="container">
       <h1 className="app-title">Enriched Text Input</h1>
@@ -303,8 +318,26 @@ function App() {
         }}
       />
 
+      <button
+        className="btn btn-full"
+        data-testid="set-enriched-text-value"
+        onClick={handleSetEnrichedTextValue}
+      >
+        Set Enriched Text
+      </button>
+
       {showHtmlOutput && <HtmlOutputPanel html={currentHtml} />}
 
+      <div className="container enriched-text-container">
+        <h1 className="app-title">Enriched Text</h1>
+        <EnrichedText
+          style={enrichedTextStyle}
+          htmlStyle={WEB_DEFAULT_HTML_STYLE}
+        >
+          {enrichedTextValue}
+        </EnrichedText>
+      </div>
+
       {isSetValueModalOpen && (
         <SetValueModal
           onSetValue={(value) => {
@@ -345,4 +378,14 @@ const enrichedInputStyle: EnrichedInputStyle = {
   fontSize: 18,
 };
 
+const enrichedTextStyle: TextStyle = {
+  backgroundColor: 'gainsboro',
+  width: '100%',
+  marginVertical: 12,
+  paddingVertical: 12,
+  paddingHorizontal: 14,
+  borderRadius: 8,
+  fontSize: 18,
+};
+
 export default App;
diff --git a/apps/example-web/src/RouteSelector.tsx b/apps/example-web/src/RouteSelector.tsx
index d04f3d2c..c31df8dd 100644
--- a/apps/example-web/src/RouteSelector.tsx
+++ b/apps/example-web/src/RouteSelector.tsx
@@ -4,6 +4,7 @@ import { TestLinks } from './testScreens/TestLinks';
 import { TestSetSelection } from './testScreens/TestSetSelection';
 import { VisualRegression } from './testScreens/VisualRegression';
 import { TestSubmitProps } from './testScreens/TestSubmitProps';
+import { TestEnrichedText } from './testScreens/TestEnrichedText';
 import { useEffect, useState } from 'react';
 
 export default function RouteSelector() {
@@ -40,5 +41,9 @@ export default function RouteSelector() {
     return <TestMentions />;
   }
 
+  if (path === '/test-enriched-text') {
+    return <TestEnrichedText />;
+  }
+
   return <App />;
 }
diff --git a/apps/example-web/src/testScreens/TestEnrichedText.tsx b/apps/example-web/src/testScreens/TestEnrichedText.tsx
new file mode 100644
index 00000000..912031dc
--- /dev/null
+++ b/apps/example-web/src/testScreens/TestEnrichedText.tsx
@@ -0,0 +1,60 @@
+import { useState, type ChangeEvent } from 'react';
+import { EnrichedText } from 'react-native-enriched-html';
+import type { TextStyle } from 'react-native';
+import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
+
+const INITIAL_VALUE = '<html><p></p></html>';
+
+export function TestEnrichedText() {
+  const [htmlInput, setHtmlInput] = useState(INITIAL_VALUE);
+  const [value, setValue] = useState(INITIAL_VALUE);
+
+  return (
+    <div data-testid="test-enriched-text-root">
+      <div
+        data-testid="test-enriched-text-display"
+        style={enrichedTextContainerStyle}
+      >
+        <EnrichedText
+          style={enrichedTextStyle}
+          htmlStyle={WEB_DEFAULT_HTML_STYLE}
+        >
+          {value}
+        </EnrichedText>
+      </div>
+
+      <textarea
+        data-testid="test-enriched-text-html-input"
+        value={htmlInput}
+        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+          setHtmlInput(e.target.value);
+        }}
+        rows={4}
+      />
+      <button
+        type="button"
+        data-testid="test-enriched-text-set-value-button"
+        onClick={() => {
+          setValue(htmlInput);
+        }}
+      >
+        Set value
+      </button>
+
+      <pre data-testid="test-enriched-text-value-output">{value}</pre>
+    </div>
+  );
+}
+
+const enrichedTextStyle: TextStyle = {
+  width: '100%',
+  maxWidth: 360,
+  paddingVertical: 8,
+  paddingHorizontal: 8,
+  backgroundColor: 'gainsboro',
+  fontSize: 16,
+};
+
+const enrichedTextContainerStyle = {
+  width: 'fit-content',
+};
diff --git a/docs/TEXT_API_REFERENCE.md b/docs/TEXT_API_REFERENCE.md
index 36c49d6a..145ddd23 100644
--- a/docs/TEXT_API_REFERENCE.md
+++ b/docs/TEXT_API_REFERENCE.md
@@ -1,6 +1,6 @@
 # EnrichedText API Reference
 
-> **Web is not yet supported.** `EnrichedText` is only available on iOS and Android.
+> **Web support is experimental.** Behavior may change without a major version bump.
 
 ## Props
 
@@ -16,25 +16,25 @@ If `true`, the text respects the system's accessibility font scaling settings.
 
 The HTML string to render. Accepts the HTML format produced by `EnrichedTextInput`.
 
-| Type     | Default Value | Platform     |
-| -------- | ------------- | ------------ |
-| `string` | -             | iOS, Android |
+| Type     | Default Value | Platform          |
+| -------- | ------------- | ----------------- |
+| `string` | -             | iOS, Android, Web |
 
 ### `style`
 
 Standard React Native `TextStyle` applied to the text.
 
-| Type        | Default Value | Platform     |
-| ----------- | ------------- | ------------ |
-| `TextStyle` | -             | iOS, Android |
+| Type        | Default Value | Platform          |
+| ----------- | ------------- | ----------------- |
+| `TextStyle` | -             | iOS, Android, Web |
 
 ### `htmlStyle`
 
 A prop for customizing styles of HTML elements, including press colors for interactive elements.
 
-| Type                                                   | Default Value | Platform     |
-| ------------------------------------------------------ | ------------- | ------------ |
-| [`EnrichedTextHtmlStyle`](#enrichedtexthtmlstyle-type) | -             | iOS, Android |
+| Type                                                   | Default Value | Platform          |
+| ------------------------------------------------------ | ------------- | ----------------- |
+| [`EnrichedTextHtmlStyle`](#enrichedtexthtmlstyle-type) | -             | iOS, Android, Web |
 
 ### `useHtmlNormalizer`
 
@@ -80,9 +80,9 @@ If `true`, the text can be selected by the user (e.g. for copy/paste).
 
 The color of the text selection highlight.
 
-| Type                                           | Default Value  | Platform     |
-| ---------------------------------------------- | -------------- | ------------ |
-| [`color`](https://reactnative.dev/docs/colors) | system default | iOS, Android |
+| Type                                           | Default Value  | Platform          |
+| ---------------------------------------------- | -------------- | ----------------- |
+| [`color`](https://reactnative.dev/docs/colors) | system default | iOS, Android, Web |
 
 ### `onLinkPress`
 
diff --git a/package.json b/package.json
index 0fbf32ef..a14945ed 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,8 @@
     "@tiptap/extension-underline": "3.20.4",
     "@tiptap/extensions": "3.20.4",
     "@tiptap/pm": "3.20.4",
-    "@tiptap/react": "3.20.4"
+    "@tiptap/react": "3.20.4",
+    "dompurify": "^3.4.11"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.6.0",
diff --git a/src/index.tsx b/src/index.tsx
index 47256672..59d9054f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 export { EnrichedTextInput } from './web/EnrichedTextInput';
+export { EnrichedText } from './web/EnrichedText';
 export type {
   EnrichedInputStyle,
   EnrichedTextInputProps,
diff --git a/src/web/EnrichedText.css b/src/web/EnrichedText.css
new file mode 100644
index 00000000..a852f554
--- /dev/null
+++ b/src/web/EnrichedText.css
@@ -0,0 +1,329 @@
+.tiptap.ProseMirror p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tiptap.ProseMirror-focused {
+  outline: none;
+}
+
+.et-view {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.et-view p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.eti-editor p.is-editor-empty:first-child::before {
+  color: var(--et-placeholder-text-color, #adb5bd);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.eti-editor ::selection,
+.et-view ::selection {
+  background-color: var(--et-selection-color, Highlight);
+}
+
+.eti-editor code,
+.et-view code {
+  font-family: monospace;
+  background-color: var(--et-code-bg-color);
+  color: var(--et-code-color);
+  display: inline;
+  padding: 0;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+.eti-editor h1,
+.et-view h1 {
+  font-size: var(--et-h1-font-size);
+  font-weight: var(--et-h1-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+.eti-editor h2,
+.et-view h2 {
+  font-size: var(--et-h2-font-size);
+  font-weight: var(--et-h2-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+.eti-editor h3,
+.et-view h3 {
+  font-size: var(--et-h3-font-size);
+  font-weight: var(--et-h3-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+.eti-editor h4,
+.et-view h4 {
+  font-size: var(--et-h4-font-size);
+  font-weight: var(--et-h4-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+.eti-editor h5,
+.et-view h5 {
+  font-size: var(--et-h5-font-size);
+  font-weight: var(--et-h5-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+.eti-editor h6,
+.et-view h6 {
+  font-size: var(--et-h6-font-size);
+  font-weight: var(--et-h6-font-weight);
+  margin: 0;
+  line-height: normal;
+}
+
+.eti-editor blockquote,
+.et-view blockquote {
+  border-left: var(--et-blockquote-border-width) solid
+    var(--et-blockquote-border-color);
+  padding-left: var(--et-blockquote-gap-width);
+  margin: 0;
+  color: var(--et-blockquote-color);
+}
+
+.eti-editor blockquote p,
+.et-view blockquote p {
+  margin: 0;
+}
+
+.eti-editor codeblock,
+.et-view codeblock {
+  display: block;
+  font-family: monospace;
+  background-color: var(--et-codeblock-bg-color);
+  color: var(--et-codeblock-color);
+  border-radius: var(--et-codeblock-border-radius);
+}
+
+.eti-editor codeblock p,
+.et-view codeblock p {
+  margin: 0;
+}
+
+.eti-editor a,
+.et-view a {
+  color: var(--et-link-color);
+  text-decoration-line: var(--et-link-text-decoration-line);
+}
+
+.eti-editor ul:not([data-type]),
+.et-view ul:not([data-type]) {
+  margin: 0;
+  list-style: none;
+  padding-left: calc(
+    var(--et-ul-margin-left, 16px) + var(--et-ul-gap-width, 16px)
+  );
+}
+
+.eti-editor ul:not([data-type]) > li,
+.et-view ul:not([data-type]) > li {
+  position: relative;
+  min-height: max(1lh, var(--et-ul-bullet-size));
+}
+
+.eti-editor ul:not([data-type]) > li::before,
+.et-view ul:not([data-type]) > li::before {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--et-ul-gap-width, 16px) - var(--et-ul-bullet-size, 8px));
+  bottom: 0.4em;
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
+  }
+
+  transform: translateY(50%);
+  width: var(--et-ul-bullet-size, 8px);
+  height: var(--et-ul-bullet-size, 8px);
+  border-radius: 50%;
+  background-color: var(--et-ul-bullet-color, currentColor);
+  pointer-events: none;
+}
+
+.eti-editor ol,
+.et-view ol {
+  margin: 0;
+  list-style: none;
+  padding-left: calc(
+    var(--et-ol-margin-left, 16px) + var(--et-ol-gap-width, 16px)
+  );
+  counter-reset: eti-ol;
+}
+
+.eti-editor ol > li,
+.et-view ol > li {
+  position: relative;
+  counter-increment: eti-ol;
+  min-height: 1lh;
+}
+
+.eti-editor ol > li::before,
+.et-view ol > li::before {
+  content: counter(eti-ol) '.';
+  position: absolute;
+  left: calc(-1 * var(--et-ol-gap-width, 16px));
+  bottom: 0;
+  transform: translateX(-50%);
+  color: var(--et-ol-marker-color, currentColor);
+  font-weight: var(--et-ol-marker-font-weight, inherit);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.eti-editor li,
+.et-view li {
+  margin: 0;
+}
+
+.eti-editor li p,
+.et-view li p {
+  margin: 0;
+}
+
+.eti-editor .eti-inline-image {
+  vertical-align: text-bottom;
+  line-height: 0;
+  display: inline-block;
+}
+
+.eti-editor .eti-inline-image-img {
+  object-fit: contain;
+}
+
+.eti-editor .eti-inline-image--placeholder {
+  display: inline-block;
+  overflow: hidden;
+  color: inherit;
+}
+
+.eti-editor .eti-inline-image-broken-glyph {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.eti-editor
+  .react-renderer.node-image.ProseMirror-selectednode
+  .eti-inline-image {
+  box-shadow: inset 0 0 0 999px Highlight;
+}
+
+.eti-editor ul[data-type='checkboxList'] {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  padding-left: calc(
+    var(--et-checkbox-margin-left, 16px) + var(--et-checkbox-gap-width, 16px)
+  );
+}
+
+.eti-editor ul[data-type='checkboxList'] > li {
+  position: relative;
+  list-style: none;
+}
+
+.eti-editor ul[data-type='checkboxList'] > li > label {
+  position: absolute;
+  left: calc(
+    -1 * var(--et-checkbox-gap-width, 16px) - var(--et-checkbox-box-size, 24px)
+  );
+  transform: translateY(50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  bottom: 0.4em;
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
+  }
+}
+
+.eti-editor ul[data-type='checkboxList'] > li > label input[type='checkbox'] {
+  width: var(--et-checkbox-box-size, 24px);
+  height: var(--et-checkbox-box-size, 24px);
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: var(--et-checkbox-box-color, #0000ff);
+}
+
+.et-view ul[data-type="checkbox"] {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  padding-left: calc(
+    var(--et-checkbox-margin-left, 16px) + var(--et-checkbox-gap-width, 16px)
+  );
+}
+
+.et-view ul[data-type="checkbox"] > li {
+  position: relative;
+  list-style: none;
+  pointer-events: none;
+  min-height: max(1lh, var(--et-checkbox-box-size, 24px));
+}
+
+.et-view ul[data-type="checkbox"] > li > p {
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.et-view ul[data-type="checkbox"] > li > input[type='checkbox'] {
+  position: absolute;
+  left: calc(
+    -1 * var(--et-checkbox-gap-width, 16px) - var(--et-checkbox-box-size, 24px)
+  );
+  width: var(--et-checkbox-box-size, 24px);
+  height: var(--et-checkbox-box-size, 24px);
+  margin: 0 var(--et-checkbox-gap-width, 16px) 0 0;
+  flex-shrink: 0;
+  accent-color: var(--et-checkbox-box-color, #0000ff);
+}
+
+.et-view ul[data-type="checkbox"] > li > label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.et-view img {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: text-bottom;
+}
+
+.et-view img.error {
+  /* hide the browser's broken-image alt text;
+    the ::before overlay covers the native broken-image icon. */
+  font-size: 0;
+  visibility: hidden;
+}
+
+.et-view img.error::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  visibility: visible;
+  background-color: currentColor;
+  -webkit-mask: var(--et-broken-image-glyph) no-repeat center / contain;
+  mask: var(--et-broken-image-glyph) no-repeat center / contain;
+}
diff --git a/src/web/EnrichedText.tsx b/src/web/EnrichedText.tsx
new file mode 100644
index 00000000..21b65928
--- /dev/null
+++ b/src/web/EnrichedText.tsx
@@ -0,0 +1,72 @@
+import { memo, useMemo, useRef, type CSSProperties } from 'react';
+import type { EnrichedTextProps } from '../types';
+import './EnrichedText.css';
+import { enrichedTextStyleToCSSProperties } from './styleConversion/enrichedTextStyleToCSSProperties';
+import { htmlStyleToCSSVariables } from './styleConversion/htmlStyleToCSSVariables';
+import { ENRICHED_TEXT_CLASSNAME } from './constants/classNames';
+import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
+import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
+import { sanitizeHtml } from './sanitization/htmlSanitizer';
+import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
+import { INLINE_IMAGE_CSS_VARIABLES } from './styleConversion/inlineImageCSSVariables';
+import { useImageErrorFallback } from './useImageErrorFallback';
+
+export const EnrichedText = memo(
+  ({ children, htmlStyle, style, selectionColor }: EnrichedTextProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const sanitizedHtml = useMemo(() => sanitizeHtml(children), [children]);
+
+    const finalHtml = useMemo(
+      () => prepareHtmlForWeb(sanitizedHtml),
+      [sanitizedHtml]
+    );
+
+    const textStyle: CSSProperties = useMemo(
+      () => enrichedTextStyleToCSSProperties(style ?? {}),
+      [style]
+    );
+
+    const cssVars = useMemo(
+      () => ({
+        ...htmlStyleToCSSVariables(htmlStyle),
+        ...INLINE_IMAGE_CSS_VARIABLES,
+      }),
+      [htmlStyle]
+    );
+
+    const themingStyle = useMemo(
+      () => enrichedInputThemingToCSSProperties({ selectionColor }),
+      [selectionColor]
+    );
+
+    const mentionRulesCSS = useMemo(
+      () => buildMentionRulesCSS('text', htmlStyle),
+      [htmlStyle]
+    );
+
+    const finalStyle = useMemo(
+      () =>
+        ({
+          ...textStyle,
+          ...themingStyle,
+          ...cssVars,
+        }) as CSSProperties,
+      [textStyle, themingStyle, cssVars]
+    );
+
+    useImageErrorFallback(containerRef, finalHtml);
+
+    return (
+      <>
+        {mentionRulesCSS ? <style>{mentionRulesCSS}</style> : null}
+        <div
+          ref={containerRef}
+          style={finalStyle}
+          className={ENRICHED_TEXT_CLASSNAME}
+          dangerouslySetInnerHTML={{ __html: finalHtml }}
+        />
+      </>
+    );
+  }
+);
diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
deleted file mode 100644
index c4a41ef5..00000000
--- a/src/web/EnrichedTextInput.css
+++ /dev/null
@@ -1,201 +0,0 @@
-.tiptap.ProseMirror p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.tiptap.ProseMirror-focused {
-  outline: none;
-}
-
-.eti-editor p.is-editor-empty:first-child::before {
-  color: var(--eti-placeholder-text-color, #adb5bd);
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-.eti-editor ::selection {
-  background-color: var(--eti-selection-color, Highlight);
-}
-
-.eti-editor code {
-  font-family: monospace;
-  background-color: var(--eti-code-bg-color);
-  color: var(--eti-code-color);
-  display: inline;
-  padding: 0;
-  line-height: inherit;
-  vertical-align: baseline;
-}
-
-.eti-editor h1 { font-size: var(--eti-h1-font-size); font-weight: var(--eti-h1-font-weight); margin: 0; line-height: normal; }
-.eti-editor h2 { font-size: var(--eti-h2-font-size); font-weight: var(--eti-h2-font-weight); margin: 0; line-height: normal; }
-.eti-editor h3 { font-size: var(--eti-h3-font-size); font-weight: var(--eti-h3-font-weight); margin: 0; line-height: normal; }
-.eti-editor h4 { font-size: var(--eti-h4-font-size); font-weight: var(--eti-h4-font-weight); margin: 0; line-height: normal; }
-.eti-editor h5 { font-size: var(--eti-h5-font-size); font-weight: var(--eti-h5-font-weight); margin: 0; line-height: normal; }
-.eti-editor h6 { font-size: var(--eti-h6-font-size); font-weight: var(--eti-h6-font-weight); margin: 0; line-height: normal; }
-
-.eti-editor blockquote {
-  border-left: var(--eti-blockquote-border-width) solid var(--eti-blockquote-border-color);
-  padding-left: var(--eti-blockquote-gap-width);
-  margin: 0;
-  color: var(--eti-blockquote-color);
-}
-
-.eti-editor blockquote p {
-  margin: 0;
-}
-
-.eti-editor codeblock {
-  display: block;
-  font-family: monospace;
-  background-color: var(--eti-codeblock-bg-color);
-  color: var(--eti-codeblock-color);
-  border-radius: var(--eti-codeblock-border-radius);
-}
-
-.eti-editor codeblock p {
-  margin: 0;
-}
-
-.eti-editor a {
-  color: var(--eti-link-color);
-  text-decoration-line: var(--eti-link-text-decoration-line);
-}
-
-.eti-editor ul:not([data-type]) {
-  margin: 0;
-  list-style: none;
-  padding-left: calc(
-    var(--eti-ul-margin-left, 16px) + var(--eti-ul-gap-width, 16px)
-  );
-}
-
-.eti-editor ul:not([data-type]) > li {
-  position: relative;
-}
-
-.eti-editor ul:not([data-type]) > li::before {
-  content: '';
-  position: absolute;
-  left: calc(
-    -1 * var(--eti-ul-gap-width, 16px) - var(--eti-ul-bullet-size, 8px)
-  );
-  bottom: 0.4em; 
-  @supports (bottom: 0.5lh) {
-    bottom: 0.5lh;
-  }
-
-  transform: translateY(50%);
-  width: var(--eti-ul-bullet-size, 8px);
-  height: var(--eti-ul-bullet-size, 8px);
-  border-radius: 50%;
-  background-color: var(--eti-ul-bullet-color, currentColor);
-  pointer-events: none;
-}
-
-.eti-editor ol {
-  margin: 0;
-  list-style: none;
-  padding-left: calc(
-    var(--eti-ol-margin-left, 16px) + var(--eti-ol-gap-width, 16px)
-  );
-  counter-reset: eti-ol;
-}
-
-.eti-editor ol > li {
-  position: relative;
-  counter-increment: eti-ol;
-}
-
-.eti-editor ol > li::before {
-  content: counter(eti-ol) '.';
-  position: absolute;
-  left: calc(-1 * var(--eti-ol-gap-width, 16px));
-  bottom: 0;
-  transform: translateX(-50%);
-  color: var(--eti-ol-marker-color, currentColor);
-  font-weight: var(--eti-ol-marker-font-weight, inherit);
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.eti-editor li {
-  margin: 0;
-}
-
-.eti-editor li p {
-  margin: 0;
-}
-
-.eti-editor .eti-inline-image {
-  vertical-align: text-bottom;
-  line-height: 0;
-  display: inline-block;
-}
-
-.eti-editor .eti-inline-image-img {
-  object-fit: contain;
-}
-
-.eti-editor .eti-inline-image--placeholder {
-  display: inline-block;
-  overflow: hidden;
-  color: inherit;
-}
-
-.eti-editor .eti-inline-image-broken-glyph {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-
-.eti-editor
-  .react-renderer.node-image.ProseMirror-selectednode
-  .eti-inline-image {
-    box-shadow: inset 0 0 0 999px Highlight;
-}
-
-
-
-.eti-editor ul[data-type="checkboxList"] {
-  margin: 0;
-  list-style: none;
-  padding: 0;
-  padding-left: calc(
-    var(--eti-checkbox-margin-left, 16px) + var(--eti-checkbox-gap-width, 16px)
-  );
-}
-
-.eti-editor ul[data-type="checkboxList"] > li {
-  position: relative;
-  list-style: none;
-}
-
-.eti-editor ul[data-type="checkboxList"] > li > label {
-  position: absolute;
-  left: calc(
-    -1 * var(--eti-checkbox-gap-width, 16px) - var(--eti-checkbox-box-size, 24px)
-  );
-  transform: translateY(50%);
-  display: inline-flex;
-  align-items: center;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  user-select: none;
-  bottom: 0.4em; 
-  @supports (bottom: 0.5lh) {
-    bottom: 0.5lh;
-  }
-}
-
-.eti-editor ul[data-type="checkboxList"] > li > label input[type='checkbox'] {
-  width: var(--eti-checkbox-box-size, 24px);
-  height: var(--eti-checkbox-box-size, 24px);
-  margin: 0;
-  flex-shrink: 0;
-  accent-color: var(--eti-checkbox-box-color, #0000ff);
-}
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 06a0c264..54d1ea2f 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -5,7 +5,7 @@ import {
   useRef,
   type CSSProperties,
 } from 'react';
-import './EnrichedTextInput.css';
+import './EnrichedText.css';
 import type { Node } from '@tiptap/pm/model';
 import type {
   EnrichedTextInputInstance,
@@ -38,7 +38,7 @@ import {
 } from './normalization/tiptapHtmlNormalizer';
 import { ENRICHED_TEXT_INPUT_DEFAULT_PROPS } from '../utils/EnrichedTextInputDefaultProps';
 import { enrichedInputStyleToCSSProperties } from './styleConversion/enrichedInputStyleToCSSProperties';
-import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedInputThemingToCSSProperties';
+import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import {
   htmlStyleToCSSVariables,
@@ -74,6 +74,8 @@ import {
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
 import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
+import { ENRICHED_TEXT_INPUT_CLASSNAME } from './constants/classNames';
+
 function runFocused(
   editor: Editor,
   apply: (chain: ChainedCommands) => ChainedCommands
@@ -393,7 +395,7 @@ export const EnrichedTextInput = ({
   );
 
   const mentionRulesCSS = useMemo(
-    () => buildMentionRulesCSS(resolvedHtmlStyle),
+    () => buildMentionRulesCSS('input', resolvedHtmlStyle),
     [resolvedHtmlStyle]
   );
 
@@ -407,7 +409,7 @@ export const EnrichedTextInput = ({
       {mentionRulesCSS ? <style>{mentionRulesCSS}</style> : null}
       <EditorContent
         editor={editor}
-        className="eti-editor"
+        className={ENRICHED_TEXT_INPUT_CLASSNAME}
         style={finalStyle}
         data-placeholder={placeholder}
       />
diff --git a/src/web/constants/brokenImageGlyph.ts b/src/web/constants/brokenImageGlyph.ts
new file mode 100644
index 00000000..2ee54fa3
--- /dev/null
+++ b/src/web/constants/brokenImageGlyph.ts
@@ -0,0 +1,7 @@
+// SVG path of the broken-image glyph, shared between the editor's
+// image node view (rendered as an inline <svg>).
+export const BROKEN_IMAGE_PATH_D =
+  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
+
+// Glyph as a `mask`-ready data URI, used in EnrichedText.css.
+export const BROKEN_IMAGE_GLYPH_MASK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cpath d='${BROKEN_IMAGE_PATH_D}'/%3E%3C/svg%3E")`;
diff --git a/src/web/constants/classNames.ts b/src/web/constants/classNames.ts
new file mode 100644
index 00000000..7d45c377
--- /dev/null
+++ b/src/web/constants/classNames.ts
@@ -0,0 +1,2 @@
+export const ENRICHED_TEXT_INPUT_CLASSNAME = 'eti-editor';
+export const ENRICHED_TEXT_CLASSNAME = 'et-view';
diff --git a/src/web/formats/EnrichedImageNodeView.tsx b/src/web/formats/EnrichedImageNodeView.tsx
index deec852d..cc4a853f 100644
--- a/src/web/formats/EnrichedImageNodeView.tsx
+++ b/src/web/formats/EnrichedImageNodeView.tsx
@@ -1,12 +1,10 @@
 import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
 import type { CSSProperties } from 'react';
 import { useState } from 'react';
+import { BROKEN_IMAGE_PATH_D } from '../constants/brokenImageGlyph';
 
 const IMAGE_FALLBACK_SIZE = 80;
 
-const BROKEN_IMAGE_PATH_D =
-  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
-
 function BrokenImageGlyph() {
   return (
     <svg
diff --git a/src/web/normalization/prepareHtmlForWeb.ts b/src/web/normalization/prepareHtmlForWeb.ts
new file mode 100644
index 00000000..fc215147
--- /dev/null
+++ b/src/web/normalization/prepareHtmlForWeb.ts
@@ -0,0 +1,43 @@
+export function prepareHtmlForWeb(html: string) {
+  return checkboxHtmlToWeb(html);
+}
+
+/*
+ * Native checkbox format (as produced by the editor):
+ *   <ul data-type="checkbox">
+ *     <li checked>foo</li>
+ *     <li>bar</li>
+ *   </ul>
+ *
+ * Web-native, display-only format:
+ *   <ul data-type="checkbox">
+ *     <li>
+ *       <input type="checkbox" checked>
+ *       <label>foo</label>
+ *     </li>
+ *     <li>
+ *       <input type="checkbox">
+ *       <label>bar</label>
+ *     </li>
+ *   </ul>
+ */
+function checkboxHtmlToWeb(html: string): string {
+  if (typeof DOMParser === 'undefined') return html;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  doc.querySelectorAll('ul[data-type="checkbox"]').forEach((ul) => {
+    ul.querySelectorAll('li').forEach((li) => {
+      const checked = li.hasAttribute('checked');
+      const labelContent = li.innerHTML;
+
+      li.removeAttribute('checked');
+      li.innerHTML =
+        `<input type="checkbox"${checked ? ' checked' : ''}>` +
+        `<label>${labelContent}</label>`;
+    });
+  });
+
+  return doc.body.innerHTML;
+}
diff --git a/src/web/sanitization/htmlSanitizer.ts b/src/web/sanitization/htmlSanitizer.ts
new file mode 100644
index 00000000..7a45adc1
--- /dev/null
+++ b/src/web/sanitization/htmlSanitizer.ts
@@ -0,0 +1,8 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string) {
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ['mention', 'codeblock'],
+    ADD_ATTR: ['text', 'indicator'],
+  });
+}
diff --git a/src/web/styleConversion/__tests__/buildMentionRulesCSS.test.ts b/src/web/styleConversion/__tests__/buildMentionRulesCSS.test.ts
index 346bd9ce..280ea23a 100644
--- a/src/web/styleConversion/__tests__/buildMentionRulesCSS.test.ts
+++ b/src/web/styleConversion/__tests__/buildMentionRulesCSS.test.ts
@@ -1,30 +1,50 @@
 import { mergeWithDefaultHtmlStyle } from '../htmlStyleToCSSVariables';
 import { buildMentionRulesCSS } from '../buildMentionRulesCSS';
+import {
+  ENRICHED_TEXT_CLASSNAME,
+  ENRICHED_TEXT_INPUT_CLASSNAME,
+} from '../../constants/classNames';
 
 describe('buildMentionRulesCSS', () => {
-  it('emits default class rule and attribute rule for @', () => {
-    const merged = mergeWithDefaultHtmlStyle({
-      mention: { '@': { color: 'red' } },
-    });
-    const css = buildMentionRulesCSS(merged);
+  it.each([
+    {
+      description: 'EnrichedTextInput',
+      input: 'input' as const,
+      expected: ENRICHED_TEXT_INPUT_CLASSNAME,
+    },
+    {
+      description: 'EnrichedText',
+      input: 'text' as const,
+      expected: ENRICHED_TEXT_CLASSNAME,
+    },
+  ])(
+    '[$description] emits default class rule and attribute rule for @',
+    ({ input, expected }) => {
+      const merged = mergeWithDefaultHtmlStyle({
+        mention: { '@': { color: 'red' } },
+      });
+      const css = buildMentionRulesCSS(input, merged);
 
-    expect(css).toMatch(/\.eti-editor mention\s*\{/);
-    expect(css).toContain('var(--eti-mention-default-color)');
-    expect(css).toContain('var(--eti-mention-default-background-color)');
-    expect(css).toContain('var(--eti-mention-default-text-decoration-line)');
+      expect(css).toMatch(new RegExp(`\\.${expected} mention\\s*\\{`));
+      expect(css).toContain('var(--et-mention-default-color)');
+      expect(css).toContain('var(--et-mention-default-background-color)');
+      expect(css).toContain('var(--et-mention-default-text-decoration-line)');
 
-    expect(css).toContain('.eti-editor mention[indicator="@"]');
-    expect(css).toContain('var(--eti-mention-u0040-color)');
-    expect(css).toContain('var(--eti-mention-u0040-background-color)');
-    expect(css).toContain('var(--eti-mention-u0040-text-decoration-line)');
-  });
+      expect(css).toContain(`.${expected} mention[indicator="@"]`);
+      expect(css).toContain('var(--et-mention-u0040-color)');
+      expect(css).toContain('var(--et-mention-u0040-background-color)');
+      expect(css).toContain('var(--et-mention-u0040-text-decoration-line)');
+    }
+  );
 
   it('returns empty string when mention is missing', () => {
-    expect(buildMentionRulesCSS(undefined)).toBe('');
-    expect(buildMentionRulesCSS({})).toBe('');
+    expect(buildMentionRulesCSS('input', undefined)).toBe('');
+    expect(buildMentionRulesCSS('input', {})).toBe('');
   });
 
   it('returns empty string when mention is not a style record', () => {
-    expect(buildMentionRulesCSS({ mention: { color: 'red' } })).toBe('');
+    expect(buildMentionRulesCSS('input', { mention: { color: 'red' } })).toBe(
+      ''
+    );
   });
 });
diff --git a/src/web/styleConversion/__tests__/enrichedInputStyleToCSSProperties.test.ts b/src/web/styleConversion/__tests__/enrichedBaseStyleToCSSProperties.test.ts
similarity index 98%
rename from src/web/styleConversion/__tests__/enrichedInputStyleToCSSProperties.test.ts
rename to src/web/styleConversion/__tests__/enrichedBaseStyleToCSSProperties.test.ts
index 41a5ea23..d02ca12e 100644
--- a/src/web/styleConversion/__tests__/enrichedInputStyleToCSSProperties.test.ts
+++ b/src/web/styleConversion/__tests__/enrichedBaseStyleToCSSProperties.test.ts
@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { EnrichedInputStyle } from '../../../types';
-import { enrichedInputStyleToCSSProperties } from '../enrichedInputStyleToCSSProperties';
+import { enrichedBaseStyleToCSSProperties } from '../enrichedBaseStyleToCSSProperties';
 
 type TestCase = {
   description: string;
@@ -9,7 +9,7 @@ type TestCase = {
 };
 
 function convert(style: EnrichedInputStyle): CSSProperties {
-  return enrichedInputStyleToCSSProperties(style);
+  return enrichedBaseStyleToCSSProperties(style);
 }
 
 describe('empty input', () => {
@@ -931,7 +931,7 @@ describe('extraOptions.scrollEnabled', () => {
   it('sets overflowY to auto when scrollEnabled is true', () => {
     expect(convert({})).not.toHaveProperty('overflowY');
     expect(
-      enrichedInputStyleToCSSProperties({}, { scrollEnabled: true })
+      enrichedBaseStyleToCSSProperties({}, { scrollEnabled: true })
     ).toMatchObject({
       overflowY: 'auto',
     });
@@ -939,7 +939,7 @@ describe('extraOptions.scrollEnabled', () => {
 
   it('sets overflowY to hidden when scrollEnabled is false', () => {
     expect(
-      enrichedInputStyleToCSSProperties({}, { scrollEnabled: false })
+      enrichedBaseStyleToCSSProperties({}, { scrollEnabled: false })
     ).toMatchObject({
       overflowY: 'hidden',
     });
diff --git a/src/web/styleConversion/__tests__/enrichedTextStyleToCSSProperties.test.ts b/src/web/styleConversion/__tests__/enrichedTextStyleToCSSProperties.test.ts
new file mode 100644
index 00000000..71ace0bb
--- /dev/null
+++ b/src/web/styleConversion/__tests__/enrichedTextStyleToCSSProperties.test.ts
@@ -0,0 +1,254 @@
+import type { CSSProperties } from 'react';
+import type { TextStyle } from 'react-native';
+import { enrichedTextStyleToCSSProperties } from '../enrichedTextStyleToCSSProperties';
+
+type TestCase = {
+  description: string;
+  input: TextStyle;
+  expected: CSSProperties;
+};
+
+function convert(style: TextStyle): CSSProperties {
+  return enrichedTextStyleToCSSProperties(style);
+}
+
+// These suites only cover the text-only properties that
+// enrichedTextStyleToCSSProperties adds on top of the shared base.
+
+describe('empty input', () => {
+  it('returns an empty object for an empty style', () => {
+    expect(convert({})).toEqual({
+      overflowY: 'hidden',
+    });
+  });
+});
+
+describe('textAlign', () => {
+  const cases: TestCase[] = [
+    {
+      description: 'left passes through',
+      input: { textAlign: 'left' },
+      expected: {
+        overflowY: 'hidden',
+        textAlign: 'left',
+      },
+    },
+    {
+      description: 'center passes through',
+      input: { textAlign: 'center' },
+      expected: {
+        overflowY: 'hidden',
+        textAlign: 'center',
+      },
+    },
+    {
+      description: 'justify passes through',
+      input: { textAlign: 'justify' },
+      expected: {
+        overflowY: 'hidden',
+        textAlign: 'justify',
+      },
+    },
+  ];
+
+  it.each(cases)('$description', ({ input, expected }) => {
+    expect(convert(input)).toEqual(expected);
+  });
+
+  it("omits 'auto' (no CSS equivalent)", () => {
+    expect(convert({ textAlign: 'auto' })).not.toHaveProperty('textAlign');
+  });
+});
+
+describe('textTransform', () => {
+  it.each(['none', 'capitalize', 'uppercase', 'lowercase'] as const)(
+    '%s passes through',
+    (value) => {
+      expect(convert({ textTransform: value })).toEqual({
+        overflowY: 'hidden',
+        textTransform: value,
+      });
+    }
+  );
+});
+
+describe('text decoration', () => {
+  const cases: TestCase[] = [
+    {
+      description: 'textDecorationLine underline passes through',
+      input: { textDecorationLine: 'underline' },
+      expected: {
+        overflowY: 'hidden',
+        textDecorationLine: 'underline',
+      },
+    },
+    {
+      description: 'textDecorationLine combined value passes through',
+      input: { textDecorationLine: 'underline line-through' },
+      expected: {
+        overflowY: 'hidden',
+        textDecorationLine: 'underline line-through',
+      },
+    },
+    {
+      description: 'textDecorationStyle passes through',
+      input: { textDecorationStyle: 'dashed' },
+      expected: {
+        overflowY: 'hidden',
+        textDecorationStyle: 'dashed',
+      },
+    },
+    {
+      description: 'textDecorationColor (string) passes through',
+      input: { textDecorationColor: 'red' },
+      expected: {
+        overflowY: 'hidden',
+        textDecorationColor: 'red',
+      },
+    },
+    {
+      description: 'textDecorationColor (integer) converts to rgba',
+      input: { textDecorationColor: 0xff0000ff } as unknown as TextStyle,
+      expected: {
+        overflowY: 'hidden',
+        textDecorationColor: 'rgba(255, 0, 0, 1)',
+      },
+    },
+  ];
+
+  it.each(cases)('$description', ({ input, expected }) => {
+    expect(convert(input)).toEqual(expected);
+  });
+});
+
+describe('textShadow', () => {
+  it('combines offset, radius and color into the CSS shorthand', () => {
+    expect(
+      convert({
+        textShadowColor: 'black',
+        textShadowOffset: { width: 1, height: 2 },
+        textShadowRadius: 3,
+      })
+    ).toEqual({
+      overflowY: 'hidden',
+      textShadow: '1px 2px 3px black',
+    });
+  });
+
+  it('defaults missing offset and radius to 0', () => {
+    expect(convert({ textShadowColor: 'red' })).toEqual({
+      overflowY: 'hidden',
+      textShadow: '0px 0px 0px red',
+    });
+  });
+
+  it('omits the color when none is provided', () => {
+    expect(
+      convert({
+        textShadowOffset: { width: 4, height: 5 },
+        textShadowRadius: 6,
+      })
+    ).toEqual({
+      overflowY: 'hidden',
+      textShadow: '4px 5px 6px',
+    });
+  });
+
+  it('converts integer color values', () => {
+    expect(
+      convert({
+        textShadowColor: 0x00000080,
+        textShadowOffset: { width: 0, height: 1 },
+      } as unknown as TextStyle)
+    ).toEqual({
+      overflowY: 'hidden',
+      textShadow: `0px 1px 0px rgba(0, 0, 0, ${128 / 255})`,
+    });
+  });
+
+  it('is omitted when no textShadow props are set', () => {
+    expect(convert({ color: 'red' })).not.toHaveProperty('textShadow');
+  });
+});
+
+describe('userSelect', () => {
+  it.each(['auto', 'none', 'text', 'contain', 'all'] as const)(
+    '%s passes through',
+    (value) => {
+      expect(convert({ userSelect: value })).toEqual({
+        overflowY: 'hidden',
+        userSelect: value,
+      });
+    }
+  );
+});
+
+describe('fontVariant', () => {
+  it('joins the RN array into a CSS string', () => {
+    expect(convert({ fontVariant: ['small-caps', 'tabular-nums'] })).toEqual({
+      overflowY: 'hidden',
+      fontVariant: 'small-caps tabular-nums',
+    });
+  });
+
+  it('joins a single-item array', () => {
+    expect(convert({ fontVariant: ['small-caps'] })).toEqual({
+      overflowY: 'hidden',
+      fontVariant: 'small-caps',
+    });
+  });
+});
+
+describe('writingDirection → direction', () => {
+  it.each(['ltr', 'rtl'] as const)('%s maps to direction', (value) => {
+    expect(convert({ writingDirection: value })).toEqual({
+      overflowY: 'hidden',
+      direction: value,
+    });
+  });
+
+  it("omits 'auto' (no CSS equivalent)", () => {
+    expect(convert({ writingDirection: 'auto' })).not.toHaveProperty(
+      'direction'
+    );
+  });
+});
+
+describe('verticalAlign', () => {
+  it.each(['top', 'bottom', 'middle'] as const)(
+    '%s passes through',
+    (value) => {
+      expect(convert({ verticalAlign: value })).toEqual({
+        overflowY: 'hidden',
+        verticalAlign: value,
+      });
+    }
+  );
+
+  it("omits 'auto' (no CSS equivalent)", () => {
+    expect(convert({ verticalAlign: 'auto' })).not.toHaveProperty(
+      'verticalAlign'
+    );
+  });
+});
+
+describe('combined text style', () => {
+  it('emits all text-only properties together', () => {
+    expect(
+      convert({
+        textAlign: 'center',
+        textTransform: 'uppercase',
+        textDecorationLine: 'underline',
+        textDecorationColor: 'blue',
+        userSelect: 'none',
+      })
+    ).toEqual({
+      overflowY: 'hidden',
+      textAlign: 'center',
+      textTransform: 'uppercase',
+      textDecorationLine: 'underline',
+      textDecorationColor: 'blue',
+      userSelect: 'none',
+    });
+  });
+});
diff --git a/src/web/styleConversion/__tests__/enrichedInputThemingToCSSProperties.test.ts b/src/web/styleConversion/__tests__/enrichedThemingToCSSProperties.test.ts
similarity index 63%
rename from src/web/styleConversion/__tests__/enrichedInputThemingToCSSProperties.test.ts
rename to src/web/styleConversion/__tests__/enrichedThemingToCSSProperties.test.ts
index 44221eff..ce421d97 100644
--- a/src/web/styleConversion/__tests__/enrichedInputThemingToCSSProperties.test.ts
+++ b/src/web/styleConversion/__tests__/enrichedThemingToCSSProperties.test.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { enrichedInputThemingToCSSProperties } from '../enrichedInputThemingToCSSProperties';
+import { enrichedInputThemingToCSSProperties } from '../enrichedThemingToCSSProperties';
 
 describe('enrichedInputThemingToCSSProperties', () => {
   it('returns an empty object when no colors are passed', () => {
@@ -15,8 +15,18 @@ describe('enrichedInputThemingToCSSProperties', () => {
       })
     ).toEqual({
       'caretColor': '#111',
-      '--eti-placeholder-text-color': '#222',
-      '--eti-selection-color': '#333',
+      '--et-placeholder-text-color': '#222',
+      '--et-selection-color': '#333',
+    } as CSSProperties);
+  });
+
+  it('maps only one prop if other are not provided', () => {
+    expect(
+      enrichedInputThemingToCSSProperties({
+        selectionColor: '#333',
+      })
+    ).toEqual({
+      '--et-selection-color': '#333',
     } as CSSProperties);
   });
 });
diff --git a/src/web/styleConversion/__tests__/htmlStyleToCSSVariables.test.ts b/src/web/styleConversion/__tests__/htmlStyleToCSSVariables.test.ts
index 6865329a..f7d9bcf5 100644
--- a/src/web/styleConversion/__tests__/htmlStyleToCSSVariables.test.ts
+++ b/src/web/styleConversion/__tests__/htmlStyleToCSSVariables.test.ts
@@ -9,11 +9,11 @@ import {
 type CodeStyle = HtmlStyle['code'];
 
 const DEFAULT_MENTION_CSS_VARS: Record<string, string> = {
-  '--eti-mention-default-color': String(DEFAULT_HTML_STYLE.mention.color),
-  '--eti-mention-default-background-color': String(
+  '--et-mention-default-color': String(DEFAULT_HTML_STYLE.mention.color),
+  '--et-mention-default-background-color': String(
     DEFAULT_HTML_STYLE.mention.backgroundColor
   ),
-  '--eti-mention-default-text-decoration-line': String(
+  '--et-mention-default-text-decoration-line': String(
     DEFAULT_HTML_STYLE.mention.textDecorationLine
   ),
 };
@@ -123,21 +123,21 @@ describe('htmlStyleToCSSVariables', () => {
   it('integer color → rgba string', () => {
     const input = { code: { color: 0xff0000ff as unknown as string } };
     expect(htmlStyleToCSSVariables(input)).toMatchObject({
-      '--eti-code-color': 'rgba(255, 0, 0, 1)',
+      '--et-code-color': 'rgba(255, 0, 0, 1)',
     });
   });
 
   describe('code styles', () => {
     const cases = [
-      [{ color: '#ff0000' }, { '--eti-code-color': '#ff0000' }],
+      [{ color: '#ff0000' }, { '--et-code-color': '#ff0000' }],
       [
         { color: 'rgba(0,128,255,1)' },
-        { '--eti-code-color': 'rgba(0,128,255,1)' },
+        { '--et-code-color': 'rgba(0,128,255,1)' },
       ],
-      [{ backgroundColor: '#f5f5f5' }, { '--eti-code-bg-color': '#f5f5f5' }],
+      [{ backgroundColor: '#f5f5f5' }, { '--et-code-bg-color': '#f5f5f5' }],
       [
         { color: '#333', backgroundColor: '#f5f5f5' },
-        { '--eti-code-color': '#333', '--eti-code-bg-color': '#f5f5f5' },
+        { '--et-code-color': '#333', '--et-code-bg-color': '#f5f5f5' },
       ],
       [{}, {}],
       [undefined, {}],
@@ -153,18 +153,18 @@ describe('htmlStyleToCSSVariables', () => {
       [
         { h1: { fontSize: 24, bold: true } },
         {
-          '--eti-h1-font-size': '24px',
-          '--eti-h1-font-weight': 'bold',
+          '--et-h1-font-size': '24px',
+          '--et-h1-font-weight': 'bold',
         },
       ],
       [
         { h2: { fontSize: 20, bold: false } },
         {
-          '--eti-h2-font-size': '20px',
-          '--eti-h2-font-weight': 'normal',
+          '--et-h2-font-size': '20px',
+          '--et-h2-font-weight': 'normal',
         },
       ],
-      [{ h3: { fontSize: 18 } }, { '--eti-h3-font-size': '18px' }],
+      [{ h3: { fontSize: 18 } }, { '--et-h3-font-size': '18px' }],
       [{}, {}],
     ] as Array<[HtmlStyle, CSSProperties]>;
 
@@ -184,10 +184,10 @@ describe('htmlStyleToCSSVariables', () => {
         },
       })
     ).toMatchObject({
-      '--eti-blockquote-border-color': '#ccc',
-      '--eti-blockquote-border-width': '3px',
-      '--eti-blockquote-gap-width': '12px',
-      '--eti-blockquote-color': '#444',
+      '--et-blockquote-border-color': '#ccc',
+      '--et-blockquote-border-width': '3px',
+      '--et-blockquote-gap-width': '12px',
+      '--et-blockquote-color': '#444',
     });
   });
 
@@ -201,9 +201,9 @@ describe('htmlStyleToCSSVariables', () => {
         },
       })
     ).toMatchObject({
-      '--eti-codeblock-bg-color': '#1e1e1e',
-      '--eti-codeblock-color': '#d4d4d4',
-      '--eti-codeblock-border-radius': '8px',
+      '--et-codeblock-bg-color': '#1e1e1e',
+      '--et-codeblock-color': '#d4d4d4',
+      '--et-codeblock-border-radius': '8px',
     });
   });
 
@@ -213,8 +213,8 @@ describe('htmlStyleToCSSVariables', () => {
         a: { color: 'blue', textDecorationLine: 'underline' },
       })
     ).toMatchObject({
-      '--eti-link-color': 'blue',
-      '--eti-link-text-decoration-line': 'underline',
+      '--et-link-color': 'blue',
+      '--et-link-text-decoration-line': 'underline',
     });
   });
 
@@ -229,10 +229,10 @@ describe('htmlStyleToCSSVariables', () => {
         },
       })
     ).toMatchObject({
-      '--eti-ul-bullet-color': '#ff0000',
-      '--eti-ul-bullet-size': '12px',
-      '--eti-ul-margin-left': '8px',
-      '--eti-ul-gap-width': '4px',
+      '--et-ul-bullet-color': '#ff0000',
+      '--et-ul-bullet-size': '12px',
+      '--et-ul-margin-left': '8px',
+      '--et-ul-gap-width': '4px',
     });
   });
 
@@ -247,10 +247,10 @@ describe('htmlStyleToCSSVariables', () => {
         },
       })
     ).toMatchObject({
-      '--eti-ol-gap-width': '6px',
-      '--eti-ol-margin-left': '10px',
-      '--eti-ol-marker-font-weight': '700',
-      '--eti-ol-marker-color': '#00ff00',
+      '--et-ol-gap-width': '6px',
+      '--et-ol-margin-left': '10px',
+      '--et-ol-marker-font-weight': '700',
+      '--et-ol-marker-color': '#00ff00',
     });
   });
 
@@ -265,10 +265,10 @@ describe('htmlStyleToCSSVariables', () => {
         },
       })
     ).toMatchObject({
-      '--eti-checkbox-box-size': '20px',
-      '--eti-checkbox-gap-width': '8px',
-      '--eti-checkbox-margin-left': '12px',
-      '--eti-checkbox-box-color': '#336699',
+      '--et-checkbox-box-size': '20px',
+      '--et-checkbox-gap-width': '8px',
+      '--et-checkbox-margin-left': '12px',
+      '--et-checkbox-box-color': '#336699',
     });
   });
 });
@@ -278,7 +278,7 @@ describe('mention CSS variables', () => {
     const vars = htmlStyleToCSSVariables({
       mention: { color: '#f00' },
     }) as Record<string, string>;
-    expect(vars['--eti-mention-default-color']).toBe('#f00');
+    expect(vars['--et-mention-default-color']).toBe('#f00');
   });
 
   it('mention @ + default vars', () => {
@@ -286,8 +286,8 @@ describe('mention CSS variables', () => {
       mention: { '@': { color: '#ff0000' } },
     });
     const vars = htmlStyleToCSSVariables(merged) as Record<string, string>;
-    expect(vars['--eti-mention-u0040-color']).toBe('#ff0000');
-    expect(vars['--eti-mention-default-color']).toBe(
+    expect(vars['--et-mention-u0040-color']).toBe('#ff0000');
+    expect(vars['--et-mention-default-color']).toBe(
       DEFAULT_HTML_STYLE.mention.color
     );
   });
@@ -297,7 +297,7 @@ describe('mention CSS variables', () => {
       string,
       string
     >;
-    expect(vars['--eti-mention-default-color']).toBe(
+    expect(vars['--et-mention-default-color']).toBe(
       DEFAULT_HTML_STYLE.mention.color
     );
   });
diff --git a/src/web/styleConversion/buildMentionRulesCSS.ts b/src/web/styleConversion/buildMentionRulesCSS.ts
index eb22197a..e716de02 100644
--- a/src/web/styleConversion/buildMentionRulesCSS.ts
+++ b/src/web/styleConversion/buildMentionRulesCSS.ts
@@ -1,6 +1,10 @@
 import type { HtmlStyle, MentionStyleProperties } from '../../types';
 import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
-import { ETI_MENTION_CSS_VARS } from './htmlStyleToCSSVariables';
+import {
+  ENRICHED_TEXT_CLASSNAME,
+  ENRICHED_TEXT_INPUT_CLASSNAME,
+} from '../constants/classNames';
+import { ET_MENTION_CSS_VARS } from './htmlStyleToCSSVariables';
 import { MENTION_STYLE_DEFAULT_KEY } from './mentionIndicatorCssKey';
 
 function escapeIndicatorForCssAttributeSelector(indicator: string): string {
@@ -10,7 +14,10 @@ function escapeIndicatorForCssAttributeSelector(indicator: string): string {
   return indicator.replace(/["\\]/g, '\\$&');
 }
 
-export function buildMentionRulesCSS(htmlStyle?: HtmlStyle): string {
+export function buildMentionRulesCSS(
+  component: 'input' | 'text',
+  htmlStyle?: HtmlStyle
+): string {
   const mapRaw = htmlStyle?.mention;
   if (!mapRaw || typeof mapRaw !== 'object' || !isMentionStyleRecord(mapRaw)) {
     return '';
@@ -22,18 +29,23 @@ export function buildMentionRulesCSS(htmlStyle?: HtmlStyle): string {
     return '';
   }
 
+  const className =
+    component === 'input'
+      ? ENRICHED_TEXT_INPUT_CLASSNAME
+      : ENRICHED_TEXT_CLASSNAME;
+
   const lines: string[] = [];
   for (const indicator of keys) {
     const selector =
       indicator === MENTION_STYLE_DEFAULT_KEY
-        ? '.eti-editor mention'
-        : `.eti-editor mention[indicator="${escapeIndicatorForCssAttributeSelector(indicator)}"]`;
+        ? `.${className} mention`
+        : `.${className} mention[indicator="${escapeIndicatorForCssAttributeSelector(indicator)}"]`;
 
     lines.push(
       `${selector} {
-  color: var(${ETI_MENTION_CSS_VARS.color(indicator)});
-  background-color: var(${ETI_MENTION_CSS_VARS.backgroundColor(indicator)});
-  text-decoration-line: var(${ETI_MENTION_CSS_VARS.textDecorationLine(indicator)});
+  color: var(${ET_MENTION_CSS_VARS.color(indicator)});
+  background-color: var(${ET_MENTION_CSS_VARS.backgroundColor(indicator)});
+  text-decoration-line: var(${ET_MENTION_CSS_VARS.textDecorationLine(indicator)});
 }`.trim()
     );
   }
diff --git a/src/web/styleConversion/enrichedBaseStyleToCSSProperties.ts b/src/web/styleConversion/enrichedBaseStyleToCSSProperties.ts
new file mode 100644
index 00000000..d2fd66b7
--- /dev/null
+++ b/src/web/styleConversion/enrichedBaseStyleToCSSProperties.ts
@@ -0,0 +1,228 @@
+import type { CSSProperties } from 'react';
+import type { EnrichedInputStyle } from '../../types';
+import type {
+  AnimatableNumericValue,
+  DimensionValue,
+  TextStyle,
+} from 'react-native';
+import { toColor } from './toColor';
+
+export interface StyleConversionExtraOptions {
+  scrollEnabled?: boolean;
+}
+
+export function enrichedBaseStyleToCSSProperties(
+  style: EnrichedInputStyle | TextStyle,
+  extraOptions: StyleConversionExtraOptions = {}
+): CSSProperties {
+  const css: CSSProperties = {
+    // Dimensions
+    width: toPx(style.width),
+    height: toPx(style.height),
+    minWidth: toPx(style.minWidth),
+    maxWidth: toPx(style.maxWidth),
+    minHeight: toPx(style.minHeight),
+    maxHeight: toPx(style.maxHeight),
+    top: toPx(style.top),
+    bottom: toPx(style.bottom),
+    left: toPx(style.left),
+    right: toPx(style.right),
+    inset: toPx(style.inset),
+    insetBlock: toPx(style.insetBlock),
+    insetBlockEnd: toPx(style.insetBlockEnd),
+    insetBlockStart: toPx(style.insetBlockStart),
+    insetInline: toPx(style.insetInline),
+    insetInlineEnd: toPx(style.insetInlineEnd ?? style.end),
+    insetInlineStart: toPx(style.insetInlineStart ?? style.start),
+
+    // Margin - specific properties take precedence over shorthands (RN behavior)
+    margin: toPx(style.margin),
+    marginTop: toPx(style.marginTop ?? style.marginVertical),
+    marginBottom: toPx(style.marginBottom ?? style.marginVertical),
+    marginLeft: toPx(style.marginLeft ?? style.marginHorizontal),
+    marginRight: toPx(style.marginRight ?? style.marginHorizontal),
+    marginBlock: toPx(style.marginBlock),
+    marginBlockEnd: toPx(style.marginBlockEnd),
+    marginBlockStart: toPx(style.marginBlockStart),
+    marginInline: toPx(style.marginInline),
+    marginInlineEnd: toPx(style.marginInlineEnd ?? style.marginEnd),
+    marginInlineStart: toPx(style.marginInlineStart ?? style.marginStart),
+
+    // Padding - specific properties take precedence over shorthands (RN behavior)
+    padding: toPx(style.padding),
+    paddingTop: toPx(style.paddingTop ?? style.paddingVertical),
+    paddingBottom: toPx(style.paddingBottom ?? style.paddingVertical),
+    paddingLeft: toPx(style.paddingLeft ?? style.paddingHorizontal),
+    paddingRight: toPx(style.paddingRight ?? style.paddingHorizontal),
+    paddingBlock: toPx(style.paddingBlock),
+    paddingBlockEnd: toPx(style.paddingBlockEnd),
+    paddingBlockStart: toPx(style.paddingBlockStart),
+    paddingInline: toPx(style.paddingInline),
+    paddingInlineEnd: toPx(style.paddingInlineEnd ?? style.paddingEnd),
+    paddingInlineStart: toPx(style.paddingInlineStart ?? style.paddingStart),
+
+    // Border widths
+    borderInlineStartWidth: toPx(style.borderStartWidth),
+    borderInlineEndWidth: toPx(style.borderEndWidth),
+    borderWidth: toPx(style.borderWidth),
+    borderTopWidth: toPx(style.borderTopWidth),
+    borderBottomWidth: toPx(style.borderBottomWidth),
+    borderLeftWidth: toPx(style.borderLeftWidth),
+    borderRightWidth: toPx(style.borderRightWidth),
+
+    // Border radius (physical)
+    borderRadius: toPx(style.borderRadius),
+    borderTopLeftRadius: toPx(style.borderTopLeftRadius),
+    borderTopRightRadius: toPx(style.borderTopRightRadius),
+    borderBottomLeftRadius: toPx(style.borderBottomLeftRadius),
+    borderBottomRightRadius: toPx(style.borderBottomRightRadius),
+
+    // Border radius (logical)
+    borderStartStartRadius: toPx(
+      style.borderStartStartRadius ?? style.borderTopStartRadius
+    ),
+    borderStartEndRadius: toPx(
+      style.borderStartEndRadius ?? style.borderTopEndRadius
+    ),
+    borderEndStartRadius: toPx(
+      style.borderEndStartRadius ?? style.borderBottomStartRadius
+    ),
+    borderEndEndRadius: toPx(
+      style.borderEndEndRadius ?? style.borderBottomEndRadius
+    ),
+
+    // Border colors
+    borderColor: toColor(style.borderColor),
+    borderBlockColor: toColor(style.borderBlockColor),
+    borderBlockEndColor: toColor(style.borderBlockEndColor),
+    borderBlockStartColor: toColor(style.borderBlockStartColor),
+    borderBottomColor: toColor(style.borderBottomColor),
+    borderInlineEndColor: toColor(style.borderEndColor),
+    borderLeftColor: toColor(style.borderLeftColor),
+    borderRightColor: toColor(style.borderRightColor),
+    borderInlineStartColor: toColor(style.borderStartColor),
+    borderTopColor: toColor(style.borderTopColor),
+    borderStyle:
+      style.borderStyle ??
+      (style.borderWidth != null ||
+      style.borderTopWidth != null ||
+      style.borderBottomWidth != null ||
+      style.borderLeftWidth != null ||
+      style.borderRightWidth != null ||
+      style.borderStartWidth != null ||
+      style.borderEndWidth != null ||
+      style.borderColor != null
+        ? 'solid'
+        : undefined),
+
+    // Typography
+    color: toColor(style.color),
+    fontFamily: style.fontFamily,
+    fontSize: toPx(style.fontSize),
+    fontStyle: style.fontStyle,
+    fontWeight: style.fontWeight,
+    lineHeight: toPx(style.lineHeight),
+    letterSpacing: toPx(style.letterSpacing),
+
+    // View appearance
+    backgroundColor: toColor(style.backgroundColor),
+    // boxShadow/filter: RN accepts arrays, CSS only strings
+    boxShadow:
+      typeof style.boxShadow === 'string' ? style.boxShadow : undefined,
+    display: style.display,
+    position: style.position,
+    alignSelf: style.alignSelf,
+    backfaceVisibility: style.backfaceVisibility,
+    cursor: style.cursor,
+    filter: typeof style.filter === 'string' ? style.filter : undefined,
+    mixBlendMode: style.mixBlendMode,
+    boxSizing: style.boxSizing,
+    // pointerEvents: RN 'box-none'/'box-only' have no CSS equivalent
+    pointerEvents:
+      style.pointerEvents === 'auto' || style.pointerEvents === 'none'
+        ? style.pointerEvents
+        : undefined,
+
+    // Outline
+    outlineColor: toColor(style.outlineColor),
+    outlineStyle:
+      style.outlineStyle ?? (style.outlineWidth != null ? 'solid' : undefined),
+    outlineOffset: toPx(style.outlineOffset),
+    outlineWidth: toPx(style.outlineWidth),
+
+    // Transforms
+    transform: resolveTransform(style.transform),
+    // transformOrigin: RN accepts strings or arrays, CSS only strings
+    transformOrigin:
+      typeof style.transformOrigin === 'string'
+        ? style.transformOrigin
+        : undefined,
+
+    // Flex
+    flex: style.flex,
+    flexGrow: style.flexGrow,
+    flexShrink: style.flexShrink,
+    flexBasis: toPx(style.flexBasis),
+
+    // Misc
+    zIndex: style.zIndex,
+    // opacity: RN AnimatableNumericValue includes AnimatedNode; CSS only number
+    opacity: typeof style.opacity === 'number' ? style.opacity : undefined,
+    aspectRatio: style.aspectRatio,
+
+    // Extra options
+    overflowY:
+      extraOptions.scrollEnabled != null
+        ? extraOptions.scrollEnabled
+          ? 'auto'
+          : 'hidden'
+        : undefined,
+  };
+
+  // Clean undefined values
+  return Object.fromEntries(
+    Object.entries(css).filter(([, v]) => v !== undefined)
+  );
+}
+
+function toPx(
+  value?: DimensionValue | AnimatableNumericValue | string
+): string | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') return value;
+  return undefined;
+}
+
+function resolveTransform(
+  transform: EnrichedInputStyle['transform']
+): string | undefined {
+  if (typeof transform === 'string') return transform;
+  if (!Array.isArray(transform)) return undefined;
+
+  const parts = transform.map((item) => {
+    if ('translateX' in item) return `translateX(${item.translateX}px)`;
+    if ('translateY' in item) return `translateY(${item.translateY}px)`;
+    if ('translateZ' in item) return `translateZ(${item.translateZ}px)`;
+    if ('scale' in item) return `scale(${item.scale})`;
+    if ('scaleX' in item) return `scaleX(${item.scaleX})`;
+    if ('scaleY' in item) return `scaleY(${item.scaleY})`;
+    if ('scaleZ' in item) return `scaleZ(${item.scaleZ})`;
+    if ('rotate' in item) return `rotate(${item.rotate})`;
+    if ('rotateX' in item) return `rotateX(${item.rotateX})`;
+    if ('rotateY' in item) return `rotateY(${item.rotateY})`;
+    if ('rotateZ' in item) return `rotateZ(${item.rotateZ})`;
+    if ('skewX' in item) return `skewX(${item.skewX})`;
+    if ('skewY' in item) return `skewY(${item.skewY})`;
+    if ('perspective' in item) return `perspective(${item.perspective}px)`;
+    if ('matrix' in item) {
+      return item.matrix.length === 16
+        ? `matrix3d(${item.matrix.join(', ')})`
+        : `matrix(${item.matrix.join(', ')})`;
+    }
+    return null;
+  });
+
+  const css = parts.filter(Boolean).join(' ');
+  return css || undefined;
+}
diff --git a/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts b/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts
index d2dc04c2..93341dfe 100644
--- a/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts
+++ b/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts
@@ -1,224 +1,13 @@
 import type { CSSProperties } from 'react';
 import type { EnrichedInputStyle } from '../../types';
-import type { AnimatableNumericValue, DimensionValue } from 'react-native';
-import { toColor } from './toColor';
-
-interface ExtraOptions {
-  scrollEnabled?: boolean;
-}
+import {
+  enrichedBaseStyleToCSSProperties,
+  type StyleConversionExtraOptions,
+} from './enrichedBaseStyleToCSSProperties';
 
 export function enrichedInputStyleToCSSProperties(
   style: EnrichedInputStyle,
-  extraOptions: ExtraOptions = {}
+  extraOptions?: StyleConversionExtraOptions
 ): CSSProperties {
-  const css: CSSProperties = {
-    // Dimensions
-    width: toPx(style.width),
-    height: toPx(style.height),
-    minWidth: toPx(style.minWidth),
-    maxWidth: toPx(style.maxWidth),
-    minHeight: toPx(style.minHeight),
-    maxHeight: toPx(style.maxHeight),
-    top: toPx(style.top),
-    bottom: toPx(style.bottom),
-    left: toPx(style.left),
-    right: toPx(style.right),
-    inset: toPx(style.inset),
-    insetBlock: toPx(style.insetBlock),
-    insetBlockEnd: toPx(style.insetBlockEnd),
-    insetBlockStart: toPx(style.insetBlockStart),
-    insetInline: toPx(style.insetInline),
-    insetInlineEnd: toPx(style.insetInlineEnd ?? style.end),
-    insetInlineStart: toPx(style.insetInlineStart ?? style.start),
-
-    // Margin - specific properties take precedence over shorthands (RN behavior)
-    margin: toPx(style.margin),
-    marginTop: toPx(style.marginTop ?? style.marginVertical),
-    marginBottom: toPx(style.marginBottom ?? style.marginVertical),
-    marginLeft: toPx(style.marginLeft ?? style.marginHorizontal),
-    marginRight: toPx(style.marginRight ?? style.marginHorizontal),
-    marginBlock: toPx(style.marginBlock),
-    marginBlockEnd: toPx(style.marginBlockEnd),
-    marginBlockStart: toPx(style.marginBlockStart),
-    marginInline: toPx(style.marginInline),
-    marginInlineEnd: toPx(style.marginInlineEnd ?? style.marginEnd),
-    marginInlineStart: toPx(style.marginInlineStart ?? style.marginStart),
-
-    // Padding - specific properties take precedence over shorthands (RN behavior)
-    padding: toPx(style.padding),
-    paddingTop: toPx(style.paddingTop ?? style.paddingVertical),
-    paddingBottom: toPx(style.paddingBottom ?? style.paddingVertical),
-    paddingLeft: toPx(style.paddingLeft ?? style.paddingHorizontal),
-    paddingRight: toPx(style.paddingRight ?? style.paddingHorizontal),
-    paddingBlock: toPx(style.paddingBlock),
-    paddingBlockEnd: toPx(style.paddingBlockEnd),
-    paddingBlockStart: toPx(style.paddingBlockStart),
-    paddingInline: toPx(style.paddingInline),
-    paddingInlineEnd: toPx(style.paddingInlineEnd ?? style.paddingEnd),
-    paddingInlineStart: toPx(style.paddingInlineStart ?? style.paddingStart),
-
-    // Border widths
-    borderInlineStartWidth: toPx(style.borderStartWidth),
-    borderInlineEndWidth: toPx(style.borderEndWidth),
-    borderWidth: toPx(style.borderWidth),
-    borderTopWidth: toPx(style.borderTopWidth),
-    borderBottomWidth: toPx(style.borderBottomWidth),
-    borderLeftWidth: toPx(style.borderLeftWidth),
-    borderRightWidth: toPx(style.borderRightWidth),
-
-    // Border radius (physical)
-    borderRadius: toPx(style.borderRadius),
-    borderTopLeftRadius: toPx(style.borderTopLeftRadius),
-    borderTopRightRadius: toPx(style.borderTopRightRadius),
-    borderBottomLeftRadius: toPx(style.borderBottomLeftRadius),
-    borderBottomRightRadius: toPx(style.borderBottomRightRadius),
-
-    // Border radius (logical)
-    borderStartStartRadius: toPx(
-      style.borderStartStartRadius ?? style.borderTopStartRadius
-    ),
-    borderStartEndRadius: toPx(
-      style.borderStartEndRadius ?? style.borderTopEndRadius
-    ),
-    borderEndStartRadius: toPx(
-      style.borderEndStartRadius ?? style.borderBottomStartRadius
-    ),
-    borderEndEndRadius: toPx(
-      style.borderEndEndRadius ?? style.borderBottomEndRadius
-    ),
-
-    // Border colors
-    borderColor: toColor(style.borderColor),
-    borderBlockColor: toColor(style.borderBlockColor),
-    borderBlockEndColor: toColor(style.borderBlockEndColor),
-    borderBlockStartColor: toColor(style.borderBlockStartColor),
-    borderBottomColor: toColor(style.borderBottomColor),
-    borderInlineEndColor: toColor(style.borderEndColor),
-    borderLeftColor: toColor(style.borderLeftColor),
-    borderRightColor: toColor(style.borderRightColor),
-    borderInlineStartColor: toColor(style.borderStartColor),
-    borderTopColor: toColor(style.borderTopColor),
-    borderStyle:
-      style.borderStyle ??
-      (style.borderWidth != null ||
-      style.borderTopWidth != null ||
-      style.borderBottomWidth != null ||
-      style.borderLeftWidth != null ||
-      style.borderRightWidth != null ||
-      style.borderStartWidth != null ||
-      style.borderEndWidth != null ||
-      style.borderColor != null
-        ? 'solid'
-        : undefined),
-
-    // Typography
-    color: toColor(style.color),
-    fontFamily: style.fontFamily,
-    fontSize: toPx(style.fontSize),
-    fontStyle: style.fontStyle,
-    fontWeight: style.fontWeight,
-    lineHeight: toPx(style.lineHeight),
-    letterSpacing: toPx(style.letterSpacing),
-
-    // View appearance
-    backgroundColor: toColor(style.backgroundColor),
-    // boxShadow/filter: RN accepts arrays, CSS only strings
-    boxShadow:
-      typeof style.boxShadow === 'string' ? style.boxShadow : undefined,
-    display: style.display,
-    position: style.position,
-    alignSelf: style.alignSelf,
-    backfaceVisibility: style.backfaceVisibility,
-    cursor: style.cursor,
-    filter: typeof style.filter === 'string' ? style.filter : undefined,
-    mixBlendMode: style.mixBlendMode,
-    boxSizing: style.boxSizing,
-    // pointerEvents: RN 'box-none'/'box-only' have no CSS equivalent
-    pointerEvents:
-      style.pointerEvents === 'auto' || style.pointerEvents === 'none'
-        ? style.pointerEvents
-        : undefined,
-
-    // Outline
-    outlineColor: toColor(style.outlineColor),
-    outlineStyle:
-      style.outlineStyle ?? (style.outlineWidth != null ? 'solid' : undefined),
-    outlineOffset: toPx(style.outlineOffset),
-    outlineWidth: toPx(style.outlineWidth),
-
-    // Transforms
-    transform: resolveTransform(style.transform),
-    // transformOrigin: RN accepts strings or arrays, CSS only strings
-    transformOrigin:
-      typeof style.transformOrigin === 'string'
-        ? style.transformOrigin
-        : undefined,
-
-    // Flex
-    flex: style.flex,
-    flexGrow: style.flexGrow,
-    flexShrink: style.flexShrink,
-    flexBasis: toPx(style.flexBasis),
-
-    // Misc
-    zIndex: style.zIndex,
-    // opacity: RN AnimatableNumericValue includes AnimatedNode; CSS only number
-    opacity: typeof style.opacity === 'number' ? style.opacity : undefined,
-    aspectRatio: style.aspectRatio,
-
-    // Extra options
-    overflowY:
-      extraOptions.scrollEnabled != null
-        ? extraOptions.scrollEnabled
-          ? 'auto'
-          : 'hidden'
-        : undefined,
-  };
-
-  // Clean undefined values
-  return Object.fromEntries(
-    Object.entries(css).filter(([, v]) => v !== undefined)
-  );
-}
-
-function toPx(
-  value?: DimensionValue | AnimatableNumericValue | string
-): string | undefined {
-  if (value == null) return undefined;
-  if (typeof value === 'number') return `${value}px`;
-  if (typeof value === 'string') return value;
-  return undefined;
-}
-
-function resolveTransform(
-  transform: EnrichedInputStyle['transform']
-): string | undefined {
-  if (typeof transform === 'string') return transform;
-  if (!Array.isArray(transform)) return undefined;
-
-  const parts = transform.map((item) => {
-    if ('translateX' in item) return `translateX(${item.translateX}px)`;
-    if ('translateY' in item) return `translateY(${item.translateY}px)`;
-    if ('translateZ' in item) return `translateZ(${item.translateZ}px)`;
-    if ('scale' in item) return `scale(${item.scale})`;
-    if ('scaleX' in item) return `scaleX(${item.scaleX})`;
-    if ('scaleY' in item) return `scaleY(${item.scaleY})`;
-    if ('scaleZ' in item) return `scaleZ(${item.scaleZ})`;
-    if ('rotate' in item) return `rotate(${item.rotate})`;
-    if ('rotateX' in item) return `rotateX(${item.rotateX})`;
-    if ('rotateY' in item) return `rotateY(${item.rotateY})`;
-    if ('rotateZ' in item) return `rotateZ(${item.rotateZ})`;
-    if ('skewX' in item) return `skewX(${item.skewX})`;
-    if ('skewY' in item) return `skewY(${item.skewY})`;
-    if ('perspective' in item) return `perspective(${item.perspective}px)`;
-    if ('matrix' in item) {
-      return item.matrix.length === 16
-        ? `matrix3d(${item.matrix.join(', ')})`
-        : `matrix(${item.matrix.join(', ')})`;
-    }
-    return null;
-  });
-
-  const css = parts.filter(Boolean).join(' ');
-  return css || undefined;
+  return enrichedBaseStyleToCSSProperties(style, extraOptions);
 }
diff --git a/src/web/styleConversion/enrichedTextStyleToCSSProperties.ts b/src/web/styleConversion/enrichedTextStyleToCSSProperties.ts
new file mode 100644
index 00000000..87e0cf62
--- /dev/null
+++ b/src/web/styleConversion/enrichedTextStyleToCSSProperties.ts
@@ -0,0 +1,52 @@
+import type { CSSProperties } from 'react';
+import type { TextStyle } from 'react-native';
+import { enrichedBaseStyleToCSSProperties } from './enrichedBaseStyleToCSSProperties';
+import { toColor } from './toColor';
+
+export function enrichedTextStyleToCSSProperties(
+  style: TextStyle
+): CSSProperties {
+  const css: CSSProperties = {
+    ...enrichedBaseStyleToCSSProperties(style, { scrollEnabled: false }),
+
+    // Text-only properties
+    // textAlign: RN 'auto' has no CSS equivalent
+    textAlign: style.textAlign !== 'auto' ? style.textAlign : undefined,
+    textTransform: style.textTransform,
+    textDecorationLine: style.textDecorationLine,
+    textDecorationStyle: style.textDecorationStyle,
+    textDecorationColor: toColor(style.textDecorationColor),
+    textShadow: resolveTextShadow(style),
+    userSelect: style.userSelect,
+    fontVariant: Array.isArray(style.fontVariant)
+      ? style.fontVariant.join(' ')
+      : undefined,
+    // writingDirection: RN 'auto' has no CSS equivalent
+    direction:
+      style.writingDirection !== 'auto' ? style.writingDirection : undefined,
+    // verticalAlign: RN 'auto' has no CSS equivalent
+    verticalAlign:
+      style.verticalAlign !== 'auto' ? style.verticalAlign : undefined,
+  };
+
+  return Object.fromEntries(
+    Object.entries(css).filter(([, v]) => v !== undefined)
+  );
+}
+
+function resolveTextShadow(style: TextStyle): string | undefined {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+  if (
+    textShadowColor == null &&
+    textShadowOffset == null &&
+    textShadowRadius == null
+  ) {
+    return undefined;
+  }
+  const x = textShadowOffset?.width ?? 0;
+  const y = textShadowOffset?.height ?? 0;
+  const blur = textShadowRadius ?? 0;
+  const color = toColor(textShadowColor);
+  const offset = `${x}px ${y}px ${blur}px`;
+  return color ? `${offset} ${color}` : offset;
+}
diff --git a/src/web/styleConversion/enrichedInputThemingToCSSProperties.ts b/src/web/styleConversion/enrichedThemingToCSSProperties.ts
similarity index 77%
rename from src/web/styleConversion/enrichedInputThemingToCSSProperties.ts
rename to src/web/styleConversion/enrichedThemingToCSSProperties.ts
index 7ed8a32f..d4ca7bb7 100644
--- a/src/web/styleConversion/enrichedInputThemingToCSSProperties.ts
+++ b/src/web/styleConversion/enrichedThemingToCSSProperties.ts
@@ -4,8 +4,8 @@ import { toColor } from './toColor';
 
 type EnrichedInputThemingStyle = Partial<
   Pick<CSSProperties, 'caretColor'> & {
-    '--eti-placeholder-text-color': string;
-    '--eti-selection-color': string;
+    '--et-placeholder-text-color': string;
+    '--et-selection-color': string;
   }
 >;
 
@@ -25,10 +25,10 @@ export function enrichedInputThemingToCSSProperties({
   if (caret) extra.caretColor = caret;
 
   const placeholderCss = toColor(placeholderTextColor);
-  if (placeholderCss) extra['--eti-placeholder-text-color'] = placeholderCss;
+  if (placeholderCss) extra['--et-placeholder-text-color'] = placeholderCss;
 
   const selectionCss = toColor(selectionColor);
-  if (selectionCss) extra['--eti-selection-color'] = selectionCss;
+  if (selectionCss) extra['--et-selection-color'] = selectionCss;
 
   return extra;
 }
diff --git a/src/web/styleConversion/htmlStyleToCSSVariables.ts b/src/web/styleConversion/htmlStyleToCSSVariables.ts
index 199d1022..b78fbc9d 100644
--- a/src/web/styleConversion/htmlStyleToCSSVariables.ts
+++ b/src/web/styleConversion/htmlStyleToCSSVariables.ts
@@ -38,39 +38,39 @@ export function mergeWithDefaultHtmlStyle(
   return merged as Required<HtmlStyle>;
 }
 
-const ETI_CSS_VARS = {
-  codeColor: '--eti-code-color',
-  codeBgColor: '--eti-code-bg-color',
-  blockquoteBorderColor: '--eti-blockquote-border-color',
-  blockquoteBorderWidth: '--eti-blockquote-border-width',
-  blockquoteGapWidth: '--eti-blockquote-gap-width',
-  blockquoteColor: '--eti-blockquote-color',
-  codeblockBgColor: '--eti-codeblock-bg-color',
-  codeblockColor: '--eti-codeblock-color',
-  codeblockBorderRadius: '--eti-codeblock-border-radius',
-  linkColor: '--eti-link-color',
-  linkTextDecorationLine: '--eti-link-text-decoration-line',
-  ulBulletColor: '--eti-ul-bullet-color',
-  ulBulletSize: '--eti-ul-bullet-size',
-  ulMarginLeft: '--eti-ul-margin-left',
-  ulGapWidth: '--eti-ul-gap-width',
-  olMarginLeft: '--eti-ol-margin-left',
-  olGapWidth: '--eti-ol-gap-width',
-  olMarkerColor: '--eti-ol-marker-color',
-  olMarkerFontWeight: '--eti-ol-marker-font-weight',
-  checkboxBoxSize: '--eti-checkbox-box-size',
-  checkboxGapWidth: '--eti-checkbox-gap-width',
-  checkboxMarginLeft: '--eti-checkbox-margin-left',
-  checkboxBoxColor: '--eti-checkbox-box-color',
+const ET_CSS_VARS = {
+  codeColor: '--et-code-color',
+  codeBgColor: '--et-code-bg-color',
+  blockquoteBorderColor: '--et-blockquote-border-color',
+  blockquoteBorderWidth: '--et-blockquote-border-width',
+  blockquoteGapWidth: '--et-blockquote-gap-width',
+  blockquoteColor: '--et-blockquote-color',
+  codeblockBgColor: '--et-codeblock-bg-color',
+  codeblockColor: '--et-codeblock-color',
+  codeblockBorderRadius: '--et-codeblock-border-radius',
+  linkColor: '--et-link-color',
+  linkTextDecorationLine: '--et-link-text-decoration-line',
+  ulBulletColor: '--et-ul-bullet-color',
+  ulBulletSize: '--et-ul-bullet-size',
+  ulMarginLeft: '--et-ul-margin-left',
+  ulGapWidth: '--et-ul-gap-width',
+  olMarginLeft: '--et-ol-margin-left',
+  olGapWidth: '--et-ol-gap-width',
+  olMarkerColor: '--et-ol-marker-color',
+  olMarkerFontWeight: '--et-ol-marker-font-weight',
+  checkboxBoxSize: '--et-checkbox-box-size',
+  checkboxGapWidth: '--et-checkbox-gap-width',
+  checkboxMarginLeft: '--et-checkbox-margin-left',
+  checkboxBoxColor: '--et-checkbox-box-color',
 } as const;
 
-export const ETI_MENTION_CSS_VARS = {
+export const ET_MENTION_CSS_VARS = {
   color: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-color`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-color`,
   backgroundColor: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
   textDecorationLine: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-text-decoration-line`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-text-decoration-line`,
 } as const;
 
 function setColorVar(
@@ -94,8 +94,8 @@ function applyCodeVars(
   vars: Record<string, string>,
   code?: HtmlStyle['code']
 ): void {
-  setColorVar(vars, ETI_CSS_VARS.codeColor, code?.color);
-  setColorVar(vars, ETI_CSS_VARS.codeBgColor, code?.backgroundColor);
+  setColorVar(vars, ET_CSS_VARS.codeColor, code?.color);
+  setColorVar(vars, ET_CSS_VARS.codeBgColor, code?.backgroundColor);
 }
 
 function applyHeadingVars(
@@ -105,9 +105,9 @@ function applyHeadingVars(
   for (const level of HEADING_TAGS) {
     const h = htmlStyle?.[level];
     if (h?.fontSize != null)
-      vars[`--eti-${level}-font-size`] = `${h.fontSize}px`;
+      vars[`--et-${level}-font-size`] = `${h.fontSize}px`;
     if (h?.bold != null)
-      vars[`--eti-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
+      vars[`--et-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
   }
 }
 
@@ -115,28 +115,28 @@ function applyBlockquoteVars(
   vars: Record<string, string>,
   bq?: HtmlStyle['blockquote']
 ): void {
-  setColorVar(vars, ETI_CSS_VARS.blockquoteBorderColor, bq?.borderColor);
-  setPxVar(vars, ETI_CSS_VARS.blockquoteBorderWidth, bq?.borderWidth);
-  setPxVar(vars, ETI_CSS_VARS.blockquoteGapWidth, bq?.gapWidth);
-  setColorVar(vars, ETI_CSS_VARS.blockquoteColor, bq?.color);
+  setColorVar(vars, ET_CSS_VARS.blockquoteBorderColor, bq?.borderColor);
+  setPxVar(vars, ET_CSS_VARS.blockquoteBorderWidth, bq?.borderWidth);
+  setPxVar(vars, ET_CSS_VARS.blockquoteGapWidth, bq?.gapWidth);
+  setColorVar(vars, ET_CSS_VARS.blockquoteColor, bq?.color);
 }
 
 function applyCodeblockVars(
   vars: Record<string, string>,
   cb?: HtmlStyle['codeblock']
 ): void {
-  setColorVar(vars, ETI_CSS_VARS.codeblockBgColor, cb?.backgroundColor);
-  setColorVar(vars, ETI_CSS_VARS.codeblockColor, cb?.color);
-  setPxVar(vars, ETI_CSS_VARS.codeblockBorderRadius, cb?.borderRadius);
+  setColorVar(vars, ET_CSS_VARS.codeblockBgColor, cb?.backgroundColor);
+  setColorVar(vars, ET_CSS_VARS.codeblockColor, cb?.color);
+  setPxVar(vars, ET_CSS_VARS.codeblockBorderRadius, cb?.borderRadius);
 }
 
 function applyLinkVars(
   vars: Record<string, string>,
   anchor?: HtmlStyle['a']
 ): void {
-  setColorVar(vars, ETI_CSS_VARS.linkColor, anchor?.color);
+  setColorVar(vars, ET_CSS_VARS.linkColor, anchor?.color);
   if (anchor?.textDecorationLine != null) {
-    vars[ETI_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
+    vars[ET_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
   }
 }
 
@@ -144,21 +144,21 @@ function applyUnorderedListVars(
   vars: Record<string, string>,
   ul?: HtmlStyle['ul']
 ): void {
-  setColorVar(vars, ETI_CSS_VARS.ulBulletColor, ul?.bulletColor);
-  setPxVar(vars, ETI_CSS_VARS.ulBulletSize, ul?.bulletSize);
-  setPxVar(vars, ETI_CSS_VARS.ulMarginLeft, ul?.marginLeft);
-  setPxVar(vars, ETI_CSS_VARS.ulGapWidth, ul?.gapWidth);
+  setColorVar(vars, ET_CSS_VARS.ulBulletColor, ul?.bulletColor);
+  setPxVar(vars, ET_CSS_VARS.ulBulletSize, ul?.bulletSize);
+  setPxVar(vars, ET_CSS_VARS.ulMarginLeft, ul?.marginLeft);
+  setPxVar(vars, ET_CSS_VARS.ulGapWidth, ul?.gapWidth);
 }
 
 function applyOrderedListVars(
   vars: Record<string, string>,
   ol?: HtmlStyle['ol']
 ): void {
-  setPxVar(vars, ETI_CSS_VARS.olMarginLeft, ol?.marginLeft);
-  setPxVar(vars, ETI_CSS_VARS.olGapWidth, ol?.gapWidth);
-  setColorVar(vars, ETI_CSS_VARS.olMarkerColor, ol?.markerColor);
+  setPxVar(vars, ET_CSS_VARS.olMarginLeft, ol?.marginLeft);
+  setPxVar(vars, ET_CSS_VARS.olGapWidth, ol?.gapWidth);
+  setColorVar(vars, ET_CSS_VARS.olMarkerColor, ol?.markerColor);
   if (ol?.markerFontWeight != null) {
-    vars[ETI_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
+    vars[ET_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
   }
 }
 
@@ -166,10 +166,10 @@ function applyCheckboxListVars(
   vars: Record<string, string>,
   ulCheckbox?: HtmlStyle['ulCheckbox']
 ): void {
-  setPxVar(vars, ETI_CSS_VARS.checkboxBoxSize, ulCheckbox?.boxSize);
-  setPxVar(vars, ETI_CSS_VARS.checkboxGapWidth, ulCheckbox?.gapWidth);
-  setPxVar(vars, ETI_CSS_VARS.checkboxMarginLeft, ulCheckbox?.marginLeft);
-  setColorVar(vars, ETI_CSS_VARS.checkboxBoxColor, ulCheckbox?.boxColor);
+  setPxVar(vars, ET_CSS_VARS.checkboxBoxSize, ulCheckbox?.boxSize);
+  setPxVar(vars, ET_CSS_VARS.checkboxGapWidth, ulCheckbox?.gapWidth);
+  setPxVar(vars, ET_CSS_VARS.checkboxMarginLeft, ulCheckbox?.marginLeft);
+  setColorVar(vars, ET_CSS_VARS.checkboxBoxColor, ulCheckbox?.boxColor);
 }
 
 function applyMentionVars(
@@ -177,18 +177,14 @@ function applyMentionVars(
   mention: Record<string, MentionStyleProperties>
 ): void {
   for (const [indicator, mentionStyle] of Object.entries(mention)) {
+    setColorVar(vars, ET_MENTION_CSS_VARS.color(indicator), mentionStyle.color);
     setColorVar(
       vars,
-      ETI_MENTION_CSS_VARS.color(indicator),
-      mentionStyle.color
-    );
-    setColorVar(
-      vars,
-      ETI_MENTION_CSS_VARS.backgroundColor(indicator),
+      ET_MENTION_CSS_VARS.backgroundColor(indicator),
       mentionStyle.backgroundColor
     );
     if (mentionStyle.textDecorationLine != null) {
-      vars[ETI_MENTION_CSS_VARS.textDecorationLine(indicator)] =
+      vars[ET_MENTION_CSS_VARS.textDecorationLine(indicator)] =
         mentionStyle.textDecorationLine;
     }
   }
diff --git a/src/web/styleConversion/inlineImageCSSVariables.ts b/src/web/styleConversion/inlineImageCSSVariables.ts
new file mode 100644
index 00000000..1f6e1962
--- /dev/null
+++ b/src/web/styleConversion/inlineImageCSSVariables.ts
@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+import { BROKEN_IMAGE_GLYPH_MASK } from '../constants/brokenImageGlyph';
+
+export const INLINE_IMAGE_CSS_VARIABLES = {
+  '--et-broken-image-glyph': BROKEN_IMAGE_GLYPH_MASK,
+} as CSSProperties;
diff --git a/src/web/useImageErrorFallback.ts b/src/web/useImageErrorFallback.ts
new file mode 100644
index 00000000..2d8d71fc
--- /dev/null
+++ b/src/web/useImageErrorFallback.ts
@@ -0,0 +1,31 @@
+import { useEffect, type RefObject } from 'react';
+
+/*
+ * Flag images that fail to load so CSS can swap in a broken-image placeholder.
+ */
+export const useImageErrorFallback = (
+  containerRef: RefObject<HTMLElement | null>,
+  html: string
+) => {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const images = container.querySelectorAll<HTMLImageElement>('img');
+    const cleanups: (() => void)[] = [];
+
+    images.forEach((img) => {
+      const handleImageError = () => img.classList.add('error');
+
+      img.addEventListener('error', handleImageError);
+      cleanups.push(() => img.removeEventListener('error', handleImageError));
+
+      // Catch images that already failed before the listener attached
+      if (img.complete && img.naturalHeight === 0) {
+        handleImageError();
+      }
+    });
+
+    return () => cleanups.forEach((cleanup) => cleanup());
+  }, [containerRef, html]);
+};
diff --git a/yarn.lock b/yarn.lock
index 3422547d..400f38f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4548,6 +4548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/use-sync-external-store@npm:^0.0.6":
   version: 0.0.6
   resolution: "@types/use-sync-external-store@npm:0.0.6"
@@ -6909,6 +6916,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^3.4.11":
+  version: 3.4.11
+  resolution: "dompurify@npm:3.4.11"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/31439481c7e8fc3805d40c376936fd66936620fb1b1a31a2ec097f6165412c37f2d868e082c9ceba62bb37661c1ea132a5db4d5213434317e30df68d4aca9cc9
+  languageName: node
+  linkType: hard
+
 "dot-prop@npm:^5.1.0":
   version: 5.3.0
   resolution: "dot-prop@npm:5.3.0"
@@ -12881,6 +12900,7 @@ __metadata:
     clang-format: "npm:^1.8.0"
     commitlint: "npm:^19.6.1"
     del-cli: "npm:^5.1.0"
+    dompurify: "npm:^3.4.11"
     eslint: "npm:^9.22.0"
     eslint-config-prettier: "npm:^10.1.1"
     eslint-plugin-prettier: "npm:^5.2.3"