How does Ultima compare?

Ultima shares ideas with other reactive frameworks, but combines native Web Components, external HTML templates, a declarative DSL based on data paths, and execution with no build step or runtime dependencies.

Introduction

Ultima's general proposition isn't unprecedented: other reactive libraries exist, based on Web Components or running directly in the browser with no required compilation step. The difference is in the combination of architectural decisions: components defined as Custom Elements, templates kept in external HTML files, binding via data-* attributes, expressions restricted to data paths, and direct DOM updates.

This isn't a comparison of popularity, feature count, or community size. The focus is on architecture and development experience.

Projects compared

This page compares Ultima with five projects:

• Litedom — a reactive library for Web Components.
• Alpine.js — declarative reactivity added to existing HTML.
• Lit — building reactive Web Components.
• Minze — simplified Web Component authoring.
• VanJS — reactive interfaces built directly in JavaScript and the DOM.

React, Vue, Angular and Svelte have a broader scope, ecosystem and set of goals. They serve as a market reference for UI frameworks, but they aren't Ultima's closest architectural peers — which is why they don't appear in the table below.

Comparison table

"Yes" shouldn't be read as automatically better than "No" — every row is an architectural decision with trade-offs, not a scoreboard.

Versions and dates checked against official documentation/CDNs on 2026-07-24; they may change after this was published. Runtime sizes were not independently verified in this research (except VanJS) — values per each project's official documentation, subject to change.

How it's done in practice

The same five scenarios, implemented in each framework — real code, adapted from the implementations used in this page's benchmark (tested in the browser, not pseudocode). Ultima stays fixed on the left; pick a scenario and a framework on the right to compare.

Detailed comparisons

Ultima × Litedom

Litedom is probably the conceptually closest project to Ultima. Both use Web Components standards, offer reactivity and data binding, and skip the Virtual DOM, JSX, and a required build step.

The main difference is in how components are organized. Litedom keeps the template in JavaScript, using template literals and language expressions. Ultima splits the template into an external .html file and restricts the DSL mostly to data paths declared in data-* attributes.

That restriction makes Ultima's template less expressive than arbitrary JavaScript, but also more predictable: logic tends to stay in the component class, while the HTML describes bindings, conditionals and lists. It's also worth noting that Litedom's repository hasn't received commits since 2020 — the features described here still work via CDN, but the project doesn't appear to be actively maintained.

Ultima × Alpine.js

Alpine.js is the project closest to Ultima in how its HTML looks. Both use declarative attributes to connect data and elements, build conditionals, repeat lists, and handle forms.

The difference is in the architectural unit. Alpine turns pieces of existing HTML into reactive regions via x-data and other directives. Ultima defines each unit as a real Custom Element, optionally encapsulated in Shadow DOM, with its own class and lifecycle.

Alpine allows JavaScript expressions directly in its directives. Ultima mostly uses data paths, reducing the expressive power available in the template and encouraging logic to stay in the component's JavaScript.

Ultima × Lit

Lit is the leading contemporary reference for building reactive Web Components. Its components are real Custom Elements, interoperable with HTML and other frameworks. The library provides reactive properties, encapsulated styles, and efficient declarative templates.

Lit writes templates in JavaScript via tagged template literals. Ultima keeps the HTML in a separate file and describes bindings in data-* attributes.

Lit has greater maturity, ecosystem, documentation, TypeScript integration and development tooling. Ultima offers a more experimental, minimalist experience, aimed at those who want to work directly with their own architecture and less external infrastructure.

Ultima × Minze

Minze simplifies building Web Components and offers a base class, reactivity, lifecycle, and tooling to produce reusable components. Like Ultima, it tries to reduce the boilerplate of the native APIs.

Minze's workflow is closer to a ready-made library for building and distributing components, including integration with npm, TypeScript, Vite and Storybook. Ultima is more independent of that ecosystem and organizes a component through an external HTML file and a JavaScript class.

Ultima × VanJS

