What is Untagged?
In the ever-evolving landscape of frontend development, Untagged emerges as a modern, minimalist JavaScript framework that empowers developers to build highly reactive and performance-efficient user interfaces without relying on a virtual DOM. Unlike heavy frameworks such as React, Angular, or Vue, Untagged simplifies UI creation by leveraging native JavaScript tagged template literals, allowing developers to define HTML directly within JavaScript functions. The philosophy behind Untagged centers around simplicity, reactivity, and native performance, making it a compelling choice for projects where bundle size, speed, and clean design patterns matter.
Untagged promotes a declarative syntax where developers express what the UI should look like rather than how to manipulate the DOM step by step. It provides a small API surface—primarily built around signal, html, render, and a few utility functions—but delivers a powerful foundation for building dynamic applications. With no build step required and a near-zero learning curve, it’s ideal for modern developers looking for control without complexity.
What are the Major Use Cases of Untagged?
Untagged has found relevance across a diverse set of use cases, particularly in scenarios where performance, simplicity, and size are critical. It is commonly adopted for creating reusable web components, especially for micro-frontend architectures where embedding isolated UI components is essential. Its lightweight nature makes it well-suited for progressive web apps (PWAs) and static sites that require interactivity without depending on full-scale frameworks.
Developers use Untagged in embedded UI scenarios, such as dashboards, browser extensions, admin panels, and dynamic widgets on static content websites. It’s also gaining traction among those building design systems or component libraries, as Untagged encourages clean separation of logic and presentation. Educational environments benefit from Untagged’s minimal setup, allowing students to understand reactivity and templating without needing to configure build tools or compilers. In essence, it’s a flexible, no-frills tool perfect for projects where fine-grained control, performance, and developer experience are priorities.
How Untagged Works Along with Architecture
Untagged’s core architecture revolves around a reactive state system and direct DOM binding. At the heart of this system are signals, which are reactive values that automatically trigger updates to any part of the DOM that consumes them. Unlike frameworks that rely on virtual DOM diffing, Untagged directly updates the DOM nodes that depend on a signal, leading to faster updates with less overhead.
The rendering system uses JavaScript tagged template literals to define HTML. These literals support embedding reactive values, event handlers, and conditional logic directly inside templates. When a signal changes, Untagged re-renders only the parts of the DOM that reference it, maintaining a tight coupling between state and view. Internally, it maintains a lightweight dependency tracking system that links DOM nodes with signals, ensuring precise and efficient updates.
Untagged does not use a component class model or lifecycle methods in the traditional sense. Instead, it relies on functions as components, which return HTML templates. These can be nested, passed as arguments, and reused just like ordinary functions. This design favors functional programming principles, making the framework highly composable and modular.
What are the Basic Workflow of Untagged?
The development workflow with Untagged is clean and intuitive. First, developers define signals using the signal() function, which creates reactive state variables. These can be primitives like numbers or strings, or complex data structures. Signals have a .value property that stores the current state, and accessing or modifying this value automatically establishes or triggers dependencies.
Next, developers define UI elements using the `html“ tagged template literal. This approach combines HTML structure with JavaScript expressions, enabling dynamic rendering based on signal values. Components in Untagged are plain JavaScript functions that return these templates. Signals embedded in the templates are observed for changes, and the DOM is automatically updated when changes occur.
The final step involves rendering the component using the render() function, which mounts the component into a DOM element. As signals update through events or logic, the reactive system takes care of efficiently updating the UI. This results in a workflow free from manual DOM manipulation, offering reactivity, performance, and clarity in code—all without the need for transpilers or build steps.
Step-by-Step Getting Started Guide for Untagged
To get started with Untagged, all you need is a modern browser or a Node.js environment that supports ES modules. You can use Untagged via a CDN or install it via npm.
Step 1: Install or Import Untagged
For quick use, you can load it via CDN:
<script type="module">
import { html, render, signal } from 'https://cdn.skypack.dev/untagged';
</script>
Or use npm for project-based development:
npm install untagged
Step 2: Define a Reactive State
Create a reactive variable using signal():
const count = signal(0);
Step 3: Build a Component with HTML Template
Define a component that uses this signal:
const Counter = () => html`
<div>
<h2>Count: ${count}</h2>
<button onclick=${() => count.value++}>+1</button>
<button onclick=${() => count.value--}>-1</button>
</div>
`;
Step 4: Render the Component into the DOM
Mount your component in an HTML container:
const root = document.getElementById("app");
render(Counter, root);
Step 5: Watch the Reactivity in Action
Every time you click the button, the count signal updates, and the DOM re-renders the affected node in real-time—without needing any diffing logic or re-rendering of the full tree.
