From bc297e5e496d9f48ef77581b7fb41fdf328a62cf Mon Sep 17 00:00:00 2001
From: kj_sh604
Date: Sun, 15 Mar 2026 16:19:35 -0400
Subject: refactor: dev-docs/

---
 .../excalidraw/api/props/render-props.mdx          | 80 ++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx

(limited to 'dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx')

diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx
new file mode 100644
index 0000000..0df7634
--- /dev/null
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx
@@ -0,0 +1,80 @@
+# Render Props
+
+## renderTopRightUI
+
+<pre>
+  (isMobile: boolean, appState:
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
+    AppState
+  </a>) => JSX | null
+</pre>
+
+A function returning `JSX` to render `custom` UI in the top right corner of the app.
+
+```jsx live
+function App() {
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw
+        renderTopRightUI={() => {
+          return (
+            <button
+              style={{
+                background: "#70b1ec",
+                border: "none",
+                color: "#fff",
+                width: "max-content",
+                fontWeight: "bold",
+              }}
+              onClick={() => window.alert("This is dummy top right UI")}
+            >
+              Click me
+            </button>
+          );
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## renderCustomStats
+
+A function that can be used to render custom stats (returns JSX) in the `nerd stats` dialog.
+
+![Nerd Stats](../../../../assets/nerd-stats.png)
+
+For example you can use this prop to render the size of the elements in the storage as do in [excalidraw.com](https://excalidraw.com).
+
+```jsx live
+function App() {
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw
+        renderCustomStats={() => (
+          <p style={{ color: "#70b1ec", fontWeight: "bold" }}>
+            Dummy stats will be shown here
+          </p>
+        )}
+      />
+    </div>
+  );
+}
+```
+
+## renderEmbeddable
+
+<pre>
+  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
+    AppState
+  </a>
+  ) => JSX.Element | null
+</pre>
+
+Allows you to replace the renderer for embeddable elements (which renders `<iframe>` elements).
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `element` | `NonDeleted<ExcalidrawEmbeddableElement>` | The embeddable element to be rendered. |
+| `appState` | `AppState` | The current state of the UI. |
-- 
cgit v1.2.3