{"library":"min-dom","title":"Minimal DOM Utility Toolbelt","description":"min-dom is a focused and lightweight JavaScript library, currently at version 5.3.0, providing a collection of essential DOM manipulation utilities. It emphasizes a minimal footprint, weighing approximately 2KB gzipped, making it suitable for environments where bundle size is critical. The library maintains an active release cadence, with recent updates ensuring compatibility and minor feature enhancements. Key differentiators include its small size, its inspiration from the `component` project's utilities, and its provision of common helpers like `assignStyle`, `attr`, `classes`, `clear`, `closest`, `delegate`, `domify`, `event`, `matches`, `query`, and `remove`. It is designed to be library-friendly and ships with TypeScript types for improved developer experience in typed projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install min-dom"],"cli":null},"imports":["import { query } from 'min-dom';","import { domify } from 'min-dom';","import { event } from 'min-dom';","import { closest } from 'min-dom';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { domify, query, classes, event } from 'min-dom';\n\n// 1. Create a DOM element from an HTML string\nconst myElement = domify('<div class=\"container\"><p id=\"greeting\">Hello, <span class=\"name\">World</span>!</p><button>Click me</button></div>');\n\n// Append it to the body for demonstration\ndocument.body.appendChild(myElement);\n\n// 2. Query for elements within the created element\nconst greetingParagraph = query('#greeting', myElement);\nconst nameSpan = query('.name', greetingParagraph);\nconsole.log('Greeting paragraph text:', greetingParagraph.textContent);\n\n// 3. Manipulate classes\nclasses(myElement).add('active');\nclasses(myElement).remove('container');\nconsole.log('myElement classes:', myElement.className);\n\n// 4. Attach an event listener\nconst button = query('button', myElement);\nconst handler = (e) => {\n  console.log('Button clicked!', e.target.tagName);\n  classes(button).toggle('clicked');\n  event.off(button, 'click', handler); // Remove after first click\n};\nevent.on(button, 'click', handler);\n\n// Clean up after a few seconds\nsetTimeout(() => {\n  if (myElement.parentNode) {\n    myElement.parentNode.removeChild(myElement);\n    console.log('Element removed from DOM.');\n  }\n}, 3000);","lang":"typescript","description":"This quickstart demonstrates creating elements with `domify`, querying the DOM using `query`, manipulating CSS classes with `classes`, and handling events with `event.on`/`event.off`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}