diff --git a/docs/embed-sdk.md b/docs/embed-sdk.md
new file mode 100644
index 0000000..fb37891
--- /dev/null
+++ b/docs/embed-sdk.md
@@ -0,0 +1,155 @@
+# atmo.social Embed SDK
+
+Build interactive embeds for your atproto app that render natively inside atmo.social.
+
+## How it works
+
+When a user posts a link to your app on Bluesky (e.g. `https://yourapp.com/p/actor/item/abc`), atmo.social renders it as an iframe embed instead of a generic link card. Your embed page receives the host app's theme and the logged-in user's DID, and can create/delete AT Protocol records on their behalf.
+
+## Setup
+
+### 1. Register your app
+
+Your app needs to be added to the embed registry in atmo.social. Contact us or submit a PR adding your app to `src/lib/components/embed/special/embed-registry.ts`:
+
+```ts
+{
+  domain: 'yourapp.com',
+  match: (href) => /^https?:\/\/(www\.)?yourapp\.com\/p\//.test(href),
+  embedUrl: (href) => {
+    const url = new URL(href);
+    url.pathname = url.pathname.replace(/\/$/, '') + '/embed';
+    url.search = '';
+    return url.toString();
+  },
+  allowedCollections: ['your.lexicon.collection'],
+  aspectRatio: { width: 2, height: 1 }
+}
+```
+
+- **`domain`**: Your domain, used to validate `postMessage` origins
+- **`match`**: Function that returns `true` for URLs that should be embedded
+- **`embedUrl`**: Transforms the original URL into your embed endpoint URL
+- **`allowedCollections`**: AT Protocol collections your embed can write to (scoped permissions)
+- **`aspectRatio`**: Aspect ratio (`width`/`height`) — embed fills full width and maintains this ratio
+
+### 2. Create your embed page
+
+For a URL like `https://yourapp.com/p/actor/item/abc`, serve an embed page at `https://yourapp.com/p/actor/item/abc/embed`.
+
+Include the SDK:
+
+```html
+<script src="https://atmo.social/embed-sdk.js"></script>
+```
+
+### 3. Read parameters
+
+The host app passes theme and auth info as URL search params:
+
+```js
+const { base, accent, dark, did } = AtmoEmbed.getParams();
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `base` | `string` | Base color name (e.g. `mauve`, `slate`, `zinc`) |
+| `accent` | `string` | Accent color name (e.g. `fuchsia`, `blue`, `rose`) |
+| `dark` | `boolean` | Whether dark mode is active |
+| `did` | `string \| null` | The logged-in user's DID, or `null` if not logged in |
+
+Use these to match your embed's theme to the host app. If you use [@foxui/core](https://flo-bit.dev/ui-kit) or Tailwind with the same color system, just add the `base`, `accent`, and optionally `dark` classes to your `<html>` element.
+
+### 4. Create records
+
+Create an AT Protocol record on behalf of the logged-in user:
+
+```js
+const result = await AtmoEmbed.createRecord({
+  collection: 'your.lexicon.collection',
+  rkey: 'optional-record-key', // omitted = auto-generated
+  record: {
+    $type: 'your.lexicon.collection',
+    // ... your record fields
+    createdAt: new Date().toISOString()
+  }
+});
+
+console.log(result.uri); // at://did:plc:.../your.lexicon.collection/...
+```
+
+### 5. Delete records
+
+```js
+await AtmoEmbed.deleteRecord({
+  collection: 'your.lexicon.collection',
+  rkey: 'record-key-to-delete'
+});
+```
+
+## Security
+
+- Your embed runs in a sandboxed iframe (`allow-scripts allow-same-origin`)
+- `postMessage` origins are validated against your registered domain
+- Record operations are scoped to your `allowedCollections` — attempts to write to other collections are rejected
+- The user's auth session is never exposed to the iframe — all writes go through the host app's server
+
+## Example
+
+Here's a minimal embed page for an RSVP button:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://atmo.social/embed-sdk.js"></script>
+  <style>
+    body { margin: 0; font-family: system-ui; display: flex; align-items: center; justify-content: center; height: 100vh; }
+    button { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <button id="rsvp">RSVP Going</button>
+  <script>
+    const { base, accent, dark, did } = AtmoEmbed.getParams();
+
+    // Apply theme
+    if (dark) document.documentElement.classList.add('dark');
+
+    document.getElementById('rsvp').onclick = async () => {
+      if (!did) return alert('Please log in to RSVP');
+
+      try {
+        const result = await AtmoEmbed.createRecord({
+          collection: 'community.lexicon.calendar.rsvp',
+          record: {
+            $type: 'community.lexicon.calendar.rsvp',
+            status: 'community.lexicon.calendar.rsvp#going',
+            subject: {
+              uri: 'at://did:plc:.../community.lexicon.calendar.event/...',
+              cid: '...'
+            },
+            createdAt: new Date().toISOString()
+          }
+        });
+        document.getElementById('rsvp').textContent = 'RSVPd!';
+      } catch (e) {
+        console.error('RSVP failed:', e);
+      }
+    };
+  </script>
+</body>
+</html>
+```
+
+## Full URL example
+
+Original link posted on Bluesky:
+```
+https://atmo.rsvp/p/did:plc:lysqukqdu6hsrhet5v2brjgo/e/3mhqxpdvmw25h
+```
+
+Embed URL loaded in iframe:
+```
+https://atmo.rsvp/embed/p/did:plc:lysqukqdu6hsrhet5v2brjgo/e/3mhqxpdvmw25h?base=mauve&accent=fuchsia&dark=1&did=did:plc:abc123
+```
diff --git a/src/lib/components/embed/Embed.svelte b/src/lib/components/embed/Embed.svelte
index 31e7dfa..300efca 100644
--- a/src/lib/components/embed/Embed.svelte
+++ b/src/lib/components/embed/Embed.svelte
@@ -21,7 +21,7 @@
 	{#if embed.type === 'images'}
 		<Images data={embed} {showSensitive} />
 	{:else if embed.type === 'external' && embed.external && specialEmbed}
-		<specialEmbed.component data={embed} />
+		<specialEmbed.component data={embed} config={specialEmbed.appConfig} />
 	{:else if embed.type === 'external' && embed.external}
 		<External data={embed} />
 	{:else if embed.type === 'video' && embed.video}
diff --git a/src/lib/components/embed/special/AppEmbed.svelte b/src/lib/components/embed/special/AppEmbed.svelte
new file mode 100644
index 0000000..3346590
--- /dev/null
+++ b/src/lib/components/embed/special/AppEmbed.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { EmbedExternalData } from '../types';
+	import type { EmbedAppConfig } from './embed-registry';
+	import IframeEmbed from './IframeEmbed.svelte';
+
+	const { data, config }: { data: EmbedExternalData; config: EmbedAppConfig } = $props();
+</script>
+
+<IframeEmbed {config} url={data.external.href} />
diff --git a/src/lib/components/embed/special/IframeEmbed.svelte b/src/lib/components/embed/special/IframeEmbed.svelte
new file mode 100644
index 0000000..2ee7485
--- /dev/null
+++ b/src/lib/components/embed/special/IframeEmbed.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { putRecord, deleteRecord } from '$lib/atproto/server/repo.remote';
+	import type { EmbedAppConfig } from './embed-registry';
+
+	const { config, url }: { config: EmbedAppConfig; url: string } = $props();
+
+	let iframeEl: HTMLIFrameElement | undefined = $state(undefined);
+
+	// Build embed URL with theme + auth params
+	function buildEmbedUrl(): string {
+		const embedUrl = new URL(config.embedUrl(url));
+
+		// Theme: read current classes from <html>
+		const html = document.documentElement;
+		const classes = Array.from(html.classList);
+
+		// Find base color (gray, stone, zinc, neutral, slate, olive, mauve, mist, taupe)
+		const baseColors = ['gray', 'stone', 'zinc', 'neutral', 'slate', 'olive', 'mauve', 'mist', 'taupe'];
+		const base = classes.find((c) => baseColors.includes(c)) ?? 'mauve';
+
+		// Find accent color
+		const accentColors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+		const accent = classes.find((c) => accentColors.includes(c)) ?? 'fuchsia';
+
+		const dark = html.classList.contains('dark');
+
+		embedUrl.searchParams.set('base', base);
+		embedUrl.searchParams.set('accent', accent);
+		embedUrl.searchParams.set('dark', dark ? '1' : '0');
+
+		if (user.did) {
+			embedUrl.searchParams.set('did', user.did);
+		}
+
+		return embedUrl.toString();
+	}
+
+	let embedSrc = $derived(buildEmbedUrl());
+
+	// Handle postMessage from the iframe
+	async function handleMessage(event: MessageEvent) {
+		// Validate origin matches the registered domain
+		try {
+			const origin = new URL(event.origin);
+			if (!origin.hostname.endsWith(config.domain) && origin.hostname !== config.domain) {
+				return;
+			}
+		} catch {
+			return;
+		}
+
+		const { type, id, ...payload } = event.data ?? {};
+		if (!type || !id) return;
+
+		try {
+			let result: unknown;
+
+			if (type === 'createRecord') {
+				// Validate collection is allowed
+				if (!config.allowedCollections.includes(payload.collection)) {
+					sendResponse(id, null, `Collection '${payload.collection}' is not allowed for this embed`);
+					return;
+				}
+				result = await putRecord({
+					collection: payload.collection,
+					rkey: payload.rkey,
+					record: payload.record
+				});
+			} else if (type === 'deleteRecord') {
+				if (!config.allowedCollections.includes(payload.collection)) {
+					sendResponse(id, null, `Collection '${payload.collection}' is not allowed for this embed`);
+					return;
+				}
+				result = await deleteRecord({
+					collection: payload.collection,
+					rkey: payload.rkey
+				});
+			} else {
+				return; // Unknown message type
+			}
+
+			sendResponse(id, result, null);
+		} catch (e) {
+			sendResponse(id, null, String(e));
+		}
+	}
+
+	function sendResponse(id: string, result: unknown, error: string | null) {
+		iframeEl?.contentWindow?.postMessage(
+			{ type: 'response', id, result, error },
+			new URL(config.embedUrl(url)).origin
+		);
+	}
+
+	onMount(() => {
+		window.addEventListener('message', handleMessage);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('message', handleMessage);
+	});
+</script>
+
+<div
+	class="border-base-300 dark:border-base-600/30 w-full overflow-hidden rounded-2xl border"
+	style="aspect-ratio: {config.aspectRatio.width} / {config.aspectRatio.height}"
+>
+	<iframe
+		bind:this={iframeEl}
+		src={embedSrc}
+		title="Embedded content from {config.domain}"
+		class="h-full w-full border-0"
+		sandbox="allow-scripts allow-same-origin"
+		loading="lazy"
+	></iframe>
+</div>
diff --git a/src/lib/components/embed/special/embed-registry.ts b/src/lib/components/embed/special/embed-registry.ts
new file mode 100644
index 0000000..5e32e27
--- /dev/null
+++ b/src/lib/components/embed/special/embed-registry.ts
@@ -0,0 +1,47 @@
+/**
+ * Registry of third-party atproto apps that support embedding.
+ *
+ * Each entry defines:
+ * - match: which external links should use the embed
+ * - embedUrl: transforms the original URL into the embed URL
+ * - allowedCollections: which AT Protocol collections the embed can create/delete records in
+ * - dimensions: fixed aspect ratio to prevent layout shift
+ */
+
+export interface EmbedAppConfig {
+	/** Domain identifier for postMessage origin validation */
+	domain: string;
+	/** Match function: returns true if this external link should be embedded */
+	match: (href: string) => boolean;
+	/** Transform the original URL into the embed URL */
+	embedUrl: (href: string) => string;
+	/** Collections the embed is allowed to create/delete records in */
+	allowedCollections: string[];
+	/** Aspect ratio for the embed to prevent layout shift */
+	aspectRatio: { width: number; height: number };
+}
+
+export const embedApps: EmbedAppConfig[] = [
+	{
+		domain: 'atmo.rsvp',
+		match: (href) => /^https?:\/\/(www\.)?atmo\.rsvp\/p\/[^/]+\/e\/[^/]+\/?$/.test(href),
+		embedUrl: (href) => {
+			const url = new URL(href);
+			// /p/actor/e/rkey -> /embed/p/actor/e/rkey
+			url.pathname = '/embed' + url.pathname.replace(/\/$/, '');
+			url.search = '';
+			return url.toString();
+		},
+		allowedCollections: [
+			'community.lexicon.calendar.rsvp'
+		],
+		aspectRatio: { width: 2, height: 1 }
+	}
+];
+
+/**
+ * Find an embed app config for a given URL.
+ */
+export function findEmbedApp(href: string): EmbedAppConfig | undefined {
+	return embedApps.find((app) => app.match(href));
+}
diff --git a/src/lib/components/embed/special/index.ts b/src/lib/components/embed/special/index.ts
index ed618cf..9e3777c 100644
--- a/src/lib/components/embed/special/index.ts
+++ b/src/lib/components/embed/special/index.ts
@@ -2,11 +2,14 @@ import type { Component } from 'svelte';
 import type { EmbedExternalData } from '../types';
 import YouTubeEmbed from './YouTubeEmbed.svelte';
 import TenorEmbed from './TenorEmbed.svelte';
-import AtmoRsvpEmbed from './AtmoRsvpEmbed.svelte';
+import AppEmbed from './AppEmbed.svelte';
+import { findEmbedApp, type EmbedAppConfig } from './embed-registry';
 
 export type SpecialEmbed = {
 	match: (data: EmbedExternalData) => boolean;
-	component: Component<{ data: EmbedExternalData }>;
+	component: Component<{ data: EmbedExternalData; config?: EmbedAppConfig }>;
+	/** If set, this is an app embed with iframe + postMessage support */
+	appConfig?: EmbedAppConfig;
 };
 
 export const specialEmbeds: SpecialEmbed[] = [
@@ -23,14 +26,24 @@ export const specialEmbeds: SpecialEmbed[] = [
 		},
 		component: TenorEmbed
 	},
-	{
-		match: (data) => {
-			return /^https?:\/\/(www\.)?atmo\.rsvp\/p\//.test(data.external.href);
-		},
-		component: AtmoRsvpEmbed
-	}
 ];
 
 export function findSpecialEmbed(data: EmbedExternalData): SpecialEmbed | undefined {
-	return specialEmbeds.find((e) => e.match(data));
+	// Check hardcoded special embeds first
+	const special = specialEmbeds.find((e) => e.match(data));
+	if (special) return special;
+
+	// Check app embed registry
+	const appConfig = findEmbedApp(data.external.href);
+	if (appConfig) {
+		return {
+			match: () => true,
+			component: AppEmbed,
+			appConfig
+		};
+	}
+
+	return undefined;
 }
