html

Create DOM elements using tag functions.

/**
 * Factory for DOM elements.
 * @example html.div({ class: "foo" }, "bar")
 */
export const html: {
  [K in keyof HTMLElementTagNameMap]: (
    props?: VNodeProps,
    ...children: VNodeValue[]
  ) => VNode;
} & {
  $: (
    props?: VNodeProps,
    ...children: VNodeValue[]
  ) => VNode;
};

Usage

Use html to create elements, set attributes, and nest children. Supports fragments and arrays.

import { html } from '@hellajs/dom';
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')
);

Raw HTML

You can inject raw HTML strings into an element using the html prop. This bypasses normal element creation and directly inserts the HTML into the DOM.

Security Warning

Never use the html prop with untrusted user input!

import { html } from '@hellajs/dom';

// Insert raw HTML content
const content = html.div({
  html: '<p class="highlight">This is <strong>raw HTML</strong></p>'
});

// ❌ DANGEROUS - Never do this with user input
const userInput = getUserInput(); // Could contain malicious scripts
html.div({ html: userInput }); // XSS vulnerability!