DOM Object

The DOM object is the default export of Just DOM. It provides a method for every HTML and MathML tag name, plus a fragment method. SVG: the root element is DOM.svg; all other SVG tags use the svg prefix (e.g. DOM.svgCircle) so they never clash with HTML helpers like DOM.a or DOM.title. Under the hood, each factory passes the correct element namespace (html, svg, or mathml) to createElement, including for shared names such as a vs svgA.

Import

import DOM from "just-dom";

Signature

DOM.<tagName>(props?, children?) => Element

Each tag method has the following signature:

DOM.div(
  props?: JDCreateElementOptions<"div">,
  children?: JDCreateElementChildren
): HTMLDivElement;

The return type is always the specific element type for the given tag.

Parameters

props

Type: JDCreateElementOptions<T> | Optional

An object containing attributes, styles, event listeners, data attributes, and refs to apply to the element.

Property pattern	Type	Description
Standard attributes	Various	Any property of the element interface (e.g. `className`, `id`, `href`)
`style`	`Partial<CSSStyleDeclaration>`	Inline styles as an object
`on*`	`Function`	Event listeners (e.g. `onclick`, `oninput`)
`data-*`	`string`	Data attributes
`ref`	`JDRef<T>`	Ref object to bind to this element
Boolean attributes	`boolean`	`true` sets the attribute, `false` removes it

children

The child nodes to append to the element. Can be an array of elements and strings, or a single string.

Supported Tags

HTML Tags

All standard HTML tags are supported:

DOM.div()    DOM.span()    DOM.p()       DOM.a()
DOM.h1()     DOM.h2()      DOM.h3()      DOM.h4()
DOM.ul()     DOM.ol()      DOM.li()      DOM.table()
DOM.form()   DOM.input()   DOM.button()  DOM.select()
DOM.img()    DOM.video()   DOM.audio()   DOM.canvas()
DOM.header() DOM.footer()  DOM.main()    DOM.nav()
DOM.section() DOM.article() DOM.aside()  DOM.details()
// ... and all other standard HTML elements

SVG Tags

SVG factories use DOM.svg for the root element; other tags are prefixed with svg in camelCase (circle → svgCircle):

DOM.svg()      DOM.svgPath()   DOM.svgCircle()  DOM.svgRect()
DOM.svgLine()  DOM.svgPolyline() DOM.svgPolygon() DOM.svgEllipse()
DOM.svgG()     DOM.svgText()   DOM.svgDefs()    DOM.svgUse()
// ... and all other standard SVG elements

MathML Tags

DOM.math()    DOM.mi()      DOM.mn()      DOM.mo()
DOM.mrow()    DOM.msup()    DOM.msub()    DOM.mfrac()
// ... and all other standard MathML elements

Examples

Basic element

const heading = DOM.h1({ className: "title" }, "Hello, world!");

Nested elements

const card = DOM.div({ className: "card" }, [
  DOM.h2({}, "Card Title"),
  DOM.p({}, "Card description goes here."),
  DOM.button({ onclick: () => console.log("clicked") }, "Action"),
]);

With styles and events

const interactive = DOM.div(
  {
    style: {
      padding: "16px",
      backgroundColor: "#f5f5f5",
      borderRadius: "8px",
      cursor: "pointer",
    },
    onclick: () => console.log("Clicked!"),
    onmouseenter: (e) => {
      (e.target as HTMLElement).style.backgroundColor = "#e0e0e0";
    },
    onmouseleave: (e) => {
      (e.target as HTMLElement).style.backgroundColor = "#f5f5f5";
    },
  },
  "Hover me"
);

SVG elements

const icon = DOM.svg(
  {
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
  },
  [
    DOM.svgCircle({ cx: "12", cy: "12", r: "10" }),
    DOM.svgLine({ x1: "12", y1: "8", x2: "12", y2: "16" }),
    DOM.svgLine({ x1: "8", y1: "12", x2: "16", y2: "12" }),
  ]
);

Fragment

The DOM object also includes a fragment method. See createFragment for details.

const frag = DOM.fragment([
  DOM.p({}, "First"),
  DOM.p({}, "Second"),
]);

Plugins and a configured `jd`

The default DOM export has no plugin methods. Use withPlugins to merge extensions (icons, router, your own definePlugin modules, …). In applications, the usual pattern is a single jd.config.ts module that exports jd for the rest of the codebase.

To start a new Vite + TypeScript project with that layout, use create-just-dom (npm create just-dom@latest).

DOM Object

On this page