diff --git a/cmd/build/client.go b/cmd/build/client.go
index 64f45a3a..3c5cc297 100644
--- a/cmd/build/client.go
+++ b/cmd/build/client.go
@@ -255,8 +255,9 @@ func compileSvelte(ctx *v8go.Context, SSRctx *v8go.Context, layoutPath string, d
 	// Remove allComponents object (leaving just componentSignature) for SSR.
 	reAllComponentsDot := regexp.MustCompile(`allComponents\.`)
 	ssrStr = reAllComponentsDot.ReplaceAllString(ssrStr, "")
-	reAllComponentsBracket := regexp.MustCompile(`allComponents\[\"(.*)\"\]`)
-	ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "${1}")
+	reAllComponentsBracket := regexp.MustCompile(`allComponents\[\"?(.*)\"?\]`)
+	//ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "eval(${1})")
+	ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "globalThis[${1}]")
 
 	// Add component to context so it can be used to render HTML in data_source.go.
 	_, addSSRCompErr := SSRctx.RunScript(ssrStr, "create_ssr")
diff --git a/defaults/content/blog/components.json b/defaults/content/blog/components.json
new file mode 100644
index 00000000..9966d8fc
--- /dev/null
+++ b/defaults/content/blog/components.json
@@ -0,0 +1,26 @@
+{
+    "title": "Dynamic components example",
+    "body": [
+        "You can load components from your JSON data source without explicitly",
+        "importing each template using the <b>allComponents</b> helper. This is an",
+        "object that holds a reference to each '.svelte' file in your project. To pull a",
+        "template out of allComponents, you need to use a <em>component signature</em>.",
+        "Luckily they are easy to figure out, just convert '/' and '.' characters to '_'",
+        "in your layout path, so for example layout/components/template.svelte becomes",
+        "layout_components_template_svelte."
+    ],
+	"components": [
+		{
+            "title": "For example we could grab the 'template' component again:",
+			"component": "layout_components_template_svelte",
+			"fields": {"type": "index"}
+		},
+		{
+            "title": "Or we could grab the 'incrementer':",
+			"component": "layout_components_incrementer_svelte",
+			"fields": {}
+		}
+	],
+    "author": "Jim Fisk",
+    "date": "8/25/2020"
+}
\ No newline at end of file
diff --git a/defaults/content/index.json b/defaults/content/index.json
index 8dfa1d05..c87e3043 100755
--- a/defaults/content/index.json
+++ b/defaults/content/index.json
@@ -4,11 +4,5 @@
 		"Take a look around to see how things work.",
 		"The bottom of each page will tell you where to find the corresponding template in your project.",
 		"If you get stuck, check out our <a href='https://plenti.co/docs' target='blank' rel='noopener noreferrer'>docs</a>. If you need extra help, <a href='https://github.com/plentico/plenti/issues/new' target='blank' rel='noopener noreferrer'>let us know</a>! Enjoy :)"
-	],
-	"components": [
-		{
-			"component": "template",
-			"fields": {"type": "index"}
-		}
 	]
 }
\ No newline at end of file
diff --git a/defaults/layout/content/blog.svelte b/defaults/layout/content/blog.svelte
index 9b74a80c..3c6c8721 100755
--- a/defaults/layout/content/blog.svelte
+++ b/defaults/layout/content/blog.svelte
@@ -10,6 +10,9 @@
   const unsubscribe = count.subscribe(value => {
     count_value = value;
   });
+
+  // Content driven dynamic components example:
+  export let components, allComponents;
 </script>
 
 <h1>{title}</h1>
@@ -30,4 +33,11 @@
 
 <Uses type="blog" />
 
