VDX — a web framework you vendor and forget

What actually lands in your repository

The dependency you never installed can't be the one that bites you.

node_modules/

hundreds of packages

pulled transitively, from maintainers you'll never meet

Re-resolved on every clone and CI run
A live attack surface — Shai-Hulud & friends ship through updates
Rots underneath you; upgrade or rewrite every few years

vdx/

one folder of files

read once, reviewed once, then simply yours

Vendored into the repo — clones and updates pull nothing
Nothing to compromise on npm update, because there is no npm
Runs the same in five years as it does today

Edit it. Run it. No build in the loop.

These run in a sandbox from the same source you'd write — code on the left, the living result on the right. Change the code and hit Run.

// a component is a class — reactive state, no setState, no virtual DOM

Reactive by assignment

// two-way binding + lists — x-model, each(), when(), on-* handlers

Forms that sync themselves

// shared state, zero ceremony — one store, many components, no prop-drilling or provider

Shared state without the boilerplate

A modern framework, without the modern tax

$ (no build)

No build step

ES modules run directly in the browser. Save a file, refresh. There is no compiler between you and the page.

deps: 0

Zero dependencies

Nothing from npm — not even transitively. The whole framework is a small set of files you can read.

router + ui

Batteries included

Hash and HTML5 routing, reactive stores, and a 60+ component cl-* UI library, all in the box.

<my-widget>

Static-site friendly

Import a component into any HTML page and use its tag. Perfect for a backend that just serves files.

xss ✕

Defense in depth

Auto-escaping, URL-scheme allowlisting, and raw HTML gated behind an explicit, trust-marked opt-in.

light DOM

DevTools-native

No shadow DOM. Your components are right there in the element tree — inspect, tweak, and debug them like normal HTML.

You don't have to pick your poison

A modern component model without React's build chain — or vanilla's manual DOM wiring.

	VDX	React	Vanilla JS	htmx
Build step	None	Required	None	None
Bundling & linting	Optional	Required	DIY	None
TypeScript	Optional	Via build	DIY	—
npm dependencies	Zero	Many	Zero	One script
Reactive state	Built in	Built in	Roll your own	Server round-trip
Manual DOM sync	Never	Never	Constant	Server-driven
XSS-safe by default	Yes	Yes	On you	On you
Two-way binding	x-model	Manual	Manual	—
Router + UI library	Included	Add packages	Add packages	—
Supply-chain surface	None	Large	None	Tiny
Survives a framework era	Vendored	Churns	Forever	Stable

# ai-native

An agent can read the whole thing

Most frameworks assume a human who already knows them — the right hooks, this year's patterns, the current build config. VDX assumes a reader starting from the files in front of them, human or model.

# one file

Small enough to hold in context

Point an agent at the source — or the single-file FRAMEWORK.md — and it has the whole model. No plugin matrix, no version-specific lore, no build config to reverse-engineer.

el.state

Inspect the running app

No shadow DOM, so any component is reachable from the DOM. Read or poke its live state in plain JS ($ is your devtools' querySelector) — no framework extension needed.$('cart-badge').stores.cart.count

no hooks

Testing without the ceremony

No hooks, no renderer, no act(). Grab the element, call its methods, read its state. The wiring that made React hooks a testing chore simply isn't here.

You opt out of safety, never into it

Escaping isn't a function you remember to call — it's the default. Paste hostile input into the demo: the markup renders as plain text and the javascript: URL goes nowhere. Rendering raw HTML is the part you ask for — hit Edit to read the markup.

Raw HTML is trust-marked — raw() tags its output at runtime, so a JSON string from an API can never masquerade as trusted markup.
Misuse is legible — an unsafe render is a literal raw(userInput) in the source, easy to spot in review and to grep for.
Nothing is hidden — no shadow DOM, so every node your components render is right there in DevTools to inspect and audit.

Vendor it in two minutes

No installer to trust, no toolchain to set up. Drop the files in, serve them, done.

git clone https://github.com/iwalton3/vdx-web.git && cd vdx-web

python3 -m http.server 9000   # any static server — nothing to install

<!-- in your page -->
<my-widget></my-widget>
<script type="module">
  import { defineComponent, Component, html } from './vdx/lib/framework.js';
</script>

Start the tutorial API reference