Vanilla JavaScript
BeginnerWebsitePlain JavaScript with HTML and CSS: framework-free and fully in control.
Published 27 September 2026
About Vanilla JavaScript
Vanilla JavaScript removes every abstraction between you and the browser. No framework, no build step, no module bundler, just HTML, CSS, and native browser APIs. Modern JavaScript (ES2020+) has class syntax, modules, fetch, async/await, and the DOM API built in, making a surprising range of interactive features achievable without any dependencies.
The approach is particularly valuable for performance-critical sites, small interactive widgets, or learning projects where understanding the browser model matters more than developer convenience. A vanilla JS site has zero third-party vulnerability surface, deploys to any static host, and runs on every browser that has shipped in the past decade.
This stack is not anti-framework; it is the right tool when the cost of a framework (bundle size, build complexity, abstraction overhead) exceeds the value it provides. Many production sites serving millions of users run on vanilla JS because the problem space simply does not require more.
Key Features
- ✓No build tools: author and ship the same files
- ✓Modern browser APIs cover routing, fetch, localStorage, and DOM manipulation natively
- ✓Zero dependency surface for security and maintenance
- ✓ES modules supported natively in all modern browsers
- ✓Smallest possible bundle, just what you write
- ✓Compatible with any static host including GitHub Pages
When to Use Vanilla JavaScript
- →Interactive landing pages with animations and form handling
- →Simple single-page apps with minimal state
- →Learning JavaScript by working directly with browser APIs
- →Widgets or embeddable scripts for third-party sites
- →Sites where any framework dependency is a liability
Pros
- No dependencies to update, audit, or break
- Complete understanding of every line, with no framework magic
- Maximum performance ceiling with no overhead
- Deploys anywhere that serves files
Cons
- No component reuse pattern, so shared UI means manual copy-paste
- State management becomes complex beyond simple interactions
- No build-time optimizations like tree-shaking or TypeScript checking without adding tooling
Hosting Options for Vanilla JavaScript
Deploy Vanilla JavaScript on Netlify
A git-based deploy platform built for static sites: connect the repo and every push builds and deploys automatically, with a global CDN included. The free tier is plenty for a small site; paid plans start at $9/mo (Personal), with Pro at $20/mo once traffic or build usage grows.
Deploy Vanilla JavaScript on Vercel
Zero-config static deploys straight from a git push, backed by Vercel's global edge network for CDN delivery. The free Hobby tier is scoped to personal, non-commercial projects; a client or commercial site needs the Pro plan, around $20/mo per seat.
Deploy Vanilla JavaScript on Railway
A container-based platform for serving the files from a persistent Node static-file server, more than a plain JS site typically needs, but an option if you'd rather not use a static host. No free tier; the Hobby plan starts around $5/mo in usage credit.
Deploy Vanilla JavaScript on Firebase Hosting
Google's static hosting layer, served through Google's global CDN. The free Spark plan (10GB storage, roughly 360MB of daily transfer) covers a small site; usage-based Blaze pricing applies beyond that.
Deploy Vanilla JavaScript on Render
A persistent-service platform with a genuinely free tier for static sites and its own CDN layer. Free-tier static sites don't spin down the way free web services do.
Deploy Vanilla JavaScript on Cloudflare Pages
An edge-deployed alternative on Cloudflare's global network, with unmetered bandwidth even on the free tier, a real cost advantage for a high-traffic static site. The free tier allows 500 builds a month; the roughly $20/mo paid tier mainly buys more concurrent builds.
Deploy Vanilla JavaScript on GitHub Pages
Free static hosting directly from the GitHub repo the site lives in, served through GitHub's CDN (Fastly) at no cost, arguably the simplest possible way to publish a vanilla JS site with zero build step. Scoped by GitHub's terms to personal and open-source project sites, with a soft ~100GB monthly bandwidth guideline.
These are highlighted picks. To see all the tools, check the Hosting & Cloud category.
Vanilla JavaScript Add-ons
Each addition below extends this stack with a capability the base stack works fine without. None are required: include the ones your product actually needs when building this stack, and skip the rest.
CI/CD Add-ons
Add CI/CD when you want a dedicated pipeline for running tests, linting, or multi-stage builds before a deploy goes out. Many hosting platforms already redeploy automatically on every push on their own — a CI/CD tool adds the most value on top of that by gating the deploy on a passing test suite, and matters even more when the hosting choice does not auto-deploy at all, such as a self-hosted server.
Vanilla JavaScript with GitHub Actions
Runs a link checker or JS lint step and triggers deployments on every push, directly from the same GitHub repo the code already lives in, with no separate CI service to configure.
Vanilla JavaScript with GitLab CI/CD
GitLab's built-in CI/CD system, configured via .gitlab-ci.yml in the repository, the natural pick if the project's code lives on GitLab (self-hosted or gitlab.com) rather than GitHub, with the same YAML-pipeline model as GitHub Actions.
These are highlighted picks. To see all the tools, check the CI/CD Pipelines category.
Styling Add-ons
Add styling when you want a component or utility-class system to build the UI faster than hand-writing CSS from scratch.
Vanilla JavaScript with Tailwind CSS
Utility-first CSS compiled via Tailwind's standalone CLI, with no framework or build step beyond that. Classes go directly in the HTML with no separate stylesheet to maintain. The stack ships with plain, hand-written CSS by default; add this if you'd rather not write it from scratch.
These are highlighted picks. To see all the tools, check the CSS Frameworks category.
Analytics Add-ons
Add analytics when you want to measure traffic, track visitor behavior, or understand how people actually use the product.
Vanilla JavaScript with PostHog
An all-in-one product analytics platform: event tracking, session replay, feature flags, and A/B testing in one SDK. The richest feature set if you want more than pageviews.
Vanilla JavaScript with Google Analytics
The industry-standard, free analytics platform, with native Google Ads and Search Console integration. Requires a cookie consent banner in most jurisdictions (GDPR/CCPA), and all data lives on Google's infrastructure, the tradeoff the other three picks were built to avoid.
Vanilla JavaScript with Plausible Analytics
A lightweight, privacy-first analytics tool with no cookie banner required. A good fit for simple traffic metrics without PostHog's broader feature surface.
Vanilla JavaScript with Umami
Open-source and self-hostable, keeping analytics data on infrastructure you control. The natural pick if you want to avoid a third-party analytics vendor entirely.
These are highlighted picks. To see all the tools, check the Web & Product Analytics category.
Frequently Asked Questions about Vanilla JavaScript
How does this compare to HTML & CSS?
HTML & CSS has no JavaScript at all; this stack adds client-side interactivity (form validation, dynamic content, API calls) on top of the same HTML/CSS foundation. Pick HTML & CSS for a genuinely static page; pick this one the moment you need any client-side logic.
When should I move to a framework instead of staying with vanilla JavaScript?
Once you're manually tracking UI state across multiple DOM elements, or re-implementing the same rendering logic in several places, a framework's component model starts paying for itself. For a page with a handful of independent interactive elements, vanilla JavaScript stays simpler and has zero build step.
Should I add a bundler, or keep everything in plain script tags?
Plain script tags work fine for a small site and keep the zero-build-step simplicity this stack is built around. A bundler (Vite, esbuild) becomes worth it once you're splitting code across multiple files and want them combined into one optimized request, or using npm packages that expect a module system.
What's the cheapest way to run this site?
Every host in the shortlist (Netlify, Vercel, Cloudflare Pages, GitHub Pages) has a genuinely free tier for a static site this size. The stack runs at zero cost until traffic or build minutes grow past whichever platform's free allowance you're using.
Stacks Related to Vanilla JavaScript
Astro + Ghost Blog
Project
Headless Ghost CMS with an Astro frontend: a fast, SEO-optimised blog with a polished editing experience.
HTML & CSS
ProjectBack-to-basics static site with pure HTML and CSS, nothing else.
Jamstack with Astro and Headless CMS
Project
Static-first architecture with a structured-content headless CMS and CDN delivery.
Astro Starter
ProjectAstro with zero JavaScript by default: the minimal static site starter.
Scores
Popularity3/5
Every website ultimately runs on JavaScript, but hand-writing a whole site with zero framework or build tooling is a deliberate minimalist choice today, not what most new projects reach for.
Learning Curve2/5
Vanilla JavaScript is one of the most widely-taught languages on the web, and without a framework there's no additional API surface, build tool, or component model to learn on top of the language itself — just the DOM APIs.
Flexibility3/5
With no framework, no bundler, and no component model, this stack is entirely up to you — add whatever libraries or patterns fit, or none at all. Not a higher score because "no framework" also means no built-in patterns for state or routing to build on top of.
Performance5/5
No framework runtime, no virtual DOM, no hydration step — just the browser's native JavaScript engine running your code directly. As fast as client-side JavaScript can be.
Portability5/5
Plain JavaScript, HTML, and CSS have no framework, no build step, and no vendor-specific syntax — deployable to literally any static host, forever. About as portable as a web project gets.
Tools in the Vanilla JavaScript Stack
Programming Languages
Add-ons (optional — add any, or none)
CI/CD
Styling
Analytics
Vanilla JavaScript Pricing
Plain JavaScript, HTML and CSS have no framework or build cost at all, and every hosting option in the shortlist (Netlify, Vercel, Cloudflare Pages, GitHub Pages) has a genuinely free tier for a site this size. Most sites on this stack run entirely free.
JavaScript, HTML and CSS have no framework or license cost at all.
Netlify, Vercel, Cloudflare Pages and GitHub Pages have free tiers; Pro plans are about $20/mo.