html

Provides a simple way to create virtual DOM elements using functions named after standard HTML tags. It supports setting attributes and properties, nesting children, using fragments, and automatically handling arrays of child elements.

Basic Usage

import { html } from '@hellajs/core';
const { div, input, button } = html;

const form = div(
  input({
    type: 'text',
    placeholder: 'Enter your name',
    className: 'input-field',
    required: true
  }),
  button({
    type: 'submit',
    className: 'btn primary',
    onclick: (e) => {
      console.log('Button clicked!', e);
      e.preventDefault();
    }
  }, 'Submit')
);

Fragments

Fragments allow you to group multiple elements without creating an unnecessary wrapper element in the DOM. This is useful when:

• You need to return multiple elements from a component
• You want to avoid adding extra divs to the DOM structure
• You’re inserting elements into a parent where only specific children are valid (like <tr> in a <table>)

import { html } from '@hellajs/core';
const { div, h1, p, $ } = html;

const isAuthenticated = true;
const username = 'John';

// Conditionally render multiple elements without a wrapper
const authContent = isAuthenticated
  ? $(h1(`Welcome back, ${username}!`))
  : $(p('Authentication required to continue.'));

// Use inside another element without unnecessary nesting
const app = div(authContent);

Dynamic Children Example

import { html } from '@hellajs/core';
const { ul, li, span } = html;

const items = ['Apple', 'Banana', 'Cherry'];

// Generate elements from data
const list = ul(
  items.map(item =>
    li(
      span({ className: 'item-name' }, item)
    )
  )
);