Quick Start

# Install CLI globally
npm i -g ezfw

# Create a new project
ezfw new my-app

# Start development server
cd my-app
npm run dev

Why Ez?

• Declarative - Define UI as plain JavaScript objects, no JSX or templates
• Reactive - Built-in state management with signals
• Zero Config - Works out of the box with Vite
• CSS Modules - Scoped styles by default
• Type Safe - Written in TypeScript

Example

// Define a view
ez.define('Counter', {
    controller: 'Counter',
    items: [
        { eztype: 'h1', bind: { text: 'count' } },
        {
            eztype: 'EzButton',
            text: 'Increment',
            onClick: 'increment'
        }
    ]
});

// Define controller with reactive state
ez.defineController('CounterController', {
    state: { count: 0 },
    increment() {
        this.state.count++;
    }
});

// Register route
ez.route('/', 'Counter');

Components

| Component | Description | |-----------|-------------| | EzButton | Buttons with variants (primary, secondary, danger, etc.) | | EzInput | Text input with validation support | | EzSelect | Dropdown select with search | | EzCheckbox | Checkbox with label | | EzRadio | Radio button groups | | EzSwitch | Toggle switch | | EzTextarea | Multi-line text input | | EzDatePicker | Date picker with calendar | | EzTimePicker | Time picker | | EzGrid | Data grid with sorting, filtering, pagination | | EzDataView | Grid/Cards view switcher | | EzForm | Form with validation | | EzTabPanel | Tabbed interface | | EzCard | Content card | | EzPanel | Collapsible panel | | EzDialog | Modal dialogs | | EzTooltip | Tooltips | | EzDropdown | Dropdown menus | | EzAvatar | User avatars | | EzBadge | Status badges | | EzSkeleton | Loading skeletons | | EzChart | Charts (Line, Bar, Doughnut) |

Features

Routing

ez.route('/users', 'UserList');
ez.route('/users/:id', 'UserDetail');

Data Binding

{
    eztype: 'span',
    bind: {
        text: 'user.name',
        cls: () => ctrl.state.active ? 'active' : ''
    }
}

Forms & Validation

{
    eztype: 'EzForm',
    ref: 'myForm',
    items: [
        {
            eztype: 'EzInput',
            name: 'email',
            validators: ['required', 'email']
        }
    ]
}

// In controller
const form = ez._refs.myForm;
if (form.validate()) {
    const data = form.getFormData();
}

Grid with Remote Data

{
    eztype: 'EzGrid',
    remote: {
        api: 'v1/users',
        autoLoad: true
    },
    columns: [
        { text: 'Name', index: 'name', flex: 1 },
        { text: 'Email', index: 'email', flex: 2 }
    ]
}

Dialogs

// Alert
await ez.dialog.alert('Operation completed');

// Confirm
const confirmed = await ez.dialog.confirm('Are you sure?');

// Custom dialog
const result = await ez.dialog.open({
    title: 'Edit User',
    items: [
        { eztype: 'EzForm', /* ... */ }
    ],
    buttons: [
        { text: 'Cancel', variant: 'secondary', value: false },
        { text: 'Save', variant: 'primary', value: true }
    ]
});

Project Structure

my-app/
├── index.html
├── index.js          # App entry point
├── vite.config.js
└── app/
    ├── routes.js     # Route definitions
    └── views/
        └── Home/
            ├── Home.js
            ├── Home.module.scss
            └── HomeController.js

Requirements

• Node.js >= 18
• Vite >= 5

License

MIT