{"id":10686,"library":"crelt","title":"CRELT DOM Element Creation Utility","description":"CRELT is a minimalist and tiny JavaScript utility designed for the efficient creation of DOM elements. It simplifies the process of programmatically constructing HTML structures by providing a single function that accepts a tag name (or existing DOM element), an optional attributes object, and any number of child nodes. Attributes specified as strings are set via `setAttribute`, while non-string values (like functions for event handlers) are assigned as direct properties. Children can be strings (for text nodes), DOM nodes, or arrays of children. The library is currently stable at version 1.0.6, indicating a mature and likely infrequent release cadence. Its key differentiator is its small footprint and direct, unopinionated approach to DOM manipulation, serving as a lightweight alternative to JSX or more complex templating engines for scenarios requiring programmatic DOM construction.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/marijnh/crelt","tags":["javascript","dom","creation","crel","typescript"],"install":[{"cmd":"npm install crelt","lang":"bash","label":"npm"},{"cmd":"yarn add crelt","lang":"bash","label":"yarn"},{"cmd":"pnpm add crelt","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CRELT exports a single default function. Attempting a named import will result in 'crelt is not a function' or similar errors in ESM contexts.","wrong":"import { crelt } from 'crelt'","symbol":"crelt","correct":"import crelt from 'crelt'"},{"note":"For CommonJS environments, the `require` call directly assigns the default export. Destructuring is incorrect.","wrong":"const { crelt } = require('crelt')","symbol":"crelt","correct":"const crelt = require('crelt')"}],"quickstart":{"code":"import crelt from 'crelt';\n\n// Create a main container div\nconst container = crelt('div', { id: 'app-container', style: 'padding: 20px; border: 1px solid #ccc; font-family: sans-serif;' });\n\n// Create a heading\nconst heading = crelt('h1', 'Welcome to CRELT Example!');\n\n// Create a paragraph with some text\nconst paragraph = crelt('p', { class: 'info-text', style: 'color: #555;' },\n  'CRELT is a tiny utility for creating DOM elements. ',\n  'It simplifies the process of building complex structures directly in JavaScript.',\n);\n\n// Create a button with an event handler\nlet clickCount = 0;\nconst statusSpan = crelt('span', { id: 'status-message', style: 'margin-left: 10px; font-weight: bold; color: #007bff;' }, 'Not clicked yet.');\n\nconst button = crelt('button',\n  {\n    onclick: () => {\n      clickCount++;\n      statusSpan.textContent = `Button clicked ${clickCount} times!`;\n    },\n    style: 'padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px;',\n  },\n  'Click Me!'\n);\n\n// Combine button and status span into a div\nconst buttonContainer = crelt('div', { style: 'margin-top: 20px;' }, button, statusSpan);\n\n// Create a list of items using an array for children\nconst items = ['Item A', 'Item B', 'Item C'];\nconst list = crelt('ul',\n  { style: 'margin-top: 20px; padding-left: 20px;' },\n  items.map(item => crelt('li', { style: 'margin-bottom: 5px;' }, item))\n);\n\n// Append all elements to the container\ncrelt(container, heading, paragraph, buttonContainer, list);\n\n// Append the main container to the document body\ndocument.body.appendChild(container);\n\nconsole.log('DOM structure created and appended using CRELT.');","lang":"typescript","description":"This quickstart demonstrates creating a hierarchical DOM structure using `crelt`, including dynamic attributes, event handlers, and different types of children (strings, other `crelt`-generated elements, and arrays of elements)."},"warnings":[{"fix":"Always pass functions (or other non-string types) for properties that expect them (e.g., `onclick: myHandler`). Use string values only for standard HTML attributes.","message":"CRELT distinguishes between string values for attributes (using `setAttribute`) and non-string values (using direct property assignment). Passing a string for an event handler like `onclick` will not work, as it will literally set the `onclick` attribute to a string, not assign a function to the property.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be mindful of explicitly passing `null` or `undefined`. If conditionally adding children, ensure the condition correctly resolves to a valid element or nothing, e.g., `condition ? crelt('div', 'content') : null`.","message":"Null or `undefined` values provided for attributes will be ignored and not set. Similarly, null or `undefined` elements within the children arguments or arrays of children will be skipped. While often convenient, this can mask issues if `null` is passed unintentionally.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"To create multiple top-level elements, make separate `crelt` calls. To group multiple elements into a fragment before appending, you can manually create a `DocumentFragment` and then append `crelt`-generated elements to it.","message":"CRELT's primary use case is creating single DOM elements. While it allows arrays for children, it does not directly support creating DocumentFragments or multiple root-level elements from a single call in the way some templating systems might.","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":"Use `import crelt from 'crelt';` for ES Modules or `const crelt = require('crelt');` for CommonJS, as `crelt` exports a single default function.","cause":"Attempting to import `crelt` using named import syntax (e.g., `import { crelt } from 'crelt';`) in an ES Module context, or incorrect destructuring in CommonJS.","error":"TypeError: crelt is not a function"},{"fix":"Ensure `import crelt from 'crelt';` (or the equivalent CommonJS `require`) is at the top of your module or script file where `crelt` is being used.","cause":"The `crelt` function was not imported or defined in the current scope before being used.","error":"Uncaught ReferenceError: crelt is not defined"},{"fix":"Verify that the first argument passed to `crelt` is always a valid HTML tag name string (e.g., `'div'`, `'button'`) or a pre-existing DOM element.","cause":"This error can occur if `crelt` is called with an invalid first argument that is not a string (tag name) or an existing DOM element, leading to `crelt` returning `undefined` or a non-element, and then trying to set a property on it.","error":"TypeError: Cannot set properties of undefined (setting 'onclick')"}],"ecosystem":"npm"}