Using the editor
/editor is a visual tool for building an og:image: pick a template, fill in a form generated from that template's own schema, see a live preview, and get back a URL or a downloadable image. The card is 1200×630, the size X, LinkedIn, Facebook, Slack and Discord show for a full-width link preview. You do not need an account to design a card; signing in is only needed for the clean PNG download. Below are the four steps, what each output gives you, and what to do once the card is ready: put the tag in your page and confirm it with the OG image checker.
1. Pick a template
The template picker lists every registered template (the same catalog list_templates in the
MCP server exposes). Use the search box or a tag filter to narrow the list down.
2. Fill in the form
The form is generated from the picked template's real field definitions — every field, its type, and its limits come directly from the template, never a hand-kept copy. The preview updates live as you type.
3. Platform previews
Switch between X and LinkedIn to see how the card is cropped on each platform — both crop the same 1200×630 card to their own aspect ratio; the editor doesn't render a second image per platform.
4. Get your image
- Public /p URL + <meta> snippet — unsigned (no signature, just your key ID and the template's own allow-list), and only available once the picked template is inside one of your account's public keys' allow-lists (create or edit a key from /app).
- Clean PNG download — no watermark and doesn't count against your quota, for any template, but requires signing in first: a signed-out visitor sees a sign-in prompt instead of the file.
Reset and reload
"Reset" clears the form back to the template's defaults. The form's state is encoded into the page URL's hash, so reloading the page — or sharing the link — restores exactly what you had.
After the card is ready
Add the meta tag to the page's <head>, then paste the page's URL into the
OG image checker to confirm the tags and the image. To write the rest of the tags,
use the meta tag generator. To render a card per page from code or from a
page URL, see the quickstart and URL
templates.
Questions
Where do the editor's form fields come from?
Each form is generated from the picked template's own field definitions, so every field, its type and its limits match what the renderer accepts.
Does the editor render a separate image per platform?
No. It renders one 1200x630 card. The X and LinkedIn previews only show how each platform crops it.
What do I get when I finish a card?
A clean PNG download (no watermark, and it does not count against your quota; you sign in to download it), plus a public image URL and a meta tag snippet once the template is on one of your public keys' allow-lists.
How do I undo a reset?
Reset restores the template's sample content, and the editor offers an Undo link right after. The form state also lives in the page URL, so a copied link brings the card back.