Fragment UX

Fragment UX is a TypeScript-first web framework layered on React DOM. Write .frag.ts files with block-based syntax — the compiler transforms them into optimized React components. You never touch React, React DOM, or JSX directly.

npm install -g fragment-ux
frag-ui new my-app
cd my-app
npm install
frag-ui dev

Visit docs/readme.md for the full documentation.

Features

• Fragments — components with params, props, state, load, derive, effects, actions, forms, slots, view, and style blocks
• Stores — global state with private state and typed commands
• Routes — type-safe route definitions with guards, layouts, and prefetch strategies
• Forms — declarative forms with pipe-separated validation constraints
• Styles — scoped CSS per fragment with design tokens and dark mode
• CSS frameworks — built-in support for Tailwind (v4), Bootstrap, Bulma, Foundation
• HMR — fast dev server with live reload via WebSocket

Documentation

• Setup Guide — Installation, configuration, integrations
• Usage Guide — Fragments, stores, routes, forms, styles, compiler rules
• Integration Guide — Tailwind, Bootstrap, Prisma, Stripe, tRPC

License

MIT