@fluxeniteb/flexui · v1.1.3 · MIT License

FlexUI

A modern, high-performance frontend framework. Build fast, SEO-first web applications with React-inspired ergonomics — virtual DOM, hooks, SSR, SSG, file routing, and a complete build system in one package.

Get started View on GitHub

Installation

Install from npm using your package manager:

ESM Only

FlexUI uses native ES Modules. Add "type": "module" to your package.json, or use .mjs file extensions.

What's included

Component System

Functional and class components, hooks, context, memo, lazy, and forwardRef.

Full Hooks API

useState, useEffect, useMemo, useCallback, useContext, useReducer, and 14+ browser hooks.

CSR / SSR / SSG

All three rendering strategies with partial hydration, Islands architecture, and streaming SSR.

File-Based Router

Drop a file in /pages and it becomes a route. Static, dynamic [id], and catch-all routes.

Built-in SEO

Head component, OpenGraph, Twitter Cards, JSON-LD structured data, sitemap.xml, and robots.txt.

HMR Dev Server

esbuild-powered bundling with WebSocket hot module replacement and instant rebuilds.

Global State

createStore, createSlice, createAtom — reactive global state with persist middleware, zero dependencies.

Form Management

useForm with validation, touched tracking, async submit, and built-in validators (email, url, minLength...).

Multi-Format Builds

ESM, CJS, and IIFE outputs via esbuild. Tree-shakable, split chunks, sourcemaps, watch mode.

Quick Start

1
Scaffold a new project
```
npx @fluxeniteb/flexui create my-app
```
2
Install dependencies and start dev server
```
cd my-app
npm install
npm run dev
```
3

Open your browser

Visit http://localhost:3000 — your app is live with hot module reloading active.
4
Build for production
```
npm run build:all
```
Outputs ESM, CJS, and IIFE bundles to dist/.

Project Templates

Template	Command	Description
`default`	`npx @fluxeniteb/flexui create my-app`	Client-side rendering (SPA)
`ssr`	`npx @fluxeniteb/flexui create my-app -t ssr`	Server-side rendering
`ssg`	`npx @fluxeniteb/flexui create my-app -t ssg`	Static site generation

Package Exports

FlexUI is fully tree-shakable. Import only what you need:

Import path	What it provides
`@fluxeniteb/flexui`	createElement, createRoot, Component, hooks, scheduler, CSR renderer
`@fluxeniteb/flexui/router`	FlexRouter, Link, NavLink, useRouter, useParams, file router
`@fluxeniteb/flexui/hooks/browser`	useFetch, useLocalStorage, useDebounce, useWindowSize, useClickOutside, +9 more
`@fluxeniteb/flexui/state`	createStore, createSlice, createAtom, createDerivedStore, persist
`@fluxeniteb/flexui/forms`	useForm, validators, buildValidate
`@fluxeniteb/flexui/seo`	Head, openGraph, twitterCard, jsonLD, generateSitemap, generateRobots
`@fluxeniteb/flexui/components`	ErrorBoundary, Suspense, Portal, Modal, Drawer, Toast, Tabs, Tooltip, +more
`@fluxeniteb/flexui/server`	renderToString, renderToStream, Island, hydrateIslands, generateStaticSite
`@fluxeniteb/flexui/build`	build, loadConfig, defineConfig
`@fluxeniteb/flexui/utils`	cx, debounce, throttle, deepClone, slugify, and more

Why FlexUI?

FlexUI was built for developers who want React-like ergonomics with full control over rendering strategy. Unlike heavyweight frameworks, FlexUI ships everything in one cohesive package — routing, SEO, build tooling, streaming SSR, global state, forms — with zero configuration required.

It's opinionated where it matters (file-based routing, ESM-first, esbuild) and flexible where you need it (CSR, SSR, or SSG per page).

Test suite included

FlexUI ships with 9 test suites and 109 assertions covering every core module. Run npm test after install to verify everything works.