sypent

Ultra-light JS DOM creation library

Usage no npm install needed!

<script type="module">
  import sypent from 'https://cdn.skypack.dev/sypent';
</script>

README

sypent logo

Ultra-light JS DOM manipulation library

GitHub | NPM

Install

npm i sypent

And include the library.

<script src="sypent.min.js"></script>

Why sypent?

sypent is awesome because it's simple and so useful.

It's also very lightweight. Like <0.5K unminified lightweight.

Usage

Let's create a div with class 'message' with a text node child.

let addDiv = sy('div', {'class': 'message'}, ['This is a text node.'])

Now let's create a p tag with text nested inside of a div.

let complex = sy('div', {}, [
    sy('p', {}, ['Hey there.'])
])

In detail

sy(String tagName, ?Object attributes, ?Array[HTMLElement | String | DocumentFragment] children)

tagName - Tag of generated element.

optional attributes - Attributes for generated element. Default: {}

optional children - Children (elements) of generated element. May also contain strings, which will be made into text nodes. Default: []