A declarative component framework for building modern web applications with minimal boilerplate.

Quick Start

``bash

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

`javascript
// 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

$3

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

$3

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

$3

`javascript
{
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();
}
`

$3

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

$3

`javascript
// 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