Slightly better document.createElement
Clone or download
Latest commit 1187191 Apr 20, 2018

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>


This project is sponsored by Heresy. We're always looking for great engineers to join our team, so if you love Elixir, open source and enjoy some challenge, drop us a line and say hello!


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.



  • docrel: LICENSE
  • "Heresy" name and logo: Copyright © 2016 Heresy Software Ltd