diff --git a/README.md b/README.md
index fe1a787..701c34a 100644
--- a/README.md
+++ b/README.md
@@ -93,11 +93,22 @@ into existing projects.
 # npm install deka-dom-el
 ```
 
-#### Direct Script
+#### CDN / Direct Script
+
+For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation site.
+
 ```html
+<!-- Example with IIFE build (creates a global DDE object) -->
 <script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
-<script type="module">
+<script>
 	const { el, S } = DDE;
+	// Your code here
+</script>
+
+<!-- Or with ES modules -->
+<script type="module">
+	import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js";
+	// Your code here
 </script>
 ```
 
diff --git a/docs/components/code.html.js b/docs/components/code.html.js
index 7d2736f..6425412 100644
--- a/docs/components/code.html.js
+++ b/docs/components/code.html.js
@@ -184,7 +184,7 @@ import { el } from "deka-dom-el";
  * @param {string} [attrs.className]
  * @param {URL} [attrs.src] Example code file path
  * @param {string} [attrs.content] Example code
- * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
+ * @param {"js"|"ts"|"html"|"css"|"shell"} [attrs.language="js"] Language of the code
  * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
  * */
 export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){
diff --git a/docs/components/getLibraryUrl.css.js b/docs/components/getLibraryUrl.css.js
index f39b195..4c23d59 100644
--- a/docs/components/getLibraryUrl.css.js
+++ b/docs/components/getLibraryUrl.css.js
@@ -4,5 +4,69 @@ styles.css`
 #library-url-form {
 	display: flex;
 	flex-flow: column nowrap;
