Lightweight HTML DOM building library with shorthand tags and TypeScript support

🏠 Homepage

Install

npm install @kanmf/dombuilder

Run tests

npm run test

Usage

Basic usage is makeElement(type, textOrPropsOrChild, ...otherChildren) or use shorthand functions.

import { div, span, a, makeElement } from "@kanmf/dombuilder";

document.body.appendChild(div());
document.body.appendChild(
  makeElement("a", { href: "http://foo.bar" }, span("text")),
);

Shorthand Tags

All standard HTML elements have shorthand functions:

import {
  a,
  button,
  div,
  p,
  span,
  ul,
  li,
  input,
  label,
  table,
  tr,
  td,
  th,
  style,
  slot,
} from "@kanmf/dombuilder";

div(); // <div></div>
span("hello"); // <span>hello</span>
button({ disabled: true }, "Click"); // <button disabled>Click</button>
input({ type: "text", placeholder: "Enter text" }); // <input type="text" placeholder="Enter text">

Properties

Pass an object as the second argument to set properties, attributes, styles, and dataset.

const card = div(
  { className: "card-container" },
  a(
    {
      id: "card-link-foo",
      href: "https://foo.bar",
      dataset: {
        isValid: true,
      },
    },
    "link text",
  ),
);

Result:

<div class="card-container">
  <a href="https://foo.bar" id="card-link-foo" data-is-valid="true">
    link text
  </a>
</div>

Style

div({ style: { display: "flex", color: "red" } }, "Content");

Dataset

div({ dataset: { userId: 123, isActive: true } });

ARIA Attributes

button({ "aria-label": "Close dialog", role: "button" }, "X");

Custom Attributes

Use the @ prefix for custom attributes:

div({ "@data-custom": "value", "@aria-hidden": "true" });
// <div data-custom="value" aria-hidden="true"></div>

Fragments

import { fragment, div, span } from "@kanmf/dombuilder";

const frag = fragment(div("First"), span("Second"));
// DocumentFragment with two children

SVG

import { svg } from "@kanmf/dombuilder";

const icon = svg(
  '<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z"/></svg>',
);

Strip <title> element:

const icon = svg(svgString, true);

Template Elements

import { template, div, span } from "@kanmf/dombuilder";

const tmpl = template(div({ className: "item" }), span("Text content"));
// <template><div class="item"></div><span>Text content</span></template>

Text Nodes

import { text } from "@kanmf/dombuilder";

const textNode = text("Hello World");
// Text node, not an Element

Style & Slot Elements

For Shadow DOM:

import { style, slot, div } from "@kanmf/dombuilder";

const shadowRoot = div().attachShadow({ mode: "open" });
shadowRoot.appendChild(style(".foo { color: red; }"));
shadowRoot.appendChild(slot({ name: "header" }));

Promises

Pass promises as children - they're resolved and replaced:

const content = div(fetch("/api/data").then((r) => r.text()));
// Text from promise replaces placeholder

Promise resolving to element:

const content = div(Promise.resolve(span("Loaded")));

Promise resolving to object with .element:

const content = div(Promise.resolve({ element: div("From object") }));

TypeScript

This library includes TypeScript declarations. Use the Props interface for type safety:

import { div, span, button, Props } from "@kanmf/dombuilder";

const props: Props = {
  className: "container",
  style: { display: "flex", gap: "10px" },
  dataset: { userId: 123 },
  "@data-custom": "value",
};

const el = div(props, span("Hello"), button({ disabled: false }, "Click"));

Type Declarations

If TypeScript shows TS7016: Could not find declaration file, add a reference:

/// <reference path="path/to/declarations.d.ts" />
import { div } from "@kanmf/dombuilder";

Or configure tsconfig.json:

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./"]
  }
}

API Reference

| Function | Returns | Description | | ---------------------------------------- | ---------------------- | ---------------------------- | | makeElement(type, props?, ...children) | HTMLElement | Create any element type | | div(props?, ...children) | HTMLDivElement | Shorthand for div | | span(props?, ...children) | HTMLSpanElement | Shorthand for span | | a(props?, ...children) | HTMLAnchorElement | Shorthand for anchor | | button(props?, ...children) | HTMLButtonElement | Shorthand for button | | p(props?, ...children) | HTMLParagraphElement | Shorthand for paragraph | | ul(props?, ...children) | HTMLUListElement | Shorthand for unordered list | | li(props?, ...children) | HTMLLIElement | Shorthand for list item | | input(props?, ...children) | HTMLInputElement | Shorthand for input | | label(props?, ...children) | HTMLLabelElement | Shorthand for label | | table(props?, ...children) | HTMLTableElement | Shorthand for table | | tr(props?, ...children) | HTMLTableRowElement | Shorthand for table row | | td(props?, ...children) | HTMLTableCellElement | Shorthand for table cell | | th(props?, ...children) | HTMLTableCellElement | Shorthand for table header | | style(props?, ...children) | HTMLStyleElement | Shorthand for style | | slot(props?, ...children) | HTMLSlotElement | Shorthand for slot | | fragment(...children) | DocumentFragment | Create document fragment | | svg(svgString, stripTitle?) | SVGElement | Parse SVG string | | template(...children) | HTMLTemplateElement | Create template element | | text(string) | Text | Create text node |

Author

• Github: @aaronmars
• Github: @apatten
• Github: @spencerkittleson

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2026 Spencer Kittleson. This project is MIT licensed.