Vanilla First: Libraries für natives JavaScript

Vanilla First ist eine Reaktion auf überladene Frontends: große Bundles, verpflichtende Build-Pipelines und Framework-Entscheidungen, die ein Projekt über Jahre festnageln – selbst dann, wenn 80 % der Anforderungen auch nativ lösbar wären.

Diese Tools bleiben nah am Vanilla-Code, minimieren Abhängigkeiten und passen ideal zu performance-optimierten Projekten mit DSGVO-Fokus.

Vanilla First heißt nicht: alles selbst bauen

Vanilla First bedeutet nicht, auf Libraries zu verzichten. Es bedeutet, dass Libraries austauschbar bleiben. Der Code funktioniert auch dann noch, wenn man sie entfernt – oder ersetzt.

Das ist der Unterschied zwischen Ergänzen und Abhängen von einem Framework.

Reaktive UI-Libraries

Reaktivität ohne Framework

VanJS

Ultra-leichtes (1kB) reaktives UI-Framework auf purem Vanilla JS und DOM. Bietet State-Binding, Komponenten und Effects ohne JSX oder Virtual DOM.

Stärken:

Nur 1kB gzipped
Kein Build-Step nötig
Echtes Vanilla JS – keine Abstraktion
Perfekt für Edge-Umgebungen (Cloudflare Workers)

Lit

Für Web Components. Ermöglicht deklarative Templates mit Tagged Template Literals und reaktiven Properties. Baut direkt auf Custom Elements und Shadow DOM auf.

Stärken:

Framework-agnostisch
Nativer Web-Standard
Skalierbar von Widget bis App
Gute TypeScript-Unterstützung

HyperHTML / Hyperscript

Minimale Templating-Libs für effiziente DOM-Updates. HyperHTML nutzt Tagged Templates für sichere, schnelle Renderings ohne Boilerplate.

Stärken:

Kein Virtual DOM
Direkte DOM-Manipulation
XSS-sicher durch Template Literals
Winziger Footprint

Utility-Tools

Alpine.js

Drop-in-Attribute für interaktive UIs. „Vanilla-plus” mit ~7kB – unterstützt Reactivity direkt im HTML über Attribute wie x-data, x-show, x-on.

Stärken:

Kein Build-Prozess
Direkt im HTML lesbar
Ideal für Server-gerenderte Seiten
Sanfte Lernkurve

VanX

VanJS-Erweiterung für Routing, Listen und Serialisierung. Bleibt bei unter 2kB und voller Vanilla-Kompatibilität.

Stärken:

Routing ohne Framework
Reaktive Listen
State-Persistierung
Modular einsetzbar

Bundler

Vite

Schneller Dev-Server mit nativen ES-Modulen. Production-Build über Rollup. Minimale Konfiguration, maximale Geschwindigkeit.

esbuild

Extrem schneller Bundler in Go geschrieben. Ideal für Libraries und Tools, wo Build-Zeit kritisch ist.

Bun

All-in-one JavaScript Runtime mit eingebautem Bundler, Transpiler und Package Manager. Native TypeScript-Unterstützung.

Daten und State-Handling

State ohne globale Stores

Neben UI-Tools lohnt sich ein Blick auf spezialisierte Libraries für Zustandsverwaltung.

Valtio

Proxy-basierter State-Manager mit minimalem Overhead. Funktioniert auch als einfache Store-Alternative für Vanilla-Projekte.

Storeon

State-Container unter 1kB, arbeitet rein mit Events, kein Boilerplate. Ideal für Apps mit mehreren UI-Modulen, die gemeinsam auf Daten zugreifen.

Nano Stores

Extrem minimalistisch, aber mit TypeScript und SSR-Support. Funktioniert sowohl mit Web Components als auch reinem Vanilla JS.

RxJS (selective import)

Für komplexe Zustandslogik oder Stream-Verarbeitung – durch gezielten Import einzelner Operatoren bleibt der Overhead überschaubar.

HTTP und Datenkommunikation

HTTP ohne Axios

ky

Ein eleganter, fetch-basierter HTTP-Client (unter 4kB), der native Fetch-APIs erweitert – mit automatischem Timeout, JSON-Handling und Retries.

NanoFetch

Micro-Library mit simplem Caching und Query-Hooks – bleibt vollständig browser-nativ.

Web Streams API (nativ)

Für Projekte mit größeren Datenströmen oder Echtzeitverarbeitung bietet sie direkte Kontrolle ohne Third-Party-Code.

Testing und Entwicklung

Vitest

Ideal im Zusammenspiel mit Vite, nutzt native ES-Module und bietet reaktives Testing in Sekunden – perfekt für kleine Vanilla-Projekte.

Uvu

Superschnelles Test-Framework (ähnlich Tape oder Jest, nur ohne Ballast). Kein Transpiling nötig, ideal für Node + Browser Tests.

Playwright (Component Mode)

Zum End-to-End-Testen einzelner Web Components oder Vanilla-UI-Module – paralleles Testing über mehrere Browser hinweg.

Performance und Monitoring

web-vitals

Natives Google-Tool (2kB) für Core Web Vitals (LCP, FID, CLS). Misst direkt im Browser ohne externe Services – ideal für DSGVO.

