ray.so Code Snippet Image Generator

Generate beautiful code snippet images using ray.so and save them locally.

Requirements

• The user MUST provide the code snippet, either directly or by pointing to a file/selection in context

• MUST ask the user for ALL styling parameters before generating, presenting ALL available options

• MUST use agent-browser for screenshot capture (check availability first)

Workflow

Step 1: Verify agent-browser Availability

Before proceeding, verify that agent-browser is available:

which agent-browser

If agent-browser is not found in the PATH, inform the user that this skill requires agent-browser and cannot proceed without it.

Step 2: Fetch Available Options

Fetch the current themes and languages from ray.so's GitHub repository using curl:

# Fetch and parse available themes

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

# Fetch and parse available languages

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u

Step 3: Ask User for ALL Parameters

MUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order:

#### 3.1 Theme Selection

Present ALL available themes. In the question, list every theme fetched from step 2. Example:

Question: "Which theme would you like?"

Description: "Available themes: [list ALL themes from curl output]"

Options (pick 4 popular ones for quick select):

- breeze (default, purple gradient)

- midnight (cyan-blue)

- vercel (minimalist dark)

- sunset (warm orange)

Note: User can select "Other" to type any theme from the full list

#### 3.2 Language Selection

Infer the language when possible. Skip this question if:

• The user explicitly specified a language

• The code comes from a file with a clear extension (e.g., .py → python, .js → javascript, .ts → typescript, .rs → rust, .go → go, etc.)

• The syntax is unmistakably identifiable (e.g., def/import → python, func/package → go, fn/let mut → rust)

Only ask this question if the language cannot be confidently inferred:

Question: "Which language for syntax highlighting?"

Description: "Available languages: [list ALL languages from curl output]"

Options:

- auto (auto-detect)

- javascript

- python

- typescript

Note: User can select "Other" to type any language from the full list

#### 3.3 Dark/Light Mode

Question: "Dark or light mode?"

Options:

- Dark mode (default)

- Light mode

#### 3.4 Background

Question: "Show the gradient background?"

Options:

- Yes, show background (default)

- No, transparent/minimal background

#### 3.5 Padding

Question: "How much padding around the code?"

Options:

- 16 (compact)

- 32 (small)

- 64 (medium, default)

- 128 (large)

#### 3.6 Line Numbers

Question: "Show line numbers?"

Options:

- No (default)

- Yes

#### 3.7 Title

Question: "Add a title above the code? (e.g., filename)"

Options:

- No title (default)

- Yes, add title

If yes, ask for the title text.

Note: Do NOT ask about output path/filename. Save to the current working directory with a sensible filename (e.g., rayso-snippet.png, or based on the title if provided like fibonacci.png). Only use a different path if the user explicitly specifies one in their original request.

Step 4: Build the ray.so URL

CRITICAL: ALL parameters must be in the URL hash (after #), NOT in the query string.

Build the URL using shell commands:

# 1. Base64 encode the code

CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)

# 2. URL encode the base64 string

CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

# 3. Build the URL with ALL parameters in the hash

# Format: https://ray.so/#param1=value1&param2=value2&code=ENCODED_CODE

# Do NOT include width parameter - let ray.so auto-size to fit content

URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"

# Add optional parameters if needed:

# If lineNumbers: add "&lineNumbers=true" before &code=

# If title: add "&title=URL_ENCODED_TITLE" before &code=

URL Hash Parameters:

Parameter

Values

Default

theme

Any theme from list

breeze

padding

16, 32, 64, 128

64

background

true, false

true

darkMode

true, false

true

language

Any language from list, or "auto"

auto

lineNumbers

true, false

false

title

URL-encoded string

(none)

width

Number (pixels)

auto

code

Base64-encoded, then URL-encoded

(required)

Note on width: Do NOT include the width parameter unless you specifically need a fixed width. Without it, ray.so auto-sizes the frame to fit the code content, avoiding unnecessary empty space.

Example URL construction:

# For code: for i in range(23):\n    print(i)

# Theme: midnight, Padding: 64, Dark mode: true, Background: true, Language: python, Title: test.py

CODE='for i in range(23):

    print(i)'

CODE_BASE64=$(echo -n "$CODE" | base64)

CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")

URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"

echo "$URL"

Step 5: Capture High-Quality Image with agent-browser

