Skip to main content
placeholger.hellinger.wtf
v1.1
Zero Disk TTFB <1ms Dynamic SVG Vector Client-Side JS SDK Agentic / WebMCP Ready

placeholger.hellinger.wtf

A dead-simple, ultra-lightweight dynamic SVG wireframe service & client-side JS SDK. Generates mathematically crisp vector guides with corner-to-center crosshairs, custom hex colors, dynamic label text, zero disk footprint, and strict non-indexing headers.

Engine Mode PHP + JS On-The-Fly
Image Robots noindex, noimageindex
EMBED <img src="https://placeholger.hellinger.wtf/600/400/9e9ea0/ffffff" width="600" height="400" alt="PLACEHOLGER" />

01 // Configurator

Dynamic Vector Specs
Dimensions (Pixels, 1 - 2048)
600px
400px
Color Customization (Hex without #)
Quick Samples:
Color Palette Presets
Fast Dimension Presets
Format: SVG (Dynamic Vector)
Payload: ~520 B
Live Generated URI
https://placeholger.hellinger.wtf/600/400/9e9ea0/ffffff

02 // Stage Preview

LIVE VECTOR
Zero-Disk Render
PLACEHOLGER (600x400)
Aspect Ratio 1.50:1 (600:400)
Payload Weight ~520 bytes
Edge TTL 31536000s
03 // Client-Side "On-The-Fly" JS SDK

Zero-Network Inline SVG Generation in the Browser

Want placeholders generated directly on the client without making individual image requests? Load /placeholger.js (~1.8 KB) to unlock the <place-holger> Custom Web Component, data-placeholger auto-hydration, and programmatic JS APIs.

1. Web Component

<script src="/js/placeholger.js" defer></script>

<place-holger
  w="600" h="400"
  bg="0f172a" fg="38bdf8"
  text="Hero Banner"
  dims>
</place-holger>

2. Auto-Hydrated <img>

<img
  data-placeholger="600/400/18181b/22c55e?text=Instant+Data+URI"
  alt="Client Generated"
/>

3. Live Client Demo

Self-host in your own project

placeholger.js is a single dependency-free file (~1.8 KB) that runs entirely in the browser. Remote hotlinking is blocked (403 Forbidden), so save a local copy into your project's static assets:

↓ Download placeholger.js 
# 1. Save a local copy in your project
curl -fsSL -o public/js/placeholger.js https://placeholger.hellinger.wtf/placeholger.js

# 2. Load it from your own origin
<script src="/js/placeholger.js" defer></script>

No build step or server-side code needed. Once saved locally, the <place-holger> component works offline and without external requests.

Component attributes

w / h Width and height in px (1–2048). If only w is set, it renders a square.
bg / fg Background and line/text color as 3- or 6-char hex, without #.
text Center label (max 64 chars). Defaults to PLACEHOLGER.
dims Boolean attribute that adds a w × h subtitle.
spec Shorthand alternative, e.g. spec="600/400/0f172a/38bdf8?text=Hero".

For scripting there is also window.Placeholger.svg({...}) (returns SVG markup) and window.Placeholger.dataUri({...}) (returns a data: URI for <img src> or CSS).

04 // API Specification & Implementation

Zero-Disk Dynamic SVG Pipeline & Edge Delivery

Designed for zero disk wear, instant rendering, and continuous integration workloads. Zero files saved on disk, zero GD raster computation, and strict SEO protection.

ROUTE 01 GET /{w}/{h}/{bg}/{fg}?text=...

Dimension & Color Path + Custom Text

Generates an exact vector SVG wireframe with custom hex background and foreground crosshairs/text. Supports optional ?text=... and ?dims=1 query parameters.

https://placeholger.hellinger.wtf/600/400/0f172a/38bdf8?text=Hero+Banner 200 OK
ROUTE 02 GET /{size}?text=... (Square or Query Params)

Equilateral Square or Query Params

Passed a single dimension, width and height match 1:1. Also supports optional query params: ?bg=1e3a8a&fg=93c5fd&text=Avatar.

https://placeholger.hellinger.wtf/400?bg=1e3a8a&fg=93c5fd&text=Avatar 400×400 px

HTTP Contract, Caching & Non-Indexing Headers

Width / Height Bound Integer between 1 and 2048
Color Values (bg / fg) 3 or 6 Hex chars ([0-9a-fA-F])
Custom Text (?text=) URL-encoded string (XML-sanitized)
Out of Range (> 2048 or <= 0) 400 Bad Request
Cache-Control public, max-age=31536000, immutable
X-Robots-Tag (Images) noindex, noimageindex, noarchive
Content-Type image/svg+xml; charset=utf-8
Execution & SEO Strategy

Zero-Disk Hot Path & Crawler Protection

01
Request & XML Sanitization Parses dimensions (1–2048), normalizes 3/6-char hex codes, and escapes ?text= entities.
02
Deterministic ETag & Immutable Edge Cache Emits Cache-Control: public, max-age=31536000, immutable and handles If-None-Match with instant 304 Not Modified.
03
Strict Image Non-Indexing (SEO Protection) Only this Studio landing page is indexed. All generated SVG images send X-Robots-Tag: noindex, noimageindex so search engines never waste crawl budget on placeholder URLs.
Storage Footprint 0 Files / 0 B In-Memory String Templating
Cold Invocation <1ms Zero GD rasterization
Search Indexing Landing Only Images send X-Robots-Tag: noindex
Agentic Readiness llms.txt + OAS WebMCP & OpenAPI 3.1 enabled