AriannA is a zero-dependency, bundler-free framework with 145+ web components, fine-grained reactivity, and a single fluent API. Faster than Solid on most operations. 1.5 KB gzipped core.
import { Component, signal, html } from 'arianna'; class Counter extends Component('arianna-counter', HTMLElement, {}, {}) { build() { const n = signal(0); this.template = html` <button @click="${() => n.set(n.get() + 1)}"> Clicked {{ ${n} }} times </button> `; } }
Three primitives carry the entire framework: signal, Component, and html. Everything else builds on top.
const name = signal('Arianna');
host.append(
new Real('h2').add(() => `Hello, ${name.get()}!`).valueOf()
);const n = signal(0);
const btn = new Real('button')
.on('click', () => n.set(n.get() + 1))
.add(() => `Clicked ${n.get()}× `);
host.append(btn.valueOf());const first = signal('Riccardo');
const last = signal('Angeli');
const full = computed(() => `${first.get()} ${last.get()}`);
host.append(new Real('p').add(() => full.get()).valueOf());const text = signal('type here');
const input = new Real('input').set('value', text);
input.on('input', e => text.set(e.target.value));
const out = new Real('p').add(() => text.get());
host.append(input.valueOf(), out.valueOf());Fine-grained reactivity with automatic dependency tracking. Updates only touch the exact DOM nodes that need to change.
Form controls. Each one is a real custom element with shadow DOM, reactive props, and a fluent API.
Structural primitives. All resizable, draggable, persistent where it makes sense.
Atoms — avatars, badges, chips, dividers, tooltips. The small things you compose larger UIs from.
Tabular and hierarchical data with virtual scrolling, sortable columns, and reactive cells.
Canvas-rendered, animated, reactive. Pass a signal and the chart redraws on change.
Trading-grade widgets: candlesticks, depth, heatmap, sparklines, portfolio, risk, screener, order book.
Drop-in payment widgets for Apple/Google Pay, Stripe, PayPal, Satispay, Nexi, AliPay. PCI-conscious, brand-correct.
Carrier-branded trackers for DHL, UPS, FedEx, BRT — and a multi-carrier component that aggregates them.
Universal map embed plus provider-specific components for Google, Apple, Bing, Azure, OpenStreetMap, MapLibre.
Web Audio API, simplified. Players, channel strips, piano roll, transport, multitrack — all on a shared AudioContext.
Adaptive provider switching: native, YouTube, Vimeo, Twitch. Plus a track editor for sequencing.
Keyframe-based animation engine with curve editor and onion-skin stage for visual sequencing.
Canvas2D editor with layers, bezier, color pickers; 3D viewer with camera, materials, modifiers — all reactive.
Reactive transform pipeline — chain modifiers on shapes (Array, Bend, Mirror, Twist, Wave…) like Blender stack.
Big widgets built on top of everything else: NodeEditor (Daedalus brain), Chat, CodeEditor.
2D physics engine: world, bodies, springs, constraints, gravity, drag. Bridges to the reactivity layer.
WebGPU-accelerated tensors, layers, models (Sequential, Transformer), tokenizer, Markov chain. CPU fallback.