Merge pull request #1 from software-mansion-labs/feat/initial-streamdown-implementation

feat: implement StreamdownText with worklet-based markdown processing

Author: hryhoriiK97

.github/workflows/ci.yml

@@ -56,17 +56,3 @@ jobs:
 
       - name: Build package
         run: yarn prepare
-
-  build-web:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web

.yarn/patches/metro-npm-0.83.2-d09f48ca84.patch

@@ -0,0 +1,19 @@
+diff --git a/src/node-haste/DependencyGraph.js b/src/node-haste/DependencyGraph.js
+index bd42485a8a6647757c0f5b2f2c4a5e659125fcdd..417de6c997067b4b1c686c35fe5007ba199b3897 100644
+--- a/src/node-haste/DependencyGraph.js
++++ b/src/node-haste/DependencyGraph.js
+@@ -186,6 +186,14 @@ class DependencyGraph extends _events.default {
+     return (0, _nullthrows.default)(this._fileSystem).getAllFiles();
+   }
+   async getOrComputeSha1(mixedPath) {
++    if (mixedPath.includes("react-native-worklets/.worklets/")) {
++      const createHash = require("crypto").createHash;
++      return {
++        sha1: createHash("sha1")
++          .update(performance.now().toString())
++          .digest("hex"),
++      };
++    }
+     const result = await this._fileSystem.getOrComputeSha1(mixedPath);
+     if (!result || !result.sha1) {
+       throw new Error(`Failed to get the SHA-1 for: ${mixedPath}.

.yarn/patches/metro-runtime-npm-0.83.2-c614bbd3b9.patch

@@ -0,0 +1,36 @@
+diff --git a/src/modules/HMRClient.js b/src/modules/HMRClient.js
+index 3e2652d7a43ff0d2ab3ad7556ecf79f88f7a6edb..47de354ddfd3858187048e84b5a62b412a28c640 100644
+--- a/src/modules/HMRClient.js
++++ b/src/modules/HMRClient.js
+@@ -2,6 +2,9 @@
+ 
+ const EventEmitter = require("./vendor/eventemitter3");
+ const inject = ({ module: [id, code], sourceURL }) => {
++  if (global.__workletsModuleProxy?.propagateModuleUpdate) {
++    global.__workletsModuleProxy.propagateModuleUpdate(code, sourceURL);
++  }
+   if (global.globalEvalWithSourceUrl) {
+     global.globalEvalWithSourceUrl(code, sourceURL);
+   } else {
+diff --git a/src/polyfills/require.js b/src/polyfills/require.js
+index 367cabb90c6e016dc024d4f7fadfee6c3a52ca32..c6399316700b0295441a42ba19d29b171e54015b 100644
+--- a/src/polyfills/require.js
++++ b/src/polyfills/require.js
+@@ -334,14 +334,14 @@ function unknownModuleError(id) {
+   }
+   return Error(message);
+ }
++metroRequire.getModules = () => {
++  return modules;
++};
+ if (__DEV__) {
+   metroRequire.Systrace = {
+     beginEvent: () => {},
+     endEvent: () => {},
+   };
+-  metroRequire.getModules = () => {
+-    return modules;
+-  };
+   var createHotReloadingObject = function () {
+     const hot = {
+       _acceptCallback: null,

CONTRIBUTING.md

@@ -53,12 +53,6 @@ Running "StreamdownExample" with {"fabric":true,"initialProps":{"concurrentRoot"
 
 Note the `"fabric":true` and `"concurrentRoot":true` properties.
 
-To run the example app on Web:
-
-```sh
-yarn example web
-```
-
 Make sure your code passes TypeScript:
 
 ```sh

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Gregory Moskaliuk
+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

README.md

@@ -1,37 +1,138 @@
 # react-native-streamdown
 
-Markdown Streaming 
+A streaming-ready markdown component for React Native built on top of [`react-native-enriched-markdown`](https://github.com/Expensify/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
-npm install react-native-streamdown
+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`                       |
 
-## Usage
+---
+
+## 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
-import { multiply } from 'react-native-streamdown';
+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`:
 
-const result = await multiply(3, 7);
+```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;
 ```
 
+---
 
-## Contributing
+## Usage
 
-- [Development workflow](CONTRIBUTING.md#development-workflow)
-- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
-- [Code of conduct](CODE_OF_CONDUCT.md)
+```tsx
+import { StreamdownText } from 'react-native-streamdown';
 
-## License
+// rawMarkdown can be updated token-by-token as the LLM streams
+<StreamdownText rawMarkdown={partialMarkdown} />;
+```
 
-MIT
+### 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/)
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+## License
+
+MIT

example/babel.config.js

@@ -4,9 +4,16 @@ const pkg = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
 
+const workletsPluginOptions = {
+  bundleMode: true,
+  strictGlobal: true,
+  workletizableModules: ['remend'],
+};
+
 module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
+    plugins: [['react-native-worklets/plugin', workletsPluginOptions]],
   },
   { root, pkg }
 );

example/index.js

@@ -1,5 +1,14 @@
 import { AppRegistry } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import App from './src/App';
 import { name as appName } from './app.json';
 
-AppRegistry.registerComponent(appName, () => App);
+function Root() {
+  return (
+    <SafeAreaProvider>
+      <App />
+    </SafeAreaProvider>
+  );
+}
+
+AppRegistry.registerComponent(appName, () => Root);