diff --git a/examples/embed_demo.html b/examples/embed_demo.html
new file mode 100644
index 000000000..23192e719
--- /dev/null
+++ b/examples/embed_demo.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+ Preswald Component Embedding Demo
+
+
+
+ Preswald Component Embedding Demo
+
+ This page demonstrates how to embed Preswald components in external web pages.
+
+
+
Embedding a Specific Component
+
Below is an embedded card component with ID embeddable_card:
+
+
+
+
+
+
+
HTML code:
+
<iframe
+ src="http://localhost:8000/embed?component_id=embeddable_card"
+ width="100%"
+ height="200"
+ frameborder="0">
+</iframe>
+
+
Embedding a Plot Component
+
Below is an embedded plot component with ID sample_plot:
+
+
+
+
+
+
+
HTML code:
+
<iframe
+ src="http://localhost:8000/embed?component_id=sample_plot"
+ width="100%"
+ height="350"
+ frameborder="0">
+</iframe>
+
+
Embedding the Entire App
+
You can also embed the entire application:
+
+
+
+
+
+
+
HTML code:
+
<iframe
+ src="http://localhost:8000/embed"
+ width="100%"
+ height="500"
+ frameborder="0">
+</iframe>
+
Note: Make sure the Preswald server is running with the embed_example.py script before viewing this page.
+
+
\ No newline at end of file
diff --git a/examples/embed_example.py b/examples/embed_example.py
new file mode 100644
index 000000000..d98651227
--- /dev/null
+++ b/examples/embed_example.py
@@ -0,0 +1,37 @@
+"""
+Example script demonstrating component embedding
+"""
+import preswald as pw
+
+# Create some components with unique IDs
+pw.header("Embed Example", level=1, id="main_header")
+pw.text("This is a sample application with multiple components.", id="intro_text")
+
+# Create a component specifically for embedding
+with pw.card(id="embeddable_card", title="Embeddable Component"):
+ pw.text("This component can be embedded on its own.", id="card_text")
+ pw.button("Click Me", id="embed_button")
+
+# Create another component
+pw.plotly({
+ "data": [{"y": [1, 2, 3, 4], "type": "scatter"}],
+ "layout": {"title": "Sample Plot"}
+}, id="sample_plot")
+
+# Add instructions for embedding
+pw.markdown("""
+## How to Embed
+
+To embed the card component, use the following HTML code:
+
+```html
+
+```
+
+This will only show the card component, not the rest of the application.
+""", id="embed_instructions")
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fae9a0950..5495de557 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
import Layout from './components/Layout';
import LoadingState from './components/LoadingState';
import Dashboard from './components/pages/Dashboard';
+import EmbedView from './components/pages/EmbedView';
import { comm } from './utils/websocket';
const App = () => {
@@ -13,8 +14,14 @@ const App = () => {
const [config, setConfig] = useState(null);
const [isConnected, setIsConnected] = useState(false);
const [areComponentsLoading, setAreComponentsLoading] = useState(true);
+ const [isEmbedMode, setIsEmbedMode] = useState(false);
useEffect(() => {
+ // Check if in embed mode (either from URL or from window.EMBED_CONFIG)
+ const isEmbed = window.location.pathname.startsWith('/embed') ||
+ (window.EMBED_CONFIG && window.EMBED_CONFIG.embed_mode);
+ setIsEmbedMode(isEmbed);
+
comm.connect();
const unsubscribe = comm.subscribe(handleMessage);
@@ -147,8 +154,12 @@ const App = () => {
setError(message.connected ? null : 'Lost connection. Attempting to reconnect...');
};
- console.log('[App] Rendering with:', { components, isConnected, error });
- console.log(window.location.pathname);
+ console.log('[App] Rendering with:', { components, isConnected, error, isEmbedMode });
+
+ // If in embed mode, render the EmbedView directly without Layout
+ if (isEmbedMode) {
+ return ;
+ }
return (
diff --git a/frontend/src/components.css b/frontend/src/components.css
index f9ef52706..136483708 100644
--- a/frontend/src/components.css
+++ b/frontend/src/components.css
@@ -848,3 +848,57 @@
background-color: #4b5563;
}
}
+
+/* Embeddable Components Styles */
+.embed-container {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ width: 100%;
+ height: 100%;
+ min-height: 50px;
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+ background-color: transparent;
+}
+
+.embed-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100px;
+ color: #333;
+ font-size: 1rem;
+}
+
+.embed-error {
+ background-color: #fff0f0;
+ border: 1px solid #ffcccc;
+ border-radius: 6px;
+ padding: 12px;
+ margin: 12px 0;
+ color: #cc0000;
+}
+
+.embed-error h3 {
+ margin-top: 0;
+ margin-bottom: 8px;
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.embed-error p {
+ margin: 0;
+ font-size: 0.9rem;
+}
+
+/* When in embed mode, apply tighter spacing */
+.embed-container .preswald-component {
+ margin-bottom: 12px;
+}
+
+/* Hide certain UI elements in embed mode */
+.embed-container .preswald-debug-info,
+.embed-container .preswald-toolbar {
+ display: none;
+}
diff --git a/frontend/src/components/pages/EmbedView.jsx b/frontend/src/components/pages/EmbedView.jsx
new file mode 100644
index 000000000..8e5a4219d
--- /dev/null
+++ b/frontend/src/components/pages/EmbedView.jsx
@@ -0,0 +1,169 @@
+import React, { useEffect, useState, useRef } from 'react';
+import DynamicComponents from '../DynamicComponents';
+
+/**
+ * EmbedView component for embedded app or single component view.
+ * This provides a minimal layout without navigation, toolbars, etc.
+ */
+const EmbedView = () => {
+ const [componentData, setComponentData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const containerRef = useRef(null);
+
+ // Auto-resize handler for iframes
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ // Create a ResizeObserver to detect size changes
+ const resizeObserver = new ResizeObserver(() => {
+ // Send message to parent window with new height
+ if (window.parent !== window) {
+ window.parent.postMessage({
+ height: containerRef.current.scrollHeight,
+ type: 'preswald-resize'
+ }, '*');
+ }
+ });
+
+ // Start observing
+ resizeObserver.observe(containerRef.current);
+
+ // Stop observing on cleanup
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, [componentData]);
+
+ // Handle initial data load
+ useEffect(() => {
+ const handleComponentUpdate = (event) => {
+ if (event.data && event.data.type === 'components') {
+ setComponentData(event.data.components);
+ setLoading(false);
+ } else if (event.data && event.data.type === 'error') {
+ setError(event.data.content);
+ setLoading(false);
+ }
+ };
+
+ // Add message event listener
+ window.addEventListener('message', handleComponentUpdate);
+
+ // Connect via WebSocket for embedded view
+ const connectWebSocket = async () => {
+ try {
+ const embedConfig = window.EMBED_CONFIG || { embed_mode: true };
+ const clientId = `embed-${Date.now()}`;
+
+ // Connect to WebSocket with embed flag
+ const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+ const ws = new WebSocket(`${protocol}//${window.location.host}/ws/${clientId}`);
+
+ ws.onopen = () => {
+ // Send init message with embed mode
+ ws.send(JSON.stringify({
+ type: 'init',
+ embed_mode: true,
+ component_id: embedConfig.component_id
+ }));
+ };
+
+ ws.onmessage = (event) => {
+ const data = JSON.parse(event.data);
+
+ if (data.type === 'components') {
+ if (embedConfig.component_id) {
+ // Filter to just the requested component if specified
+ const filteredComponents = filterComponentById(data.components, embedConfig.component_id);
+ setComponentData(filteredComponents);
+ } else {
+ setComponentData(data.components);
+ }
+ setLoading(false);
+ } else if (data.type === 'error') {
+ setError(data.content);
+ setLoading(false);
+ }
+ };
+
+ ws.onerror = (error) => {
+ console.error('WebSocket error:', error);
+ setError({ message: 'Failed to connect to the server' });
+ setLoading(false);
+ };
+
+ ws.onclose = () => {
+ console.log('WebSocket connection closed');
+ };
+
+ // Store the WebSocket connection for cleanup
+ return ws;
+ } catch (error) {
+ console.error('Failed to connect to WebSocket:', error);
+ setError({ message: 'Failed to connect to the server' });
+ setLoading(false);
+ }
+ };
+
+ const wsConnection = connectWebSocket();
+
+ // Cleanup function
+ return () => {
+ window.removeEventListener('message', handleComponentUpdate);
+ if (wsConnection) {
+ wsConnection.then(ws => {
+ if (ws && ws.readyState === WebSocket.OPEN) {
+ ws.close();
+ }
+ });
+ }
+ };
+ }, []);
+
+ // Filter components to return only the specified component and its dependencies
+ const filterComponentById = (components, componentId) => {
+ if (!components || !componentId) return components;
+
+ // Create a new components object with the same structure
+ const filteredComponents = { ...components };
+
+ // If components use a rows structure, filter them
+ if (filteredComponents.rows) {
+ const flattenedComponents = [];
+
+ // Find the specified component in the rows
+ filteredComponents.rows.forEach(row => {
+ row.forEach(component => {
+ if (component.id === componentId) {
+ flattenedComponents.push(component);
+ }
+ });
+ });
+
+ // Create a single row with the filtered component
+ filteredComponents.rows = flattenedComponents.length > 0 ? [flattenedComponents] : [];
+ }
+
+ return filteredComponents;
+ };
+
+ return (
+
+ {loading &&
Loading...
}
+
+ {error && (
+
+
Error
+
{error.message}
+
+ )}
+
+ {componentData && !loading && !error && (
+
+ )}
+