Skip to main content
createElement is Solar’s vnode factory. You call it inside a component’s render function to describe the UI tree you want Solar to produce in the DOM. Every call returns a plain vnode object — a lightweight description of a DOM node — that Solar’s reconciler uses to efficiently mount and update the real DOM through its diffing algorithm.

​
Signature

createElement(type, props, ...children) → vnode

​
Parameters

​
type
string
required
An HTML tag name such as 'div', 'button', 'p', 'span', or 'input'. Solar passes this string directly to document.createElement when mounting.
​
props
object | null
HTML attributes and event handlers to apply to the element. Pass null or {} when you have no props to set.Event handlers use the lowercase on* form — onclick, onchange, oninput, onkeydown — matching standard DOM event handler property names. Solar calls addEventListener under the hood, so you pass a function reference rather than a string.The special key style accepts an object of CSS properties (e.g., { color: 'red', fontSize: '1rem' }), which Solar applies via Object.assign(el.style, ...). The key className sets el.className directly.
​
...children
string | number | vnode
Any number of child nodes. You can mix plain text strings, numbers, and vnodes returned by other createElement calls or component calls. Solar flattens one level of nested arrays and filters out null, undefined, and false — so conditional children are safe to include inline.

​
Return value

​
vnode
object
A plain JavaScript object describing the element.
​
type
string
The HTML tag name passed as the first argument.
​
props
object
The props object, or {} if you passed null.
​
children
array
A flat array of resolved child nodes, with null, undefined, and false filtered out.

​
Examples

// A div with a CSS class and a text child
createElement('div', { class: 'container' }, 'Hello world')
Event listeners use onclick (all lowercase), not onClick. This matches the standard DOM addEventListener event name — Solar calls el.addEventListener('click', handler) after stripping the on prefix. Using camelCase like onClick will set it as an HTML attribute string instead of wiring an event listener.
For large, deeply nested vnode trees, consider using h() — Solar’s compact array notation. It produces identical vnodes with less punctuation and fewer tokens, which is especially useful in AI-generated render functions. See the h() reference for details.