Placeholder Image Generator
Generate custom SVG placeholder images dynamically via an interactive web interface or fast Edge API.
Dimensions
Live SVG Preview
420 × 420 pxAPI Usage & Integration Examples
Embed vector placeholder images directly into your HTML, Markdown, or CSS layout mockups using the Edge API endpoint.
<img src="https://jsonforge.app/api/placeholder/420x420" alt="Placeholder Image" width="420" height="420" />What is Placeholder Image Generator?
Placeholder Image Generator renders lightweight, vector SVG placeholder images on demand — either interactively in the UI below or through a public HTTP endpoint you can drop straight into an `<img src>`, a Markdown image, or a mockup layout. Every image is built from a plain SVG string template — a background rectangle, an optional grid pattern, and a centered text label — with no canvas, no Sharp binary, and no headless browser involved, which is what makes generation effectively instant. You control width and height independently (from 1px up to 10000px each), background and text color as hex values, an optional corner radius, a subtle background grid overlay, and custom label text that falls back to the image's own dimensions when left blank. The dedicated `/api/placeholder-image/{width}x{height}` route runs on the Next.js Edge Runtime and returns the SVG with a one-year immutable Cache-Control header, so a CDN or browser that has already cached a given URL never has to regenerate it.
How to use Placeholder Image Generator
- Enter the desired Width and Height in pixels, or select a preset size like 420x420, 800x600, or 1920x1080.
- Customize the Background Color and Text Color using color pickers or hex codes.
- Optionally enter custom text to overlay, adjust corner radius, and toggle the background grid.
- Click 'Copy Image URL' to get an instant API endpoint link, or 'Download SVG' to save the generated file locally.
Examples
Basic Square 420x420 Placeholder
Input
https://jsonforge.app/api/placeholder/420x420
Output
420x420 SVG placeholder image with default gray background (#e5e7eb) and dark gray text (#6b7280).
Custom Colors & Text
Input
https://jsonforge.app/api/placeholder/800x600?bg=0f172a&color=ffffff&text=Hero+Banner
Output
800x600 SVG placeholder with dark slate background, white centered text 'Hero Banner'.
Rounded Corners & Subtle Grid
Input
https://jsonforge.app/api/placeholder/600x400?bg=4f46e5&color=ffffff&radius=24&grid=true
Output
600x400 SVG placeholder with indigo background, 24px rounded corners, and background grid pattern.
Default label with no parameters
Input
https://jsonforge.app/api/placeholder/1200x630
Output
1200x630 SVG placeholder with the default gray background and the text "1200 × 630" auto-derived from the dimensions, since no text parameter was supplied.
Common mistakes
- Including a '#' character in query string parameters without URL encoding (use `bg=2563eb` instead of `bg=#2563eb`).
- Passing non-numeric values for width or height (e.g., `420px420`), which returns an HTTP 400 error.
- Expecting raster PNG/JPG output directly (the current implementation returns clean, vector SVG images).
- Requesting extreme dimensions like 9999×9999 for simple layout mockups — the SVG is valid at any size, but embedding dozens of huge placeholders on one page still bloats the DOM and slows scrolling.
- Forgetting to URL-encode custom text with special characters like `&` or `#` when building the URL by hand — use `encodeURIComponent` instead of concatenating raw strings.
Why use this tool
- Generation takes under 10ms since it's built from an SVG string template rather than a canvas render or headless browser, and responses carry a 1-year immutable Cache-Control header.
- Vector SVG output that stays crisp at any screen density and scale.
- Width, height, background/text color, corner radius, and the background grid are each set independently via query parameters or the UI controls.
- No external dependencies, Sharp binaries, Canvas, or Puppeteer required.
- One endpoint doubles as both a design-time preview and a production asset — the exact URL you copy from the live preview is safe to hardcode into shipped markup, since output never changes for the same query string.