Docs

Gera imagens Open Graph prontas pra compartilhar. Rápido, sem cadastro, sem editor gráfico.

Como usar

1. Acesse a tool
2. Digite o Título (obrigatório, até 65 caracteres)
3. Digite o Subtítulo (opcional, até 95 caracteres)
4. Escolha uma paleta
5. Veja o preview ao vivo
6. Clique em Download PNG

A imagem sai em 1200×630 PNG — tamanho exato que Twitter, LinkedIn, Discord e WhatsApp esperam.

Paletas

Marca d'água

Toda imagem inclui cajuos.dev no canto inferior direito — sutil, menos de 5% da área. Não removível.

v1.1

• Logo: upload PNG/JPEG/SVG/WebP, renderizado no canto superior esquerdo (máx 80px). Título reposiciona automaticamente.
• Fundo: upload de imagem com crop cover. Escurecimento ajustável: Nenhum / Leve / Médio / Forte.
• Layout: Centralizado ou Alinhado à esquerda.
• Tamanhos: OG (1200×630), Square (1080×1080), Instagram (1200×1200).
• Copiar PNG: navigator.clipboard.write — cola direto em redes sociais.

v1.2

• Ícone decorativo: selecione entre 10 SVG icons inline (flame, target, star, bulb, rocket, pin, palette, sparkle, diamond, bolt). Renderizado no canvas como Image bitmap — consistente em qualquer navegador.
• Fundo procedural: gera fundo único via seed aleatória — gradiente multicolor + círculos + retângulos translúcidos.
• URL params: compartilhe presets via ?title=Texto&palette=slate&size=square&layout=left&icon=flame.
• Formato: exporte como PNG, JPEG ou WebP.
• Presets sociais: botões rápidos que configuram paleta, layout e ícone para Twitter / LinkedIn / Blog.
• Contador de caracteres: N/65 no título, N/95 no subtítulo.
• Aviso de emoji: alerta se o texto contém emoji que não renderiza no Canvas.
• Atalhos: Enter baixa a imagem, Ctrl+C copia PNG.

v1.3

• Templates: salva/carrega presets no localStorage. Nomeie e carregue com 1 clique.
• Fontes: Inter, DM Sans e Space Grotesk — carregadas via next/font/google.
• Peso e espaçamento: peso 500/600/700/800 e letter-spacing 0/0.5/1/2px no título.
• Sombra do texto: Nenhum / Sutil / Forte — melhora legibilidade em fundo claro.
• Drag & drop: arraste uma imagem direto no preview. Quadrada menor que 200px vira logo.
• Galeria de exemplos: 6 presets (Twitter, LinkedIn, Blog, Produto, Minimal, Devlog) — clique pra aplicar.
• Contador de uso: "Você gerou N imagens hoje" com persistência diária.
• Botão Tweetar: compartilhe a tool no X/Twitter.
• Badge de tamanho: label "OG 1200×630" no preview.
• Render otimizado: requestAnimationFrame com shimmer de carregamento.

Futuro

• API endpoint
• Login e histórico

Stack

Canvas API, Next.js 16, Tailwind v4, zero dependências.

Código

const canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext("2d")!;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 1200, 630);

Open source no GitHub.