Crel is a lightweight, minimalist JavaScript utility designed to simplify and accelerate the creation of DOM elements, serving as a more ergonomic alternative to directly using `document.createElement`. It enables developers to construct complex DOM trees with a concise, declarative syntax. The current stable version is 4.2.1, with the project demonstrating an active development and maintenance cadence over its lifetime, having evolved through multiple major versions. Key differentiators include its exceptionally small footprint (under 1KB minified and 500 bytes gzipped), its performance which rivals native `document.createElement` calls, and its avoidance of interference with existing in-DOM event listeners. It also provides a modern Proxy-based API for even cleaner syntax in environments supporting ES6 Proxies, making it suitable for modern evergreen browser applications.
npm install crelVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates both the standard `crel` function and its Proxy-based API. It shows how to create and append various DOM elements, including handling attributes and events, illustrating the different ways to attach event listeners based on the API variant used.
For modifying or rearranging existing DOM elements, always use standard DOM manipulation methods (e.g., `appendChild`, `removeChild`, `insertBefore`) or a library specifically focused on efficient DOM manipulation and diffing.
To use declarative event handling with the standard `crel` API, you must first configure `crel.attrMap['on']` as demonstrated in the library's documentation. Alternatively, for direct `on<event>` attribute support, utilize the Proxy API (`crel.proxy`) which natively maps these attributes to event listeners, or attach events manually using `element.addEventListener()`.
Ensure your project's build pipeline includes a transpilation step for JavaScript code (e.g., using Babel with appropriate presets) if supporting legacy browsers is a requirement. Otherwise, explicitly target modern browsers where ES6 features are natively supported.
Ensure `crel` is properly imported using `import crel from 'crel';` (ESM), `const crel = require('crel');` (CommonJS), or that `crel.min.js` is loaded via a `<script>` tag in the HTML before use.Verify that your runtime environment supports ES6 Proxies. For ESM, access the proxy API correctly via `import crelBase from 'crel'; const crelProxy = crelBase.proxy;`. For CommonJS, use `const crelProxy = require('crel').proxy;`.No dependency data recorded yet.