Simple Snap API

Learn how to automate the creation of beautiful code screenshots


Our powerful editor gives you the ability to create beautiful code snippets with ease. But sometimes you might want to create them programmatically. That’s why we’re building an API around the functionalities of snappify so you’re able to automate the process.

We started out with this “Simple Snap” API, where you can pass the code + style settings to our REST endpoint and receive the generated image. Our users leverage this API to e.g. create Twitter Posts automatically or generate beautiful OG Images in their services.

Hint đź’ˇ

The API is only available to users on our paid plans and if you want to remove the watermark, you have to upgrade at least to the Pro plan. Check our pricing table for more infos.

Usage

The API is available at https://api.snappify.com/snap/simple as a POST call.

You have to send your API-Key in the Authorization Header.

The configuration has to be sent as a JSON body. Here you can see an example config:

{
	"code": "function () {\n  console.log('hello world');\n}",
	"fileName": "test.js",
	"language": "JavaScript",
	"theme": "github-dark-dimmed",
	"background": "linear-gradient(354deg,  #FF75B5, #FFB86C)",
	"paddingLeft": 60,
	"paddingRight": 60,
	"paddingTop": 40,
	"paddingBottom": 100,
	"profileInfo": {
		"showFullname": true,
		"showUsername": true,
		"showAvatar": true,
		"position": "bottom-center"
	},
	"aspectRatio": {
		"width": 16,
		"height": 9
	}
}

Config Parameters

code

* required
Description

Pass your code as a string. Line breaks should be passed as \n.

Type
string

language

Description
The programming language which should be used for syntax highlighting.
Type
"abap" | "actionscript" | "angular html" | "angular typescript" | "apache" | "apl" | "applescript" | "assembly (x86 & x64)" | "assembly (arm)" | "astro" | "autoit" | "bash" | "c" | "c++" | "c#" | "clojure" | "cobol" | "css" | "cypher" | "dart" | "docker" | "elixir" | "elm" | "erb" | "erlang" | "fish" | "f#" | "gherkin" | "graphql" | "go" | "groovy" | "haskell" | "hcl (terraform)" | "html" | "ini" | "java" | "javascript" | "julia" | "jupyter" | "jsx" | "json" | "kotlin" | "latex" | "less" | "liquid" | "lisp" | "lua" | "markdown" | "matlab / octave" | "mdx" | "nginx" | "objective c" | "objective c++" | "ocaml" | "pascal" | "perl" | "php" | "plain text" | "pl/sql" | "powershell" | "prisma" | "python" | "r" | "ruby" | "rust" | "sass" | "scala" | "shell" | "smalltalk" | "solidity" | "sparql" | "sql" | "stylus" | "svelte" | "swift" | "toml" | "typescript" | "tsx" | "visual basic" | "vue" | "wasm" | "wolfram" | "xml" | "yaml" | "zsh"
Default
"javascript"

theme

Description
The theme which should be used for syntax highlighting.
Type
"bt-vivid-black" | "catppuccin-frappe" | "catppuccin-macchiato" | "catppuccin-mocha" | "dark-plus" | "darcula" | "dracula-soft" | "dracula" | "github-dark" | "github-dark-colorblind" | "github-dark-dimmed" | "jetbrains-dark" | "lucario" | "lucario-custom" | "material-darker" | "material-default" | "material-deep-ocean" | "material-ocean" | "material-palenight" | "mayukai-sunset" | "min-dark" | "monokai" | "nightowl" | "nord" | "one-dark-pro" | "panda-syntax" | "poimandres" | "rouge" | "shades-of-purple" | "shades-of-purple-sd" | "slack-dark" | "solarized-dark" | "sublime-oceanic" | "vitesse-dark" | "github-light" | "github-light-colorblind" | "catppuccin-latte" | "light-plus" | "material-lighter" | "min-light" | "nightowl-light" | "slack-ochin" | "solarized-light" | "vitesse-light"
Default
"github-dark-dimmed"

background

Description

The desired background color as CSS value. (Also supports transparent)

Type
string
Default
"linear-gradient(337deg, #654ea3, #da98b4)"

codeBackground

Description

The desired background color for the code snippet window. If nothing is passed, the default background color of the chosen theme will be used.

Type
string

hideBoxShadow

Description
Enables you to hide the box-shadow of the code window.
Type
boolean
Default
false

profileInfo

Description

Configuration for including your own profile info into the snap. If not specified, no profile info will be shown. You can configure your profile info on the dashboard.

Type
object

showFullname

Type
boolean
Default
false

showUsername

Type
boolean
Default
false

showAvatar

Type
boolean
Default
false

position

Type
"bottom-left" | "bottom-center" | "bottom-right"
Default
"bottom-left"

scale

Type
number
Default
1


fileName

Description

The filename which should be shown in the tab of the code snippet window. Leave empty for no tab at all.

Type
string

hideTab

Description
If specified, the whole tab-header of the code snippet window will be hidden.
Type
boolean
Default
false

showLineNumbers

Description
Enables line numbering in the code snippet.
Type
boolean
Default
false

firstLineNumber

Description
Specifies the first line number to count from.
Type
number
Default
1

fontSize

Description
You can specify the font size of your code snippet. Can be a value from 8 to 30.
Type
number
Default
14

fontLigatures

Description
Toggles the visibility of font ligatures in your code.
Type
boolean
Default
true

showWatermark

Description

Toggles the visibility of the snappify watermark.


If you’re on the personal plan, the watermark will always be shown.

Type
boolean
Default
false

paddingLeft

Type
number
Default
0

paddingRight

Type
number
Default
0

paddingTop

Type
number
Default
0

paddingBottom

Type
number
Default
0

aspectRatio

Description
Can be passed if the resulting image should keep a specific Aspect Ratio.
Type
object

width

Description
Width of the Aspect Ratio (e.g. 16).
Type
number

height

Description
Height of the Aspect Ratio (e.g. 9).
Type
number


highlights

Description

Let’s you specify various highlights for each line in your code snippet.

Type
object

1

Description
Highlight Options for the first line. (You can specify highlight options per line)
Type
object

opacity

Description
The opacity of the line. Must be between 0 and 1.
Type
number
Default
1

diff

Description
Let’s you visualize added or removed lines, like in a git diff.
Type
"added" | "removed"
Default
"none"

filter

Description
Let’s you apply a blur or grayscale filter to the line.
Type
"blur" | "grayscale"
Default
"none"