diff --git a/lib/folk-rapp.ts b/lib/folk-rapp.ts
index 3fd51c1..2b3a4b4 100644
--- a/lib/folk-rapp.ts
+++ b/lib/folk-rapp.ts
@@ -340,8 +340,15 @@ export class FolkRApp extends FolkShape {
 	override createRenderRoot() {
 		const root = super.createRenderRoot();
 
-		this.#moduleId = this.getAttribute("module-id") || "";
-		this.#spaceSlug = this.getAttribute("space-slug") || "";
+		// Prefer JS-set properties (from newShape props); fall back to HTML attributes
+		if (!this.#moduleId) this.#moduleId = this.getAttribute("module-id") || "";
+		if (!this.#spaceSlug) this.#spaceSlug = this.getAttribute("space-slug") || "";
+
+		// Auto-derive spaceSlug from current URL if not explicitly provided (/{space}/canvas → space)
+		if (!this.#spaceSlug) {
+			const pathParts = window.location.pathname.split("/").filter(Boolean);
+			if (pathParts.length >= 1) this.#spaceSlug = pathParts[0];
+		}
 
 		const meta = MODULE_META[this.#moduleId];
 		const headerColor = meta?.color || "#475569";
@@ -530,7 +537,11 @@ export class FolkRApp extends FolkShape {
 			</div>
 		`;
 
-		// Create iframe
+		// Auto-derive space from URL if still missing
+		if (!this.#spaceSlug) {
+			const pathParts = window.location.pathname.split("/").filter(Boolean);
+			if (pathParts.length >= 1) this.#spaceSlug = pathParts[0];
+		}
 		const space = this.#spaceSlug || "demo";
 		const iframeUrl = `/${space}/${this.#moduleId}`;
 
diff --git a/website/canvas.html b/website/canvas.html
index d9e02f8..1e5c4ce 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1395,7 +1395,7 @@
 					case "folk-rapp":
 						shape = document.createElement("folk-rapp");
 						if (data.moduleId) shape.moduleId = data.moduleId;
-						if (data.spaceSlug) shape.spaceSlug = data.spaceSlug;
+						shape.spaceSlug = data.spaceSlug || communitySlug;
 						break;
 					case "folk-feed":
 						shape = document.createElement("folk-feed");