diff --git a/package-lock.json b/package-lock.json
index 4b5f87a..6ce23ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
 			"dependencies": {
 				"@floating-ui/dom": "^0.1.4",
 				"chart.js": "^3.4.0",
-				"chartjs-plugin-crosshair": "^1.2.0"
+				"chartjs-plugin-crosshair": "^1.2.0",
+				"svelte-watch-resize": "^1.0.3"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
@@ -729,6 +730,11 @@
 				}
 			]
 		},
+		"node_modules/batch-processor": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+			"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1416,6 +1422,14 @@
 			"integrity": "sha512-Cu5+dbg55+1E3ohlsa8HT0s4b8D0gBewXEGG8s5wBl8ynWv60VuvYW25GpsOeTVXpulhyU/U8JYZH+yxASSJBQ==",
 			"dev": true
 		},
+		"node_modules/element-resize-detector": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz",
+			"integrity": "sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==",
+			"dependencies": {
+				"batch-processor": "1.0.0"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4622,6 +4636,14 @@
 				}
 			}
 		},
+		"node_modules/svelte-watch-resize": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-watch-resize/-/svelte-watch-resize-1.0.3.tgz",
+			"integrity": "sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==",
+			"dependencies": {
+				"element-resize-detector": "^1.1"
+			}
+		},
 		"node_modules/svgo": {
 			"version": "2.8.0",
 			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -5443,6 +5465,11 @@
 			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
 			"dev": true
 		},
+		"batch-processor": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+			"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -5937,6 +5964,14 @@
 			"integrity": "sha512-Cu5+dbg55+1E3ohlsa8HT0s4b8D0gBewXEGG8s5wBl8ynWv60VuvYW25GpsOeTVXpulhyU/U8JYZH+yxASSJBQ==",
 			"dev": true
 		},
+		"element-resize-detector": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz",
+			"integrity": "sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==",
+			"requires": {
+				"batch-processor": "1.0.0"
+			}
+		},
 		"emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -8150,6 +8185,14 @@
 				"strip-indent": "^3.0.0"
 			}
 		},
+		"svelte-watch-resize": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-watch-resize/-/svelte-watch-resize-1.0.3.tgz",
+			"integrity": "sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==",
+			"requires": {
+				"element-resize-detector": "^1.1"
+			}
+		},
 		"svgo": {
 			"version": "2.8.0",
 			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
diff --git a/package.json b/package.json
index f2b1a67..5cb5134 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-vercel": "next",
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^4.31.1",
 		"@typescript-eslint/parser": "^4.31.1",
+		"cssnano": "^5.0.12",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^3.2.1",
@@ -31,14 +33,13 @@
 		"svelte-preprocess": "^4.9.4",
 		"svimg": "^1.1.0",
 		"tslib": "^2.3.1",
-		"typescript": "^4.4.3",
-		"@sveltejs/adapter-vercel": "next",
-		"cssnano": "^5.0.12"
+		"typescript": "^4.4.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@floating-ui/dom": "^0.1.4",
 		"chart.js": "^3.4.0",
-		"chartjs-plugin-crosshair": "^1.2.0"
+		"chartjs-plugin-crosshair": "^1.2.0",
+		"svelte-watch-resize": "^1.0.3"
 	}
 }