VanJS and Ultima share an interest in a small layer, with no application transpilation and no Virtual DOM. Both proposals try to stay close to the browser.

The difference is the direction taken. VanJS builds the interface through JavaScript functions that create and connect DOM nodes. Ultima keeps HTML as the template's primary language and uses declarative attributes to tie it to state.

What sets Ultima apart

External HTML templates

Every component can keep its structure in an .html file, separate from the JavaScript class. The template's path is resolved relative to the component's own module with import.meta.url, not relative to the page that uses it.

super(
    { templateUrl: './my-counter.html', shadowDom: true },
    import.meta.url
);

DSL based on data-* attributes

The DSL mostly works with data paths, not with unrestricted JavaScript execution in the template:

• data-bind
• data-class
• data-style
• data-ref
• data-if, data-else-if, data-else
• data-for

Two-way binding between data and the DOM

data-bind updates properties and attributes from state. On editable elements, the native change event writes the value back to the corresponding path.

<input data-bind='{"value":"name"}'>
<input type="checkbox" data-bind='{"checked":"active"}'>
<span data-bind='{"textContent":"name"}'></span>

Composing components

Passing objects through the data-state attribute involves JSON serialization and has some limitations.

<child-component
    data-bind='{"data-state":"profile"}'>
</child-component>

Direct DOM reconciliation

In lists with a valid key, DOM nodes matching the same item are reused and repositioned, preserving identity, focus and internal state when possible. There's no parallel Virtual DOM tree kept in sync.

Conditionals that preserve the active branch

When a conditional chain's winning branch stays the same, Ultima doesn't need to destroy and recreate that branch's whole content. This helps preserve the identity of the elements inside it.

Current trade-offs

Ecosystem

Ultima has no formal community, official npm package, plugin collection, broad IDE integration, or an established job market.

Maturity

The project has parts that are well tested and others that are still experimental or incomplete. The source code is still the primary source of truth.

Tooling

There's currently no experience equivalent to what mature TypeScript tooling, specialized linting, devtools, SSR, hydration, or static generation offer.

State serialized into an attribute

The data-state contract makes declarative communication easy, but it uses JSON serialization. That doesn't naturally represent values like functions, circular references, Map, Set, a Date with its semantics preserved, or undefined.

Large updates

Large or high-frequency state updates can make attribute-based serialization and syncing less suitable — see the real numbers in this comparison's benchmark.

DSL expressiveness

Restricted paths keep the template predictable, but require moving transformations and logic into computed properties or JavaScript methods.

Templates loaded at runtime

External HTML files preserve separation of concerns, but introduce runtime resource loading and handling. The project must be served over HTTP; opening it directly via file:// may not work due to browser policies.

Which one should you choose?

Is Ultima a new idea?

Not in the sense of starting a new category. Before and after Ultima began, other projects had already combined reactivity, Web Components, the absence of a Virtual DOM, and execution with no required build step.

Ultima's own proposition is in the combination: external HTML templates, real Custom Elements, optional Shadow DOM, a DSL in data-* attributes, expressions based mostly on data paths, composition through the data-state contract, and direct DOM reconciliation.

Recommended definition

We avoid "zero runtime" in an ambiguous sense, since Ultima's own core does execute at runtime. The accurate way to put it: no third-party dependencies in the core; no external library loaded at runtime; no required build step.

Sources and methodology

This comparison considers each project's official documentation available as of 2026-07-24. Features, licenses, sizes and installation methods may change. When a feature isn't clearly documented, it's presented as "not documented," not as fact.

• Ultima — site, getting started, guide, DSL reference, about, repository.
• Litedom — site, guide.
• Alpine.js — site and documentation, x-data, x-model, x-if, x-for.
• Lit — site and documentation, lists, reactive properties.
• Minze — site, introduction, performance.
• VanJS — site, getting started, tutorial.
• Performance numbers — a reproducible benchmark run in the browser, source code in benchmarks/ in the repository.