crown

An easier way to make new elements

let el = crowm(
  "div#header.fade-in",
  { title: "This is a div!" },
  { backgroundColor: "#11191f", color: "white" }
);

document.body.appendChild(el);

Let's face it - creating vanilla elements is tedious, especially if you want to assign multiple classes, IDs, styles and attributes. Sounds like a lot of code! But that's where crown comes into the picture.

Crown is a tiny (~1kb) JavaScript function that can help you make elements and assign them classes and IDs using CSS selector syntax. It also lets you set the innerHTML of the element, and add attributes and inline styles to the element.

It uses the good 'ol document.createElement function, and adds attributes as required. Crown also returns the HTML element, so you can append it to the DOM.

Usage

Importing

Using npm

npm i @octorchard/crown

import crown from "@octorchard/crown";

crown(<args>)

Note: this package is ESM-only.

Get it from the releases

Head over to the releases and grab the latest crown.js and the sourcemap, if you want it.

Transpile it yourself

git clone https://github.com/octorchard/crown
cd crown
esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js

build/crown.js is the output. Feel free to tweak the --target.

New elements

let el = crown(<selector>, <innerHTML>, <attributes>, <styles>)

where

• selector is a CSS selector string (containing only a base element, .classes and #ids),

• innerHTML is a string containing the text content of the element

• attributes is an Object of { attr1: "value", attr2: "value", ... } attributes which are to be added to the element

• styles is an object of CSS styles ({ property: "value", ... }). The properties must me in camelCase, just like in React.

The returned value is a HTML element.

Commands

Build:

esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js

Thanks!