react-native-streamdown 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Software Mansion
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,140 @@
+# react-native-streamdown
+
+> This project is not affiliated with, endorsed by, or sponsored by Vercel.
+
+A streaming-ready markdown component for React Native built on top of [`react-native-enriched-markdown`](https://github.com/software-mansion-labs/react-native-enriched-markdown) and [`remend`](https://www.npmjs.com/package/remend).
+
+It processes raw, incomplete markdown (as it streams token-by-token from an LLM) in the background using [`react-native-worklets`](https://docs.swmansion.com/react-native-worklets/docs/) powerful concurrency feature - the Bundle Mode - keeping the JS thread free at all times.
+
+## Features
+
+- Renders incomplete streaming markdown correctly — no visual glitches mid-stream
+- Background thread processing via `react-native-worklets` Bundle Mode
+- Inline LaTeX support (`$...$`) with streaming completion — applied automatically, no configuration needed (we've also opened a [PR to add this directly to remend](https://github.com/vercel/streamdown/pull/446))
+- CommonMark rendering (headers, bold, italic, inline code, fenced code blocks, links, images) powered by `react-native-enriched-markdown` with built-in `streamingAnimation`
+- Customizable via `remendConfig`
+
+---
+
+## Installation
+
+```sh
+yarn add react-native-streamdown
+```
+
+### Peer dependencies
+
+```sh
+yarn add react-native-enriched-markdown react-native-worklets remend
+```
+
+| Package                          | Version                       |
+| -------------------------------- | ----------------------------- |
+| `react-native-enriched-markdown` | `0.4.0`                       |
+| `react-native-worklets`          | `0.8.0-bundle-mode-preview-2` |
+| `remend`                         | `1.2.2`                       |
+
+---
+
+## Required setup — Bundle Mode
+
+`react-native-streamdown` runs markdown processing on a worklet thread using **Bundle Mode** from `react-native-worklets`. This requires extra configuration steps from the [official Bundle Mode setup guide](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/setup/). Make sure to complete these steps before continuing. For a real-world reference of an app configured with Bundle Mode, check out the [Bundle Mode Showcase App](https://github.com/software-mansion-labs/Bundle-Mode-showcase-app).
+
+### 1. `babel.config.js` — configure Worklets Babel plugin
+
+`react-native-streamdown` requires special options to be added to the Worklets Babel plugin config in `babel.config.js`:
+
+```js
+const workletsPluginOptions = {
+  bundleMode: true,
+  // other options...
+  workletizableModules: ['remend'], // add this line
+};
+```
+
+`workletizableModules: ['remend']` tells the Babel plugin to pre-bundle `remend` for the worklet runtime so it can be called off the JS thread.
+
+### 2. `metro.config.js` — configure Metro for monorepos
+
+`react-native-worklets` Bundle Mode generates files on the fly that might not be tracked by Metro in some monorepo setups. It might also shadow your resolving function. If you're running into issues with module resolution, you need to add the following to your `metro.config.js`:
+
+```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { bundleModeMetroConfig } = require('react-native-worklets/bundleMode');
+
+let config = getDefaultConfig(__dirname);
+
+// Watch the .worklets/ output directory
+config.watchFolders.push(
+  require('path').resolve(
+    __dirname,
+    'node_modules/react-native-worklets/.worklets'
+  )
+);
+
+// Resolve react-native-worklets/.worklets/* via the Bundle Mode resolver
+const defaultResolver = config.resolver.resolveRequest;
+
+config = mergeConfig(config, bundleModeMetroConfig);
+
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName.startsWith('react-native-worklets/.worklets/')) {
+    return bundleModeMetroConfig.resolver.resolveRequest(
+      context,
+      moduleName,
+      platform
+    );
+  }
+  return defaultResolver(context, moduleName, platform);
+};
+
+module.exports = config;
+```
+
+---
+
+## Usage
+
+```tsx
+import { StreamdownText } from 'react-native-streamdown';
+
+// markdown can be updated token-by-token as the LLM streams
+<StreamdownText markdown={partialMarkdown} />;
+```
+
+### Props
+
+`StreamdownText` accepts all props from `EnrichedMarkdownText` (except `flavor`, which is hardcoded to `commonmark`) plus one additional prop:
+
+| Prop           | Type            | Description                                                                                                                                 |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `remendConfig` | `RemendOptions` | Optional. Override the default remend processing config. See [remend docs](https://www.npmjs.com/package/remend) for all available options. |
+
+---
+
+## Example app
+
+The `example/` directory in this repository contains a fully working demo app that shows:
+
+- **Streaming Markdown Simulator** — streams a sample markdown document token-by-token to demonstrate rendering quality and the `streamingAnimation` effect
+- **LLM Streaming Demo** — connects to the OpenAI Chat Completions API via SSE and renders the response live using `StreamdownText`
+
+It is a practical reference for the full Bundle Mode setup (Babel, Metro, `package.json` flags) and for how to wire `StreamdownText` into a real streaming UI.
+
+---
+
+## Limitations
+
+- **CommonMark only** — `StreamdownText` currently renders using the `commonmark` flavour of `react-native-enriched-markdown`. GitHub Flavored Markdown (GFM) support is planned for a future release.
+
+---
+
+Built by [Software Mansion](https://swmansion.com/).
+
+[<img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />](https://swmansion.com/)
+
+---
+
+## License
+
+MIT

package/lib/module/StreamdownText.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+import { useStreamdownMarkdown } from "./hooks/useStreamdownMarkdown.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Streaming-ready markdown component.
+ *
+ * Processes markdown through remend on a worklet thread,
+ * then renders via EnrichedMarkdownText.
+ */
+export function StreamdownText({
+  markdown,
+  remendConfig,
+  selectable = true,
+  ...enrichedMarkdownProps
+}) {
+  const {
+    processedMarkdown,
+    isStreaming
+  } = useStreamdownMarkdown(markdown, {
+    remendConfig
+  });
+  return /*#__PURE__*/_jsx(EnrichedMarkdownText, {
+    flavor: "commonmark",
+    markdown: processedMarkdown,
+    streamingAnimation: true,
+    selectable: !isStreaming && selectable,
+    ...enrichedMarkdownProps
+  });
+}
+//# sourceMappingURL=StreamdownText.js.map

package/lib/module/StreamdownText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["EnrichedMarkdownText","useStreamdownMarkdown","jsx","_jsx","StreamdownText","markdown","remendConfig","selectable","enrichedMarkdownProps","processedMarkdown","isStreaming","flavor","streamingAnimation"],"sourceRoot":"../../src","sources":["StreamdownText.tsx"],"mappings":";;AAAA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,QAAQ,kCAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,QAAQ;EACRC,YAAY;EACZC,UAAU,GAAG,IAAI;EACjB,GAAGC;AACgB,CAAC,EAAE;EACtB,MAAM;IAAEC,iBAAiB;IAAEC;EAAY,CAAC,GAAGT,qBAAqB,CAACI,QAAQ,EAAE;IACzEC;EACF,CAAC,CAAC;EAEF,oBACEH,IAAA,CAACH,oBAAoB;IACnBW,MAAM,EAAC,YAAY;IACnBN,QAAQ,EAAEI,iBAAkB;IAC5BG,kBAAkB;IAClBL,UAAU,EAAE,CAACG,WAAW,IAAIH,UAAW;IAAA,GACnCC;EAAqB,CAC1B,CAAC;AAEN","ignoreList":[]}

package/lib/module/hooks/useStreamdownMarkdown.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useState, useEffect, useRef } from 'react';
+import { processRemendInWorklet } from "../worklets/remendWorklet.js";
+export function useStreamdownMarkdown(markdown, options) {
+  const [processedMarkdown, setProcessedMarkdown] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const versionRef = useRef(0);
+  useEffect(() => {
+    if (markdown === '') {
+      setProcessedMarkdown('');
+      setIsStreaming(false);
+      return;
+    }
+    setIsStreaming(true);
+    const currentVersion = ++versionRef.current;
+    processRemendInWorklet(markdown, result => {
+      if (currentVersion === versionRef.current) {
+        setProcessedMarkdown(result);
+        setIsStreaming(false);
+      }
+    }, options?.remendConfig);
+  }, [markdown, options?.remendConfig]);
+  return {
+    processedMarkdown,
+    isStreaming
+  };
+}
+//# sourceMappingURL=useStreamdownMarkdown.js.map

package/lib/module/hooks/useStreamdownMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useEffect","useRef","processRemendInWorklet","useStreamdownMarkdown","markdown","options","processedMarkdown","setProcessedMarkdown","isStreaming","setIsStreaming","versionRef","currentVersion","current","result","remendConfig"],"sourceRoot":"../../../src","sources":["hooks/useStreamdownMarkdown.ts"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnD,SAASC,sBAAsB,QAAQ,8BAA2B;AAYlE,OAAO,SAASC,qBAAqBA,CACnCC,QAAgB,EAChBC,OAAsC,EACT;EAC7B,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGR,QAAQ,CAAC,EAAE,CAAC;EAC9D,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAGV,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAMW,UAAU,GAAGT,MAAM,CAAC,CAAC,CAAC;EAE5BD,SAAS,CAAC,MAAM;IACd,IAAII,QAAQ,KAAK,EAAE,EAAE;MACnBG,oBAAoB,CAAC,EAAE,CAAC;MACxBE,cAAc,CAAC,KAAK,CAAC;MACrB;IACF;IAEAA,cAAc,CAAC,IAAI,CAAC;IACpB,MAAME,cAAc,GAAG,EAAED,UAAU,CAACE,OAAO;IAE3CV,sBAAsB,CACpBE,QAAQ,EACPS,MAAM,IAAK;MACV,IAAIF,cAAc,KAAKD,UAAU,CAACE,OAAO,EAAE;QACzCL,oBAAoB,CAACM,MAAM,CAAC;QAC5BJ,cAAc,CAAC,KAAK,CAAC;MACvB;IACF,CAAC,EACDJ,OAAO,EAAES,YACX,CAAC;EACH,CAAC,EAAE,CAACV,QAAQ,EAAEC,OAAO,EAAES,YAAY,CAAC,CAAC;EAErC,OAAO;IAAER,iBAAiB;IAAEE;EAAY,CAAC;AAC3C","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { StreamdownText } from "./StreamdownText.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StreamdownText"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/worklets/remendWorklet.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { createWorkletRuntime, scheduleOnRuntime, scheduleOnRN } from 'react-native-worklets';
+import remend from 'remend';
+const defaultRemendConfig = {
+  bold: true,
+  italic: true,
+  boldItalic: true,
+  strikethrough: true,
+  links: true,
+  linkMode: 'text-only',
+  images: true,
+  inlineCode: true,
+  katex: false,
+  setextHeadings: true
+};
+const remendRuntime = createWorkletRuntime('remend-processor');
+export function processRemendInWorklet(markdown, onComplete, config) {
+  const mergedConfig = config ? {
+    ...defaultRemendConfig,
+    ...config
+  } : defaultRemendConfig;
+  scheduleOnRuntime(remendRuntime, () => {
+    'worklet';
+
+    const result = remend(markdown, mergedConfig);
+    scheduleOnRN(onComplete, result);
+  });
+}
+//# sourceMappingURL=remendWorklet.js.map

package/lib/module/worklets/remendWorklet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createWorkletRuntime","scheduleOnRuntime","scheduleOnRN","remend","defaultRemendConfig","bold","italic","boldItalic","strikethrough","links","linkMode","images","inlineCode","katex","setextHeadings","remendRuntime","processRemendInWorklet","markdown","onComplete","config","mergedConfig","result"],"sourceRoot":"../../../src","sources":["worklets/remendWorklet.ts"],"mappings":";;AAAA,SACEA,oBAAoB,EACpBC,iBAAiB,EACjBC,YAAY,QACP,uBAAuB;AAC9B,OAAOC,MAAM,MAAM,QAAQ;AAG3B,MAAMC,mBAAkC,GAAG;EACzCC,IAAI,EAAE,IAAI;EACVC,MAAM,EAAE,IAAI;EACZC,UAAU,EAAE,IAAI;EAChBC,aAAa,EAAE,IAAI;EACnBC,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAE,WAAW;EACrBC,MAAM,EAAE,IAAI;EACZC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,KAAK;EACZC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,aAAa,GAAGf,oBAAoB,CAAC,kBAAkB,CAAC;AAE9D,OAAO,SAASgB,sBAAsBA,CACpCC,QAAgB,EAChBC,UAAoC,EACpCC,MAAsB,EACtB;EACA,MAAMC,YAAY,GAAGD,MAAM,GACvB;IAAE,GAAGf,mBAAmB;IAAE,GAAGe;EAAO,CAAC,GACrCf,mBAAmB;EAEvBH,iBAAiB,CAACc,aAAa,EAAE,MAAM;IACrC,SAAS;;IACT,MAAMM,MAAM,GAAGlB,MAAM,CAACc,QAAQ,EAAEG,YAAY,CAAC;IAC7ClB,YAAY,CAACgB,UAAU,EAAEG,MAAM,CAAC;EAClC,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/StreamdownText.d.ts

@@ -0,0 +1,9 @@
+import type { StreamdownTextProps } from './types';
+/**
+ * Streaming-ready markdown component.
+ *
+ * Processes markdown through remend on a worklet thread,
+ * then renders via EnrichedMarkdownText.
+ */
+export declare function StreamdownText({ markdown, remendConfig, selectable, ...enrichedMarkdownProps }: StreamdownTextProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StreamdownText.d.ts.map

package/lib/typescript/src/StreamdownText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamdownText.d.ts","sourceRoot":"","sources":["../../../src/StreamdownText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,YAAY,EACZ,UAAiB,EACjB,GAAG,qBAAqB,EACzB,EAAE,mBAAmB,2CAcrB"}

package/lib/typescript/src/hooks/useStreamdownMarkdown.d.ts

@@ -0,0 +1,11 @@
+import type { RemendOptions } from 'remend';
+interface UseStreamdownMarkdownOptions {
+    remendConfig?: RemendOptions;
+}
+interface UseStreamdownMarkdownResult {
+    processedMarkdown: string;
+    isStreaming: boolean;
+}
+export declare function useStreamdownMarkdown(markdown: string, options?: UseStreamdownMarkdownOptions): UseStreamdownMarkdownResult;
+export {};
+//# sourceMappingURL=useStreamdownMarkdown.d.ts.map

package/lib/typescript/src/hooks/useStreamdownMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamdownMarkdown.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStreamdownMarkdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,UAAU,2BAA2B;IACnC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,4BAA4B,GACrC,2BAA2B,CA4B7B"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,4 @@
+export { StreamdownText } from './StreamdownText';
+export type { StreamdownTextProps } from './types';
+export type { RemendOptions } from 'remend';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,9 @@
+import type { EnrichedMarkdownTextProps } from 'react-native-enriched-markdown';
+import type { RemendOptions } from 'remend';
+export interface StreamdownTextProps extends Omit<EnrichedMarkdownTextProps, 'flavor'> {
+    /**
+     * Optional custom remend configuration.
+     */
+    remendConfig?: RemendOptions;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B"}

package/lib/typescript/src/worklets/remendWorklet.d.ts

@@ -0,0 +1,3 @@
+import type { RemendOptions } from 'remend';
+export declare function processRemendInWorklet(markdown: string, onComplete: (result: string) => void, config?: RemendOptions): void;
+//# sourceMappingURL=remendWorklet.d.ts.map

package/lib/typescript/src/worklets/remendWorklet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remendWorklet.d.ts","sourceRoot":"","sources":["../../../../src/worklets/remendWorklet.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAiB5C,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,EACpC,MAAM,CAAC,EAAE,aAAa,QAWvB"}

package/package.json

@@ -1,4 +1,172 @@
 {
   "name": "react-native-streamdown",
-  "version": "0.0.0"
+  "version": "0.1.0",
+  "description": "Markdown Streaming ",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-streamdown-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hryhoriiK97/react-native-streamdown.git"
+  },
+  "author": "Gregory Moskaliuk <mosckalyuck@gmail.com> (https://github.com/hryhoriiK97)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hryhoriiK97/react-native-streamdown/issues"
+  },
+  "homepage": "https://github.com/hryhoriiK97/react-native-streamdown#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.18",
+    "react-native-enriched-markdown": "0.4.0",
+    "react-native-sse": "1.2.1",
+    "react-native-worklets": "0.8.0-bundle-mode-preview-2",
+    "release-it": "^19.0.4",
+    "remend": "1.2.2",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-enriched-markdown": "0.4.0",
+    "react-native-worklets": "0.8.0-bundle-mode-preview-2",
+    "remend": "1.2.2"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "resolutions": {
+    "metro": "patch:metro@npm%3A0.83.2#~/.yarn/patches/metro-npm-0.83.2-d09f48ca84.patch",
+    "metro-runtime": "patch:metro-runtime@npm%3A0.83.2#~/.yarn/patches/metro-runtime-npm-0.83.2-c614bbd3b9.patch"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
+  }
 }

package/src/StreamdownText.tsx

@@ -0,0 +1,30 @@
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+import { useStreamdownMarkdown } from './hooks/useStreamdownMarkdown';
+import type { StreamdownTextProps } from './types';
+
+/**
+ * Streaming-ready markdown component.
+ *
+ * Processes markdown through remend on a worklet thread,
+ * then renders via EnrichedMarkdownText.
+ */
+export function StreamdownText({
+  markdown,
+  remendConfig,
+  selectable = true,
+  ...enrichedMarkdownProps
+}: StreamdownTextProps) {
+  const { processedMarkdown, isStreaming } = useStreamdownMarkdown(markdown, {
+    remendConfig,
+  });
+
+  return (
+    <EnrichedMarkdownText
+      flavor="commonmark"
+      markdown={processedMarkdown}
+      streamingAnimation
+      selectable={!isStreaming && selectable}
+      {...enrichedMarkdownProps}
+    />
+  );
+}

package/src/hooks/useStreamdownMarkdown.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect, useRef } from 'react';
+import { processRemendInWorklet } from '../worklets/remendWorklet';
+import type { RemendOptions } from 'remend';
+
+interface UseStreamdownMarkdownOptions {
+  remendConfig?: RemendOptions;
+}
+
+interface UseStreamdownMarkdownResult {
+  processedMarkdown: string;
+  isStreaming: boolean;
+}
+
+export function useStreamdownMarkdown(
+  markdown: string,
+  options?: UseStreamdownMarkdownOptions
+): UseStreamdownMarkdownResult {
+  const [processedMarkdown, setProcessedMarkdown] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const versionRef = useRef(0);
+
+  useEffect(() => {
+    if (markdown === '') {
+      setProcessedMarkdown('');
+      setIsStreaming(false);
+      return;
+    }
+
+    setIsStreaming(true);
+    const currentVersion = ++versionRef.current;
+
+    processRemendInWorklet(
+      markdown,
+      (result) => {
+        if (currentVersion === versionRef.current) {
+          setProcessedMarkdown(result);
+          setIsStreaming(false);
+        }
+      },
+      options?.remendConfig
+    );
+  }, [markdown, options?.remendConfig]);
+
+  return { processedMarkdown, isStreaming };
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+export { StreamdownText } from './StreamdownText';
+
+export type { StreamdownTextProps } from './types';
+export type { RemendOptions } from 'remend';

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { EnrichedMarkdownTextProps } from 'react-native-enriched-markdown';
+import type { RemendOptions } from 'remend';
+
+export interface StreamdownTextProps
+  extends Omit<EnrichedMarkdownTextProps, 'flavor'> {
+  /**
+   * Optional custom remend configuration.
+   */
+  remendConfig?: RemendOptions;
+}

package/src/worklets/remendWorklet.ts

@@ -0,0 +1,38 @@
+import {
+  createWorkletRuntime,
+  scheduleOnRuntime,
+  scheduleOnRN,
+} from 'react-native-worklets';
+import remend from 'remend';
+import type { RemendOptions } from 'remend';
+
+const defaultRemendConfig: RemendOptions = {
+  bold: true,
+  italic: true,
+  boldItalic: true,
+  strikethrough: true,
+  links: true,
+  linkMode: 'text-only',
+  images: true,
+  inlineCode: true,
+  katex: false,
+  setextHeadings: true,
+};
+
+const remendRuntime = createWorkletRuntime('remend-processor');
+
+export function processRemendInWorklet(
+  markdown: string,
+  onComplete: (result: string) => void,
+  config?: RemendOptions
+) {
+  const mergedConfig = config
+    ? { ...defaultRemendConfig, ...config }
+    : defaultRemendConfig;
+
+  scheduleOnRuntime(remendRuntime, () => {
+    'worklet';
+    const result = remend(markdown, mergedConfig);
+    scheduleOnRN(onComplete, result);
+  });
+}