Pixl

A minimalist edge service that generates embeddable OpenGraph images on demand

Live Demo

Pixl

Creating social media preview cards usually takes too much time or requires heavy design tools. Pixl simplifies this by providing a straightforward interface to generate OG images instantly. The focus is purely on typography and simple backgrounds.

📋 Features

The tool is kept lean with only the essential features:

  • 5 Aesthetic Templates:
    • Minimal (“Silicon Sleek”): Clean, dark tech aesthetic.
    • Pattern (“Frosted Grid”): A dark cyber grid with a premium frosted glassmorphism card.
    • Plain (“Editorial Stone”): High-end editorial magazine layout.
    • Gradient (“Ethereal Mesh”): Breathtaking, soft pastel mesh gradients.
    • Canvas (“Gallery Mat Board”): Physical art gallery aesthetic.
  • Extended Customization: Add custom logos, site names, social handles, and CTA buttons to your images.
  • Alignment Control: Option to center your text with one click.
  • Live Preview: See your changes instantly as you edit.

💻 Tech Stack

  • Next.js: For the framework and image rendering.
  • Tailwind CSS: For the styling and layout.

🛠️ Using Pixl

Pixl is a free service that generates OG images on-the-fly using URL parameters.

Basic URL Structure

https://pixl-og.vercel.app/api/og?heading=YOUR_TITLE&text=YOUR_DESCRIPTION&template=canvas&logoUrl=https%3A%2F%2Fimg.barkahfadhil.com%2Ffavicon.svg&siteName=barkahfadhil.com&social=IG%3A+%40fadhilsas&cta=Read+more+%E2%86%92&centered=false

Parameters Explained

  • heading - The main title of your page
  • text - The description or subtitle
  • template - Visual style (minimal, pattern, plain, gradient, canvas)
  • logoUrl - Absolute URL to your logo/avatar
  • siteName - Name of your website or brand
  • social - Your social media handle (case-sensitive)
  • cta - Call to Action text
  • centered - Text alignment (true or false)

Example

For a page with:

  • Title: “10 Tips for Better Productivity”
  • Description: “Simple strategies to boost your daily workflow”

The URL would be:

https://pixl-og.vercel.app/api/og?heading=10%20Tips%20for%20Better%20Productivity&text=Simple%20strategies%20to%20boost%20your%20daily%20workflow&template=canvas&logoUrl=https%3A%2F%2Fimg.barkahfadhil.com%2Ffavicon.svg&siteName=barkahfadhil.com&social=IG%3A+%40fadhilsas&cta=Read+more+%E2%86%92&centered=false

Implementation in HTML

Add these meta tags to your HTML <head> section:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://pixl-og.vercel.app/api/og?heading=Your%20Page%20Title&text=Your%20page%20description&template=canvas&logoUrl=https%3A%2F%2Fimg.barkahfadhil.com%2Ffavicon.svg&siteName=barkahfadhil.com&social=IG%3A+%40fadhilsas&cta=Read+more+%E2%86%92&centered=false" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://yoursite.com/your-page" />
<meta property="twitter:title" content="Your Page Title" />
<meta property="twitter:description" content="Your page description" />
<meta property="twitter:image" content="https://pixl-og.vercel.app/api/og?heading=Your%20Page%20Title&text=Your%20page%20description&template=canvas&logoUrl=https%3A%2F%2Fimg.barkahfadhil.com%2Ffavicon.svg&siteName=barkahfadhil.com&social=IG%3A+%40fadhilsas&cta=Read+more+%E2%86%92&centered=false" />