diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d583e5b3..5f5ead8c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -183,6 +183,39 @@ jobs:
       - name: Test
         run: npm test --prefix js/packages/truapi-host
 
+  ts-react-renderer:
+    name: "@parity/truapi-react-renderer"
+    runs-on: ubuntu-latest
+    needs: codegen
+    env:
+      TRUAPI_REQUIRE_GENERATED: 1
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 22
+
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: Download codegen output
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: codegen-output
+
+      - name: Install
+        run: npm ci --ignore-scripts
+
+      - name: Build
+        run: npm run build --prefix js/packages/truapi-react-renderer
+
+      - name: Test
+        run: npm test --prefix js/packages/truapi-react-renderer
+
   playground:
     name: Playground (build + lint)
     runs-on: ubuntu-latest
diff --git a/.prettierignore b/.prettierignore
index 5ae3704a..8b6b9717 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -9,3 +9,4 @@ playground/tsconfig.tsbuildinfo
 js/packages/truapi/dist/
 js/packages/truapi/node_modules/
 REVIEW_TODO*.md
+js/packages/truapi-react-renderer/dist/
diff --git a/js/packages/truapi-react-renderer/.gitignore b/js/packages/truapi-react-renderer/.gitignore
new file mode 100644
index 00000000..4d6f8eee
--- /dev/null
+++ b/js/packages/truapi-react-renderer/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+*.tsbuildinfo
+dist/
diff --git a/js/packages/truapi-react-renderer/package.json b/js/packages/truapi-react-renderer/package.json
new file mode 100644
index 00000000..b23cd680
--- /dev/null
+++ b/js/packages/truapi-react-renderer/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@parity/truapi-react-renderer",
+  "version": "0.0.0",
+  "description": "React renderer for TrUAPI custom chat messages: maps a React component tree to CustomRendererNode widget trees",
+  "license": "MIT",
+  "author": "Parity Technologies <admin@parity.io>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/paritytech/truapi.git",
+    "directory": "js/packages/truapi-react-renderer"
+  },
+  "homepage": "https://github.com/paritytech/truapi#readme",
+  "bugs": {
+    "url": "https://github.com/paritytech/truapi/issues"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "npm run build",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@parity/truapi": "^0.7.0",
+    "react-reconciler": "0.33.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "0.33.0",
+    "react": "^19.2.0",
+    "typescript": "^5.7"
+  }
+}
diff --git a/js/packages/truapi-react-renderer/src/components.test.tsx b/js/packages/truapi-react-renderer/src/components.test.tsx
new file mode 100644
index 00000000..e767e23a
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/components.test.tsx
@@ -0,0 +1,340 @@
+// @ts-expect-error Untyped
+globalThis["IS_REACT_ACT_ENVIRONMENT"] = true;
+
+import { str } from "@parity/truapi/scale";
+import { describe, expect, it, mock } from "bun:test";
+import type { ReactNode } from "react";
+import { act } from "react";
+
+import {
+  Box,
+  Button,
+  Column,
+  Row,
+  Spacer,
+  Text,
+  TextField,
+} from "./components.js";
+import type { ActionCallback } from "./context.js";
+import { createRenderer } from "./renderer.js";
+
+function makeActionBus() {
+  let listener: ActionCallback | undefined;
+
+  const subscribeActions = mock((cb: ActionCallback) => {
+    listener = cb;
+    return () => {
+      listener = undefined;
+    };
+  });
+
+  function dispatch(actionId: string, payload?: Uint8Array) {
+    listener?.(actionId, payload);
+  }
+
+  return { subscribeActions, dispatch };
+}
+
+/**
+ * Mounts a single element and returns the serialized root node plus a dispatch helper.
+ */
+async function mount(element: ReactNode) {
+  const bus = makeActionBus();
+  const onRender = mock((_node: unknown) => {});
+  const renderer = createRenderer({
+    onRender,
+    subscribeActions: bus.subscribeActions,
+  });
+
+  await act(async () => {
+    renderer.mount(element);
+  });
+
+  function lastNode() {
+    return onRender.mock.calls[onRender.mock.calls.length - 1]![0] as any;
+  }
+
+  async function dispatchAction(actionId: string, payload?: Uint8Array) {
+    await act(async () => {
+      bus.dispatch(actionId, payload);
+    });
+  }
+
+  return { node: lastNode(), lastNode, dispatchAction, onRender, renderer };
+}
+
+describe("custom components", () => {
+  describe("Box", () => {
+    it("serializes contentAlignment prop", async () => {
+      const { node } = await mount(<Box contentAlignment="Center" />);
+      expect(node.tag).toBe("Box");
+      expect(node.value.props.contentAlignment).toBe("Center");
+    });
+
+    it("passes children through", async () => {
+      const { node } = await mount(
+        <Box>
+          <Text>child</Text>
+        </Box>,
+      );
+      expect(node.value.children).toHaveLength(1);
+      expect(node.value.children[0].tag).toBe("Text");
+    });
+  });
+
+  describe("Column", () => {
+    it("serializes horizontalAlignment and verticalArrangement props", async () => {
+      const { node } = await mount(
+        <Column
+          horizontalAlignment="Center"
+          verticalArrangement="SpaceBetween"
+        />,
+      );
+      expect(node.tag).toBe("Column");
+      expect(node.value.props.horizontalAlignment).toBe("Center");
+      expect(node.value.props.verticalArrangement).toBe("SpaceBetween");
+    });
+
+    it("passes children through", async () => {
+      const { node } = await mount(
+        <Column>
+          <Spacer />
+          <Spacer />
+        </Column>,
+      );
+      expect(node.value.children).toHaveLength(2);
+    });
+  });
+
+  describe("Row", () => {
+    it("serializes verticalAlignment and horizontalArrangement props", async () => {
+      const { node } = await mount(
+        <Row verticalAlignment="Center" horizontalArrangement="End" />,
+      );
+      expect(node.tag).toBe("Row");
+      expect(node.value.props.verticalAlignment).toBe("Center");
+      expect(node.value.props.horizontalArrangement).toBe("End");
+    });
+  });
+
+  describe("Spacer", () => {
+    it("serializes as a Spacer node with no props", async () => {
+      const { node } = await mount(<Spacer />);
+      expect(node.tag).toBe("Spacer");
+    });
+
+    it("forwards layout modifiers", async () => {
+      const { node } = await mount(<Spacer height={16} />);
+      const heightMod = (node.value.modifiers as any[]).find(
+        (m: any) => m.tag === "Height",
+      );
+      expect(heightMod.value).toEqual({ height: 16 });
+    });
+  });
+
+  describe("Text", () => {
+    it("serializes style and color props", async () => {
+      const { node } = await mount(
+        <Text style="HeadlineLarge" color="FgPrimary" />,
+      );
+      expect(node.tag).toBe("Text");
+      expect(node.value.props.style).toBe("HeadlineLarge");
+      expect(node.value.props.color).toBe("FgPrimary");
+    });
+
+    it("renders text content as a String child", async () => {
+      const { node } = await mount(<Text>Hello world</Text>);
+      expect(node.value.children[0]).toEqual({
+        tag: "String",
+        value: { text: "Hello world" },
+      });
+    });
+
+    it("forwards layout modifiers", async () => {
+      const { node } = await mount(<Text padding={8}>hi</Text>);
+      const paddingMod = (node.value.modifiers as any[]).find(
+        (m: any) => m.tag === "Padding",
+      );
+      expect(paddingMod.value).toEqual({ top: 8, end: 8 });
+    });
+  });
+
+  describe("Button", () => {
+    it("serializes text, variant, enabled and loading props", async () => {
+      const { node } = await mount(
+        <Button
+          text="Submit"
+          variant="Primary"
+          enabled={false}
+          loading={true}
+          onClick={mock(() => {})}
+        />,
+      );
+      expect(node.tag).toBe("Button");
+      expect(node.value.props.text).toBe("Submit");
+      expect(node.value.props.variant).toBe("Primary");
+      expect(node.value.props.enabled).toBe(false);
+      expect(node.value.props.loading).toBe(true);
+    });
+
+    it("exposes a non-empty clickAction string in serialized props", async () => {
+      const { node } = await mount(
+        <Button text="Click me" onClick={mock(() => {})} />,
+      );
+      expect(typeof node.value.props.clickAction).toBe("string");
+      expect((node.value.props.clickAction as string).length).toBeGreaterThan(
+        0,
+      );
+    });
+
+    it("calls onClick when the clickAction is dispatched without a payload", async () => {
+      const onClick = mock(() => {});
+      const { node, dispatchAction } = await mount(
+        <Button text="Go" onClick={onClick} />,
+      );
+
+      await dispatchAction(node.value.props.clickAction as string);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onClick when the clickAction is dispatched with a payload", async () => {
+      const onClick = mock(() => {});
+      const { node, dispatchAction } = await mount(
+        <Button text="Go" onClick={onClick} />,
+      );
+
+      await dispatchAction(
+        node.value.props.clickAction as string,
+        new Uint8Array([1, 2, 3]),
+      );
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls an updated onClick handler after re-render", async () => {
+      const onClick1 = mock(() => {});
+      const onClick2 = mock(() => {});
+
+      const bus = makeActionBus();
+      const onRender = mock((_node: unknown) => {});
+      const renderer = createRenderer({
+        onRender,
+        subscribeActions: bus.subscribeActions,
+      });
+
+      await act(async () => {
+        renderer.mount(<Button text="Go" onClick={onClick1} />);
+      });
+
+      const actionId: string = (onRender.mock.calls[0]![0] as any).value.props
+        .clickAction;
+
+      // Re-mount with a different onClick handler
+      await act(async () => {
+        renderer.mount(<Button text="Go" onClick={onClick2} />);
+      });
+
+      await act(async () => {
+        bus.dispatch(actionId);
+      });
+
+      expect(onClick1).not.toHaveBeenCalled();
+      expect(onClick2).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("TextField", () => {
+    it("maps value prop to text in serialized props", async () => {
+      const { node } = await mount(
+        <TextField value="hello" onValueChange={mock(() => {})} />,
+      );
+      expect(node.tag).toBe("TextField");
+      expect(node.value.props.text).toBe("hello");
+    });
+
+    it("serializes placeholder, label and enabled props", async () => {
+      const { node } = await mount(
+        <TextField
+          value=""
+          placeholder="Type here"
+          label="Name"
+          enabled={false}
+          onValueChange={mock(() => {})}
+        />,
+      );
+      expect(node.value.props.placeholder).toBe("Type here");
+      expect(node.value.props.label).toBe("Name");
+      expect(node.value.props.enabled).toBe(false);
+    });
+
+    it("exposes a non-empty valueChangeAction string in serialized props", async () => {
+      const { node } = await mount(
+        <TextField value="" onValueChange={mock(() => {})} />,
+      );
+      expect(typeof node.value.props.valueChangeAction).toBe("string");
+      expect(
+        (node.value.props.valueChangeAction as string).length,
+      ).toBeGreaterThan(0);
+    });
+
+    it("calls onValueChange with the decoded string when the action fires with a SCALE string payload", async () => {
+      const onValueChange = mock(() => {});
+      const { node, dispatchAction } = await mount(
+        <TextField value="" onValueChange={onValueChange} />,
+      );
+
+      const encoded = str.enc("hello world");
+      await dispatchAction(
+        node.value.props.valueChangeAction as string,
+        encoded,
+      );
+
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith("hello world");
+    });
+
+    it("calls onValueChange with empty string when the action fires without a payload", async () => {
+      const onValueChange = mock(() => {});
+      const { node, dispatchAction } = await mount(
+        <TextField value="" onValueChange={onValueChange} />,
+      );
+
+      await dispatchAction(node.value.props.valueChangeAction as string);
+
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith("");
+    });
+
+    it("calls an updated onValueChange handler after re-render", async () => {
+      const handler1 = mock(() => {});
+      const handler2 = mock(() => {});
+
+      const bus = makeActionBus();
+      const onRender = mock((_node: unknown) => {});
+      const renderer = createRenderer({
+        onRender,
+        subscribeActions: bus.subscribeActions,
+      });
+
+      await act(async () => {
+        renderer.mount(<TextField value="" onValueChange={handler1} />);
+      });
+
+      const actionId: string = (onRender.mock.calls[0]![0] as any).value.props
+        .valueChangeAction;
+
+      await act(async () => {
+        renderer.mount(<TextField value="" onValueChange={handler2} />);
+      });
+
+      const encoded = str.enc("updated");
+      await act(async () => {
+        bus.dispatch(actionId, encoded);
+      });
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalledWith("updated");
+    });
+  });
+});
diff --git a/js/packages/truapi-react-renderer/src/components.tsx b/js/packages/truapi-react-renderer/src/components.tsx
new file mode 100644
index 00000000..565a4711
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/components.tsx
@@ -0,0 +1,58 @@
+import { str } from "@parity/truapi/scale";
+import type { PropsWithChildren } from "react";
+import { createElement } from "react";
+
+import { useAction } from "./context.js";
+import { noop } from "./helpers.js";
+import type {
+  BoxProps,
+  ButtonProps,
+  ColumnProps,
+  RowProps,
+  SpacerProps,
+  TextFieldProps,
+  TextProps,
+} from "./types.js";
+
+export function Box({ children, ...props }: PropsWithChildren<BoxProps>) {
+  return createElement("Box", props, children);
+}
+
+export function Column({ children, ...props }: PropsWithChildren<ColumnProps>) {
+  return createElement("Column", props, children);
+}
+
+export function Row({ children, ...props }: PropsWithChildren<RowProps>) {
+  return createElement("Row", props, children);
+}
+
+export function Spacer(props: SpacerProps) {
+  return createElement("Spacer", props);
+}
+
+export function Text({ children, ...props }: PropsWithChildren<TextProps>) {
+  return createElement("Text", props, children);
+}
+
+export function Button({
+  children,
+  onClick,
+  ...props
+}: PropsWithChildren<ButtonProps>) {
+  const clickAction = useAction(noop, onClick);
+
+  return createElement("Button", { ...props, clickAction }, children);
+}
+
+const textDecoder = (payload: Uint8Array | undefined) => {
+  if (payload) {
+    return str.dec(payload);
+  }
+  return "";
+};
+
+export function TextField({ onValueChange, ...props }: TextFieldProps) {
+  const valueChangeAction = useAction(textDecoder, onValueChange);
+
+  return createElement("TextField", { ...props, valueChangeAction });
+}
diff --git a/js/packages/truapi-react-renderer/src/context.tsx b/js/packages/truapi-react-renderer/src/context.tsx
new file mode 100644
index 00000000..9f2a1816
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/context.tsx
@@ -0,0 +1,94 @@
+import type { CustomRendererNode } from "@parity/truapi";
+import type { PropsWithChildren } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+
+export type RenderCallback = (node: CustomRendererNode) => void;
+export type ActionCallback = (
+  actionId: string,
+  payload: Uint8Array | undefined,
+) => void;
+
+export type SubscribeAction = (callback: ActionCallback) => VoidFunction;
+
+type RenderContextValue = {
+  registerAction(id: string, action: ActionCallback): VoidFunction;
+};
+
+type ProviderProps = PropsWithChildren<{
+  subscribeActions: SubscribeAction;
+}>;
+
+const RenderContext = createContext<RenderContextValue | null>(null);
+
+export const RendererProvider = ({
+  subscribeActions,
+  children,
+}: ProviderProps) => {
+  const callbacks = useRef<Map<string, ActionCallback>>(new Map());
+
+  const registerAction: RenderContextValue["registerAction"] = useCallback(
+    (id, action) => {
+      callbacks.current.set(id, action);
+      return () => {
+        callbacks.current.delete(id);
+      };
+    },
+    [],
+  );
+
+  useEffect(() => {
+    return subscribeActions((actionId, payload) => {
+      const handler = callbacks.current.get(actionId);
+      if (handler) {
+        handler(actionId, payload);
+      }
+    });
+  }, [subscribeActions]);
+
+  return (
+    <RenderContext.Provider value={{ registerAction }}>
+      {children}
+    </RenderContext.Provider>
+  );
+};
+
+function useRenderer() {
+  const context = useContext(RenderContext);
+  if (!context) {
+    throw new Error("useRenderer must be used within a RendererProvider");
+  }
+  return context;
+}
+
+export function useAction<T>(
+  map: (payload: Uint8Array | undefined) => T,
+  callback?: (value: T) => void,
+) {
+  const id = useId();
+  const { registerAction } = useRenderer();
+  const ref = useRef(callback);
+  ref.current = callback;
+  // Inline arrows passed by callers change identity every render; ref instead
+  // of closing over to keep the registered action up to date.
+  const mapRef = useRef(map);
+  mapRef.current = map;
+
+  const actionId = `custom_renderer_action_${id}`;
+
+  useEffect(() => {
+    return registerAction(actionId, (_, payload) => {
+      if (ref.current) {
+        ref.current(mapRef.current(payload));
+      }
+    });
+  }, [actionId, registerAction]);
+
+  return callback ? actionId : undefined;
+}
diff --git a/js/packages/truapi-react-renderer/src/helpers.ts b/js/packages/truapi-react-renderer/src/helpers.ts
new file mode 100644
index 00000000..6af62335
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/helpers.ts
@@ -0,0 +1,3 @@
+export const noop = (): void => {
+  /* empty */
+};
diff --git a/js/packages/truapi-react-renderer/src/index.ts b/js/packages/truapi-react-renderer/src/index.ts
new file mode 100644
index 00000000..67f7a45e
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/index.ts
@@ -0,0 +1,18 @@
+export {
+  Box,
+  Button,
+  Column,
+  Row,
+  Spacer,
+  Text,
+  TextField,
+} from "./components.js";
+
+export type { CustomRendererNode } from "@parity/truapi";
+
+export { createRenderer } from "./renderer.js";
+export type {
+  ChatCustomMessageRenderer,
+  ChatCustomMessageRendererParams,
+} from "./rendererChatMessage.js";
+export { registerChatMessageRenderer } from "./rendererChatMessage.js";
diff --git a/js/packages/truapi-react-renderer/src/reconciler.ts b/js/packages/truapi-react-renderer/src/reconciler.ts
new file mode 100644
index 00000000..f7aae873
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/reconciler.ts
@@ -0,0 +1,202 @@
+import { createContext } from "react";
+import ReactReconciler from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants.js";
+
+import type { RenderCallback } from "./context.js";
+import { noop } from "./helpers.js";
+import type { TextInstance, WidgetInstance } from "./serializer.js";
+import { serializeAndRender } from "./serializer.js";
+
+export type Container = {
+  onRender: RenderCallback;
+  children: (WidgetInstance | TextInstance)[];
+};
+
+const RESERVED_PROPS = new Set(["children", "key", "ref"]);
+
+function filterProps(props: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const key of Object.keys(props)) {
+    if (!RESERVED_PROPS.has(key)) result[key] = props[key];
+  }
+  return result;
+}
+
+function removeChild(
+  arr: (WidgetInstance | TextInstance)[],
+  child: WidgetInstance | TextInstance,
+): void {
+  const idx = arr.indexOf(child);
+  if (idx !== -1) arr.splice(idx, 1);
+}
+
+function insertBefore(
+  arr: (WidgetInstance | TextInstance)[],
+  child: WidgetInstance | TextInstance,
+  beforeChild: WidgetInstance | TextInstance,
+): void {
+  removeChild(arr, child);
+  const idx = arr.indexOf(beforeChild);
+  arr.splice(idx !== -1 ? idx : arr.length, 0, child);
+}
+
+let currentUpdatePriority: number = DefaultEventPriority;
+
+// HostTransitionContext is typed as the internal ReactContext<T> (with _currentValue, etc.)
+// rather than the public React.Context<T>. React.createContext() produces the same internal
+// structure at runtime; the type mismatch is between the two TypeScript declarations only.
+const transitionContext = createContext<null>(
+  null,
+) as unknown as ReactReconciler.ReactContext<null>;
+
+const hostConfig: ReactReconciler.HostConfig<
+  string, // Type
+  Record<string, unknown>, // Props
+  Container, // Container
+  WidgetInstance, // Instance
+  TextInstance, // TextInstance
+  never, // SuspenseInstance
+  never, // HydratableInstance
+  never, // FormInstance
+  WidgetInstance, // PublicInstance
+  Record<string, never>, // HostContext
+  never, // ChildSet
+  ReturnType<typeof setTimeout>, // TimeoutHandle
+  -1, // NoTimeout
+  null // TransitionStatus
+> = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: false,
+  warnsIfNotActing: false,
+
+  // Scheduler
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  supportsMicrotasks: true,
+  scheduleMicrotask: queueMicrotask,
+
+  // Update priority (trivially tracked; unused with synchronous LegacyRoot rendering)
+  setCurrentUpdatePriority(priority) {
+    currentUpdatePriority = priority;
+  },
+  getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+  },
+  resolveUpdatePriority() {
+    return currentUpdatePriority;
+  },
+
+  // Transitions (not used — LegacyRoot mode has no concurrent transitions)
+  NotPendingTransition: null,
+  HostTransitionContext: transitionContext,
+
+  // Host context (not used — same context throughout the tree)
+  getRootHostContext: () => ({}),
+  getChildHostContext: (ctx) => ctx,
+  getPublicInstance: (instance) => instance as WidgetInstance,
+
+  // Instance creation
+  createInstance(type, props) {
+    return { type, props: filterProps(props), children: [] };
+  },
+  createTextInstance(text) {
+    return { __isText: true, text };
+  },
+
+  appendInitialChild(parent, child) {
+    parent.children.push(child);
+  },
+  finalizeInitialChildren: () => false,
+  shouldSetTextContent: () => false,
+
+  // Commit
+  prepareForCommit: () => null,
+  resetAfterCommit(container) {
+    container.onRender(serializeAndRender(container.children));
+  },
+
+  // Mutation
+  commitUpdate(instance, _type, prevProps, nextProps) {
+    const oldFiltered = filterProps(prevProps);
+    const newFiltered = filterProps(nextProps);
+    const keys = new Set([
+      ...Object.keys(oldFiltered),
+      ...Object.keys(newFiltered),
+    ]);
+    for (const key of keys) {
+      if (oldFiltered[key] !== newFiltered[key]) {
+        instance.props = newFiltered;
+        return;
+      }
+    }
+  },
+  commitTextUpdate(instance, _oldText, newText) {
+    instance.text = newText;
+  },
+
+  // Children
+  appendChild(parent, child) {
+    parent.children.push(child);
+  },
+  appendChildToContainer(container, child) {
+    container.children.push(child);
+  },
+  removeChild(parent, child) {
+    removeChild(parent.children, child);
+  },
+  removeChildFromContainer(container, child) {
+    removeChild(container.children, child);
+  },
+  insertBefore(parent, child, before) {
+    insertBefore(parent.children, child, before);
+  },
+  insertInContainerBefore(container, child, before) {
+    insertBefore(container.children, child, before);
+  },
+  clearContainer(container) {
+    container.children = [];
+  },
+
+  // Portal / cleanup
+  preparePortalMount: noop,
+  detachDeletedInstance: noop,
+
+  // Scope (not used)
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: noop,
+  afterActiveInstanceBlur: noop,
+  prepareScopeUpdate: noop,
+  getInstanceFromScope: () => null,
+
+  // Forms (not used)
+  resetFormInstance: noop,
+
+  // Post-paint callbacks (not used)
+  requestPostPaintCallback: noop,
+
+  // Eager transitions (not used)
+  shouldAttemptEagerTransition: () => false,
+
+  // Scheduler event tracking (not used)
+  trackSchedulerEvent: noop,
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1,
+
+  // Suspense commit (not used)
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  startSuspendingCommit: noop,
+  suspendInstance: noop,
+  waitForCommitToBeReady: () => null,
+};
+
+export const reconciler = ReactReconciler(hostConfig);
+
+reconciler.injectIntoDevTools({
+  bundleType: 0,
+  version: "0.0.0",
+  rendererPackageName: "@parity/truapi-react-renderer",
+});
diff --git a/js/packages/truapi-react-renderer/src/renderer.test.tsx b/js/packages/truapi-react-renderer/src/renderer.test.tsx
new file mode 100644
index 00000000..a9530195
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/renderer.test.tsx
@@ -0,0 +1,287 @@
+// @ts-expect-error Untyped
+globalThis["IS_REACT_ACT_ENVIRONMENT"] = true;
+
+import { describe, expect, it, mock } from "bun:test";
+import { act, useState } from "react";
+
+import { Button, Column, Spacer, Text } from "./components.js";
+import type { ActionCallback } from "./context.js";
+import { createRenderer } from "./renderer.js";
+
+/**
+ * Creates a simple action bus that captures the subscriber callback so tests
+ * can dispatch actions (simulating the host firing ActionTriggered events).
+ */
+function makeActionBus() {
+  let listener: ActionCallback | undefined;
+
+  const subscribeActions = mock((cb: ActionCallback) => {
+    listener = cb;
+    return () => {
+      listener = undefined;
+    };
+  });
+
+  function dispatch(actionId: string, payload?: Uint8Array) {
+    listener?.(actionId, payload);
+  }
+
+  return { subscribeActions, dispatch };
+}
+
+describe("createRenderer", () => {
+  it("returns an object with mount and unmount methods", () => {
+    const { subscribeActions } = makeActionBus();
+    const renderer = createRenderer({
+      onRender: mock(() => {}),
+      subscribeActions,
+    });
+    expect(typeof renderer.mount).toBe("function");
+    expect(typeof renderer.unmount).toBe("function");
+  });
+
+  it("calls onRender with the serialized node after mount", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions } = makeActionBus();
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(
+        <Text style="HeadlineLarge" color="FgPrimary">
+          Hello
+        </Text>,
+      );
+    });
+
+    expect(onRender).toHaveBeenCalledTimes(1);
+    const node = onRender.mock.calls[0]![0] as any;
+    expect(node.tag).toBe("Text");
+    expect(node.value.props.style).toBe("HeadlineLarge");
+    expect(node.value.props.color).toBe("FgPrimary");
+    expect(node.value.children[0]).toEqual({
+      tag: "String",
+      value: { text: "Hello" },
+    });
+  });
+
+  it("renders Nil when node is null", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions } = makeActionBus();
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(null);
+    });
+
+    const node = onRender.mock.calls[0]![0] as any;
+    expect(node.tag).toBe("Nil");
+  });
+
+  it("serializes a nested tree with layout modifiers", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions } = makeActionBus();
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(
+        <Column padding={16} horizontalAlignment="Center">
+          <Text style="BodyMediumRegular">Label</Text>
+          <Spacer />
+        </Column>,
+      );
+    });
+
+    const node = onRender.mock.calls[0]![0] as any;
+    expect(node.tag).toBe("Column");
+    expect(node.value.props.horizontalAlignment).toBe("Center");
+    const paddingMod = (node.value.modifiers as any[]).find(
+      (m: any) => m.tag === "Padding",
+    );
+    expect(paddingMod.value).toEqual({ top: 16, end: 16 });
+    expect(node.value.children).toHaveLength(2);
+    expect(node.value.children[0].tag).toBe("Text");
+    expect(node.value.children[1].tag).toBe("Spacer");
+  });
+
+  it("wraps multiple root siblings in a Column", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions } = makeActionBus();
+
+    // A React fragment produces two sibling nodes at the container root.
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(
+        <>
+          <Text>First</Text>
+          <Text>Second</Text>
+        </>,
+      );
+    });
+
+    const node = onRender.mock.calls[0]![0] as any;
+    expect(node.tag).toBe("Column");
+    expect(node.value.children).toHaveLength(2);
+    expect(node.value.children[0].tag).toBe("Text");
+    expect(node.value.children[1].tag).toBe("Text");
+  });
+
+  it("subscribes to actions via subscribeActions on mount", async () => {
+    const onRender = mock(() => {});
+    const { subscribeActions } = makeActionBus();
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(<Spacer />);
+    });
+
+    expect(subscribeActions).toHaveBeenCalledTimes(1);
+    expect(typeof subscribeActions.mock.calls[0]![0]).toBe("function");
+  });
+
+  it("unmount causes onRender to be called with Nil (empty tree)", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions } = makeActionBus();
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(<Text>bye</Text>);
+    });
+
+    await act(async () => {
+      renderer.unmount();
+    });
+
+    const lastNode = onRender.mock.calls[
+      onRender.mock.calls.length - 1
+    ]![0] as any;
+    expect(lastNode.tag).toBe("Nil");
+  });
+
+  it("unmount unsubscribes from actions", async () => {
+    const onRender = mock(() => {});
+    let unsubscribed = false;
+    const subscribeActions = mock((_cb: ActionCallback) => () => {
+      unsubscribed = true;
+    });
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(<Spacer />);
+    });
+
+    expect(unsubscribed).toBe(false);
+
+    await act(async () => {
+      renderer.unmount();
+    });
+
+    expect(unsubscribed).toBe(true);
+  });
+
+  it("re-renders when a dispatched action triggers a state update", async () => {
+    const onRender = mock((_node: unknown) => {});
+    const { subscribeActions, dispatch } = makeActionBus();
+
+    function Counter() {
+      const [count, setCount] = useState(0);
+      return (
+        <Column>
+          <Text>{String(count)}</Text>
+          <Button text="+" onClick={() => setCount((c) => c + 1)} />
+        </Column>
+      );
+    }
+
+    const renderer = createRenderer({ onRender, subscribeActions });
+    await act(async () => {
+      renderer.mount(<Counter />);
+    });
+
+    const firstNode = onRender.mock.calls[
+      onRender.mock.calls.length - 1
+    ]![0] as any;
+    const btn = (firstNode.value.children as any[]).find(
+      (c: any) => c.tag === "Button",
+    );
+    const clickActionId: string = btn.value.props.clickAction;
+
+    await act(async () => {
+      dispatch(clickActionId);
+    });
+
+    expect(onRender.mock.calls.length).toBeGreaterThan(1);
+    const updatedNode = onRender.mock.calls[
+      onRender.mock.calls.length - 1
+    ]![0] as any;
+    const txt = (updatedNode.value.children as any[]).find(
+      (c: any) => c.tag === "Text",
+    );
+    expect(txt.value.children[0]).toEqual({
+      tag: "String",
+      value: { text: "1" },
+    });
+  });
+
+  it("two independent createRenderer calls have isolated state", async () => {
+    const onRenderA = mock((_node: unknown) => {});
+    const onRenderB = mock((_node: unknown) => {});
+    const busA = makeActionBus();
+    const busB = makeActionBus();
+
+    function Counter({ start }: { start: number }) {
+      const [count, setCount] = useState(start);
+      return (
+        <Column>
+          <Text>{String(count)}</Text>
+          <Button text="+" onClick={() => setCount((c) => c + 1)} />
+        </Column>
+      );
+    }
+
+    const rendererA = createRenderer({
+      onRender: onRenderA,
+      subscribeActions: busA.subscribeActions,
+    });
+    const rendererB = createRenderer({
+      onRender: onRenderB,
+      subscribeActions: busB.subscribeActions,
+    });
+    await act(async () => {
+      rendererA.mount(<Counter start={0} />);
+      rendererB.mount(<Counter start={10} />);
+    });
+
+    // Click the button only on instance A
+    const nodeA = onRenderA.mock.calls[
+      onRenderA.mock.calls.length - 1
+    ]![0] as any;
+    const btnA = (nodeA.value.children as any[]).find(
+      (c: any) => c.tag === "Button",
+    );
+    await act(async () => {
+      busA.dispatch(btnA.value.props.clickAction);
+    });
+
+    const updatedA = onRenderA.mock.calls[
+      onRenderA.mock.calls.length - 1
+    ]![0] as any;
+    const updatedB = onRenderB.mock.calls[
+      onRenderB.mock.calls.length - 1
+    ]![0] as any;
+    const txtA = (updatedA.value.children as any[]).find(
+      (c: any) => c.tag === "Text",
+    );
+    const txtB = (updatedB.value.children as any[]).find(
+      (c: any) => c.tag === "Text",
+    );
+
+    expect(txtA.value.children[0]).toEqual({
+      tag: "String",
+      value: { text: "1" },
+    });
+    expect(txtB.value.children[0]).toEqual({
+      tag: "String",
+      value: { text: "10" },
+    });
+  });
+});
diff --git a/js/packages/truapi-react-renderer/src/renderer.ts b/js/packages/truapi-react-renderer/src/renderer.ts
new file mode 100644
index 00000000..a3f3e59f
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/renderer.ts
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { createElement } from "react";
+
+import type { RenderCallback, SubscribeAction } from "./context.js";
+import { RendererProvider } from "./context.js";
+import { noop } from "./helpers.js";
+import type { Container } from "./reconciler.js";
+import { reconciler } from "./reconciler.js";
+
+function onError(error: Error): void {
+  console.error("[truapi-react-renderer]", error);
+}
+
+type RendererParams = {
+  onRender: RenderCallback;
+  subscribeActions: SubscribeAction;
+};
+
+export function createRenderer({ onRender, subscribeActions }: RendererParams) {
+  let unmounted = false;
+
+  const container: Container = { onRender, children: [] };
+  const fiberRoot = reconciler.createContainer(
+    container,
+    0, // LegacyRoot — synchronous rendering
+    null,
+    false,
+    null,
+    "",
+    onError,
+    onError,
+    onError,
+    noop,
+  );
+
+  return {
+    mount(node: ReactNode) {
+      if (unmounted) {
+        throw new Error("Renderer is already unmounted");
+      }
+      reconciler.updateContainer(
+        createElement(RendererProvider, { subscribeActions }, node),
+        fiberRoot,
+      );
+    },
+    unmount() {
+      unmounted = true;
+      reconciler.updateContainerSync(null, fiberRoot);
+    },
+  };
+}
diff --git a/js/packages/truapi-react-renderer/src/rendererChatMessage.ts b/js/packages/truapi-react-renderer/src/rendererChatMessage.ts
new file mode 100644
index 00000000..102e3904
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/rendererChatMessage.ts
@@ -0,0 +1,53 @@
+import type { CustomRendererNode } from "@parity/truapi";
+import type { ReactNode } from "react";
+
+import { createRenderer } from "./renderer.js";
+
+/**
+ * Parameters passed to a chat custom message renderer. Structurally matches
+ * the host-side rendering request contract so any transport implementation
+ * can invoke the callback.
+ */
+export type ChatCustomMessageRendererParams<T = Uint8Array> = {
+  messageId: string;
+  messageType: string;
+  payload: T;
+  subscribeActions(
+    callback: (actionId: string, payload: Uint8Array | undefined) => void,
+  ): VoidFunction;
+};
+
+/** Callback invoked by the host transport to render a custom chat message. */
+export type ChatCustomMessageRenderer = (
+  params: ChatCustomMessageRendererParams,
+  render: (node: CustomRendererNode) => void,
+) => VoidFunction;
+
+/**
+ * Register a React-based renderer for custom chat messages.
+ *
+ * @param mapPayload - Map function to convert the payload to the desired type.
+ * @param renderFn - Receives message params and returns a React element tree.
+ * @returns A callback compatible with a chat custom message rendering request handler.
+ */
+export function registerChatMessageRenderer<Payload>(
+  mapPayload: (payload: Uint8Array) => Payload,
+  renderFn: (
+    params: Omit<
+      ChatCustomMessageRendererParams<NoInfer<Payload>>,
+      "subscribeActions"
+    >,
+  ) => ReactNode,
+): ChatCustomMessageRenderer {
+  return ({ messageId, messageType, payload, subscribeActions }, render) => {
+    const renderer = createRenderer({ onRender: render, subscribeActions });
+
+    renderer.mount(
+      renderFn({ messageId, messageType, payload: mapPayload(payload) }),
+    );
+
+    return () => {
+      renderer.unmount();
+    };
+  };
+}
diff --git a/js/packages/truapi-react-renderer/src/serializer.ts b/js/packages/truapi-react-renderer/src/serializer.ts
new file mode 100644
index 00000000..268a0cf0
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/serializer.ts
@@ -0,0 +1,179 @@
+import type { CustomRendererNode } from "@parity/truapi";
+
+import type {
+  Background,
+  BorderStyle,
+  Dimensions,
+  Modifier,
+  Padding,
+  Size,
+} from "./types.js";
+
+export type WidgetInstance = {
+  type: string;
+  props: Record<string, unknown>;
+  children: (WidgetInstance | TextInstance)[];
+};
+
+export type TextInstance = {
+  __isText: true;
+  text: string;
+};
+
+function isTextInstance(
+  node: WidgetInstance | TextInstance,
+): node is TextInstance {
+  return "__isText" in node;
+}
+
+function convertDimensions(value: Padding): Dimensions {
+  if (typeof value === "number" || typeof value === "bigint") {
+    return { top: value, end: value };
+  }
+  return value;
+}
+
+function convertModifiers(props: Record<string, unknown>): Modifier[] {
+  const modifiers: Modifier[] = [];
+
+  if (props.margin !== undefined) {
+    modifiers.push({
+      tag: "Margin",
+      value: convertDimensions(props.margin as Padding),
+    });
+  }
+  if (props.padding !== undefined) {
+    modifiers.push({
+      tag: "Padding",
+      value: convertDimensions(props.padding as Padding),
+    });
+  }
+  if (props.background !== undefined) {
+    const bg = props.background as Background;
+    modifiers.push({
+      tag: "Background",
+      value:
+        typeof bg === "string"
+          ? { color: bg }
+          : { color: bg.color, shape: bg.shape },
+    });
+  }
+  if (props.border !== undefined) {
+    modifiers.push({ tag: "Border", value: props.border as BorderStyle });
+  }
+  if (props.width !== undefined) {
+    modifiers.push({ tag: "Width", value: { width: props.width as Size } });
+  }
+  if (props.height !== undefined) {
+    modifiers.push({ tag: "Height", value: { height: props.height as Size } });
+  }
+  if (props.minWidth !== undefined) {
+    modifiers.push({
+      tag: "MinWidth",
+      value: { width: props.minWidth as Size },
+    });
+  }
+  if (props.minHeight !== undefined) {
+    modifiers.push({
+      tag: "MinHeight",
+      value: { height: props.minHeight as Size },
+    });
+  }
+  if (props.fillMaxWidth) {
+    modifiers.push({ tag: "FillWidth", value: { enabled: true } });
+  }
+  if (props.fillMaxHeight) {
+    modifiers.push({ tag: "FillHeight", value: { enabled: true } });
+  }
+
+  return modifiers;
+}
+
+function convertWidgetProps(
+  widgetType: string,
+  props: Record<string, unknown>,
+): unknown {
+  switch (widgetType) {
+    case "Box":
+      return { contentAlignment: props.contentAlignment as string | undefined };
+    case "Column":
+      return {
+        horizontalAlignment: props.horizontalAlignment as string | undefined,
+        verticalArrangement: props.verticalArrangement as string | undefined,
+      };
+    case "Row":
+      return {
+        verticalAlignment: props.verticalAlignment as string | undefined,
+        horizontalArrangement: props.horizontalArrangement as
+          | string
+          | undefined,
+      };
+    case "Spacer":
+      return undefined;
+    case "Text":
+      return {
+        style: props.style as string | undefined,
+        color: props.color as string | undefined,
+      };
+    case "Button":
+      return {
+        text: (props.text as string | undefined) ?? "",
+        variant: props.variant as string | undefined,
+        enabled: props.enabled as boolean | undefined,
+        loading: props.loading as boolean | undefined,
+        clickAction: props.clickAction,
+      };
+    case "TextField":
+      return {
+        text: (props.value as string | undefined) ?? "",
+        placeholder: props.placeholder as string | undefined,
+        label: props.label as string | undefined,
+        enabled: props.enabled as boolean | undefined,
+        valueChangeAction: props.valueChangeAction,
+      };
+    default:
+      return undefined;
+  }
+}
+
+function serializeNode(
+  node: WidgetInstance | TextInstance,
+): CustomRendererNode {
+  if (isTextInstance(node)) {
+    return { tag: "String", value: { text: node.text } };
+  }
+
+  return {
+    tag: node.type,
+    value: {
+      modifiers: convertModifiers(node.props),
+      props: convertWidgetProps(node.type, node.props),
+      children: node.children.map((child) => serializeNode(child)),
+    },
+  } as CustomRendererNode;
+}
+
+/**
+ * Serialize the reconciler tree into a single root node: Nil when empty, the
+ * sole child when there is one, otherwise the children wrapped in a Column.
+ */
+export function serializeAndRender(
+  children: (WidgetInstance | TextInstance)[],
+): CustomRendererNode {
+  const serialized = children.map(serializeNode);
+
+  if (serialized.length === 0) {
+    return { tag: "Nil", value: undefined };
+  }
+  if (serialized.length === 1 && serialized[0] !== undefined) {
+    return serialized[0];
+  }
+  return {
+    tag: "Column",
+    value: {
+      modifiers: [],
+      props: { horizontalAlignment: undefined, verticalArrangement: undefined },
+      children: serialized,
+    },
+  };
+}
diff --git a/js/packages/truapi-react-renderer/src/types.ts b/js/packages/truapi-react-renderer/src/types.ts
new file mode 100644
index 00000000..c98a5306
--- /dev/null
+++ b/js/packages/truapi-react-renderer/src/types.ts
@@ -0,0 +1,86 @@
+import type {
+  Arrangement,
+  Background as BackgroundStyle,
+  BorderStyle,
+  ButtonVariant,
+  ColorToken,
+  ContentAlignment,
+  Dimensions,
+  HorizontalAlignment,
+  Shape,
+  Size,
+  TypographyStyle,
+  VerticalAlignment,
+} from "@parity/truapi";
+
+export type {
+  Arrangement,
+  BackgroundStyle,
+  BorderStyle,
+  ButtonVariant,
+  ColorToken,
+  ContentAlignment,
+  Dimensions,
+  HorizontalAlignment,
+  Shape,
+  Size,
+  TypographyStyle,
+  VerticalAlignment,
+};
+export type { Modifier } from "@parity/truapi";
+
+/** Uniform (single number) or per-side spacing. */
+export type Padding = Size | Dimensions;
+
+/** Plain color token or full background style. */
+export type Background = ColorToken | BackgroundStyle;
+
+export interface BaseWidgetProps {
+  margin?: Padding;
+  padding?: Padding;
+  background?: Background;
+  border?: BorderStyle;
+  width?: Size;
+  height?: Size;
+  minWidth?: Size;
+  minHeight?: Size;
+  fillMaxWidth?: boolean;
+  fillMaxHeight?: boolean;
+}
+
+export interface BoxProps extends BaseWidgetProps {
+  contentAlignment?: ContentAlignment;
+}
+
+export interface ColumnProps extends BaseWidgetProps {
+  horizontalAlignment?: HorizontalAlignment;
+  verticalArrangement?: Arrangement;
+}
+
+export interface RowProps extends BaseWidgetProps {
+  verticalAlignment?: VerticalAlignment;
+  horizontalArrangement?: Arrangement;
+}
+
+export type SpacerProps = BaseWidgetProps;
+
+export interface TextProps extends BaseWidgetProps {
+  style?: TypographyStyle;
+  color?: ColorToken;
+}
+
+export interface ButtonProps extends BaseWidgetProps {
+  text: string;
+  variant?: ButtonVariant;
+  enabled?: boolean;
+  loading?: boolean;
+  onClick(): void;
+}
+
+export interface TextFieldProps extends BaseWidgetProps {
+  value: string;
+  placeholder?: string;
+  label?: string;
+  enabled?: boolean;
+  onValueChange(value: string): void;
+}
diff --git a/js/packages/truapi-react-renderer/tsconfig.json b/js/packages/truapi-react-renderer/tsconfig.json
new file mode 100644
index 00000000..98ea26d8
--- /dev/null
+++ b/js/packages/truapi-react-renderer/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "composite": true,
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"],
+  "references": [{ "path": "../truapi" }]
+}
diff --git a/package-lock.json b/package-lock.json
index 920b8a36..7268fc64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,25 @@
         "typescript": "^5.7"
       }
     },
