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