Social card Beta

Post.vue

SnapRulers

Post1200 × 630

Double-click text to edit · Scroll to pan · ⌘/Ctrl + scroll to zoom · Hold Space to pan · ⇧1 fit

Post.vue

Edit the code and the design follows. Click a line to select its element; select an element to find its code.

<template>
<article aria-label="Small ideas. Worth sharing." style="position:relative;width:1200px;height:630px;overflow:hidden;background:#f4f1ea">
	<div style="position:absolute;box-sizing:border-box;margin:0;left:0px;top:0px;width:24px;height:630px;z-index:0;opacity:1;border-radius:0px;box-shadow:none;border:none;background-color:#e4572e;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none"></div>
	<p style="position:absolute;box-sizing:border-box;margin:0;left:80px;top:72px;width:640px;height:40px;z-index:1;opacity:1;border-radius:0px;box-shadow:none;border:none;background-color:transparent;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:Arial, Helvetica, sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:4px;color:#e4572e;text-align:left;font-style:normal;text-decoration-line:none;text-transform:none;overflow-wrap:break-word">DOM STUDIO / FIELD NOTES</p>
	<p style="position:absolute;box-sizing:border-box;margin:0;left:80px;top:160px;width:1000px;height:260px;z-index:2;opacity:1;border-radius:0px;box-shadow:none;border:none;background-color:transparent;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:Arial, Helvetica, sans-serif;font-weight:900;font-size:104px;line-height:1.02;letter-spacing:-3px;color:#171717;text-align:left;font-style:normal;text-decoration-line:none;text-transform:none;overflow-wrap:break-word">Small ideas.<br>Worth sharing.</p>
	<p style="position:absolute;box-sizing:border-box;margin:0;left:80px;top:470px;width:900px;height:60px;z-index:3;opacity:1;border-radius:0px;box-shadow:none;border:none;background-color:transparent;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-size:32px;line-height:1.3;letter-spacing:0px;color:#525252;text-align:left;font-style:normal;text-decoration-line:none;text-transform:none;overflow-wrap:break-word">Made with real HTML. Ready for your next idea.</p>
</article>
</template>

Every format · live previews that follow each layer's pins (data-pin-x, data-pin-y)

Templates

Every template opens at 1080 × 1350 and stays editable. Your current design is replaced; undo brings it back. Saving always adds a new template.

Industry

Post type