# Show HN: NoopJS – A compiler that ships 0 KB JavaScript for static pages > Source: > Published: 2026-07-21 18:57:19+00:00 [Quick Start](#quick-start) · [Live Demo](/noop-js/noopjs/blob/main/examples/blog) · [Documentation](/noop-js/noopjs/blob/main/docs/index.html) · [Roadmap](#roadmap) ``` ╔══════════════════════════════════════════════════════════╗ ║ .noop.tsx ──► Compiler ──► Vanilla JS ║ ║ │ ║ ║ ├── SSR: HTML + Serialized State ║ ║ │ │ ║ ║ │ ▼ ║ ║ │ Client Runtime ◄── 0–3.7 KB ║ ║ │ (No hydration — just resume) ║ ║ │ ║ ║ └── Atomic CSS + Tailwind v4 ║ ║ (Zero runtime CSS-in-JS) ║ ╚══════════════════════════════════════════════════════════╝ ``` **AI generates code now.** Frameworks built on hooks, rules, and runtime contracts (React, Vue, Angular) were designed for humans. An AI doesn't need rules — it needs a framework that compiles away. NoopJS components are plain functions. No `useMemo` , no `useCallback` , no rules of hooks. The compiler handles everything. **Performance is no longer optional.** Core Web Vitals are SEO signals. NoopJS delivers a 0.06s LCP on an SSR page — not in a benchmark, but in a real blog application with Tailwind CSS. **The silos must break.** Components should work everywhere. NoopJS components compile to native Custom Elements on demand. Write once, embed anywhere. **JavaScript bundles must shrink.** The average React page ships ~45 KB of framework JS. NoopJS ships **0 KB for static pages**, **466 B for resume** (counter fully interactive — signal, binding, handler), and **317 B inline + 3.5 KB cached shared runtime for SPA**. ``` npm install @noopjs/vite # or scaffold: npm create noopjs ``` Then add one plugin to `vite.config.ts` : ``` js import { noopVite } from '@noopjs/vite'; export default defineConfig({ plugins: [noopVite()], }); ``` | What you get | Why it matters | |---|---| Compiler | JSX → vanilla DOM. No framework code ships. | Signals | TC39-standard `signal` , `computed` , `effect` , `batch` . | Atomic CSS | Style objects → hashed utility classes. Zero runtime CSS-in-JS. | SSR engine | Render to HTML, serialize state, resume on client. True resumability. | Client runtime | 0 KB static, 466 B resume (inline), 317 B inline + 3.5 KB cached shared for SPA. Re-attaches signals to DOM without re-running components. Native `` eliminates JS prefetcher. | SPA router | Intercepts `` clicks. View Transitions API. Native `` . | Event delegation | Single global listener. Handlers loaded lazily on first interaction. | SPA security | mXSS-immune page swaps via per-render sentinel manifest. ~50 bytes. No DOMPurify. | Tailwind v4 | First-class token resolver. `token.spacing[6]` → `p-6` . | Custom Elements | Export as native Web Components via `@noopjs customElement` directive. | Form helpers | `useField()` , `
` , validation — property-assigned, not `setAttribute` . ~100 lines. | DevTools | Runtime bridge instruments all `signal()` /`effect()` calls. Floating panel (Cmd+Shift+N). | Streaming SSR | `renderToStream()` emits content-first HTML. Chunked transfer encoding. | ESLint plugin | 4 rules: module-level signals, dynamic DOM in resume, missing key, dangerous innerHTML. | CLI | `dev` , `build` , `generate` , `analyze` , `check` , `init` . | HMR | Full hot module replacement in development. | ``` npm create noopjs # any tool: pnpm create, yarn create, bun create # Pick a template: counter, blog, or empty ``` Or add to any existing Vite project: ``` npm install @noopjs/vite # or: pnpm add, yarn add, bun add js // vite.config.ts import { noopVite } from '@noopjs/vite'; export default defineConfig({ plugins: [noopVite()] }); js // src/counter.noop.tsx import { signal } from '@noopjs/signals'; export const styles = { count: { fontSize: '24px', fontWeight: 'bold' }, button: { padding: '8px 16px', cursor: 'pointer' }, }; export default function Counter() { const count = signal(0); return (

{count}

); } python // src/main.ts import Counter from './counter.noop'; document.getElementById('root')!.appendChild(Counter()); npx vite # dev server npx noopjs build # production build ``` Fine-grained reactivity following the TC39 proposal. ``` js import { signal, computed, effect, batch } from '@noopjs/signals'; const count = signal(0); const doubled = computed(() => count.get() * 2); effect(() => console.log(count.get())); batch(() => { count.set(1); count.set(2); }); // effect runs once ``` The compiler transforms `.noop.tsx` into vanilla JavaScript at build time. ``` // You write: export default function Greeting(props: { name: string }) { return
Hello, {props.name}!
; } // The compiler generates (simplified): export default function Greeting(props) { const el = document.createElement('div'); const txt = document.createTextNode('Hello, ' + props.name); el.appendChild(txt); return el; } ``` No JSX at runtime. No framework imports. No VDOM. Just DOM. A minimal form library built on signals. Property-assigned values (not `setAttribute` ) — no friction with `` . ``` js import { Form, useField } from '@noopjs/forms'; export default function SearchPage() { const query = useField('', { validate: (v) => v.length > 0 ? null : 'Enter a query', }); const results = signal([]); const loading = signal(false); function doSearch() { if (query.validate()) return; loading.set(true); fetch('/api/search?q=' + encodeURIComponent(query.value.get())) .then(r => r.json()) .then(r => { results.set(r); loading.set(false); }); } return (
{query.error.get() && {query.error.get()}} {loading.get() &&

Loading...

}
); } ``` Returned by `useField` | Purpose | |---|---| `value` | `Signal` — read with `field.value.get()` | `error` | `Signal` — validation error, set by `field.validate()` | `props` | `{ value }` — spread onto `` , `