Tool / 06

ShareSnap

Shape a social card before the internet gets to judge the crop. Preview the essentials, then export a clean 1200 × 630 Open Graph image.

Page URLTitle 38/70Description 66/160

Recommended: 1200 × 630

inLinkedIn-style

OGA clear title people will want to open

dentabramasta.com

A clear title people will want to open

Add one useful sentence that explains what waits behind the click.

𝕏X-style

OGA clear title people will want to open

dentabramasta.com

A clear title people will want to open

Add one useful sentence that explains what waits behind the click.

◉Discord-style

dentabramasta.com

A clear title people will want to open

Add one useful sentence that explains what waits behind the click.

OGA clear title people will want to open

◔WhatsApp-style

OGA clear title people will want to open

A clear title people will want to open

Add one useful sentence that explains what waits behind the click.

dentabramasta.com

Build notesUnder the hood, without the lecture

ShareSnap uses one draft to answer a visual question: what will this link feel like when it lands in four different feeds?

One draft, four visual rules

URL, title, description, and image live in one state model. Each platform card applies its own crop, spacing, colors, and text limits without duplicating the content.

Typesetting without the DOM

The downloadable OG card is drawn on a 1200 by 630 Canvas. Since Canvas has no automatic line wrapping, every candidate line is measured before a word is added.

Uploaded means local

The selected image becomes a temporary browser URL. It can appear in previews and on the exported card without becoming a public asset.

Canvas typeWrap a headline by measured width

for (const word of title.split(" ")) {
  const candidate = line ? `${line} ${word}` : word;
  if (context.measureText(candidate).width > maxWidth) {
    lines.push(line);
    line = word;
  } else line = candidate;
}

for (const word of title.split(" ")) { const candidate = line ? `${line} ${word}` : word; if (context.measureText(candidate).width > maxWidth) { lines.push(line); line = word; } else line = candidate; }