crelt

What is crelt?

The 'crelt' npm package is a utility for creating DOM elements using a concise and readable syntax. It simplifies the process of generating HTML elements programmatically, making it easier to build and manipulate the DOM in JavaScript.

What are crelt's main functionalities?

Create a single DOM element

This feature allows you to create a single DOM element with specified attributes and content. In this example, a 'div' element with the class 'container' and the text 'Hello, World!' is created and appended to the document body.

const crel = require('crelt');
const div = crel('div', { class: 'container' }, 'Hello, World!');
document.body.appendChild(div);

Create nested DOM elements

This feature allows you to create nested DOM elements in a single call. In this example, a 'div' element with two nested 'span' elements is created and appended to the document body.

const crel = require('crelt');
const nestedElements = crel('div', { class: 'parent' },
  crel('span', { class: 'child' }, 'Child 1'),
  crel('span', { class: 'child' }, 'Child 2')
);
document.body.appendChild(nestedElements);

Create elements with event listeners

This feature allows you to create DOM elements with event listeners attached. In this example, a 'button' element with an 'onclick' event listener that shows an alert when clicked is created and appended to the document body.

const crel = require('crelt');
const button = crel('button', { onclick: () => alert('Button clicked!') }, 'Click Me');
document.body.appendChild(button);

Other packages similar to crelt

hyperscript

Hyperscript is a lightweight library for creating DOM elements using a similar syntax to crelt. It provides a concise way to generate HTML elements and supports nested elements and event listeners. Compared to crelt, hyperscript offers a more flexible API and is widely used in the community.

yo-yo

Yo-yo is a library for building dynamic user interfaces by creating and updating DOM elements. It uses a syntax similar to crelt for creating elements and supports features like event listeners and nested elements. Yo-yo also includes a diffing algorithm to efficiently update the DOM, which is a feature not present in crelt.

virtual-dom

Virtual-dom is a library for creating and updating DOM elements using a virtual representation of the DOM. It provides a way to create elements with a syntax similar to crelt and includes a diffing algorithm to efficiently update the real DOM. Virtual-dom is more complex than crelt but offers better performance for large applications.

README

CRELT

Tiny DOM-element creation utility. Exports a single (default) value, which is a function that you call with:

• A tag name string or DOM element.

• Optionally an attribute object mapping names to values. When the values are strings, they are added to the element with setAttribute. When they have another type, they are assigned as regular properties (mostly useful for event handlers via onclick and such). When an attribute's value is null or undefined, it is not assigned.

• Any number of children, which may be null (ignored), strings (added as text nodes), DOM nodes (added), or arrays (each element is added separately).

The function returns a DOM element.

License

This software is licensed under an MIT license.