{"id":11460,"library":"node-vibrant","title":"node-vibrant: Image Color Palette Extraction","description":"node-vibrant is a JavaScript library engineered for extracting prominent colors and generating a color palette from images. It effectively analyzes image data to produce a set of 'swatches,' including vibrant, muted, dark vibrant, light vibrant, dark muted, and light muted colors. The library is currently at stable version 4.0.4 and has resumed active development following a substantial four-year hiatus before the significant 4.0.0 release. Key features include comprehensive support for both Node.js and browser environments, a full rewrite in TypeScript since version 3.0.0-alpha.1, and a modern Promise-based API for handling asynchronous operations. This combination makes it a robust solution for applications requiring dynamic, type-safe color palette generation from images, integrating smoothly with contemporary JavaScript development workflows.","status":"active","version":"4.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/Vibrant-Colors/node-vibrant","tags":["javascript","color","detection","varation","image","picture","canvas","vibrant","muted","typescript"],"install":[{"cmd":"npm install node-vibrant","lang":"bash","label":"npm"},{"cmd":"yarn add node-vibrant","lang":"bash","label":"yarn"},{"cmd":"pnpm add node-vibrant","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Since v4.0.0, the `Vibrant` class is a named export, and you must import from environment-specific paths like `node-vibrant/node` or `node-vibrant/browser`.","wrong":"import Vibrant from 'node-vibrant';","symbol":"Vibrant","correct":"import { Vibrant } from 'node-vibrant/node';"},{"note":"For browser environments, use the explicit import path `node-vibrant/browser` since v4.0.0.","wrong":"import Vibrant from 'node-vibrant';","symbol":"Vibrant (Browser)","correct":"import { Vibrant } from 'node-vibrant/browser';"},{"note":"Prior to v4.0.0, `Vibrant` was typically a default export and could be imported via CommonJS `require()` directly from the package root. This pattern is deprecated for v4+.","wrong":"import { Vibrant } from 'node-vibrant';","symbol":"Vibrant (CommonJS pre-v4)","correct":"const Vibrant = require('node-vibrant');"}],"quickstart":{"code":"import { Vibrant } from 'node-vibrant/node'; // Or 'node-vibrant/browser' for browsers\n\nasync function extractColorsFromImage(imageUrl: string) {\n  try {\n    console.log(`Extracting colors from: ${imageUrl}`);\n    const palette = await Vibrant.from(imageUrl).getPalette();\n\n    console.log('Generated Color Palette:');\n    console.log('  Vibrant:', palette.Vibrant?.hex || 'N/A');\n    console.log('  Muted:', palette.Muted?.hex || 'N/A');\n    console.log('  Dark Vibrant:', palette.DarkVibrant?.hex || 'N/A');\n    console.log('  Light Vibrant:', palette.LightVibrant?.hex || 'N/A');\n    console.log('  Dark Muted:', palette.DarkMuted?.hex || 'N/A');\n    console.log('  Light Muted:', palette.LightMuted?.hex || 'N/A');\n\n    if (palette.Vibrant) {\n      console.log(`  Vibrant RGB: ${palette.Vibrant.rgb}`);\n      console.log(`  Vibrant Population: ${palette.Vibrant.population}`);\n    }\n  } catch (error) {\n    console.error('Failed to extract colors:', error);\n  }\n}\n\n// Example usage with a public image URL\n// For a local file in Node.js, replace 'imageUrl' with a local path like 'file:///path/to/image.jpg'\nconst exampleImageUrl = 'https://picsum.photos/id/1018/1000/600';\nextractColorsFromImage(exampleImageUrl);","lang":"typescript","description":"Demonstrates how to extract a color palette from an image URL using the Promise-based API in a Node.js environment, displaying the dominant color swatches."},"warnings":[{"fix":"Change your import statement to `import { Vibrant } from 'node-vibrant/node;'` or `import { Vibrant } from 'node-vibrant/browser;'` depending on your environment.","message":"Starting with v4.0.0, the `Vibrant` class is no longer a default export but a named export. Code relying on `import Vibrant from 'node-vibrant'` will break.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update your import paths to explicitly target your environment, e.g., `import { Vibrant } from 'node-vibrant/node;'`.","message":"Version 4.0.0 introduced mandatory environment-specific imports. You must now import from `node-vibrant/node` for Node.js, `node-vibrant/browser` for browsers, or `node-vibrant/worker` for Web Workers.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade your Node.js environment to version 18 or higher.","message":"Node.js v18+ is now required for `node-vibrant` versions 4.0.0 and above. Environments running older Node.js versions will encounter compatibility issues.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Refactor your asynchronous operations to use Promises, for example: `Vibrant.from(imageUrl).getPalette().then(palette => ...);` or `const palette = await Vibrant.from(imageUrl).getPalette();`","message":"The API was rewritten to be Promise-based in v3.0.0-alpha.1. Code using callbacks will need to be refactored to use `async/await` or `.then().catch()` patterns.","severity":"breaking","affected_versions":">=3.0.0-alpha.1"},{"fix":"Replace calls to `getSwatches()` with `getPalette()`.","message":"The `Builder.getSwatches` alias was removed in v4.0.0; developers should use `Builder.getPalette` instead.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import { Vibrant } from 'node-vibrant/node';` (or `/browser`) and then `Vibrant.from(...)`.","cause":"Attempting to use `Vibrant` as a default import or without destructuring when it's a named export.","error":"TypeError: (0 , node_vibrant_node__WEBPACK_IMPORTED_MODULE_0__.Vibrant) is not a constructor"},{"fix":"For v4.0.0 and later, specify the environment in the import path: `import { Vibrant } from 'node-vibrant/node';` or `import { Vibrant } from 'node-vibrant/browser';`","cause":"Incorrect import path for v4.0.0+ in a Node.js or browser environment, or attempting to use the root import for environment-specific functionality.","error":"Error: Cannot find module 'node-vibrant'"},{"fix":"Ensure you are `await`ing the `getPalette()` call within an `async` function or chaining a `.then()` callback: `await Vibrant.from(imageUrl).getPalette();` or `Vibrant.from(imageUrl).getPalette().then(...)`.","cause":"This error often occurs when the `getPalette()` method is called without awaiting the result of `Vibrant.from()`, or if not properly handling the Promise-based API.","error":"TypeError: Vibrant.from(...).getPalette is not a function (or similar async errors)"}],"ecosystem":"npm"}