Weniger Abhängigkeiten bedeuten auch weniger externe Requests, weniger Telemetrie und weniger rechtliche Grauzonen – ein oft unterschätzter Vorteil von Vanilla-First-Architekturen.

Vanilla-extract

Type-sichere CSS-in-JS-Library ohne Runtime-Overhead. Generiert bei Build-Zeit CSS-Dateien, perfekt für skalierbare Theming in Web Components.

Stärken:

Kein JS zur Laufzeit für Styles
Vollständige TypeScript-Integration
Funktioniert mit Vite/esbuild

Form-Handling und Validation

Vanilla-validate

Micro-Lib (~1kB) für reaktive Form-Validierung mit Custom Events. Nutzt native Form APIs und Constraint Validation.

Idio

1kB Universal-Validator für Forms, JSON-Schemas und APIs. Keine Dependencies, funktioniert client- und server-seitig.

Stärken:

Native HTML-Validierung erweitern
Realtime-Feedback ohne DOM-Hacks
DSGVO-sicher (keine externen Calls)

Animationen und Transitions

Animation ohne GSAP

MotionOne

Web Animations API-Wrapper (6kB). Smooth Scrolling, GSAP-ähnliche Features ohne Polyfills – nutzt native WAAPI.

AnimatePlus

750-Byte-Animation-Lib für CSS-Properties und SVG. Kein Build-Step, direkt script-tag-fähig.

CSS und UI-Integration

PicoCSS, Open Props

Statt Tailwind oder großen Frameworks: minimalistische CSS-Lösungen, die moderne Variablen-, Token- und Theming-Ansätze unterstützen.

Open Props bietet vorgefertigte Design-Tokens (Farben, Transitions, Radius) – sofort nutzbar ohne Build-Step.

Moderne CSS Features

Mit :has(), Container Queries und CSS Custom Properties lassen sich viele Framework-Funktionen schon nativ umsetzen.

Wann welches Tool?

Die Entscheidung hängt vom Kontext ab:

Szenario	Empfehlung
Interaktives Widget auf statischer Seite	VanJS oder Alpine.js
Wiederverwendbare Komponenten über Projekte	Lit (Web Components)
Bestehende Server-gerenderte App aufwerten	Alpine.js
Maximale Performance, minimaler Footprint	VanJS + VanX
Team kennt bereits Template Literals	HyperHTML
Reaktiver State ohne Framework	Nano Stores oder Valtio
HTTP-Requests mit Retry-Logik	ky
Schnelles Unit-Testing	Vitest oder Uvu

Der eigentliche Mehrwert

Der Punkt ist nicht die Library selbst – sondern die Architektur-Entscheidung dahinter.

Framework-First (React, Vue, Svelte) bedeutet:

Einmal gewählt, schwer zu wechseln
Build-Pipeline ist Pflicht
Das Framework bestimmt die Projektstruktur

Vanilla-First bedeutet:

Browser-APIs als Fundament
Libraries als optionale Schicht
Jederzeit austauschbar oder entfernbar

Der praktische Unterschied zeigt sich bei Wartung und Updates: Eine Alpine.js-Komponente lässt sich in 20 Minuten durch VanJS ersetzen. Eine React-Komponente in eine Vue-App zu migrieren ist ein Projekt.

Einstiegspunkt wählen

Für den Start empfehle ich:

Ein konkretes Problem – nicht „ich will Vanilla First machen”
Die kleinste Library, die das Problem löst
Erst erweitern, wenn die Grenzen erreicht sind

Beispiel: Du brauchst ein Dropdown mit State? Versuch es erst mit 15 Zeilen Vanilla JS. Wenn du merkst, dass du reaktive Updates brauchst, nimm VanJS. Wenn du das Dropdown in mehreren Projekten nutzen willst, mach eine Web Component mit Lit daraus.

Dieser Ansatz verhindert Over-Engineering und hält die Codebasis schlank.

Architektur-Guidelines für Vanilla-First-Projekte

Wann Vanilla First nicht ideal ist

Große Teams mit vielen wechselnden Entwicklern, komplexen UI-Flows und starkem Fokus auf Geschwindigkeit profitieren oft von klaren Framework-Konventionen.

Vanilla First spielt seine Stärken dort aus, wo Kontrolle, Langlebigkeit und geringe Abhängigkeiten wichtiger sind als maximale Abstraktion.

Vanilla-First als Haltung

Vanilla First ist kein Dogma, sondern eine bewusste Designentscheidung: Native Fähigkeiten ausschöpfen, bevor man abstrahiert.

Diese Denkweise spart nicht nur Bytes, sondern auch Komplexität, Schulungsaufwand und technische Schulden.

Web Components, Reactive Micro-Libs und native ES-Module bilden inzwischen ein vollständiges Ökosystem, mit dem sich langlebige, wartbare und DSGVO-konforme Anwendungen entwickeln lassen – ohne Vendor-Lock-in oder Framework-Migrationen.

Vanilla First ist kein Rückschritt, sondern ein Reifegrad: weniger Magie, mehr Kontrolle – und Technik, die auch in fünf Jahren noch verständlich ist.