Placeholder.js

Dynamic SVG Placeholders

Placeholder.js is a lightweight JavaScript library for generating dynamic SVG placeholders. Perfect for mockups, prototypes, and layouts.

Get Started

Features

  • Dynamic SVG generation
  • Customizable dimensions
  • Colorful designs
  • Displays dimensions
  • Lightweight integration
  • No dependencies

Demo

Refresh the page to see new placeholder images:

Placeholder 200x100 Placeholder 300x150 Placeholder 150x150 Placeholder 250x200 Placeholder 180x120 Placeholder 220x180

Installation

Include the script in your HTML file:

<script src="https://cdn.jsdelivr.net/gh/meenaviyal/placeholderjs@main/placeholder.js"></script>

Usage

Use img elements with classes in the format placeholder-[width]-[height]:

<img class="placeholder-200-100" alt="Placeholder 200x100">
<img class="placeholder-300-150" alt="Placeholder 300x150">
<img class="placeholder-150-150" alt="Placeholder 150x150">

The library will automatically replace these images with SVG placeholders when the page loads.

Browser Support

Placeholder.js works in all modern browsers that support SVG and ES6 JavaScript.