Social Media Editor

When to use Social Media Editor

• Creating launch announcement graphics: Design a single post image at the correct pixel size for each platform without switching between tools or resizing exports manually.
• Open Graph image production: Build the 1200 x 630 px OG image that appears when your page is shared on Slack, WhatsApp, LinkedIn, and X without a design tool subscription.
• Quick quote cards and stat graphics: Add a text overlay to a brand background at the exact platform size, then export directly - useful for teams without a designer on call.
• Testing visual hierarchy at platform size: Mock up a social image at true pixel dimensions to verify text is legible and the hierarchy reads correctly at the size users actually see.

How the editor handles platform-specific canvas sizes and exports

The Social Media Editor provides preset canvas sizes for every major social platform, based on published platform guidelines. The dimensions covered include: X (Twitter) post at 1200 x 675 px, LinkedIn post at 1200 x 627 px, LinkedIn article cover at 1920 x 1080 px, Instagram square at 1080 x 1080 px, Instagram landscape at 1080 x 566 px, Instagram portrait at 1080 x 1350 px, Facebook post at 1200 x 630 px, and Open Graph image at 1200 x 630 px (compatible with WhatsApp, Slack, and Discord link previews). Selecting a preset immediately resizes the canvas to the correct pixel dimensions.

The editor runs entirely in the browser using an HTML5 Canvas element. Text, shapes, and image layers are drawn onto the canvas using the Canvas 2D API. Uploaded images are rendered using drawImage() with object-fit: contain semantics applied manually - the image is scaled to the largest size that fits within the canvas while preserving its aspect ratio. Layer ordering is maintained in a JavaScript array, and redrawing the full canvas on each state change ensures what you see matches the exported output.

Export uses canvas.toBlob() with the 'image/png' mime type, which produces a lossless PNG at the exact canvas pixel dimensions. Because the canvas pixel dimensions match the platform-recommended sizes, the exported file requires no additional resizing before upload. The tool does not transmit images to a server - all processing happens locally in the browser.