What is WebJs?
WebJs is an AI-first full-stack JavaScript web framework built on web components. It server-renders every page and component to real HTML, needs no build step or bundler, and runs on Node 24+ or Bun.
Nothing is hidden from your agent. The framework ships in node_modules as plain JavaScript, so an agent opens the router or the renderer it is calling instead of recalling an API from training data, and your app code is served to the browser exactly as written. Any model debugs the running app against the real source, with no single blessed model, on the web components and standard HTML every model already knows.
What a WebJs app looks like
A component, a server action, and a page. These are ordinary files in your project, served as written. There is no compile step between what you see here and what the browser receives.
A component
import { WebComponent, html, signal } from '@webjsdev/core';
class LikeButton extends WebComponent {
likes = signal(0);
render() {
return html`<button @click=${() => this.likes.set(this.likes.get() + 1)}>
♥ ${this.likes.get()}
</button>`;
}
}
LikeButton.register('like-button');A server action
'use server';
import { eq } from 'drizzle-orm';
import { db } from '#db/connection.server.ts';
import { posts } from '#db/schema.server.ts';
// Import this from a page or component. In the
// browser the import becomes an RPC call. On the
// server it is just this function. No fetch by hand.
export async function getPost(id) {
const [post] = await db.select()
.from(posts)
.where(eq(posts.id, id));
return post;
}A page
import { html, notFound } from '@webjsdev/core';
import { getPost } from '#actions/get-post.server.ts';
import '#components/like-button.ts';
export default async function Post({ params }) {
const post = await getPost(params.id);
if (!post) notFound();
return html`<article>
<h1>${post.title}</h1>
<like-button></like-button>
</article>`;
}What WebJs does for you
WebJs is a full framework rather than a rendering library, so routing, data, and the production concerns arrive together instead of as six decisions you make yourself.
AI-first, one route at a time
Predictable file conventions and an explicit .server.ts boundary decide the shape of an app, so an agent edits one route without reading the whole app, and Build me an app is the whole prompt. Every app ships an AGENTS.md contract that Claude Code, Cursor, Copilot, Gemini, and opencode read from one source, and the framework itself is plain JavaScript with JSDoc in node_modules rather than a compiled bundle.
Web components, server-rendered
Components are standard custom elements. Every render() runs on the server, so the initial markup is in the HTTP response before any script loads. Light DOM is the default, so global CSS and Tailwind apply directly, and shadow DOM is one static field away when you want scoped styles.
File-based routing
A page.ts file is a route, a layout.ts wraps everything under it, and a route.ts is an HTTP handler. Dynamic segments, route groups, catch-alls, error boundaries, and loading states all follow the folder structure, so the URL map is the directory tree.
Server actions with real types
Export an async function from a .server.ts file and import it straight into a component. The import becomes a typed RPC call, so the argument and return types cross the boundary with it and a database row keeps its schema type the whole way into the markup, with nothing generated in between. The wire preserves Date, Map, Set, BigInt, Blob, File, FormData, and reference cycles, and the server source never reaches the browser.
Batteries included
Sessions, authentication, caching, rate limiting, file storage, and WebSockets ship in the box, sharing one pluggable store. In-memory by default, and a single setStore call moves all of them onto Redis.
TypeScript with nothing to compile
Write .ts files and run them. Types are stripped at request time by Node 24+ or by amaro on Bun, position-preserving and near-zero overhead, so what you read in the editor is what runs in the browser.
Other things called WebJS
The name is shared. If you arrived looking for one of these, they are not this project.
- whatsapp-web.js (wwebjs)
- An unofficial Node.js library for building WhatsApp clients and bots. Commonly shortened to wwebjs, and unrelated to this framework.
- WebJS for Java
- An older framework aimed at letting Java developers build web applications without combining many technologies. Last published in 2013 and no longer active.
- webJS toolkit
- A small client-side JavaScript toolkit that compiles HTML templates into reusable JavaScript for dynamic page rendering. A browser library rather than a full-stack framework.
WebJs FAQ
What is WebJs?
WebJs is an AI-first full-stack JavaScript web framework built on web components. It server-renders every page and component to real HTML, needs no build step or bundler, and runs on Node 24+ or Bun. The framework serves your source to the browser exactly as you wrote it, so the code you read is the code that runs.
What makes WebJs AI-first?
WebJs is designed so a coding agent can change one part of an app without reading all of it. File conventions are predictable, each server function lives in its own file, and the .server.ts extension marks the server boundary explicitly, so the relevant context for a change is small and easy to locate. Every app ships an AGENTS.md contract plus a cross-agent skill that Claude Code, Cursor, Copilot, Gemini, and opencode all read from one source. And because there is no build step, the framework itself sits as plain JavaScript with JSDoc in node_modules/@webjsdev of every app, so an agent reads the actual router, renderer, or serializer it is calling rather than a compiled bundle. That grounding in real source is what lets even smaller AI models produce quality WebJs code.
Is WebJs free to use?
Yes. WebJs is free and open source under the MIT license, developed in the open at github.com/webjsdev/webjs. There is no paid tier, no license key, and no hosted service you are required to buy.
Is WebJs the same as whatsapp-web.js?
No. whatsapp-web.js is an unofficial Node.js library for building WhatsApp clients and bots, often shortened to wwebjs. WebJs is an unrelated full-stack web framework for building websites and web applications.
Is WebJs the same as the older Java WebJS framework?
No. An earlier unrelated project called WebJS aimed to let Java developers build web applications, and it was last published in 2013. WebJs is a modern JavaScript and TypeScript framework, actively developed, with no connection to that project.
Does WebJs need a build step?
No. WebJs serves your source files directly as native ES modules. TypeScript is stripped at request time by the runtime, using Node 24+ built-in type stripping or amaro on Bun, so there is no bundler, no compile output, and no watch process to keep in sync. You edit a file and refresh.
Does a WebJs app work without JavaScript?
Yes, for everything that does not require interactivity. Pages and components are server-rendered to HTML, so content reads, links navigate, and forms submit with JavaScript disabled. Scripts are then layered on per interactive behaviour rather than per component, and a display-only component ships no JavaScript at all.
What can you build with WebJs?
Full-stack web applications with server-rendered pages, file-based routing, server actions, sessions, authentication, caching, rate limiting, WebSockets, and a database layer. It also runs backend-only as an HTTP and JSON API framework if you skip pages entirely.
Is WebJs tied to Tailwind and Drizzle?
No. A scaffolded app arrives wired to Tailwind for styling, Drizzle with SQLite for data, light DOM components, and design tokens, because an agent building your app should not have to stop and ask. Those are defaults rather than requirements. Bring a different ORM, a different database, or a different way of styling and the framework does not object, since none of the routing, rendering, or server-action machinery depends on any of them.
Does WebJs give you full-stack type safety?
Yes, and without a code generation step. A component imports a server action through an ordinary import, so the call site keeps that function's real argument and return types, and a database row carries its schema type from Drizzle through the action into the markup that renders it. Because types are stripped at request time rather than compiled, the types you read in the editor describe the code that actually runs.
How do you install WebJs?
Run npm create webjs@latest my-app to scaffold a full-stack application, then npm run dev to start it. The scaffold includes routing, a database layer, and a styled layout, so the app is production-shaped from the first command.
Try it in one command
The scaffold gives you routing, a database layer, and a styled layout, so you start from a production-shaped app rather than an empty directory.
Compare WebJs with Next.js, Lit, and Astro, or read the explainers.