Skip to main content

Command Palette

Search for a command to run...

🧱 I built a tiny (in size, not in power) full-stack framework for the AI era, I call it webjs.

Built on web components, no build step, pre-defined guardrails. Your AI agent reads the whole stack including the framework code, not just guesses at it.

Published
5 min read
🧱 I built a tiny (in size, not in power) full-stack framework for the AI era, I call it webjs.

I wanted to experiment building a full-stack web framework that was small enough for the AI to read end-to-end without needing an MCP. What if the source code, both my code and the framework's code (in node_modules), was right there, uncompiled, browseable, readable? What if the browser console showed the exact same code the AI wrote, with no transpiler in between?

That's the idea I built webjs around. And it's live now at https://webjs.dev.

webjs is built on web standards

The first decision was this. Don't write a new component model. Just use web components. They're a browser standard, they work everywhere, they have proper shadow DOM, slots, custom events, that works. So webjs components are REAL web components. Light DOM by default, so your Tailwind classes and global CSS just work. And you can flip one flag, static shadow = true, to opt into shadow DOM with proper SSR via Declarative Shadow DOM.

Because we don't have to write a component engine from scratch, the framework code is tiny. Next.js is massive, thousands of files, millions of lines. webjs is maybe 5% of that, because 95% of the work is already done by the browser itself. That's the superpower of web standards. You get power without size.

I didn't want to reinvent everything either. So webjs plugs in the tools that already have amazing DX:

  • Prisma ORM for the database. Type-safe schema, migrations, prisma generate, all the stuff that already works

  • Tailwind CSS for styling, via the CLI. No browser runtime, just a small generated stylesheet

  • esbuild for stripping TypeScript types for the browser in dev, about a millisecond per file

  • superjson on the wire so server actions round-trip Date, Map, Set, BigInt as real types

The scaffold ships with all of this wired up. You run webjs create my-app, and you have auth, a Prisma database, Tailwind, tests, AGENTS.md, the whole thing. No "pick your ORM" decision fatigue. Sensible defaults out of the box.

File-tree routing, just like NextJs

The other thing I didn't want to reinvent was routing. NextJs App Router is genuinely great. File-based, easy to reason about, and everyone already knows it. So webjs has full parity with the conventions people already use: page.ts, layout.ts, route.ts, error.ts, loading.ts, middleware.ts, [param] folders, (group) folders, _private folders, metadata routes. If you've used Next.js, you already know webjs.

Why AI agents love it

This is the fun part. There are five reasons AI agents write production-quality code in webjs:

  1. AGENTS.md is bundled in every scaffold. It includes pre-defined guardrails so you don't have to worry about instructing the agents about git branching rules, commit patterns, etc. It also tells the agent where it can find the framework code itself. Any AI agent reads it first and knows exactly how to build.

  2. The framework code is small and readable. When Claude or Cursor needs to understand how something works inside the framework, it can just open node_modules/@webjskit/core and read the actual source. No minified bundle, no transpiled soup, just plain JavaScript.

  3. CONVENTIONS.md The framework defines conventions for AI agents about how the code needs to be structured and use the default tools opinionated by the framework. Though, you're free to change any convention or swap the defaults.

  4. No build step. webjs serves .ts files directly to the browser. Node 22 strips types at runtime on the server. The dev server strips types for the browser via esbuild, cached by mtime. When an AI agent wants to debug something, it can open the browser console and see the EXACT code it wrote. Same file, same line numbers. No sourcemap gymnastics.

  5. End-to-end TypeScript. Import a .server.ts function (Server Actions) from a client component and TypeScript sees the real signature. You get autocomplete, type errors, refactors, everything, across the server-client boundary. AI agents write fewer bugs because the types catch them first.

Put these together and you get an agent that can read your whole stack end-to-end, write code with full context, and ship production features without guessing and without requiring an MCP!

The journey

Building it has been FUN. Built it in under a week, thanks to AI. 632 unit tests, 96% code coverage. Rewrote the renderer three times to get light-DOM and shadow-DOM both working with SSR and hydration. Built a proper client-side router with View Transitions. Published four packages to npm. And finally shipped a working blog example that showcases a few features of the framework, so you can see it in action, not just read about it.

Try it

# install once
npm i -g @webjskit/cli

# scaffold a new app
webjs create my-app
cd my-app && npm install && npm run dev
# → http://localhost:3000

# or backend-only API
webjs create my-api --template api

# or SaaS starter (auth + dashboard + Prisma)
webjs create my-app --template saas

You get a full-stack app with auth, a dashboard, tests, Tailwind, AGENTS.md, and everything AI agents need to start shipping from minute one.

Give it a try. I'd love to know what you think. Feel free to contribute, and a star on GitHub is more than welcome : )