Reflex — Lightweight UI Framework with Imperative JavaScript

Reflex is a lightweight UI library built with pure JavaScript, designed to deliver fast, simple, and fully imperative front-end development — think of it as a Flutter-inspired approach for the web.

🚀 Features

• Imperative API
  Build interfaces explicitly and directly — no virtual DOM, no reactivity system.

• Built-in UI Components
  Includes essential primitives:

  • Text, Button, Flex, List, Image, Input, Screen

• Ref & Render Pattern
  Use createRef() to hold state or references, and render() to update the view declaratively.

• Minimal Router
  Clean and lightweight route matching powered by URLPattern.

• Zero Dependencies
  No external libraries — built entirely with native JavaScript.

🧪 Example Usage

import { 
  createApplication, 
  createRef, 
  Text, 
  Button, 
  Flex 
} from 'reflex'

createApplication(document.querySelector("#app"), function ({ render }) {
  const counter = 0
  const textRef = createRef()

  render(
    Flex({
      children: [
        Text({ ref: textRef, text: `Counter is: 0` }),
        Button({
          text: `Increment`,
          events: {
            onClick() {
              textRef.text(`Counter is: ${++counter}`)
            }
          }
        })
      ]
    })
  )
})

📦 Installation

npm install reflex

Or import directly from source if using locally.

💡 Why Reflex?

Reflex offers a fresh take on UI development by embracing imperative logic, which can often feel more intuitive for smaller apps, games, or learning environments. If you enjoy building with vanilla JavaScript and want more structure without the overhead of React or Vue — Reflex is for you.

🔗 License

MIT

Built with ❤️ by [Tubagus Ahmad]