{"id":15296,"library":"bonzo","title":"Lightweight DOM Utility","description":"Bonzo is a library-agnostic, extensible DOM manipulation utility designed to be minimalist and work with or without a host library like Ender.js. It provides a chainable API for common DOM tasks such as adding/removing classes, manipulating CSS, appending/prepending elements, and iterating over collections. Version 2.0.0, published in 2012, is the latest release and the package has been largely unmaintained since then. It differentiates itself from larger libraries like jQuery by focusing solely on DOM manipulation and explicitly requiring integration with external selector engines (e.g., Qwery) for CSS-style selections, rather than including one internally. Its release cadence was irregular, and it is now considered abandoned.","status":"abandoned","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/ded/bonzo","tags":["javascript","ender","dom","nodes","jquery","iteration","css"],"install":[{"cmd":"npm install bonzo","lang":"bash","label":"npm"},{"cmd":"yarn add bonzo","lang":"bash","label":"yarn"},{"cmd":"pnpm add bonzo","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily designed for CommonJS or global script inclusion. Does not support ES Modules natively.","wrong":"import bonzo from 'bonzo';","symbol":"bonzo","correct":"const bonzo = require('bonzo');"},{"note":"The primary way to use Bonzo is by passing an array of DOM elements or a single DOM element to its constructor function, which returns a Bonzo instance for chaining.","symbol":"bonzo(elements)","correct":"const $elements = bonzo([document.getElementById('my-id')]);"},{"note":"Used to extend Bonzo instances with custom methods. 'aug' is a static method on the `bonzo` function itself.","wrong":"Bonzo.aug({...});","symbol":"bonzo.aug","correct":"bonzo.aug({ myMethod: function() { /* ... */ } });"}],"quickstart":{"code":"// This example demonstrates basic DOM manipulation using Bonzo,\n// typically combined with a selector engine like Qwery.\n// As Bonzo is a global or CommonJS export, we simulate its availability.\n\n// In a browser, Bonzo might be available globally:\n// <script src=\"path/to/bonzo.js\"></script>\n\n// For demonstration, let's assume 'bonzo' is available.\n// In a real scenario, if using CommonJS:\n// const bonzo = require('bonzo');\n\nconst elements = [\n  document.createElement('div'),\n  document.createElement('p')\n];\n\nelements[0].id = 'bonzo-container';\nelements[1].textContent = 'Hello from Bonzo!';\ndocument.body.appendChild(elements[0]);\nelements[0].appendChild(elements[1]);\n\nbonzo(elements[0])\n  .hide() // Initially hide the element\n  .addClass('bonzo-managed-element')\n  .append('<span>Appended content with Bonzo!</span>')\n  .css({\n    color: 'darkgreen',\n    'font-size': '16px',\n    'border': '1px dashed #ccc'\n  })\n  .show() // Then show it with new styles and content\n  .after('<div class=\"sibling-element\">I am a sibling added after.</div>');\n\n// You can also extend Bonzo with custom methods:\nbonzo.aug({\n  highlight: function (color) {\n    return this.css('background-color', color || 'yellow');\n  }\n});\n\n// Now use the custom method\nbonzo(elements[1]).highlight('lightblue');\n\nconsole.log('Bonzo operations complete, check the DOM!');","lang":"javascript","description":"Demonstrates basic DOM manipulation using Bonzo's chainable API, including class manipulation, CSS styling, element insertion, and extending Bonzo with a custom method. It shows how to work with elements directly as Bonzo does not include a selector engine."},"warnings":[{"fix":"Use CommonJS 'require()' for Node.js environments or ensure the script is loaded globally in browsers. Consider using a modern DOM library if ES Modules are required.","message":"Bonzo relies on older JavaScript patterns (CommonJS/global) and lacks native ES Module support. Direct 'import' statements will fail without a legacy transpilation setup.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Implement a wrapper function, e.g., `function $(selector) { return bonzo(qwery(selector)); }`, or obtain DOM elements via `document.getElementById`, `document.querySelectorAll`, etc., before passing them to bonzo().","message":"Bonzo does not include a built-in selector engine. To select elements using CSS selectors (e.g., `$('.my-class')`), you must integrate it with an external library like Qwery or Sizzle.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For new projects, consider modern, actively maintained DOM manipulation libraries or use native DOM APIs. For existing projects, be aware of potential risks and thoroughly test cross-browser compatibility.","message":"The Bonzo library is no longer actively maintained. The last release was in 2012, meaning it may have compatibility issues with modern browsers or security vulnerabilities that will not be patched.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"If you have an HTML string, you can either create elements first (e.g., `document.createElement('div')`) or use methods like `.append()` which accept HTML strings to add content to existing elements.","message":"Bonzo's API expects an array of DOM elements or a single DOM element. Passing HTML strings directly to the constructor will not work as expected for element selection.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `bonzo.js` is included in your HTML `<head>` or `<body>` tag before your scripts, or use `const bonzo = require('bonzo');` in a CommonJS environment.","cause":"The Bonzo library script has not been loaded or correctly imported into the current scope.","error":"ReferenceError: bonzo is not defined"},{"fix":"Verify that your `$` function returns `bonzo(selectorEngine(selector))` and that `bonzo` itself is correctly loaded and accessible. Ensure you are passing actual DOM elements to `bonzo()` if not using a selector wrapper.","cause":"This usually indicates that `$` is not a Bonzo instance, or Bonzo has not been correctly wrapped around a selector engine.","error":"Uncaught TypeError: $(...).hide is not a function"}],"ecosystem":"npm"}