YAML

YAML Code Screenshot Generator

Turn YAML snippets into images worth sharing, without leaving your Mac.

YAML screenshots are almost always CI config, and the indentation is almost always the thing that is wrong.

Codeshot detects YAML from the code you paste, so there is no language picker to get wrong. Here is the same snippet in three of the 30 themes it ships with, rendered with the app's own stylesheets.

name: build
on:
  push:
    branches: [main]

jobs:
  site:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

Edge · dark

name: build
on:
  push:
    branches: [main]

jobs:
  site:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

GitHub · dark

name: build
on:
  push:
    branches: [main]

jobs:
  site:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

Solarized · dark

Choosing a theme for YAML

Because whitespace is the syntax, keep the snippet short enough that every level of nesting is visible in one frame. Line numbers help here, unusually.

Getting the size right

Let the image follow your content, or lock it to a ratio — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, or 3:4 — then export at 1×, 2×, or 3× so it stays sharp on a retina display. Copy it straight to the clipboard with ⌘⇧C, or save with ⌘S.

See all 30 themes side by side, or read the full workflow.

Built for YAML, and 59 other languages

Everything runs on your Mac. Your code never leaves it.

Download for macOS