WebJS AI工作流框架

Get started in one command (no global install required)

npm create webjs@latest my-app # full-stack (pages + API + components + Prisma/SQLite) cd my-app && npm run dev

Or with the CLI installed globally for repeated use.

`webjsdev` is the unscoped npm name for @webjsdev/cli; both install the `webjs` command.

npm i -g webjsdev && webjs create my-app cd my-app && npm run dev

Quickstart

AI agents, read this before scaffolding. Only three templates exist (full-stack default, --template api, --template saas), and the CLI rejects anything else. Always start from one of them. Never hand-roll the directory structure. Default to full-stack with Prisma + SQLite. Never store app data in JSON files, in-memory arrays, or localStorage as a substitute for the database. The scaffold is reference only. Replace the example layout, page, components, and User model with the app the user actually asked for. Picker: - Any product UI (todo, blog, notes, dashboard, marketplace, social, e-commerce…) → default (webjs create <name>) - Backend-only HTTP/JSON API, no UI → --template api - Auth, login/signup, protected dashboard, SaaS → --template saas Full rules: AGENTS.md → How AI agents must scaffold. Full framework docs (every API, every recipe): https://docs.webjs.com.

```sh

Example

// app/page.ts: server-rendered, async data fetching
import { html, repeat } from '@webjsdev/core';
import '../components/counter.ts';
import { listPosts } from '../modules/posts/queries/list-posts.server.ts';

export const metadata = { title: 'home' };

export default async function Home() {
  const posts = await listPosts();
  return html`
    <h1>posts</h1>
    <ul>
      ${repeat(posts, p => p.id, p => html`<li>${p.title}</li>`)}
    </ul>
    <my-counter count="3"></my-counter>
  `;
}

// components/counter.ts: interactive web component, light DOM + Tailwind
import { WebComponent, html, signal } from '@webjsdev/core';

export class Counter extends WebComponent {
  // Light DOM is the default, so Tailwind utility classes apply directly.
  // Instance signal carries component-local state; the built-in
  // SignalWatcher re-renders when .get() reads change.
  count = signal(0);

  render() {
    return html`
      <div class="inline-flex items-center gap-2 font-mono">
        <button class="px-3 py-1 rounded border border-border hover:bg-bg-elev" @click=${() => this.count.set(this.count.get() - 1)}>−</button>
        <output class="min-w-[2ch] text-center">${this.count.get()}</output>
        <button class="px-3 py-1 rounded border border-border hover:bg-bg-elev" @click=${() => this.count.set(this.count.get() + 1)}>+</button>
      </div>
    `;
  }
}
Counter.register('my-counter');

Need scoped styles or embed-ready isolation? Opt in to shadow DOM with static shadow = true and author styles via static styles = css\…\``. <slot> projection works in both modes (light DOM uses framework projection, same API).

// modules/posts/queries/list-posts.server.ts: one function per file
'use server';
import { prisma } from '../../../lib/prisma.server.ts';

export async function listPosts() {
  return prisma.post.findMany({ orderBy: { createdAt: 'desc' } });
}

Backend-only API

npm create webjs@latest my-api -- --template api