diff --git a/docs/components/converter.html.js b/docs/components/converter.html.js
new file mode 100644
index 0000000..5afa57f
--- /dev/null
+++ b/docs/components/converter.html.js
@@ -0,0 +1,174 @@
+import { styles } from "../ssr.js";
+
+styles.css`
+#html-to-dde-converter {
+	grid-column: full-main;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	padding: 1.5rem;
+	border-radius: var(--border-radius);
+	background-color: var(--bg-sidebar);
+	box-shadow: var(--shadow);
+	border: 1px solid var(--border);
+}
+
+#html-to-dde-converter h3 {
+	margin-top: 0;
+	color: var(--primary);
+}
+
+#html-to-dde-converter .description {
+	color: var(--text-light);
+	font-size: 0.95rem;
+	margin-top: -1rem;
+}
+
+#html-to-dde-converter .converter-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+#html-to-dde-converter .input-group,
+#html-to-dde-converter .output-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+#html-to-dde-converter [type="number"]{
+	width: 3em;
+	font-variant-numeric: tabular-nums;
+	font-size: 1rem;
+}
+
+#html-to-dde-converter label {
+	font-weight: 500;
+	display: flex;
+	justify-content: space-between;
+}
+
+#html-to-dde-converter .options {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+#html-to-dde-converter .option-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+#html-to-dde-converter textarea {
+	font-family: var(--font-mono);
+	font-size: 0.9rem;
+	padding: 1rem;
+	border-radius: var(--border-radius);
+	border: 1px solid var(--border);
+	background-color: var(--bg);
+	color: var(--text);
+	min-height: 200px;
+	resize: vertical;
+}
+
+#html-to-dde-converter textarea:focus {
+	outline: 2px solid var(--primary-light);
+	outline-offset: 1px;
+}
+
+#html-to-dde-converter .button-group {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: space-between;
+	align-items: center;
+}
+
+#html-to-dde-converter button {
+	padding: 0.5rem 1rem;
+	border-radius: var(--border-radius);
+	border: none;
+	background-color: var(--primary);
+	color: var(--button-text);
+	font-weight: 500;
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+#html-to-dde-converter button:hover {
+	background-color: var(--primary-dark);
+}
+
+#html-to-dde-converter button.secondary {
+	background-color: transparent;
+	border: 1px solid var(--border);
+	color: var(--text);
+}
+
+#html-to-dde-converter button.secondary:hover {
+	background-color: var(--bg);
+	border-color: var(--primary);
+}
+
+#html-to-dde-converter .copy-button {
+	background-color: var(--secondary);
+}
+
+#html-to-dde-converter .copy-button:hover {
+	background-color: var(--secondary-dark);
+}
+
+#html-to-dde-converter .status {
+	font-size: 0.9rem;
+	color: var(--text-light);
+}
+
+#html-to-dde-converter .error {
+	color: hsl(0, 100%, 60%);
+	font-size: 0.9rem;
+	margin-top: 0.5rem;
+}
+
+/* Sample HTML examples list */
+#html-to-dde-converter .examples-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-top: 0.5rem;
+}
+
+#html-to-dde-converter .example-button {
+	font-size: 0.85rem;
+	padding: 0.25rem 0.5rem;
+}
+`;
+
+import { ireland } from "./ireland.html.js";
+import { el } from "deka-dom-el";
+const fileURL= url=> new URL(url, import.meta.url);
+
+export function converter({ page_id }){
+	registerClientPart(page_id);
+	return el(ireland, {
+		src: fileURL("./converter.js.js"),
+		exportName: "converter",
+		page_id,
+	});
+}
+
+let is_registered= {};
+/** @param {string} page_id */
+function registerClientPart(page_id){
+	if(is_registered[page_id]) return;
+
+	document.head.append(
+		el("script", {
+			src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js",
+			type: "text/javascript",
+			charset: "utf-8",
+			defer: true
+		}),
+	);
+	is_registered[page_id]= true;
+}
diff --git a/docs/components/converter.js.js b/docs/components/converter.js.js
new file mode 100644
index 0000000..a41654f
--- /dev/null
+++ b/docs/components/converter.js.js
@@ -0,0 +1,375 @@
+import { el, on } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+const { parse }= globalThis.BFS || { parse(){ return { children: [ "not implemented" ] } } };
+// Example HTML snippets
+const examples = [
+{
+	name: "Simple Component",
+	html: `<div class="card">
+	<img src="image.jpg" alt="Card Image" class="card-image">
+	<h2 class="card-title">Card Title</h2>
+	<p class="card-text">This is a simple card component</p>
+	<button aria-pressed="mixed" type="button" class="card-button">Click Me</button>
+</div>`
+},
+{
+	name: "Navigation",
+	html: `<nav class="main-nav">
+	<ul>
+		<li><a href="/" class="active">Home</a></li>
+		<li><a href="/about">About</a></li>
+		<li><a href="/services">Services</a></li>
+		<li><a href="/contact">Contact</a></li>
+	</ul>
+</nav>`
+},
+{
+	name: "Form",
+	html: `<form class="contact-form" onsubmit="submitForm(event)">
+	<div class="form-group">
+		<label for="name">Name:</label>
+		<input type="text" id="name" name="name" required>
+	</div>
+	<div class="form-group">
+		<label for="email">Email:</label>
+		<input type="email" id="email" name="email" required>
+	</div>
+	<div class="form-group">
+		<label for="message">Message:</label>
+		<textarea id="message" name="message" rows="4" required></textarea>
+	</div>
+	<button type="submit" class="submit-btn">Send Message</button>
+</form>`
+}
+];
+
+// Convert HTML to dd<el> code
+function convertHTMLtoDDE(html, options = {}) {
+
+	try {
+		const parsed = parse(html);
+		return nodeToDDE(parsed.children[0], options);
+	} catch (error) {
+		console.error("Parsing error:", error);
+		return `// Error parsing HTML: ${error.message}`;
+	}
+}
+
+// Node types based on standard DOM nodeType values
+const NODE_TYPE = {
+	ELEMENT: 1,      // Standard element node (equivalent to node.type === "element")
+	TEXT: 3,         // Text node (equivalent to node.type === "text")
+	COMMENT: 8       // Comment node (equivalent to node.type === "comment")
+};
+
+// Convert a parsed node to dd<el> code
+function nodeToDDE(node, options = {}, level = 0) {
+	const { nodeType } = node;
+	// Handle text nodes
+	if (nodeType === NODE_TYPE.TEXT) {
+		const text = node.nodeValue;
+		if (!text.trim()) return null;
+
+		// Return as plain text or template string for longer text
+		return text.includes("\n") || text.includes('"')
+			? `\`${text}\``
+			: `"${text}"`;
+	}
+
+	// Handle comment nodes
+	if (nodeType === NODE_TYPE.COMMENT) {
+		return null; // TODO: Skip comments?
+	}
+
+	// For element nodes
+	if (nodeType === NODE_TYPE.ELEMENT) {
+		const tab= options.indent === "-1" ? "\t" : " ".repeat(options.indent);
+		const indent = tab.repeat(level);
+		const nextIndent = tab.repeat(level + 1);
+
+		// Special case for SVG elements
+		const isNS = node.tagName === "svg";
+		const elFunction = isNS ? "elNS" : "el";
+
+		// Get tag name
+		let tagStr = `"${node.tagName}"`;
+
+		// Process attributes
+		const attrs = [];
+		const sets = {
+			aria: {},
+			data: {},
+		}
+
+		for (const { name: key, value } of node.attributes) {
+			// Handle class attribute
+			if (key === "class") {
+				attrs.push(`className: "${value}"`);
+				continue;
+			}
+
+			// Handle style attribute
+			if (key === "style") {
+				if (options.styleAsObject) {
+				// Convert inline style to object
+				const styleObj = {};
+				value.split(";").forEach(part => {
+					const [propRaw, valueRaw] = part.split(":");
+					if (propRaw && valueRaw) {
+						const prop = propRaw.trim();
+						const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+						styleObj[propCamel] = valueRaw.trim();
+					}
+				});
+
+				if (Object.keys(styleObj).length > 0) {
+					const styleStr = JSON.stringify(styleObj).replace(/"([^"]+)":/g, "$1:");
+					attrs.push(`style: ${styleStr}`);
+				}
+				} else {
+					// Keep as string
+					attrs.push(`style: "${value}"`);
+				}
+				continue;
+			}
+
+			// Handle boolean attributes
+			if (value === "" || value === key) {
+				attrs.push(`${key}: true`);
+				continue;
+			}
+
+			// Handle data/aria attributes
+			if (key.startsWith("data-") || key.startsWith("aria-")) {
+				const keyName = key.startsWith("aria-") ? "aria" : "data";
+				const keyCamel = key.slice(keyName.length + 1).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+				sets[keyName][keyCamel] = value;
+				continue;
+			}
+
+			// Regular attributes
+			const keyRegular = key==="for"
+				? "htmlFor"
+				: key.startsWith("on")
+				? `"=${key}"`
+				: key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+			attrs.push(`${keyRegular}: "${value}"`);
+		}
+
+		// Process sets
+		for (const [name, set] of Object.entries(sets)) {
+		if(options.dataAttrsAsCamel)
+			for (const [key, value] of Object.entries(set))
+			attrs.push(`${name}${key[0].toUpperCase() + key.substring(1)}: "${value}"`);
+		else {
+			const setStr= Object.entries(set).map(([key, value]) => `${key}: "${value}"`).join(",");
+			if (setStr !== "")
+			attrs.push(`${name}set: { ${setStr} }`);
+		}
+		}
+
+		// Process children
+		const children = [];
+		for (const child of node.childNodes) {
+		const childCode = nodeToDDE(child, options, level + 1);
+		if (childCode) children.push(childCode);
+		}
+		if(children.length===1 && node.childNodes[0].nodeType===NODE_TYPE.TEXT){
+		const textContent= children.pop().slice(1, -1);
+		attrs.unshift(`textContent: "${textContent}"`);
+		}
+
+		// Build the element creation code
+		let result = `${elFunction}("${node.tagName.toLowerCase()}"`;
+
+		// Add attributes if any
+		if (attrs.length > 0) {
+		const tooLong= attrs.join(``).length+result.length > 55;
+		if(options.expaned || tooLong || attrs.length > 3)
+			result += `, {\n${nextIndent}${attrs.join(`,\n${nextIndent}`)},\n${indent}}`;
+		else
+			result += `, { ${attrs.join(", ")} }`;
+		} else if (children.length > 0) {
+		result += ", null";
+		}
+
+		// Add children if any
+		if (children.length > 0) {
+		result += `).append(\n${nextIndent}${children.join(`,\n${nextIndent}`)},\n${indent})`;
+		} else {
+		result += ")";
+		}
+
+		return result;
+	}
+
+	return null;
+}
+
+export function converter() {
+	// State for the converter
+	const htmlInput = S(examples[0].html);
+	const error = S("");
+
+	const status = S("");
+	const showStatus= msg => {
+		status.set(msg);
+		// Clear status after 3 seconds
+		setTimeout(() => status.set(""), 3000);
+	};
+
+	// Options state
+	const options = {
+		styleAsObject: {
+			title: "Convert style to object",
+			value: S(true),
+		},
+		dataAttrsAsCamel: {
+			title: "dataKey/ariaKey (or dataset/ariaset)",
+			value: S(true),
+		},
+		indent: {
+			title: "Indentation (-1 for tabs)",
+			value: S("-1"),
+			type: "number",
+		},
+		expaned: {
+			title: "Force multiline",
+			value: S(false),
+		}
+	};
+	const getOptions = ()=> Object.fromEntries(Object.entries(options)
+		.map(([key, option]) => ([
+			key,
+			option.value.get()
+		]))
+	);
+
+	// Update the dd<el> output when input or options change
+	const ddeOutput = S(() => {
+		try {
+			const result = convertHTMLtoDDE(htmlInput.get(), getOptions());
+			error.set("");
+			return result;
+		} catch (err) {
+			error.set(`Error: ${err.message}`);
+			return "";
+		}
+	});
+
+	// Event handlers
+	const onConvert = on("submit", e => {
+		e.preventDefault();
+		htmlInput.set(htmlInput.get(), true);
+		showStatus("Converted!");
+	});
+
+	const onCopy = on("click", async () => {
+		if (!ddeOutput.get()) return;
+
+		try {
+			await navigator.clipboard.writeText(ddeOutput.get());
+			showStatus("Copied to clipboard!");
+		} catch (err) {
+			error.set(`Could not copy: ${err.message}`);
+		}
+	});
+	const onClear = on("click", () => {
+		htmlInput.set("");
+		showStatus("Input cleared");
+	});
+	const onExampleLoad = (example) => on("click", () => {
+		htmlInput.set(example.html);
+		showStatus(`Loaded "${example.name}" example`);
+	});
+
+	const optionsElements = () => Object.entries(options)
+		.map(([key, option]) =>
+			el("label", { className: "option-group" }).append(
+				option.type==="number"
+					? el("input", {
+						type: option.type || "checkbox",
+						name: key,
+						value: option.value.get(),
+						max: 10,
+					}, on("change", e => option.value.set(e.target.value)))
+					: el("input", {
+						type: option.type || "checkbox",
+						name: key,
+						checked: option.value.get(),
+					}, on("change", e => option.value.set(e.target.checked))),
+				option.title,
+			)
+	);
+	const exampleButtons = examples.map(example =>
+		el("button", {
+			type: "button",
+			className: "secondary example-button"
+		}, onExampleLoad(example)).append(example.name)
+	);
+
+	return el("div", { id: "html-to-dde-converter" }).append(
+		el("h3", "HTML to dd<el> Converter"),
+		el("p", { className: "description" }).append(
+			"Convert HTML markup to dd<el> JavaScript code. Paste your HTML below or choose from an example."
+		),
+
+		el("form", { className: "converter-form" }, onConvert).append(
+			el("div", { className: "options" }).append(...optionsElements()),
+
+			el("div", { className: "examples-list" }).append(
+				el("label", "Examples: "),
+				...exampleButtons
+			),
+
+			el("div", { className: "editor-container" }).append(
+				el("div", { className: "input-group" }).append(
+					el("label", { htmlFor: "html-input" }).append(
+						"HTML Input",
+						el("div", { className: "button-group" }).append(
+							el("button", {
+								type: "button",
+								className: "secondary",
+								title: "Clear input"
+							}, onClear).append("Clear")
+						)
+					),
+					el("textarea", {
+						id: "html-input",
+						spellcheck: false,
+						value: htmlInput,
+						placeholder: "Paste your HTML here or choose an example",
+						oninput: e => htmlInput.set(e.target.value)
+					})
+				),
+
+				el("div", { className: "output-group" }).append(
+					el("label", { htmlFor: "dde-output" }).append(
+						"dd<el> Output",
+						el("div", { className: "button-group" }).append(
+							el("button", {
+								type: "button",
+								className: "copy-button",
+								title: "Copy to clipboard",
+								disabled: S(() => !ddeOutput.get())
+							}, onCopy).append("Copy")
+						)
+					),
+					el("textarea", {
+						id: "dde-output",
+						readonly: true,
+						spellcheck: false,
+						placeholder: "The converted dd<el> code will appear here",
+						value: S(() => ddeOutput.get() || "// Convert HTML to see results here")
+					})
+				)
+			),
+
+			el("div", { className: "button-group" }).append(
+				S.el(error, error => !error ? el() : el("div", { className: "error" }).append(error)),
+				el("div", { className: "status", textContent: status }),
+				el("button", { type: "submit" }).append("Convert")
+			)
+		)
+	);
+}
diff --git a/docs/components/ireland.html.js b/docs/components/ireland.html.js
index 8387664..f6bcf6b 100644
--- a/docs/components/ireland.html.js
+++ b/docs/components/ireland.html.js
@@ -1,3 +1,33 @@
+import { styles } from "../ssr.js";
+styles.css`
+[data-dde-mark] {
+	opacity: .5;
+	filter: grayscale();
+
+	@media (prefers-reduced-motion: no-preference) {
+		animation: fadein 2s infinite ease forwards;;
+	}
+
+	position: relative;
+	&::after {
+		content: "Loading Ireland…";
+		background-color: rgba(0, 0, 0, .5);
+		color: white;
+		font-weight: bold;
+		border-radius: 5px;
+		padding: 5px 10px;
+		position: absolute;
+		top: 3%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+@keyframes fadein {
+	from { opacity: .5; }
+	to { opacity: .85; }
+}
+`;
+
 import { el, queue } from "deka-dom-el";
 import { addEventListener, registerClientFile } from "../ssr.js";
 import { relative } from "node:path";
