Less to Learn, More to Build
Simple patterns that feel natural. No complex state management, no hooks to memorize, no build configuration rabbit holes.
LLMs Get It Right
Designed for the AI era. Simple, consistent patterns that Claude, GPT, and other LLMs generate correctly without hallucination.
From OpenAPI to UI
Point at any OpenAPI spec and get a complete admin panel. List views, detail pages, forms - all wired up and type-safe.
Live in Seconds
From code to production URL in one command. Edge-deployed globally on Cloudflare Workers with automatic SSL.
Smart Development
AI-powered code generation, real-time diagnostics, 49 snippets, and one-click deploy - all from your editor.
$ noun create my-app ✓ Created project structure ✓ No webpack, no vite config ✓ Just HTML, CSS, and JS $ noun serve → Running at http://localhost:3000
// AI prompt: "Add a counter component" class Counter extends Component { template = ` <button @click="increment"> Count: { count } </button> ` count = 0 increment() { this.count++ } } // AI gets this right every time
$ noun scaffold https://api.example.com/openapi.json ✓ Found 5 resources and 12 schemas ✓ Generated api/client.js ✓ Generated types/index.js ✓ Generated 18 pages → Ready to customize!
$ noun publish → Building... ✓ Built in 847ms → Uploading... ✓ Deployed to 12 edge locations ✓ Live at https://my-app.nounjs.app Total time: 3.2 seconds
// VS Code Extension Features Cmd+Shift+G AI Generate Component Cmd+Shift+P Publish to nounjs.app Cmd+Shift+S Scaffold from OpenAPI ✓ 49 snippets included ✓ Real-time diagnostics ✓ Syntax highlighting ✓ IntelliSense support
Subscribe for release announcements. No spam, ever.
OpenAPI scaffolding, AI-friendly syntax, and instant deployment. Build admin panels in minutes.
Generate complete UIs from any OpenAPI spec.
noun scaffold
.NET, FastAPI, Express
Swagger, Spring BootAI generation, diagnostics, and CLI integration.
Cmd+Shift+G AI Generate
49 snippets includedSimple patterns LLMs generate correctly.
this.count++
:if, @click
AI gets this right 95%+
No hooks to hallucinateFrom code to live URL in seconds.
noun publish
.nounjs.app
Built in 847ms
Deployed globallyEvery OpenAPI spec contains the blueprint for a complete admin panel. Nounjs reads it and generates the UI automatically. No boilerplate, no manual wiring, no repetitive CRUD pages.
Point at any OpenAPI endpoint. Get list views, detail pages, and forms for every resource - correctly typed and wired up.
Simple syntax that LLMs generate correctly. No hooks to hallucinate, no state management to mess up. Just intuitive patterns.
One command to deploy. From scaffold to live URL in under a minute. Edge-deployed globally on Cloudflare Workers.
Familiar patterns, automatic reactivity, and a fast build system. Get productive in minutes, not days.
import { Component, mount } from '@noundryfx/nounjs'
class Counter extends Component {
template = `
<div class="p-6 bg-white rounded-xl shadow">
<h2 class="text-2xl font-bold mb-4">
Count: { count }
</h2>
<div class="flex gap-2">
<button @click="decrement" class="btn">-</button>
<button @click="increment" class="btn">+</button>
</div>
</div>
`
count = 0
increment() {
this.count++
}
decrement() {
this.count--
}
}
mount('#app', Counter)<template>
<div class="p-6 bg-white rounded-xl shadow">
<h2 class="text-2xl font-bold mb-4">
Count: { count }
</h2>
<div class="flex gap-2">
<button @click="decrement" class="btn">-</button>
<button @click="increment" class="btn">+</button>
</div>
</div>
</template>
<script>
export default {
count: 0,
increment() {
this.count++
},
decrement() {
this.count--
}
}
</script>A complete ecosystem for building modern client-side applications.
Generate complete admin UIs from OpenAPI specs. One command creates list, detail, and form pages for every resource.
Expressive template syntax with { } interpolation, :if, :for, and @events.
Pre-built buttons, inputs, modals, tables, and more. All styled with Tailwind CSS or Tailwind v4.
Built-in reactive state management with watchers, computed properties, and cross-component communication.
Full-featured router with guards, middleware, nested routes, and security built-in.
Create projects, generate components, compile .noun files, and deploy to nounjs.app hosting.
Choose Nounjs Tailwind classes or Tailwind v4 (shadcn/ui-inspired). Both built on Tailwind CSS v4.
NEWLight/dark mode, 8 accent colors, system preference detection. Zero config, CSS variables, automatic persistence.
NEWBuilt-in visual debugger with component tree, state inspector with live editing, and event logging. Press Ctrl+Shift+D to toggle.
NEWFirst-class TypeScript in .noun files with <script lang="ts">. Full type definitions included. Native Bun transpilation.
Ship to your-app.nounjs.app instantly. PR preview URLs, staging environments, and production deploys with a single command.
Familiar patterns, powerful features. If you've used Vue or Alpine, you'll feel right at home.
<p>Hello, { name }!</p>
<span>Total: { price * qty }</span><img :src="imageUrl" :alt="alt" />
<button :disabled="loading"><div :class="{
'active': isActive,
'disabled': isDisabled
}"><div :if="loading">Loading...</div>
<div :else-if="error">{ error }</div>
<div :else>Content here</div><li :for="item of items">
{ item.name }
</li>
<tr :for="user, i of users"><button @click="handleClick">
<form @submit.prevent="save">
<input @keyup.enter="search">Nounjs is designed to be a complete ecosystem for delivering application UI quickly. It works beautifully with the Noun ecosystem, but embraces any backend you choose.
Javascript
Python
Noun / C#
Any REST API
Deploy your Nounjs app to nounjs.app hosting with a single command.
Your app will be live in seconds at your-app.nounjs.app.
noun publish my-appExplore live demos showcasing Nounjs capabilities.
We believe in transparency. Here's how Nounjs stacks up against other frameworks - including where others might be a better fit.
| Feature | Nounjs | React/Next.js | Vue.js | Svelte | Vanilla JS |
|---|---|---|---|---|---|
| Virtual DOM | No | Yes | Yes | No (compile-time) | No |
| Bundle Size (min)* | ~32-41kb* | ~45kb+ | ~33kb | ~2kb | 0kb |
| SSR Required | No (client-only) | Often expected | Optional | Optional | N/A |
| Build Step Required | Minimal (optional) | Yes | Yes (usually) | Yes | No |
| Learning Curve | Low | Medium-High | Medium | Medium | Low |
| Component Model | Classes + .noun SFCs | JSX + Hooks | SFCs + Options/Composition | SFCs | DIY |
| State Management | Built-in store | External (Redux, etc.) | Pinia/Vuex | Built-in stores | DIY |
| Routing | Built-in | Next.js or React Router | Vue Router | SvelteKit | DIY |
| CLI Tooling | Full CLI included | Create React App / Next CLI | Vue CLI / Vite | SvelteKit | None |
| One-Command Deploy | Yes (noun publish) | Vercel integration | No | Vercel integration | No |
* Nounjs is tree-shakeable: ~32-41KB typical (Component + Router + Store), ~160KB full bundle. Full bundle includes router, transitions, VirtualList, DevTools, form validation, and UI components.
<div :if="loading">Loading...</div>
<div :else>
<h1>{ user.name }</h1>
<li :for="item of items">{ item.title }</li>
<button @click="save" :disabled="saving">
Save
</button>
</div>{loading ? (
<div>Loading...</div>
) : (
<div>
<h1>{user.name}</h1>
{items.map(item =>
<li key={item.id}>{item.title}</li>
)}
<button onClick={save} disabled={saving}>
Save
</button>
</div>
)}<div v-if="loading">Loading...</div>
<div v-else>
<h1>{{ user.name }}</h1>
<li v-for="item in items" :key="item.id">
{{ item.title }}
</li>
<button @click="save" :disabled="saving">
Save
</button>
</div>{#if loading}
<div>Loading...</div>
{:else}
<div>
<h1>{user.name}</h1>
{#each items as item}
<li>{item.title}</li>
{/each}
<button on:click={save} disabled={saving}>
Save
</button>
</div>
{/if}Nounjs uses a clean, attribute-based syntax inspired by Vue and Alpine.js. Single curly braces { } for interpolation, : prefix for bindings, and @ for events. No JSX transpilation needed, no special block syntax to learn.
| Metric | Nounjs | React/Next.js | Vue.js | Svelte | Vanilla JS |
|---|---|---|---|---|---|
| Typical node_modules* | 1-5 packages | 200-400+ packages | 100-300 packages | 50-150 packages | 0 |
| Config files needed | 1 | 5-10 | 3-5 | 3-5 | 0 |
| Build time (cold) | <1s | 10-30s | 5-15s | 3-10s | 0 |
| Build time (hot reload) | <100ms | 1-5s | 500ms-2s | 200ms-1s | 0 |
| Mental model complexity | Simple | Complex (hooks, memo, state, rules) | Moderate | Moderate | Minimal |
| Time to "Hello World" | ~30 seconds | 2-5 minutes | 1-2 minutes | 1-2 minutes | Instant |
* Nounjs includes router, state management, utilities, and UI components in a single package. Other framework counts reflect comparable functionality (routing, state, UI library, form validation, etc.).
| Use Case | Nounjs | React/Next.js | Vue.js | Svelte | Vanilla JS |
|---|---|---|---|---|---|
| Admin Dashboards | Excellent | Good | Good | Good | Poor |
| Internal Tools | Excellent | Overkill | Good | Good | Tedious |
| SPAs (client-heavy) | Excellent | Good | Excellent | Excellent | Tedious |
| Content Sites (SEO) | Poor | Excellent | Good | Good | Poor |
| E-commerce | Moderate | Excellent | Good | Good | Poor |
| Prototyping | Excellent | Moderate | Good | Good | Good |
| Large Teams | Good | Excellent | Excellent | Good | Poor |
| Solo/Small Teams | Excellent | Overkill | Good | Good | Moderate |
"Complexity is the enemy."
We believe great tools get out of your way. Nounjs is honest about its trade-offs: it's not for SEO-heavy marketing sites. But for dashboards, internal tools, and client-heavy apps? It's hard to beat.
Read our philosophyInstall from npm and ship your first app in minutes.