- {iframeUri}/react.html
+ {finalIframeUriPrefix}/react.html
= ({
+ children,
+ language = "",
+ enableCopy = true,
+ customStyle,
+ className,
+ showLineNumbers = false,
+}) => {
+ const [copied, setCopied] = React.useState(false);
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(children);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error("Failed to copy code:", err);
+ }
+ };
+
+ return (
+
+
+ {children}
+
+ {enableCopy && (
+
+ )}
+
+ );
+};
+
+export default SyntaxHighlighter;
diff --git a/packages/notebook-preview/demo.html b/packages/notebook-preview/demo.html
new file mode 100644
index 00000000..5971d56a
--- /dev/null
+++ b/packages/notebook-preview/demo.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Output Types Demo
+
+
+
+
+
+
diff --git a/packages/notebook-preview/index.html b/packages/notebook-preview/index.html
new file mode 100644
index 00000000..6135342e
--- /dev/null
+++ b/packages/notebook-preview/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Notebook Preview
+
+
+
+
+
+
diff --git a/packages/notebook-preview/package.json b/packages/notebook-preview/package.json
new file mode 100644
index 00000000..d59b0be3
--- /dev/null
+++ b/packages/notebook-preview/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@runtimed/notebook-preview",
+ "version": "0.3.0-beta.1",
+ "type": "module",
+ "scripts": {
+ "dev": "vite build --watch --mode development",
+ "prebuild": "pnpm --filter @runtimed/components build",
+ "build": "vite build",
+ "preview": "vite --port 5175",
+ "type-check": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@runtimed/components": "workspace:*",
+ "react": "19.2.1",
+ "react-dom": "19.2.1"
+ },
+ "devDependencies": {
+ "@tailwindcss/vite": "^4.1.10",
+ "@types/react": "^19.1.8",
+ "@types/react-dom": "^19.1.6",
+ "@vitejs/plugin-react": "^4.5.2",
+ "tailwindcss": "^4.1.10",
+ "typescript": "^5.8.3",
+ "vite": "^6.3.5"
+ },
+ "engines": {
+ "node": ">=23.0.0",
+ "pnpm": ">=10.9.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/notebook-preview/public/health.html b/packages/notebook-preview/public/health.html
new file mode 100644
index 00000000..5a495500
--- /dev/null
+++ b/packages/notebook-preview/public/health.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Health Check
+
+
+
+ Health Check
+
+ Put this page in an iframe and send a message to the iframe to check
+ health.
+
+ iframe.contentWindow?.postMessage({ healthy: true }, "*");
+ Messages received:
+ No message received
+
+
+
diff --git a/packages/notebook-preview/react.html b/packages/notebook-preview/react.html
new file mode 100644
index 00000000..a5df9d5f
--- /dev/null
+++ b/packages/notebook-preview/react.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ React IFrame Content
+
+
+
+
+
+
diff --git a/packages/notebook-preview/src/App.tsx b/packages/notebook-preview/src/App.tsx
new file mode 100644
index 00000000..a4c45d72
--- /dev/null
+++ b/packages/notebook-preview/src/App.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+import { NotebookRenderer, type JupyterNotebook } from "./NotebookRenderer";
+
+export function App() {
+ const [notebookData, setNotebookData] = useState(
+ null
+ );
+
+ useEffect(() => {
+ // Notify parent that iframe is ready
+ window.parent.postMessage({ type: "iframe-loaded" }, "*");
+
+ // Accept messages from any origin
+ const handleMessage = (event: MessageEvent) => {
+ if (event.data?.json !== undefined) {
+ const json =
+ typeof event.data.json === "string"
+ ? JSON.parse(event.data.json)
+ : event.data.json;
+ setNotebookData(json as JupyterNotebook);
+ // Scroll to top when new notebook data arrives
+ window.scrollTo({ top: 0, behavior: "instant" });
+ }
+ };
+
+ window.addEventListener("message", handleMessage);
+ return () => window.removeEventListener("message", handleMessage);
+ }, []);
+
+ if (!notebookData) {
+ return (
+
+ Waiting for notebook data...
+
+ );
+ }
+
+ return ;
+ metadata?: Record;
+ execution_count?: number | null;
+ ename?: string;
+ evalue?: string;
+ traceback?: string[];
+}
+
+export interface JupyterCell {
+ id: string;
+ cell_type: "code" | "markdown" | "raw";
+ source: string | string[];
+ outputs?: JupyterOutput[];
+ execution_count?: number | null;
+}
+
+export interface JupyterNotebook {
+ cells: JupyterCell[];
+ metadata?: Record;
+ nbformat?: number;
+ nbformat_minor?: number;
+}
+
+// Helper to join source lines
+function joinSource(source: string | string[]): string {
+ return Array.isArray(source) ? source.join("") : source;
+}
+
+// Convert Jupyter output to OutputData format
+function convertJupyterOutput(
+ output: JupyterOutput,
+ cellId: string,
+ position: number
+): OutputData | null {
+ const baseOutput = {
+ id: `${cellId}-output-${position}`,
+ cellId,
+ position,
+ streamName: null,
+ executionCount: null,
+ displayId: null,
+ artifactId: null,
+ mimeType: null,
+ metadata: null,
+ representations: null,
+ data: null,
+ };
+
+ switch (output.output_type) {
+ case "stream": {
+ const text = Array.isArray(output.text)
+ ? output.text.join("")
+ : output.text || "";
+ return {
+ ...baseOutput,
+ outputType: "terminal" as OutputType,
+ streamName: (output.name as "stdout" | "stderr") || "stdout",
+ data: text,
+ } as OutputData;
+ }
+
+ case "execute_result":
+ case "display_data": {
+ const outputData = output.data || {};
+ const representations: Record =
+ {};
+
+ for (const [mimeType, content] of Object.entries(outputData)) {
+ const data = Array.isArray(content) ? content.join("") : content;
+ representations[mimeType] = { type: "inline", data };
+ }
+
+ // Get primary mime type
+ const mimeTypes = Object.keys(representations);
+ const primaryMimeType =
+ mimeTypes.find((m) => m.startsWith("text/html")) ||
+ mimeTypes.find((m) => m.startsWith("image/")) ||
+ mimeTypes.find((m) => m === "application/json") ||
+ mimeTypes.find((m) => m === "text/plain") ||
+ mimeTypes[0];
+
+ return {
+ ...baseOutput,
+ outputType:
+ output.output_type === "execute_result"
+ ? ("multimedia_result" as OutputType)
+ : ("multimedia_display" as OutputType),
+ executionCount: output.execution_count ?? null,
+ mimeType: primaryMimeType || null,
+ representations,
+ data: representations["text/plain"]?.data?.toString() || null,
+ } as OutputData;
+ }
+
+ case "error": {
+ return {
+ ...baseOutput,
+ outputType: "error" as OutputType,
+ data: JSON.stringify({
+ ename: output.ename || "Error",
+ evalue: output.evalue || "",
+ traceback: output.traceback || [],
+ }),
+ } as OutputData;
+ }
+
+ default:
+ return null;
+ }
+}
+
+// Extract language from notebook metadata
+function getNotebookLanguage(metadata?: Record): string {
+ // Try kernelspec name first (e.g., "python3", "ir", "julia")
+ const kernelspec = metadata?.kernelspec as
+ | { language?: string; name?: string }
+ | undefined;
+ if (kernelspec?.language) {
+ return kernelspec.language;
+ }
+ // Try language_info (more detailed)
+ const languageInfo = metadata?.language_info as { name?: string } | undefined;
+ if (languageInfo?.name) {
+ return languageInfo.name;
+ }
+ // Default to python
+ return "python";
+}
+
+// Code cell component
+function CodeCell({ cell, language }: { cell: JupyterCell; language: string }) {
+ const source = joinSource(cell.source);
+ const outputs = (cell.outputs || [])
+ .map((output, i) => convertJupyterOutput(output, cell.id, i))
+ .filter((o): o is OutputData => o !== null);
+
+ return (
+
+ {/* Execution count badge */}
+
+
+
+ {source}
+
+
+
+ {/* Outputs */}
+ {outputs.length > 0 && (
+
+
+
+ {outputs.map((output) => (
+
+
+
+ )}
+
+
+
+ );
+}
+
+// Markdown cell component
+function MarkdownCell({ cell }: { cell: JupyterCell }) {
+ const source = joinSource(cell.source);
+
+ // For markdown cells, render the output using SingleOutput with markdown type
+ const markdownOutput: OutputData = {
+ id: `${cell.id}-markdown`,
+ cellId: cell.id,
+ outputType: "markdown",
+ position: 0,
+ streamName: null,
+ executionCount: null,
+ displayId: null,
+ artifactId: null,
+ mimeType: null,
+ metadata: null,
+ representations: null,
+ data: source,
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// Raw cell component
+function RawCell({ cell }: { cell: JupyterCell }) {
+ const source = joinSource(cell.source);
+
+ return (
+
+
+
+
+
+ {source}
+
+
+
+
+ );
+}
+
+// Notebook renderer
+export function NotebookRenderer({ notebook }: { notebook: JupyterNotebook }) {
+ const language = getNotebookLanguage(notebook.metadata);
+
+ return (
+
+ {notebook.cells.map((cell, index) => {
+ switch (cell.cell_type) {
+ case "code":
+ return (
+
+
+);
diff --git a/packages/notebook-preview/src/main.tsx b/packages/notebook-preview/src/main.tsx
new file mode 100644
index 00000000..72f39d1e
--- /dev/null
+++ b/packages/notebook-preview/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./style.css";
+import "@runtimed/components/styles.css";
+
+createRoot(document.getElementById("root")!).render(
+
+
+);
diff --git a/packages/notebook-preview/src/react-main.tsx b/packages/notebook-preview/src/react-main.tsx
new file mode 100644
index 00000000..bb6a13ab
--- /dev/null
+++ b/packages/notebook-preview/src/react-main.tsx
@@ -0,0 +1,30 @@
+import { createRoot } from "react-dom/client";
+import { IframeReactApp, sendFromIframe } from "@runtimed/components";
+import "./style.css";
+import "@runtimed/components/styles.css";
+
+// Main React initialization for iframe outputs
+function initializeReactIframe() {
+ const container = document.getElementById("react-root");
+ if (!container) {
+ console.error("React root element not found");
+ return;
+ }
+
+ const root = createRoot(container);
+ root.render( = ({
>
{/* Send markdown content to iframe */}
setIsEditing(true)}
onMarkdownRendered={() => setReadyToShowRendered(true)}
outputs={[