Skip to main content
Create a virtual node object. This is the core function for building virtual DOM trees in O!. Short, one-letter property names (e, p, c) are used to reduce minified JS code size.

​
Signature

export const h = (e, p = {}, ...c) => ({ e, p, c });
Source: o.mjs:29

​
Parameters

​
e
string | function
required
The node name (HTML tag name like 'div', 'span'), or a functional component that constructs a virtual node.
​
p
object
default:"{}"
The properties map of the virtual node. This includes attributes, event handlers, and other DOM properties.
​
c
...VNode
Variadic list of child elements. Can be virtual nodes, strings, or numbers.

​
Returns

​
VNode
object
A virtual node object with the following structure:
​
e
string | function
Node name or functional component
​
p
object
Node properties (attributes)
​
c
Array<VNode>
Node children

​
Example

import { h } from '@zserge/o';

// Create a simple div with a heading
const vnode = h('div', { className: 'foo' }, h('h1', {}, 'Hello!'));

// With multiple children
const list = h('ul', { className: 'menu' },
  h('li', {}, 'Home'),
  h('li', {}, 'About'),
  h('li', {}, 'Contact')
);

// With event handlers
const button = h('button', {
  onclick: () => console.log('Clicked!'),
  className: 'btn'
}, 'Click me');

​
Usage Notes

  • The h() function is typically used when you need programmatic control over VNode creation
  • For more declarative syntax, consider using the x template literal function
  • Properties are passed directly to the DOM element, so use className instead of class, onclick instead of onClick, etc.

Build docs developers (and LLMs) love

Get started for freeTalk to us