Sometimes you just need a placeholder image right at your finger tips. Just enter the width + x + height at the end of this URL and off you go!

Example: or creates


What is this?
This is a simple tool for generating dummy/filler images on the fly at whatever size you want.
How do I use it?
Simply add the width, an 'x', and the height (example) of the image you want and my script will spit out a gray box to the size you want with the image dimensions written on top.
Can I use a dummy image url as an image source?
Yup, that was what it was designed for. Try this: <img src="">
Awesome! how does it work?
See for yourself! The important bits are below, and the full source is at
Where did this come from?
Inspired by

Node.js Source

const http = require('http');
const { readFile } = require('fs').promises;

const host = '';
const port = 3000;

const placeholderRoutes = /^\/(\d{1,9}x\d{1,9}|\d{1,9})$/i;
const placeholderShortcut = /^\/(\d{1,9})$/i;

function escapeHtml(unsafe) {
  return unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');

function serveResponse(res, contentType, content) {
  res.setHeader('Content-Type', contentType);
  return res.end(content);

const servePlaceholder = (url, res) => {
  const dimensions = url.match(placeholderRoutes).pop();
  const [width, height] = placeholderShortcut.test(url) ? [dimensions, dimensions] : dimensions.split('x');
  const svg = `<svg baseProfile="full" xmlns="" width="${width}" height="${height}">
  <path fill="#ccc" d="M0 0h${width}v${height}H0z"/>
  <text x="${width - 2}" y="${height - 2}" font-size="12" text-anchor="end">${width}×${height}</text>
  return serveResponse(res, 'image/svg+xml', svg);

const serveHtml = (res) => {
  return Promise.all([readFile(`${__dirname}/public/index.html`), readFile(`${__dirname}/index.js`)]).then(
    ([htmlContents, sourceContents]) => {
      const escapedSource = escapeHtml(sourceContents.toString());
      const mergedContents = htmlContents.toString().replace('<pre />', `<pre>${escapedSource}</pre>`);

      return serveResponse(res, 'text/html', mergedContents);

const serveFavicon = (res) => {
  return readFile(`${__dirname}/public/favicon.ico`).then((contents) => serveResponse(res, 'image/x-icon', contents));

const requestListener = (req, res) => {
  if (placeholderRoutes.test(req.url)) {
    return servePlaceholder(req.url, res);
  } else if (req.url === '/') {
    return serveHtml(res);
  } else if (req.url === '/favicon.ico') {
    return serveFavicon(res);
  } else {
    res.setHeader('Content-Type', 'text/html');
    return res.end('not found');

const server = http.createServer(requestListener);
server.listen(port, host, async () => {
  console.log(`Server is running on http://${host}:${port}`);