GraphQL

GraphQL Code Screenshot Generator

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

GraphQL queries are mostly shape, which is why they read well as an image and badly as a wrapped paragraph of text.

Codeshot detects GraphQL 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.

query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
Atom One · dark
query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
GitHub · dark
query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
Panda Syntax · dark

Choosing a theme for GraphQL

The nesting is the message. Pick a ratio tall enough that the full selection set fits without the last field being cut off.

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 GraphQL, and 59 other languages

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

Download for macOS