Val Town Code Snippet OG Image Generator

This service generates Open Graph images for Val Town code snippets, making your code look great when shared on social media.

Features

  • Generates aesthetically pleasing code snippet images using Satori
  • Supports both single lines and line ranges
  • Automatically redirects to the original Val Town URL
  • Preserves syntax formatting

How It Works

Simply use a URL in this format:

https://[this-service-url]/x/{username}/{project}/{filepath}?L={line}

When this URL is shared on platforms like Twitter, Slack, or Discord, it will display a beautiful code snippet image and redirect to the original Val Town URL.

Technical Details

This service uses:

  • Satori - Vercel's library for generating SVG from HTML/CSS
  • Inter font from Google Fonts

Usage Examples

Single Line Example

/x/stevekrouse/sqlite/main.tsx?L=10

Line Range Example

/x/stevekrouse/sqlite/main.tsx?L=10-15

Direct SVG Access

You can directly access SVGs at:

/svg/{username}/{project}/{filepath}?L={line}

Tips

  • For best results, keep line ranges reasonably small (up to 10 lines)
  • The service will automatically truncate very long snippets
  • Works with any public Val Town code