Sanatan AI - Create

A modern, minimal, and efficient JavaScript utility for creating HTML elements with a simple, expressive syntax. Inspired by the need to reduce boilerplate and make DOM manipulation more declarative and readable.

Features

• Declarative Element Creation: Create elements with tag, classes, IDs, properties, children, event listeners, and parent in a single call.
• Flexible API: Supports text, HTML, or nested elements as children.
• Event Listener Helper: Add multiple event listeners easily.
• Lightweight & Dependency-Free: No external dependencies, pure JavaScript.

Installation

npm install @sanatanai/create

Or use directly in your browser via CDN:

<script type="module">
	import { Create } from 'https://unpkg.com/@sanatanai/create/index.js';
</script>

Usage

Classic vs. Create

// Classic way
const div = document.createElement('div');
div.className = 'mydiv';
div.hidden = true;
div.appendChild(document.createElement('p'));
div.addEventListener('click', myFn);
div.addEventListener('mousemove', myFn2);
divParent.appendChild(div);

// With Create
import { Create } from '@sanatanai/create';
const div = Create('div.mydiv', {hidden: true},Create('p'), [['click', myFn], ['mousemove', myFn2]], divParent);

API Reference

Create(selector, properties, childs, events, parentElement)

| Parameter | Type | Description | |--------------- |--------------------------------------------------|---------------------------------------------------------------------------------------------| | selector | string | Selector-like string (e.g., div.main#hero) | | properties | object | Properties/attributes to set on the element (e.g., {hidden: true, style: {color: 'red'}}) | | childs | Element[] \| Element \| string | Child node, Array of child nodes or text content | | events | [string, fn] \| Array<[string, fn]>| Event listeners (single or array of [event, handler]) | | parentElement| Element | Parent to append the created element to |

Returns the created Element.

Example

const btn = Create('button.btn#main', { type: 'button', style: { color: 'white', background: 'blue' } }, 'Click Me', ['click', () => alert('Clicked!')], document.body);

evListener(events, element, listener)

Add one or more event listeners to an element.

• events: Comma-separated string of event names (e.g., 'click,mouseover')
• element: Target element
• listener: Event handler function

Advanced Usage

• Multiple Classes/IDs:
  • Create('div.class1.class2#id1#id2') will add all classes and IDs.
• Style Object:
  • Pass a style object in properties for inline styles.
• HTML Content:
  • If childs contains <, it will be set as innerHTML.

License

MIT © Sanatan AI

Links

• GitHub Repository
• NPM Package