Features

• Virtual DOM — Only update what changes
• Global State Store — Simple, reactive, no Redux needed
• Hash-based Router — SPA routing with zero config
• Custom Event System — onClick, onInput, etc. (no addEventListener)
• Zero dependencies — Pure vanilla JS
• Less than 9 KB — Smaller than most UI libraries
• Full project template — Ready-to-code structure

installation

npx @helouazizi/flashui my-app
cd my-app
npm install
npm run dev

Creating Elements

Elements are plain JavaScript objects:

// Simple div
const myDiv = {
  tag: 'div',
  attrs: { class: 'container' },
  children: [
     {
      tag: "h1",
      text: "Hello World"
     }
  ]
};

// Button with click handler
const myButton = {
  tag: 'button',
  text: 'Click Me',
  attrs: { 
    onclick: () => console.log('Clicked!') 
  },
};

Nesting Elements

Use the children array to create hierarchies:

const card = {
  tag: 'div',
  attrs: { class: 'card' },
  children: [
    {
      tag: 'h2',
      text: 'Card Title'
    },
    {
      tag: 'p',
      children: ['Card content goes here...']
    },
  ]
};

State Management

Initialize State

const state = new State({
  count: 0,
  todos: [],
  
});

Update State

// Single property
state.set('count', 5);

// Multiple properties
state.set('todos', [newTodo, ...state.get('todos')]);

Event Handling

Prefix event names with on and use camelCase:

const counterButton = {
  tag: 'button',
  text: 'Increment',
  attrs: {
    onclick: () => state.set('count', state.get('count') + 1)
  },
};

Routing System

Define Routes

const router = new Router({
  '/': () => showHomePage(),
  '/about': () => showAboutPage(),
  '/contact': () => showContactPage()
});

Why FlashUI Works the Way It Does

Virtual DOM Benefits

Performance: Batches DOM operations

Efficiency: Only updates changed nodes

Declarative: UI = f(state)

Event Delegation

Single event listener per event type

Works with dynamically created elements

Automatic handler cleanup

Keyed Updates

• Preserves element state during re-renders

• Minimizes DOM operations

• Required for dynamic lists

Complet Example

// State initialization
const state = new State({
  count: 0
});

// Button component
function CounterButton() {
  return {
    tag: 'button',
    text: 'Increment',
    attrs: {
      onclick: () => state.set('count', state.get('count') + 1)
    },
  };
}

// Main app
function App() {
  return {
    tag: 'div',
    children: [
      {
        tag: 'h1',
        text: `Count: ${state.get('count')}`
        attrs: {
          onclick: CounterButton
        }
      }
    ]
  };
}

// Setup
const renderer = new Renderer();
renderer.render(document.body, App());

🤝 Contributing

We LOVE contributions! Whether it's a bug fix, a new feature, documentation improvement, or even a tiny typo — you're absolutely welcome!

📄 License

FlashUI is MIT licensed — use it anywhere, for anything, forever.
Made with ❤️ (and a lot of coffee) by helouazizi.
⭐ Star this repo if you love FlashUI — it means the world!