diff --git a/modules/rsocials/mod.ts b/modules/rsocials/mod.ts
index 99ff106..3713435 100644
--- a/modules/rsocials/mod.ts
+++ b/modules/rsocials/mod.ts
@@ -530,20 +530,45 @@ routes.get("/", (c) => {
 		}));
 	}
 
-	const isDemo = space === "demo";
-	const body = isDemo ? renderDemoFeedHTML() : renderLanding();
-	const styles = isDemo
-		? `<link rel="stylesheet" href="/modules/rsocials/socials.css">`
-		: `<style>${RICH_LANDING_CSS}</style>`;
+	if (view === "feed") {
+		const isDemo = space === "demo";
+		const body = isDemo ? renderDemoFeedHTML() : renderLanding();
+		const styles = isDemo
+			? `<link rel="stylesheet" href="/modules/rsocials/socials.css">`
+			: `<style>${RICH_LANDING_CSS}</style>`;
+		return c.html(renderShell({
+			title: `${space} — Socials Feed | rSpace`,
+			moduleId: "rsocials",
+			spaceSlug: space,
+			modules: getModuleInfoList(),
+			theme: "dark",
+			body,
+			styles,
+		}));
+	}
 
+	if (view === "landing") {
+		return c.html(renderShell({
+			title: `${space} — rSocials | rSpace`,
+			moduleId: "rsocials",
+			spaceSlug: space,
+			modules: getModuleInfoList(),
+			theme: "dark",
+			body: renderLanding(),
+			styles: `<style>${RICH_LANDING_CSS}</style>`,
+		}));
+	}
+
+	// Default: canvas view
 	return c.html(renderShell({
-		title: `${space} — Socials | rSpace`,
+		title: `${space} — rSocials | rSpace`,
 		moduleId: "rsocials",
 		spaceSlug: space,
 		modules: getModuleInfoList(),
+		body: `<folk-socials-canvas space="${escapeHtml(space)}"></folk-socials-canvas>`,
+		scripts: `<script type="module" src="/modules/rsocials/folk-socials-canvas.js"></script>`,
+		styles: `<link rel="stylesheet" href="/modules/rsocials/socials-canvas.css">`,
 		theme: "dark",
-		body,
-		styles,
 	}));
 });
 
diff --git a/vite.config.ts b/vite.config.ts
index 9752e19..68cbb08 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -635,6 +635,32 @@ export default defineConfig({
 						resolve(__dirname, "dist/modules/rsocials/socials.css"),
 					);
 
+					// Build socials canvas component
+					await build({
+						configFile: false,
+						root: resolve(__dirname, "modules/rsocials/components"),
+						build: {
+							emptyOutDir: false,
+							outDir: resolve(__dirname, "dist/modules/rsocials"),
+							lib: {
+								entry: resolve(__dirname, "modules/rsocials/components/folk-socials-canvas.ts"),
+								formats: ["es"],
+								fileName: () => "folk-socials-canvas.js",
+							},
+							rollupOptions: {
+								output: {
+									entryFileNames: "folk-socials-canvas.js",
+								},
+							},
+						},
+					});
+
+					// Copy socials canvas CSS
+					copyFileSync(
+						resolve(__dirname, "modules/rsocials/components/socials-canvas.css"),
+						resolve(__dirname, "dist/modules/rsocials/socials-canvas.css"),
+					);
+
 					// Build tube module component
 					await build({
 						configFile: false,