+{#if components}
+	{#each components as { title, component, fields }}
+    {title}
+		<svelte:component this="{allComponents[component]}" {...fields} />
+	{/each}
+{/if}
+
 <p><a href="/">Back home</a></p>
diff --git a/defaults/layout/content/index.svelte b/defaults/layout/content/index.svelte
index d9fa6a52..abb6c218 100755
--- a/defaults/layout/content/index.svelte
+++ b/defaults/layout/content/index.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let title, intro, components, allContent;
 	import Grid from '../components/grid.svelte';
-	import { loadComponent } from '../scripts/load_component.svelte';
+  	import Uses from "../components/template.svelte";
 </script>
 
 <h1>{title}</h1>
@@ -18,14 +18,4 @@
 	<br />
 </div>
 
-{#if components}
-	{#each components as { component, fields }}
-		{#await loadComponent(component)}
-			loading component...
-		{:then compClass}
-			<svelte:component this="{compClass}" {...fields} />
-		{:catch error}
-			{console.log(error.message)}
-		{/await}
-	{/each}
-{/if}
\ No newline at end of file
+<Uses type="index" />
\ No newline at end of file
diff --git a/defaults/layout/scripts/load_component.svelte b/defaults/layout/scripts/load_component.svelte
deleted file mode 100644
index 6118d620..00000000
--- a/defaults/layout/scripts/load_component.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script context="module">
-  export const loadComponent = component => {
-    let compClassPromise = import("../components/" + component + ".svelte").then(res => res.default);
-    // Fix "Unhandled promise rejection" error.
-    // See: https://github.com/sveltejs/sapper/issues/487#issuecomment-529145749
-    compClassPromise.catch(err => null)
-    return compClassPromise;
-  }
-</script>
diff --git a/generated/defaults.go b/generated/defaults.go
index ac35126b..193e8550 100644
--- a/generated/defaults.go
+++ b/generated/defaults.go
@@ -29,6 +29,32 @@ node_modules`),
     "body": ["text"],
     "author": "text",
     "date": "date"
+}`),
+	"/content/blog/components.json": []byte(`{
+    "title": "Dynamic components example",
+    "body": [
+        "You can load components from your JSON data source without explicitly",
+        "importing each template using the <b>allComponents</b> helper. This is an",
+        "object that holds a reference to each '.svelte' file in your project. To pull a",
+        "template out of allComponents, you need to use a <em>component signature</em>.",
+        "Luckily they are easy to figure out, just convert '/' and '.' characters to '_'",
+        "in your layout path, so for example layout/components/template.svelte becomes",
+        "layout_components_template_svelte."
+    ],
+	"components": [
+		{
+            "title": "For example we could grab the 'template' component again:",
+			"component": "layout_components_template_svelte",
+			"fields": {"type": "index"}
+		},
+		{
+            "title": "Or we could grab the 'incrementer':",
+			"component": "layout_components_incrementer_svelte",
+			"fields": {}
+		}
+	],
+    "author": "Jim Fisk",
+    "date": "8/25/2020"
 }`),
 	"/content/blog/perry.json": []byte(`{
     "title": "Customize your Planarian",
@@ -64,12 +90,6 @@ node_modules`),
 		"Take a look around to see how things work.",
 		"The bottom of each page will tell you where to find the corresponding template in your project.",
 		"If you get stuck, check out our <a href='https://plenti.co/docs' target='blank' rel='noopener noreferrer'>docs</a>. If you need extra help, <a href='https://github.com/plentico/plenti/issues/new' target='blank' rel='noopener noreferrer'>let us know</a>! Enjoy :)"
-	],
-	"components": [
-		{
-			"component": "template",
-			"fields": {"type": "index"}
-		}
 	]
 }`),
 	"/content/pages/_blueprint.json": []byte(`{
@@ -219,6 +239,9 @@ node_modules`),
   const unsubscribe = count.subscribe(value => {
     count_value = value;
   });
+
+  // Content driven dynamic components example:
+  export let components, allComponents;
 </script>
 
 <h1>{title}</h1>
@@ -239,12 +262,19 @@ node_modules`),
 
 <Uses type="blog" />
 
+{#if components}
+	{#each components as { title, component, fields }}
+    {title}
+		<svelte:component this="{allComponents[component]}" {...fields} />
+	{/each}
+{/if}
+
 <p><a href="/">Back home</a></p>
 `),
 	"/layout/content/index.svelte": []byte(`<script>
 	export let title, intro, components, allContent;
 	import Grid from '../components/grid.svelte';
-	import { loadComponent } from '../scripts/load_component.svelte';
+  	import Uses from "../components/template.svelte";
 </script>
 
 <h1>{title}</h1>
@@ -261,17 +291,7 @@ node_modules`),
 	<br />
 </div>
 
-{#if components}
-	{#each components as { component, fields }}
-		{#await loadComponent(component)}
-			loading component...
-		{:then compClass}
-			<svelte:component this="{compClass}" {...fields} />
-		{:catch error}
-			{console.log(error.message)}
-		{/await}
-	{/each}
-{/if}`),
+<Uses type="index" />`),
 	"/layout/content/pages.svelte": []byte(`<script>
   export let title, description;
   import Uses from "../components/template.svelte";
@@ -442,16 +462,6 @@ node_modules`),
     margin-right: 10px;
   }
 </style>
-`),
-	"/layout/scripts/load_component.svelte": []byte(`<script context="module">
-  export const loadComponent = component => {
-    let compClassPromise = import("../components/" + component + ".svelte").then(res => res.default);
-    // Fix "Unhandled promise rejection" error.
-    // See: https://github.com/sveltejs/sapper/issues/487#issuecomment-529145749
-    compClassPromise.catch(err => null)
-    return compClassPromise;
-  }
-</script>
 `),
 	"/layout/scripts/make_title.svelte": []byte(`<script context="module">
   export const makeTitle = filename => {