Element

The fundamental building block of Crank applications. Elements are JavaScript objects that represent virtual nodes in your UI tree.

Syntax

class Element<TTag extends Tag = Tag> {
  tag: TTag;
  props: TagProps<TTag>;
  $$typeof: symbol;
}

Constructor

new Element(tag, props)

Parameters

tag - TTag - The element's tag (string, symbol, or component function)
props - TagProps<TTag> - The element's properties

Instance properties

props

TagProps<TTag>

An object containing the element's properties. These correspond to JSX attributes and include the children prop.

$$typeof

symbol

An internal symbol (Symbol.for("crank.Element")) used to identify Crank elements. This property is defined on the prototype, not per instance.

Description

Elements are lightweight objects that describe what you want to render. They are not the actual rendered output but rather a description that renderers interpret to create and update the real UI.

Unlike React, Crank elements are mutable and can be directly instantiated, though using createElement is preferred as it handles special props and children normalization.

Elements are designed for cross-version and cross-realm compatibility through the $$typeof symbol property.

Examples

Basic element structure

import {createElement} from "@b9g/crank";

const element = createElement("div", {class: "container"}, "Hello");

console.log(element.tag);   // "div"
console.log(element.props); // {class: "container", children: "Hello"}

Direct instantiation

import {Element} from "@b9g/crank";

// Direct instantiation is possible but not recommended
const element = new Element("div", {class: "container", children: "Hello"});

Type-specific elements

import type {Element} from "@b9g/crank";
import {Portal} from "@b9g/crank";

// Specific element types for TypeScript
let div: Element<"div">;
let portal: Element<typeof Portal>;
let component: Element<typeof MyComponent>;

// General element types
let host: Element<string | symbol>;
let any: Element; // Element<Tag>

API Reference