Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

docrel Build Status npm version Size

Slightly better document.createElement

Docrel is a thin wrapper for document.createElement that makes creating elements a bit easier. It also helps clean up your code and avoid repetition. No dependencies, no black magic (see source).

Using document.createElement:

let el = document.createElement("div")
el.className = "wrapper"

let input = document.createElement("input")
input.setAttribute("type", "text")

let button = document.createElement("button")
button.textContent = "Submit"

if (loading) {
  button.setAttribute("disabled", "disabled")


Using docrel:

import {div, input, button} from "docrel"

let el = div({class: "wrapper"}, [
  input({attrs: {type: "text"}}),
  button({textContent: "Submit", attrs: {
    disabled: loading ? "disabled" : null

If loading returns null the attribute won't be set at all.


npm install docrel --save


Using createElement, similarly to document.createElement:

import {createElement} from "docrel"

let el = createElement("div", {
  id: "el-id",
  class: "class-a class-b",
  textContent: "I'm an HTMLElement!",
  attrs: {
    align: "center",
    "data-attr": 1
  events: {
    click: () => {console.log("click!")}
<!-- Resulting HTML when el is appended to the DOM -->
<div id="el-id" class="class-a class-b" align="center" data-attr=1>
  I'm an HTMLElement!

Using the create function builder (uses createElement underneat):

import {create} from "docrel"
const [div] = create("div")

let divOne = div({class: "div-a"})
let divTwo = div({class: "div-b"})

Or just importing the html elements directly:

import {div} from "docrel"

let divOne = div({class: "div-a"})
let divTwo = div({class: "div-b"})
  • The class option is a shorthand to node.className;
  • Keys inside attrs are passed to node.setAttribute, unless key value is null or undefined;
  • Keys inside events are passed to node.addEventListener;
  • Returns an HTML Element object.

Nesting / appending children

The create/createElement function supports a third parameter for appending child elements:

let el = div({class: "wrapper"}, [
  div({class: "another-div"})
<!-- Resulting HTML when el is appended to the DOM -->
<div class="wrapper">
  <div class="another-div"></div>


Contributions are more than welcome. Please fork the repo and send a PR with a clean, rebased branch containing your changes. Also please make sure tests are passing and update tests if necessary.

To run the project locally, you will need to npm install dev dependencies and then use npm run dev and npm test to transpile ES2015 code and run tests, respectively (Node.js >= 6.0 or latest). See package.json for more info.



You can’t perform that action at this time.