• Quick Start 🔥

  Lightweight JSX runtime with fine-grained reactivity..

  • Setup

    install hmm first.

    hmm i @minejs/jsx

  
  

  • Usage

    import {
        jsx, Fragment,
        Show, For, render, mount, createRoot
        } from '@minejs/jsx'
    import { signal } from '@minejs/signals'

    • 1. Basic JSX Elements

      // Create simple element
      const el = jsx('div', {
          className   : 'container',
          children    : 'Hello World'
      })
      
      // Create with attributes
      const button = jsx('button', {
          id          : 'submit',
          children    : 'Click me',
          onClick     : () => console.log('Clicked!')
      })

    • 2. Reactive Content with Signals

      const count = signal(0)
      
      const el = jsx('div', {
          children: `Count: ${count()}`
      })
      
      render(el, '#app')
      
      count.set(5) // Updates DOM automatically!

    • 3. Event Handling

      const counter = signal(0)
      
      const button = jsx('button', {
          children: 'Increment',
          onClick: () => {
              counter.set(counter() + 1)
          }
      })

    • 4. Lifecycle Events

      const el = jsx('div', {
          children: 'I notify when I appear!',
          onload: () => {
              console.log('Element added to DOM!')
          }
      })

    • 5. Layout & Styling Props

      // Apply Tailwind-like props directly!
      const card = jsx('div', {
          display     : 'flex',
          direction   : 'column',
          p           : 4,        // padding: 1rem
          gap         : 2,        // gap: 0.5rem
          bg          : 'white',  // background-color
          shadow      : 'md',     // box-shadow
          radius      : 'lg',     // border-radius
          children    : 'Beautiful Card'
      })
      
      // Create Overlay
      const modal = jsx('div', {
          overlay     : true,
          backdrop    : true,
          location    : 'center',
          children    : 'Modal Content'
      })

  
  

• API Reference 🔥

  • Render

    Lightweight DOM rendering library for JSX elements.

  • Runtime

    Lightweight JSX runtime with fine-grained reactivity.

---