Ronen Aminoff
ENעברית
Let’s talk

Tools

Thumbnail Architect

Adapt one simple thumbnail template to wide, square and vertical sizes.

Working Runs in your browser, and nothing is uploaded. Try it below on sample data.

The problem

A thumbnail designed once gets rebuilt by hand for every size and every new title.

What I built

A tool that reads the template, works out what each layer is for, and lays it out again for each size. In the simple case, all that's left is editing the title.

  • Wide, square and vertical together
  • Keeps the layout's logic
  • Works from an SVG template

Open the tool

Features and limits

Built and tested

  • Reads an SVG template and maps every layer to a role: background, headline, kicker, body, button, button label, decoration.
  • Edit any text layer and see three sizes update at once: 16:9, 1:1 and 9:16.
  • Keeps the text block's edge and reading order, keeps decoration on its side, stretches the background.
  • Downloads each variant as a clean SVG.
  • Safe with untrusted files: scripts, event handlers, links, embedded images and foreign content are removed and listed.

Limits

  • Reads flat SVG exports: rectangles, circles, ellipses, lines, paths, polygons and text. Transforms and gradients are ignored, and listed when found.
  • Text width is estimated from character count, so very long titles can run past a button or the edge.
  • No AI in this version. Roles come from geometry only, so an unusual layout can get a wrong role.
  • Previews draw with your system fonts. The downloaded SVG keeps the template's font names, so it looks right where those fonts are installed.

Planned

Server-side AI proxy, diffable semantic roles and safe SVG handling.

How to use
  • Load the fictional template, or choose your own SVG (it stays in the browser).
  • Check the layer map: each layer and the role it was given.
  • Type a new title or label in the Content column.
  • Download the size you need.
How it works
  • Own XML tokenizer and an allow-list of elements and attributes, so the parser runs the same way in the browser and in tests.
  • Roles from geometry: full-canvas rectangle is the background, the largest type is the headline, text inside a rounded rectangle is a button.
  • Layout per size: content block scaled uniformly and anchored, decoration anchored to its side, background filled.
  • Previews are rendered as images from generated SVG, never injected as markup.
Download

No download yet. A download appears here only after the package is built from reviewed code, installed and tested.

Tested versions & limits
  • Pass Unit: roles from geometry on the fictional template Node 22, Linux
  • Pass Unit: scripts, events, links, foreign content removed Node 22, Linux
  • Pass Unit: rejects empty, non-SVG and over 500 KB Node 22, Linux
  • Pass Unit: three sizes keep content inside the canvas Node 22, Linux
  • Pass Unit: edits escaped, output well-formed Node 22, Linux
  • Pass Browser: load, edit, three previews render, hostile upload sanitized Chromium (Playwright), 1280px

Last verified 2026-10-31.

Geometry-only roles. The optional AI role classifier (server-side) is not built; no key is ever used in the browser.

Details
Input
SVG and optional own image reference
Output
Layer map, editable layout, multiple resolutions
Runs in
Any modern browser. Local only, no account, no AI key.
Source
Original, rebuilt from scratch
  • Templates
  • Interactive