{"id":10685,"library":"crel","title":"Crel: Fast DOM Creation Utility","description":"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.","status":"active","version":"4.2.1","language":"javascript","source_language":"en","source_url":"git://github.com/KoryNunn/crel","tags":["javascript"],"install":[{"cmd":"npm install crel","lang":"bash","label":"npm"},{"cmd":"yarn add crel","lang":"bash","label":"yarn"},{"cmd":"pnpm add crel","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primary default export for the standard API, used for creating DOM elements. `crel` itself is a function.","wrong":"import { crel } from 'crel';","symbol":"crel","correct":"import crel from 'crel';"},{"note":"Standard CommonJS import for Node.js or Browserify environments where `require` is used.","wrong":"import crel from 'crel';","symbol":"crel (CommonJS)","correct":"const crel = require('crel');"},{"note":"Accesses the Proxy-based API variant from the default export, enabling cleaner syntax like `crelProxy.div(...)` for environments supporting ES6 Proxies.","wrong":"import { proxy } from 'crel';","symbol":"crel.proxy","correct":"import crelBase from 'crel'; const crelProxy = crelBase.proxy;"}],"quickstart":{"code":"import crel from 'crel';\n\n// Standard API usage\nconst standardButton = crel('button', {\n    type: 'button',\n    'data-action': 'standard-click' // Direct event attributes like 'onclick' won't work without crel.attrMap['on'] setup\n}, 'Click Me (Standard)!');\n\nconst infoParagraph = crel('p', 'This element was created using the standard `crel` function syntax.');\n\nconst standardDiv = crel('div',\n    { 'class': 'standard-example', style: 'padding: 15px; border: 1px solid #ccc; background-color: #f9f9f9;' },\n    crel('h2', 'Standard Crel API'),\n    infoParagraph,\n    standardButton\n);\n\n// Attach event listener for the standard button (common alternative if attrMap['on'] isn't configured)\nstandardButton.addEventListener('click', () => alert('Standard API button clicked (via addEventListener)!'));\n\n// Accessing the Proxy API from the default export\nconst crelProxy = crel.proxy;\n\n// Proxy API usage\nconst proxyButton = crelProxy.button({\n    type: 'button',\n    onclick: () => alert('Proxy API button clicked!') // Proxy API handles 'onclick' directly as an attribute\n}, 'Proxy Click Me!');\n\nconst proxyInfoParagraph = crelProxy.p('This element was created using the modern Proxy API for cleaner syntax.');\n\nconst proxyDiv = crelProxy.div(\n    { 'class': 'proxy-example', style: 'margin-top: 20px; padding: 15px; border: 1px solid #cce; background-color: #f0f8ff;' },\n    crelProxy.h2('Proxy Crel API'),\n    proxyInfoParagraph,\n    proxyButton\n);\n\n// Append elements to the document body (or a specific container)\ndocument.body.appendChild(standardDiv);\ndocument.body.appendChild(proxyDiv);\n\nconsole.log('DOM elements created and appended to the document body.');","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Crel is designed for efficient creation of *new* DOM elements. While it's technically possible to pass existing DOM elements to `crel` for modification or rearrangement, this usage pattern is explicitly discouraged by the library's authors and can lead to unexpected behavior or inefficient DOM operations compared to native methods or libraries optimized for manipulation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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()`.","message":"The standard `crel` API handles event listeners via a custom `crel.attrMap['on']` definition. Direct `onclick` or `oninput` attributes within the attribute object for the standard API will *not* automatically attach event handlers without this custom mapping being set up beforehand.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"Crel extensively utilizes modern ES6 features (e.g., Proxies for its advanced API). Consequently, it is specifically intended for use in modern 'evergreen' browser environments. Applications targeting older or legacy browsers will require transpilation (e.g., via Babel) to ensure full compatibility and functionality.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"The `crel` library was not correctly imported, loaded, or is out of the current scope, preventing access to its primary function.","error":"ReferenceError: crel is not defined"},{"fix":"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;`.","cause":"This error occurs when attempting to use the `crel.proxy` API without properly accessing it from the default export, or if the runtime environment does not support ES6 Proxies.","error":"TypeError: crel.proxy is not a function / crel.proxy is undefined"}],"ecosystem":"npm"}