+    "js/packages/truapi-react-renderer": {
+      "name": "@parity/truapi-react-renderer",
+      "version": "0.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@parity/truapi": "^0.7.0",
+        "react-reconciler": "0.33.0"
+      },
+      "devDependencies": {
+        "@types/bun": "^1.3.0",
+        "@types/react": "^19.0.0",
+        "@types/react-reconciler": "0.33.0",
+        "react": "^19.2.0",
+        "typescript": "^5.7"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
     "js/packages/truapi/node_modules/typescript": {
       "version": "6.0.3",
       "dev": true,
@@ -431,6 +450,10 @@
       "resolved": "js/packages/truapi-host",
       "link": true
     },
+    "node_modules/@parity/truapi-react-renderer": {
+      "resolved": "js/packages/truapi-react-renderer",
+      "link": true
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz",
@@ -467,6 +490,26 @@
         "undici-types": "~8.3.0"
       }
     },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.33.0.tgz",
+      "integrity": "sha512-HZOXsKT0tGI9LlUw2LuedXsVeB88wFa536vVL0M6vE8zN63nI+sSr1ByxmPToP5K5bukaVscyeCJcF9guVNJ1g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "dev": true,
@@ -546,6 +589,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/detect-indent": {
       "version": "6.1.0",
       "dev": true,
@@ -1004,6 +1054,30 @@
       ],
       "license": "MIT"
     },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.33.0.tgz",
+      "integrity": "sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
     "node_modules/read-yaml-file": {
       "version": "1.1.0",
       "dev": true,
@@ -1086,6 +1160,12 @@
       "version": "1.6.1",
       "license": "MIT"
     },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.8.0",
       "dev": true,