Web Framework for the Age of AI
Built for clarity and explicitness, Duct makes your code understandable to both humans and AI. Component library + static site generator with a philosophy that embraces the future of development.
Component Library
Build interactive UI with explicit, debuggable components. Clear lifecycle management and direct DOM control.
Explicit render → bind → release lifecycle
TypeScript-first with full type safety
No virtual DOM - direct manipulation
JSX templating for familiar syntax
Works with any CSS framework or vanilla styles
Static Site Generator
Build fast, SEO-friendly websites with powerful content management. From blogs to documentation sites.
Markdown-based content management
Automatic routing and pagination
Nunjucks templates with custom filters
Built-in search indexing and sitemaps
Selective reanimation for interactivity
Why Duct for the Age of AI?
When AI generates explicit, well-structured code, humans can easily understand, troubleshoot, and maintain it. Duct's philosophy ensures AI-generated code remains debuggable and maintainable by your team.
Human-Friendly AI Code
Explicit patterns mean AI-generated code is instantly understandable. No magic to decipher.
Easy Troubleshooting
Clear separation makes debugging straightforward, whether code is human or AI-written.
Maintainable Forever
Consistent patterns ensure your team can maintain and extend AI-generated code with confidence.
Quick Start
Get up and running with Duct in minutes
MCP Server for AI Assistants
AI-powered development with instant access to framework knowledge, component catalog, and project generation.
Complete Starter Template
Get up and running instantly with a complete template including blog, themes, and components.
1Install
pnpm install @duct-ui/core
pnpm install @duct-ui/components
2Use
import Button from '@duct-ui/components/button'
import type {ButtonLogic} from '@duct-ui/components/button'
import {createRef} from "@duct-ui/core"
...
const buttonRef: MutableRef<ButtonLogic> = createRef()
...
<Button
ref={buttonRef}
label="Let's Go"
on:click={...}
/>
Built for the future of development where humans and AI collaborate seamlessly