useSignal logouseSignal

Image Placeholder

Placeholder Image URLs by API

Get placeholder images from a simple URL — /placeholder/600x400 — with size, text, colors, and style set by query parameters. A modern via.placeholder alternative.

Open WorkspaceView URL
Simple URLCustom textBrowser-nativeDeveloper friendly

URL pattern

/placeholder/1200x630?text=useSignal

Change size, text, colors, radius, pattern, and format with query parameters.

Live placeholder

Built for mockups and docs.

/placeholder/1200x630?text=1200×630Copy
Generated useSignal placeholder preview
1200×630SVG · local
HTML img<img src="...">
Markdown![image](...)
React img<img />
CSS backgroundurl(...)

Why it is useful

Placeholder images that feel production-adjacent.

URL-first placeholders

Create mock image URLs that are easy to paste into HTML, docs, markdown, prototypes, and component demos.

Design-safe defaults

Start from clean colors, readable typography, and subtle patterns instead of loud placeholder blocks.

Snippets ready

Copy the direct URL, HTML image tag, Markdown image, React image, or CSS background snippet from one workspace.

Why it helps

Why use a placeholder image URL API

  • Drop a URL like /placeholder/100x100 straight into an img tag instead of creating throwaway image assets.

  • Customize text, background, foreground, radius, and pattern with query parameters that read like documentation.

  • Responses are lightweight SVG with long-lived caching, so mockups and docs stay fast.

How to use it

How the placeholder URL works

  1. 1

    Request https://www.usesignal.dev/placeholder/{width}x{height} — for example /placeholder/600x400.

  2. 2

    Add query parameters like ?text=Hero&bg=eef2ff&color=312e81 to style the image.

  3. 3

    Paste the URL into HTML, Markdown, React, CSS, or anywhere an image URL works.

Quick tips

Placeholder URL tips

  • Common sizes: /placeholder/100x100 for avatars, /placeholder/300x250 for ad slots, /placeholder/1200x630 for Open Graph previews, /placeholder/1920x1080 for hero banners.

  • Use the studio to design a placeholder visually, then copy the equivalent URL or an HTML, Markdown, React, or CSS snippet.

  • If you migrated from via.placeholder.com, the size-in-path pattern works the same way here.

FAQ

Placeholder image URL questions

How do I get a 100x100 placeholder image?

Use https://www.usesignal.dev/placeholder/100x100 directly in an img tag. Any width and height combination works in the same pattern.

Is this an alternative to via.placeholder.com?

Yes. It uses the same size-in-path idea — /placeholder/300x200 — plus query parameters for text, colors, radius, and pattern styling.

Can I customize the placeholder text and colors?

Yes. Add query parameters like ?text=Preview&bg=eef2ff&color=312e81 to control the label and colors, or design it visually in the studio and copy the URL.

What format do the URLs return?

The URL API returns lightweight SVG images that stay crisp at any display size and cache well. PNG export is available from the studio.

Is the placeholder URL API free?

Yes. The URLs are free to use in mockups, docs, prototypes, and demos without an account.

Open the main Image Placeholder page

This page focuses on one search intent. The main tool page includes the broader product overview, related workflows, and full use cases.

Open the main Image Placeholder workflowSVG Placeholder ImagesImage Placeholder GeneratorImage Optimizer