diff --git a/src/components/Example.svelte b/src/components/Example.svelte
new file mode 100644
index 0000000..0897e6d
--- /dev/null
+++ b/src/components/Example.svelte
@@ -0,0 +1,69 @@
+<script>
+  import { fluidSize, maxSize, minSize, relativeSizePx, rootFontSize } from '../modules/form/store';
+  import { calculateSizeValue } from '../modules/tracker/utils';
+  
+  export let text;
+
+  // Determine the document width on resize of the window
+  let screenWidth = document.documentElement.clientWidth
+  const handleResize = ()=> {
+    screenWidth = document.documentElement.clientWidth
+  }
+
+  // Compute the font-size
+  $: sizeValue = calculateSizeValue(screenWidth, $fluidSize, $relativeSizePx, $minSize, $maxSize);
+</script>
+
+<svelte:window on:resize={handleResize}/>
+
+<section class="example">
+
+  <!-- Placeholder for future slider to simulate various viewport widths -->
+
+  <aside class="example__msg">
+    The current viewport <code>width</code> is 
+    <strong class="example__msg--vp">{screenWidth}px</strong>.
+    Therefor the computed <code>font-size</code> of the text below is
+    <strong class="example__msg--fs"> {sizeValue}px</strong>.
+  </aside>
+
+  <div 
+    class="example__txt" 
+    style="--clamped-size: {text.substring(0, text.length - 1)}"
+    contenteditable="true"
+    >
+    Hello world (this text is editable)
+  </div>
+
+</section>
+
+
+<style>
+  .example__msg {
+    font-family: var(--font-family-primary);
+    text-align: left;
+  }
+
+  .example__msg--vp {
+    color: var(--color-secondary);
+  }
+
+  .example__msg--fs {
+    color: var(--color-primary);
+  }
+
+  .example__txt {
+    margin-top: var(--spacing-2);
+    padding: var(--spacing-1);
+    font-size: var(--clamped-size);
+    border: 2px solid var(--color-secondary-faded);
+    border-radius: var(--spacing-n4);
+    
+    &:focus {
+      background-color: var(--color-secondary-faded);
+      color: var(--color-secondary);
+      outline: none;
+      border-color: var(--color-secondary-tint);
+    }
+  }
+</style>
diff --git a/src/components/Snippet.svelte b/src/components/Snippet.svelte
index 1aa3515..2b9d48e 100644
--- a/src/components/Snippet.svelte
+++ b/src/components/Snippet.svelte
@@ -23,7 +23,6 @@
 	<pre
 		class="snippet__wrapper">
         <code class="snippet__code">
-
             {text}
         </code>
     </pre>
@@ -38,7 +37,7 @@
 		border-radius: 8px;
 		color: var(--color-gray-light);
 		max-width: 100%;
-		ovverflow: auto;
+		overflow: auto;
 
 		@media (--mq-desktop-min) {
 			display: flex;
diff --git a/src/modules/tabs/Tabs.svelte b/src/modules/tabs/Tabs.svelte
index a1fc283..86c5656 100644
--- a/src/modules/tabs/Tabs.svelte
+++ b/src/modules/tabs/Tabs.svelte
@@ -53,7 +53,7 @@
 		text-align: center;
 		display: block;
 		border: 2px solid currentColor;
-		border-radius: var(--spacing-n1) 0 0 var(--spacing-n1);
+		
 		flex-grow: 1;
 
 		@media (--mq-mobileLandscape-min) {
@@ -61,11 +61,18 @@
 			min-width: calc(2 * var(--spacing-4));
 			padding: var(--spacing-n1) var(--spacing-1);
 		}
-	}
 
-	.tab__button + .tab__button {
-		border-radius: 0 var(--spacing-n1) var(--spacing-n1) 0;
-		margin-left: -2px;
+		&:first-child {
+			border-radius: var(--spacing-n1) 0 0 var(--spacing-n1);
+		}
+
+		&:last-child {
+			border-radius: 0 var(--spacing-n1) var(--spacing-n1) 0;
+		}
+
+		&:not(:first-child) {
+			margin-left: -2px;
+		}
 	}
 
 	.tab__button--active {
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index d4ee661..daa9067 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,6 +5,7 @@
 	import Legend from 'src/components/Legend.svelte';
 	import Snippet from 'src/components/Snippet.svelte';
 	import Stats from 'src/components/Stats.svelte';
+	import Example from 'src/components/Example.svelte';
 	import { clampValue, maxSize, minSize } from 'src/modules/form/store';
 	import { graphChangeEnd, graphChangeStart } from 'src/modules/graph/derived';
 	import AddValue from 'src/modules/tracker/AddValue.svelte';
@@ -17,7 +18,7 @@
 	</aside>
 
 	<section class="homepage__content">
-		<Tabs tabs={['Graph', 'Table']} let:activeTab>
+		<Tabs tabs={['Graph', 'Table', 'Example']} let:activeTab>
 			{#if activeTab === 0}
 				<Stats
 					minValue={$minSize}
@@ -26,6 +27,8 @@
 					end={$graphChangeEnd.x}
 				/>
 				<Graph />
+			{:else if activeTab === 2}
+				<Example text={$clampValue} />
 			{:else}
 				<AddValue />
 				<article class="homepage__wrapper">