@@ -21,10 +51,14 @@ export function ireland({ src, exportName = "default", props = {} }) {
 	const path= "./"+relative(dir, src.pathname);
 	const id = "ireland-" + generateComponentId(src);
 	const element = el.mark({ type: "later", name: ireland.name });
-	queue(import(path).then(module => {
-		const component = module[exportName];
-		element.replaceWith(el(component, props, mark(id)));
-	}));
+	queue(
+		import(path)
+		.then(module => {
+			const component = module[exportName];
+			element.replaceWith(el(component, props, mark(id)));
+		})
+		.catch(console.error)
+	);
 
 	if(!componentsRegistry.size)
 		addEventListener("oneachrender", registerClientPart);
diff --git a/docs/components/ireland.js.js b/docs/components/ireland.js.js
index b552395..7dbd39d 100644
--- a/docs/components/ireland.js.js
+++ b/docs/components/ireland.js.js
@@ -5,6 +5,7 @@ export function loadIrelands(store) {
 	document.body.querySelectorAll("[data-dde-mark]").forEach(ireland => {
 		const { ddeMark }= ireland.dataset;
 		if(!store.has(ddeMark)) return;
+		ireland.querySelectorAll("input").forEach(input => input.disabled = true);
 		const { path, exportName, props }= store.get(ddeMark);
 		import("./"+path).then(module => {
 			ireland.replaceWith(el(module[exportName], props));
diff --git a/docs/p14-convertor.html.js b/docs/p14-convertor.html.js
new file mode 100644
index 0000000..cda9d6f
--- /dev/null
+++ b/docs/p14-convertor.html.js
@@ -0,0 +1,99 @@
+import "./components/converter.html.js";
+import { T, t } from "./utils/index.js";
+export const info= {
+	title: t`Convert to dd<el>`,
+	fullTitle: t`HTML to dd<el> Converter`,
+	description: t`Convert your HTML markup to dd<el> JavaScript code with our interactive tool`,
+};
+
+import { el } from "deka-dom-el";
+import { simplePage } from "./layout/simplePage.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { code } from "./components/code.html.js";
+import { converter } from "./components/converter.html.js";
+
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("p").append(T`
+			Transitioning from HTML to dd<el> is simple with our interactive converter. This tool helps you quickly
+			transform existing HTML markup into dd<el> JavaScript code, making it easier to adopt dd<el> in your projects.
+		`),
+
+		el("div", { className: "callout" }).append(
+			el("h4", t`Features`),
+			el("ul").append(
+				el("li", t`Convert any HTML snippet to dd<el> code instantly`),
+				el("li", t`Choose between different output formats (append vs arrays, style handling)`),
+				el("li", t`Try pre-built examples or paste your own HTML`),
+				el("li", t`Copy results to clipboard with one click`)
+			)
+		),
+
+		el("h3", t`How to Use the Converter`),
+		el("ol").append(
+			el("li").append(T`
+				${el("strong", "Paste your HTML")} into the input box or select one of the example templates
+			`),
+			el("li").append(T`
+				${el("strong", "Configure options")} to match your preferred coding style:
+				${el("ul").append(
+					el("li", t`Convert inline styles to JavaScript objects`),
+					el("li", t`Transform data-attributes/aria-attributes`),
+				)}
+			`),
+			el("li").append(T`
+				${el("strong", "Click convert")} to generate dd<el> code
+			`),
+			el("li").append(T`
+				${el("strong", "Copy the result")} to your project
+			`)
+		),
+
+		// The actual converter component
+		el(converter, { page_id }),
+
+		el("h3", t`How the Converter Works`),
+		el("p").append(T`
+			The converter uses a three-step process:
+		`),
+		el("ol").append(
+			el("li").append(T`
+				${el("strong", "Parsing:")} The HTML is parsed into a structured AST (Abstract Syntax Tree)
+			`),
+			el("li").append(T`
+				${el("strong", "Transformation:")} Each HTML node is converted to its dd<el> equivalent
+			`),
+			el("li").append(T`
+				${el("strong", "Code Generation:")} The final JavaScript code is properly formatted and indented
+			`)
+		),
+
+		el("div", { className: "warning" }).append(
+			el("p").append(T`
+				While the converter handles most basic HTML patterns, complex attributes or specialized elements might
+				need manual adjustments. Always review the generated code before using it in production.
+			`)
+		),
+
+		el("h3", t`Next Steps`),
+		el("p").append(T`
+			After converting your HTML to dd<el>, you might want to:
+		`),
+		el("ul").append(
+			el("li").append(T`
+				Add signal bindings for dynamic content (see ${el("a", { href: "p04-signals.html",
+					textContent: "Signals section" })})
+			`),
+			el("li").append(T`
+				Organize your components with scopes (see ${el("a", { href: "p05-scopes.html",
+					textContent: "Scopes section" })})
+			`),
+			el("li").append(T`
+				Add event handlers for interactivity (see ${el("a", { href: "p03-events.html",
+					textContent: "Events section" })})
+			`)
+		)
+	);
+}