Quick Start

Get from zero to a running FlexUI application in under five minutes.

Requirements

Install the CLI

npm install -g @fluxeniteb/flexui

Verify the install:

flexui --version
# flexui/1.1.3

Create a Project

Scaffold a new app with the create command:

# Default (CSR / SPA)
flexui create my-app

# SSR project
flexui create my-app -t ssr

# SSG project
flexui create my-app -t ssg

# TypeScript
flexui create my-app --ts

Install dependencies and start:

cd my-app
npm install
npm run dev

Open http://localhost:3000 — you should see the FlexUI welcome page with HMR active.

Your First Component

Create a new file at pages/hello.js:

import { createElement, useState } from 'flexui';

export default function HelloPage() {
  const [name, setName] = useState('World');

  return createElement('div', { className: 'page' },
    createElement('h1', null, `Hello, ${name}!`),
    createElement('input', {
      value: name,
      onInput: e => setName(e.target.value),
      placeholder: 'Enter your name',
    })
  );
}

Navigate to http://localhost:3000/hello — the file router picks it up automatically.

Dev Workflow

The dev server provides instant feedback:

• HMR — modules are hot-replaced without full page reload.
• Error overlay — build errors appear as a browser overlay with source location.
• File watcher — powered by chokidar, changes are picked up immediately.

# Custom port
flexui dev --port 4000

# Open browser on start
flexui dev --open

Production Build

# Standard CSR build
npm run build

# SSG build (pre-renders all pages)
flexui build --ssg

# SSR build
flexui build --ssr

Output is written to the dist/ directory. Start the production server:

flexui start