</> Ultima
Open source since 2020

Reactive Web Components,
100% native JavaScript.

Ultima is a framework for building reusable components using only what the browser already knows how to do — Custom Elements, Shadow DOM and native ES modules. No build step, no npm install, no dependencies loaded at runtime.

counter.html
<div data-bind='{"textContent":"total"}'></div>
<button onclick="this.getRootNode().host.increment()">+1</button>

<!-- no build, no framework running underneath: it's just the browser reading the attribute -->

Why Vanilla JS

The project's philosophy from day one: code that runs natively in the browser is a good practice, not a limitation.

01

Zero dependencies

No library is loaded from a CDN at runtime. What runs is exactly the .js file you import — no bundler, no build step, no node_modules.

02

Real Web standards

Components are real Custom Elements, with true optional Shadow DOM — not an abstraction layered on top that looks like Web Components. Interoperates with any other HTML/CSS/JS code.

03

Declarative reactivity

Attribute binding, conditionals, keyed lists, computed properties and watchers — right in data-* attributes on your HTML, with no proprietary template syntax to learn.

The syntax

A glimpse of the full vocabulary — conditional, keyed list and two-way binding, all in the same component.

todo-list.html
<input data-bind='{"value":"newTask"}'>

<template data-if="tasks.length">
  <ul>
    <template data-for="task in tasks : id">
      <li data-class='{"done":"task.done"}'>
        <input type="checkbox" data-bind='{"checked":"task.done"}'>
        <span data-bind='{"textContent":"task.title"}'></span>
      </li>
    </template>
  </ul>
</template>
<template data-else>
  <p>No tasks yet.</p>
</template>

Where to go from here

Getting started →

How to add Ultima to a project and build your first reactive component, with nothing to install.

Guide →

The core concepts — ComponentBase and ReactiveComponent, lifecycle, data scope.

DSL reference →

Every template attribute, with syntax and an example — the full showcase of the reactive vocabulary.

Examples →

A complete reactive form and the "Workspace" — the project's reference application, with treemap and windows.