deka-dom-el

Vanilla for flavouring — a full-fledged feast for large projects

Welcome to Deka DOM Elements (dd<el> or DDE) — a library for building dynamic UIs with a declarative syntax that stays close to the native DOM API. dd<el> gives you powerful reactive tools without the complexity and overhead of larger frameworks.

Key Benefits of dd<el>

No build step required — use directly in the browser
Minimalized footprint:

lightweight core (~10–15kB minified)
…without unnecessary dependencies (0 at now 😇)
auto-releasing resources with focus on performance and development experience

Natural DOM API — work with real DOM nodes, not abstractions
Built-in (but optional) reactivity with simplified but powerful signals system
Clean code organization with the 3PS pattern

import { el } from "./esm-with-signals.js";
import { S } from "./esm-with-signals.js";

// A HelloWorld component using the 3PS pattern
function HelloWorld({ emoji = "🚀" }) {
	// PART 1: Create reactive state
	const clicks = S(0);

	return el().append(
		// PART 2: Bind state to UI elements
		el("p", {
			className: "greeting",
			// This paragraph automatically updates when clicks changes
			textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
		}),

		// PART 3: Update state in response to events
		el("button", {
			type: "button",
			textContent: "Add emoji",
			// When clicked, update the state
			onclick: () => clicks.set(clicks.get() + 1)
		})
	);
}

// Use the component in your app
document.body.append(
	el(HelloWorld, { emoji: "🎉" })
);

# The 3PS Pattern: Simplified architecture pattern

At the heart of dd<el> is the 3PS (3-Part Separation) pattern. This simple yet powerful approach helps you organize your UI code into three distinct areas, making your applications more maintainable and easier to reason about.

Traditional DOM Manipulation

// pseudocode
// Mixed concerns make code hard to maintain
const button = document.querySelector('button');
let count = 0;

button.addEventListener('click', () => {
	count++;
	document.querySelector('p').textContent =
		'Clicked ' + count + ' times';

	if (count > 10)
		button.disabled = true;
});

dd<el>'s 3PS Pattern

// pseudocode
// 1. Create state
const count = S(0);

// 2. React to state changes
S.on(count, value => {
	updateUI(value);
	if (value > 10) disableButton();
});

// 3. Update state on events
button.addEventListener('click', () => {
	count.set(count.get() + 1);
});

The 3PS pattern separates your code into three clear parts:

Create State: Define your application’s reactive data using signals
React to Changes: Define how UI elements and other parts of your app react to state changes
Update State: Modify state in response to user events or other triggers

By separating these concerns, your code becomes more modular, testable, and easier to maintain. This approach is not something new and/or special to dd<el>. It’s based on MVC (MVVM), but is there presented in simpler form.

The 3PS pattern becomes especially powerful when combined with components, allowing you to create reusable pieces of UI with encapsulated state and behavior. You’ll learn more about this in the following sections.

The 3PS pattern isn’t required to use with dd<el> but it is good practice to follow it or some similar software architecture.

# Getting Started

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.

npm installation

npm install deka-dom-el --save

…see package page.

CDN / Direct Script Usage

Use the interactive selector below to choose your preferred format:

Based on your selection, you can use dd<el> in your project like this:

// 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;

# How to Use This Documentation

This guide will take you through dd<el>’s features step by step:

Elements — Creating and manipulating DOM elements
Events and Addons — Handling user interactions and lifecycle events
Signals — Adding reactivity to your UI
Scopes — Managing component lifecycles
Web Components — Building native custom elements
Debugging — Tools to help you build and fix your apps
Extensions — Integrating third-party functionalities
Performance Optimization — Techniques for optimizing your applications
TodoMVC — A real-world application implementation
SSR — Server-side rendering with dd<el>
Ireland Components — Interactive demos with server-side pre-rendering
Appendix & Summary — Comprehensive reference and best practices
HTML Converter — Convert HTML to dd<el> JavaScript code
Examples Gallery — Real-world application examples and case studies

Each section builds on the previous ones, so we recommend following them in order. Let’s get started with the basics of creating elements!

Elements