+
+export { findEmbedApp, type EmbedAppConfig } from './embed-registry';
diff --git a/static/embed-sdk.js b/static/embed-sdk.js
new file mode 100644
index 0000000..d7f303d
--- /dev/null
+++ b/static/embed-sdk.js
@@ -0,0 +1,103 @@
+/**
+ * atmo.social Embed SDK
+ *
+ * Include this script in your embed page to communicate with the host app.
+ *
+ * Usage:
+ *   <script src="https://atmo.social/embed-sdk.js"><\/script>
+ *   <script>
+ *     // Read params passed by the host
+ *     const { base, accent, dark, did } = AtmoEmbed.getParams();
+ *
+ *     // Create a record on behalf of the logged-in user
+ *     const result = await AtmoEmbed.createRecord({
+ *       collection: 'community.lexicon.calendar.rsvp',
+ *       record: { ... }
+ *     });
+ *
+ *     // Delete a record
+ *     await AtmoEmbed.deleteRecord({
+ *       collection: 'community.lexicon.calendar.rsvp',
+ *       rkey: 'abc123'
+ *     });
+ *   <\/script>
+ */
+(function () {
+	'use strict';
+
+	let _id = 0;
+	const _pending = new Map();
+
+	// Listen for responses from the host
+	window.addEventListener('message', function (event) {
+		const data = event.data;
+		if (!data || data.type !== 'response' || !data.id) return;
+		const pending = _pending.get(data.id);
+		if (!pending) return;
+		_pending.delete(data.id);
+		if (data.error) {
+			pending.reject(new Error(data.error));
+		} else {
+			pending.resolve(data.result);
+		}
+	});
+
+	function sendMessage(type, payload) {
+		return new Promise(function (resolve, reject) {
+			var id = 'embed-' + (++_id);
+			_pending.set(id, { resolve: resolve, reject: reject });
+			window.parent.postMessage(
+				Object.assign({ type: type, id: id }, payload),
+				'*'
+			);
+			// Timeout after 30s
+			setTimeout(function () {
+				if (_pending.has(id)) {
+					_pending.delete(id);
+					reject(new Error('Request timed out'));
+				}
+			}, 30000);
+		});
+	}
+
+	window.AtmoEmbed = {
+		/**
+		 * Get the parameters passed by the host app.
+		 * @returns {{ base: string, accent: string, dark: boolean, did: string | null }}
+		 */
+		getParams: function () {
+			var params = new URLSearchParams(window.location.search);
+			return {
+				base: params.get('base') || 'mauve',
+				accent: params.get('accent') || 'fuchsia',
+				dark: params.get('dark') === '1',
+				did: params.get('did') || null
+			};
+		},
+
+		/**
+		 * Create a record on behalf of the logged-in user.
+		 * @param {{ collection: string, rkey?: string, record: object }} opts
+		 * @returns {Promise<{ uri: string, cid: string }>}
+		 */
+		createRecord: function (opts) {
+			return sendMessage('createRecord', {
+				collection: opts.collection,
+				rkey: opts.rkey,
+				record: opts.record
+			});
+		},
+
+		/**
+		 * Delete a record owned by the logged-in user.
+		 * @param {{ collection: string, rkey: string }} opts
+		 * @returns {Promise<void>}
+		 */
+		deleteRecord: function (opts) {
+			return sendMessage('deleteRecord', {
+				collection: opts.collection,
+				rkey: opts.rkey
+			});
+		}
+	};
+})();