+	gap: 1rem;
+	padding: 1.5rem;
+	border-radius: var(--border-radius);
+	background-color: var(--bg-sidebar);
+	box-shadow: var(--shadow);
+	border: 1px solid var(--border);
+	margin: 1.5rem 0;
+}
+
+#library-url-form .selectors {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 0.75rem;
+}
+
+#library-url-form output {
+	display: flex;
+	flex-flow: column nowrap;
+	gap: 0.75rem;
+	margin-top: 0.5rem;
+}
+
+#library-url-form output p {
+	font-weight: 500;
+	margin: 0.25rem 0;
+	color: var(--text-light);
+}
+
+#library-url-form .url-title {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: -0.25rem;
+}
+
+#library-url-form .url-title strong {
+	font-family: var(--font-mono);
+	font-size: 0.95rem;
+}
+
+#library-url-form .url-title span {
+	color: var(--text-light);
+	font-size: 0.9rem;
+}
+
+#library-url-form .code {
+	margin-bottom: 1rem;
+}
+
+#library-url-form .info-text {
+	font-size: 0.9rem;
+	font-style: italic;
+	margin-top: 1rem;
+	color: var(--text-light);
+}
+
+@media (max-width: 768px) {
+	#library-url-form .selectors {
+		flex-direction: column;
+	}
+
+	#library-url-form select {
+		width: 100%;
+	}
 }
 `;
diff --git a/docs/components/getLibraryUrl.js.js b/docs/components/getLibraryUrl.js.js
index 25621d2..e89dca7 100644
--- a/docs/components/getLibraryUrl.js.js
+++ b/docs/components/getLibraryUrl.js.js
@@ -8,6 +8,13 @@ const url_base= {
 export function getLibraryUrl(){
 	const lib= S([ "esm", "-with-signals", ".min" ]);
 	const url= S(()=> url_base.jsdeka+lib.get().join(""));
+	const urlLabel= S(() => {
+		const [format, signalsPart, minified] = lib.get();
+		const formatText = format === "esm" ? "ES Module" : "IIFE";
+		const signalsText = signalsPart ? " with signals" : "";
+		const minText = minified ? " (minified)" : "";
+		return `${formatText}${signalsText}${minText}`;
+	})
 	const onSubmit= on("submit", ev => {
 		ev.preventDefault();
 		const form= new FormData(/** @type {HTMLFormElement} */ (ev.target));
@@ -20,56 +27,66 @@ export function getLibraryUrl(){
 	const onChangeSubmit= on("change",
 		ev=> /** @type {HTMLSelectElement} */(ev.target).form.requestSubmit()
 	);
-	const onCopy= on("click", ev => {
-		const code= /** @type {HTMLDivElement} */ (ev.target).previousElementSibling;
-		navigator.clipboard.writeText(code.textContent);
-	});
 
 	return el("form", { id: "library-url-form" }, onSubmit).append(
-		el("select", { name: "module" }, onChangeSubmit).append(
-			el("option", { value: "esm", textContent: "ESM — modern JavaScript module" },
-				isSelected(lib.get()[0])),
-			el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" },
-				isSelected(lib.get()[0])),
-		),
-		el("select", { name: "what" }, onChangeSubmit).append(
-			el("option", { value: "", textContent: "only DOM part" },
-				isSelected(lib.get()[1])),
-			el("option", { value: "-with-signals", textContent: "DOM part and signals library" },
-				isSelected(lib.get()[1])),
-		),
-		el("select", { name: "minified" }, onChangeSubmit).append(
-			el("option", { value: "", textContent: "unminified" },
-				isSelected(lib.get()[2])),
-			el("option", { value: ".min", textContent: "minified" },
-				isSelected(lib.get()[2])),
+		el("h4", "Select your preferred library format:"),
+		el("div", { className: "selectors" }).append(
+			el("select", { name: "module" }, onChangeSubmit,
+				on.host(select => select.value = lib.get()[0]),
+			).append(
+				el("option", { value: "esm", textContent: "ESM — modern JavaScript module" }),
+				el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" }),
+			),
+			el("select", { name: "what" }, onChangeSubmit,
+				on.host(select => select.value = lib.get()[1]),
+			).append(
+				el("option", { value: "", textContent: "DOM part only" }),
+				el("option", { value: "-with-signals", textContent: "DOM + signals" }),
+			),
+			el("select", { name: "minified" }, onChangeSubmit,
+				on.host(select => select.value = lib.get()[2]),
+			).append(
+				el("option", { value: "", textContent: "Unminified" }),
+				el("option", { value: ".min", textContent: "Minified" }),
+			),
 		),
 		el("output").append(
-			el("p", "Library URL:"),
-			el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append(
-				el("code").append(
-					el("pre", S(()=> url.get()+".js")),
-				),
-				el("button", {
-					className: "copy-button",
-					textContent: "Copy",
-					ariaLabel: "Copy code to clipboard",
-				}, onCopy),
+			el("div", { className: "url-title" }).append(
+				el("strong", "JavaScript:"),
+				el("span", urlLabel),
 			),
-			el("p", "Library type definition:"),
-			el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append(
-				el("code").append(
-					el("pre", S(()=> url.get()+".d.ts")),
-				),
-				el("button", {
-					className: "copy-button",
-					textContent: "Copy",
-					ariaLabel: "Copy code to clipboard",
-				}, onCopy),
+			el(code, { value: S(()=> url.get()+".js") }),
+			el("div", { className: "url-title" }).append(
+				el("strong", "TypeScript definition:")
 			),
+			el(code, { value: S(()=> url.get()+".d.ts") }),
+			el("p", { className: "info-text",
+				textContent: "Use the CDN URL in your HTML or import it in your JavaScript files."
+			})
 		)
 	)
 }
-function isSelected(value){
-	return element=> element.selected= element.value===value;
+/** @param {{ value: ddeSignal<string> }} props */
+function code({ value }){
+	/** @type {ddeSignal<"Copy"|"Copied!">} */
+	const textContent= S("Copy");
+	const onCopy= on("click", () => {
+		navigator.clipboard.writeText(value.get());
+
+		textContent.set("Copied!");
+		setTimeout(() => {
+			textContent.set("Copy");
+		}, 1500);
+	});
+	return el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append(
+		el("code").append(
+			el("pre", value),
+		),
+		el("button", {
+			className: "copy-button",
+			textContent,
+			ariaLabel: "Copy code to clipboard",
+		}, onCopy)
+	)
+	;
 }
diff --git a/docs/global.css.js b/docs/global.css.js
index fc8a912..11241cd 100644
--- a/docs/global.css.js
+++ b/docs/global.css.js
@@ -86,7 +86,7 @@ html {
 }
 
 :focus-visible {
-	outline: 3px solid hsl(231, 48%, 70%);
+	outline: 3px solid var(--primary-light);
 	outline-offset: 2px;
 }
 
@@ -207,6 +207,20 @@ figure {
 		max-width: 100%;
 	}
 }
+select {
+	padding: 0.5rem 0.75rem;
+	border-radius: var(--border-radius);
+	border: 1px solid var(--border);
+	background-color: var(--bg);
+	color: var(--text);
+	cursor: pointer;
+	font-size: 0.95rem;
+	font-family: var(--font-main);
+}
+
+select:hover {
+	border-color: var(--primary);
+}
 
 /* Layout */
 body {
diff --git a/docs/index.html.js b/docs/index.html.js
index 06f71e9..ddb4cb5 100644
--- a/docs/index.html.js
+++ b/docs/index.html.js
@@ -101,13 +101,33 @@ export function page({ pkg, info }){
 
 		el(h3, t`Getting Started`),
 		el("p").append(T`
-			To get builded dd<el> to be used immediately in your browser, you can download the latest version from:
+			There are multiple ways to include dd<el> in your project. You can use npm for a full development setup,
+			or directly include it from a CDN for quick prototyping.
+		`),
+		el("h4", "npm installation"),
+		el(code, { content: "npm install deka-dom-el # Coming soon", language: "shell", page_id }),
+		el("h4", "CDN / Direct Script Usage"),
+		el("p").append(T`
+			Use the interactive selector below to choose your preferred format:
 		`),
 		el(ireland, {
 			src: fileURL("./components/getLibraryUrl.js.js"),
 			exportName: "getLibraryUrl",
 			page_id,
 		}),
+		el("div", { className: "note" }).append(
+			el("p").append(T`
+				Based on your selection, you can use dd<el> in your project like this:
+			`),
+			el(code, { content: `
+				// ESM format (modern JavaScript with import/export)
+				import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js";
+
+				// Or with IIFE format (creates a global DDE object)
+				// <script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
+				const { el, on } = DDE;
+			`, language: "js", page_id }),
+		),
 
 		el(h3, t`How to Use This Documentation`),
 		el("p").append(T`