← Methodology

AI + Vanilla JavaScript: No Framework Required

React, Vue, Svelte, Angular, and Next.js are all JavaScript frameworks. And JavaScript is exactly what every browser has always understood natively. Svelte even compiles itself away entirely at build time — the browser receives plain JavaScript, no framework runtime included. What the browser runs in every case is vanilla JavaScript. It always has been.

Frameworks were scaffolding. AI is a better scaffold.

What frameworks actually produce

Every frontend framework ultimately generates JavaScript — the same JavaScript you can write directly, or ask an AI to write for you. The virtual DOM, the component lifecycle, the reactivity system — these are tools to manage the complexity of producing that JavaScript consistently across a large team.

If you're a solo developer or a small team with an AI assistant, that problem is already solved. In your editor. Not in your node_modules.

What to ask your AI

One instruction changes everything. At the start of every session:

We are building with vanilla HTML, CSS, and JavaScript.
No npm. No React. No frontend build tools.
The backend is [language] and serves HTML from template files.
Use the browser's native APIs only.

AI tools default to what's common. This instruction changes the default. From here, every feature request produces vanilla JavaScript that drops straight into your project and runs immediately.

What AI replaces, feature by feature

  • Form validation — React controlled inputs + state → input event listener + dataset attributes
  • Live search — useState + useEffect + debounce hook → fetch() + setTimeout debounce, 15 lines
  • Modal / dialog — component with portal + state → <dialog> element + .showModal()
  • Dynamic table — virtual DOM re-render → innerHTML rebuild or insertRow()
  • Page transitions — React Router + animations → CSS transitions + fetch() + history.pushState()
  • Component reuse — JSX components → partial HTML files served by the backend
  • State management — Redux / Zustand / Context → data- attributes + sessionStorage
  • API calls — axios / react-query → fetch() with async/await

The security argument

Every npm package you don't install is an attack surface you don't have. The npm ecosystem recorded over 3,000 confirmed malicious packages in 2024. The September 2025 Shai-Hulud worm self-propagated through npm to 500+ packages with 2.6 billion combined weekly downloads.

A vanilla JavaScript frontend served from a static folder has exactly zero npm dependencies. There is nothing to compromise.

Keeping your AI on track

The CLAUDE.md file is your permanent instruction set. It tells your AI assistant what the project is, what tools are available, and what must never change. You write it once. Every session starts with the same contract.

Rules worth including in every CLAUDE.md for a vanilla project:

- No npm. No package.json. No node_modules.
- No JavaScript frameworks or libraries (no React, Vue, Alpine, HTMX).
- No CSS frameworks (no Tailwind, Bootstrap).
- Use the browser's native APIs: fetch(), querySelector(), dataset, classList.
- All JavaScript is vanilla ES2022+. Use modules where appropriate.
- Do not add a build step of any kind.

These six lines eliminate the most common AI drift patterns. The AI will not reach for React. It will write what you asked for.

Get a working setup

BasicSiteServer implements this entire approach — a minimal C# or Rust web server, a layout engine, and a CLAUDE.md that encodes the vanilla contract permanently.

Get BasicSiteServer →

Or start with the template engine:

HTML Templating: The Backend Doesn't Matter →