Skip to content

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 it can read end to end, and your app code is served to the browser exactly as written. Any model reasons about the whole stack and debugs it, with no training data required and no single blessed model, on the web components and standard HTML every model already knows.

npm create webjs@latest my-app

What a WebJs app looks like

A component, a server function, 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

components/like-button.ts
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 function

actions/get-post.server.ts
'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 client component. WebJs rewrites
// the import into a typed RPC stub (the real call at SSR). 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

app/posts/[id]/page.ts
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, readable end to end

Predictable file conventions, one server function per file, and an explicit .server.ts boundary keep the context a change needs small, so an agent can edit one route without reading the whole app. 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, and the wire preserves Date, Map, Set, BigInt, Blob, File, FormData, and reference cycles. 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.

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.

npm create webjs@latest my-app

Compare WebJs with Next.js, Lit, and Astro, or read the explainers.