Vanilla JS bedeutet: reines JavaScript ohne Frameworks, ohne Libraries, ohne Build-Tools. Kein React, kein Vue, kein npm install. Nur eine HTML-Datei, ein Style-Tag und ein Script-Tag. Das klingt primitiv — ist aber für statische Websites, Landing Pages und Blogs der performanteste Ansatz den es gibt.
Frequently Asked Prompts
Was Vanilla JS ist — und was nicht
JavaScript ist die Programmiersprache die jeder Browser nativ versteht. Vanilla JS ist JavaScript ohne Zusätze. Kein React (eine Library die JavaScript erweitert), kein Next.js (ein Framework das auf React aufbaut), kein Webpack (ein Tool das Code bündelt). Die Datei die du schreibst ist die Datei die der Browser ausführt.
Die Analogie: React ist ein Fertighaus-Bausatz mit vorgefertigten Wänden. Vanilla JS ist Ziegel, Mörtel und ein Bauplan. Für ein Gartenhaus (Landing Page) ist der Bausatz Overkill. Für ein Mehrfamilienhaus (SaaS-App) ist er sinnvoll.
Was der Browser dir kostenlos gibt
Moderne Browser (Chrome, Firefox, Safari, Edge) bringen 2026 fast alles mit was früher Libraries brauchte. Diese Browser-APIs sind kostenlos, schnell und brauchen keinen Import:
- DOM-Manipulation — querySelector, createElement, classList: Elemente finden, erstellen, stylen. Ersetzt jQuery komplett.
- Fetch API — HTTP-Requests an Server schicken. Ersetzt axios und jQuery.ajax.
- IntersectionObserver — Erkennen ob Elemente sichtbar sind. Ersetzt Scroll-Event-Listener und Libraries wie ScrollReveal.
- CSS Custom Properties — Variablen direkt in CSS:
var(--accent-color). Ersetzt SASS-Variablen für die meisten Fälle. - ES Modules — Code aufteilen mit import/export, direkt im Browser. Ersetzt Webpack und Bundler für kleine Projekte.
- Web Animations API — Animationen per JavaScript steuern, performant wie CSS-Animationen. Ersetzt GSAP für einfache Fälle.
- Dialog-Element — Native Modals ohne JavaScript:
<dialog>. Ersetzt Bootstrap-Modals komplett.
Der Punkt
Was 2015 Libraries brauchte, ist 2026 nativ im Browser. Jede Library die du läadst, lädst du auf die Schultern deiner Nutzer. Für statische Seiten sind null Dependencies der Standard — nicht die Ausnahme.
Der Workflow ohne npm
Kein Terminal nötig. Kein node_modules. Kein package.json. So sieht der Vanilla-Workflow aus:
1. Datei erstellen — Eine index.html mit eingebettetem CSS und JS. Oder drei Dateien: index.html, style.css, script.js.
2. Lokal öffnen — Doppelklick auf index.html. Der Browser öffnet sie. Fertig. Kein Server, kein localhost:3000.
3. Iterieren — Ändern, speichern, Browser refreshen. Oder: Live Server Extension in VS Code für Auto-Reload.
4. Deployen — git push zu GitHub, Vercel deployt automatisch in unter 60 Sekunden. Framework-Preset auf "Other" setzen.
Für externe Libraries die du trotzdem brauchst (Three.js, GSAP): CDN-Link im HTML. Kein npm install. Eine Zeile: <script src="https://cdn.jsdelivr.net/...">. Fertig. Details im Three.js-Artikel.
Häufige Fragen
Ist Vanilla JS veraltet?
Nein — es ist die Zukunft. Jedes Framework baut auf Vanilla JS auf. Frameworks kommen und gehen (jQuery, Angular 1, Backbone), JavaScript bleibt. Die Browser-APIs werden jedes Jahr maächtiger.
Ab wann brauche ich ein Framework?
Wenn deine App komplexen State hat (viele verschachtelte Daten die sich gegenseitig beeinflussen), User Authentication, Echtzeit-Updates oder ein geteiltes Component-System für ein Team. Der Next.js Konzepte-Check hilft bei der Entscheidung.
Kann Claude guten Vanilla JS Code generieren?
Ja — wenn du es explizit sagst. Ohne Constraint generiert Claude React/Next.js weil die Trainingsdaten dominiert sind. Der Prompt-Trick: "Vanilla HTML/CSS/JS, kein Framework, keine Dependencies, eine einzige Datei."
Zum Thema: Web Dev for Vibe Coders — Der komplette Guide 2026
Quellen
developer.mozilla.org — Web APIs Reference
caniuse.com — Browser Compatibility Tables