MUST use agent-browser (verified in Step 1). This approach uses the html-to-image library (same as ray.so's internal export) with high pixelRatio for crisp, sharp text rendering.

IMPORTANT: Always use a unique session name with --session to avoid stale session issues.

# Generate unique session name

SESSION="rayso-$(date +%s)"

# 1. Set viewport

agent-browser --session $SESSION set viewport 1400 900

# 2. Open the URL

agent-browser --session $SESSION open "$URL"

# 3. Wait for the page to fully render

agent-browser --session $SESSION wait --load networkidle

agent-browser --session $SESSION wait 3000

# 4. Load html-to-image library (same library ray.so uses internally)

agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 5. Capture at 4x resolution using html-to-image (produces crisp text)

agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

# 6. Close the browser

agent-browser --session $SESSION close

# 7. Convert data URL to PNG file

DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')

echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png

# 8. Clean up temp file

rm /tmp/rayso-dataurl-$SESSION.txt

Critical notes:

• Uses html-to-image library which is what ray.so uses for its own export feature

• pixelRatio: 4 produces high-DPI images with crisp, sharp text (4x native resolution)

• The data URL is captured directly from the library, not from a screenshot

• No ImageMagick required - pure browser-based rendering at high resolution

• Output is correctly sized with no extra whitespace

Step 6: Confirm Output and STOP

Report the saved file location to the user. The task is complete - do not perform any additional checks, explorations, or verifications after the screenshot is saved.

Complete Example

User: "Create a code snippet image of this Python function"

def fibonacci(n):

    if n <= 1:

        return n

    return fibonacci(n-1) + fibonacci(n-2)

-

Check which agent-browser - confirmed available

-

Fetch themes and languages:

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

-

Ask user for parameters via AskUserQuestion:

• Theme: user selects "midnight"

• Language: inferred as python from def syntax - not asked

• Dark mode: user selects "Dark mode"

• Background: user selects "Yes"

• Padding: user selects "64"

• Line numbers: user selects "No"

• Title: user selects "No title"

-

Build URL (all params in hash, no width for auto-sizing):

CODE='def fibonacci(n):

    if n <= 1:

        return n

    return fibonacci(n-1) + fibonacci(n-2)'

CODE_BASE64=$(echo -n "$CODE" | base64)

CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

URL="https://ray.so/#theme=midnight&#x26;padding=64&#x26;background=true&#x26;darkMode=true&#x26;language=python&#x26;code=${CODE_ENCODED}"

• Capture high-quality image:

SESSION="rayso-$(date +%s)"

agent-browser --session $SESSION set viewport 1400 900

agent-browser --session $SESSION open "$URL"

agent-browser --session $SESSION wait --load networkidle

agent-browser --session $SESSION wait 3000

# Load html-to-image library

agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# Capture at 4x resolution

agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

agent-browser --session $SESSION close

# Save as PNG

DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')

echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png

rm /tmp/rayso-dataurl-$SESSION.txt

• Report: "Saved code snippet image to ./fibonacci.png"

Image Resolution and Quality

This skill uses the html-to-image library with pixelRatio: 4 to produce high-quality images with crisp, sharp text. This is the same rendering approach that ray.so uses for its built-in export feature.

Output quality:

• Default: 4x native resolution (frame auto-sizes to content, then rendered at 4x)

• Text is rendered at high DPI, not upscaled from low resolution

• Gradient backgrounds and all CSS styling are preserved

• No unnecessary empty space (frame auto-sizes to fit code)

Adjusting resolution:

• For smaller files: Change pixelRatio:4 to pixelRatio:2 in the eval command

• For maximum quality: Use pixelRatio:6 (same as ray.so's "6x" export option)

Forcing a specific width:

• Only add &width=NUMBER to the URL if you need a fixed width (e.g., for consistent sizing across multiple images)

Troubleshooting

• If agent-browser is not available: Inform the user and do not proceed

• If curl fails to fetch themes/languages, use these common defaults:

• Themes: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind

• Languages: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash

• If parameters aren't applied: Ensure ALL parameters are in the URL hash (after #), not the query string

• If title isn't showing: The title parameter must be in the hash: #title=filename.py&code=...

• If html-to-image fails to load: Check network connectivity; the library loads from jsdelivr CDN

• If capture returns empty: The frame selector #frame > div may have changed; inspect the page structure

• For very long code snippets, ray.so may truncate; consider splitting into multiple images

• If the page doesn't load properly, increase the wait time (try 4000ms or more)

• If you get a blank page: Use a fresh unique session name with --session flag

• If data URL is malformed: Ensure quotes and newlines are stripped before base64 decoding