explaingit

imsky/holder

★ 5,806JavaScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

Holder is a zero-dependency JavaScript library that renders image placeholder boxes in the browser using SVG, showing dimensions as text, no server needed.

Mindmap

mindmap
  root((holder))
    What it does
      Renders image placeholders
      Uses SVG in-browser
      Shows dimension labels
    Tech Stack
      JavaScript
      SVG
      No dependencies
    Use Cases
      HTML prototyping
      Responsive design testing
      Design mockup previews
    Customization
      Color themes
      Custom fonts and text
      Fluid percentage sizes
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Drop placeholder images into an HTML prototype before real assets are ready, with dimensions shown automatically.

USE CASE 2

Create fluid percentage-based placeholder images that resize with their container during responsive design testing.

USE CASE 3

Apply custom colors or themes to placeholder images to match a design mockup's color palette.

Tech stack

JavaScriptSVGnpm

Getting it running

Difficulty · easy Time to first run · 5min

Include the Holder script via CDN and use the holder.js URL pattern in image src attributes, no build step required.

In plain English

Holder is a JavaScript library that generates image placeholders directly in the browser. When you are building a web page and don't have real images ready yet, you can drop a Holder placeholder into your HTML and it renders a grey (or colored) box with the image dimensions shown as text. Everything happens in the browser using SVG, so no extra server requests are needed. Using it is straightforward. You include the Holder script on your page, then write an image tag where the src attribute points to a special Holder URL like holder.js/300x200. Holder detects that pattern and replaces the image element with a rendered placeholder of the right size. You can also use data-src instead of src to avoid browser console errors from the placeholder URL. The library offers a range of customization options set through URL parameters. You can control background color, text color, font, font size, text alignment, and the text itself. Holder ships with six built-in color themes named sky, vine, lava, gray, industrial, and social. You can also define your own themes in JavaScript and apply them by name. Fluid placeholders are supported: specify dimensions in percentages and the placeholder resizes with its container. There is also programmatic access through a run() API, which lets you target specific image elements and inject placeholders from JavaScript rather than from HTML attributes. Holder is available through npm, yarn, Bower, cdnjs, and several other package managers and CDNs. It was used by Bootstrap version 3 and by many other open-source projects. The library has no external dependencies and is designed to stay small in file size.

Copy-paste prompts

Prompt 1
How do I add Holder.js placeholders to my HTML so image slots show size labels like '300x200' during prototyping?
Prompt 2
Show me how to create a custom Holder.js color theme and apply it to all placeholder images on a page.
Prompt 3
How do I use Holder.js with fluid percentage dimensions so placeholders resize with the browser window?
Prompt 4
How do I use the Holder.js run() API from JavaScript to inject placeholders into specific image elements programmatically?
Open on GitHub → Explain another repo

← imsky on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.