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:

simple-api-config.json
{
	"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" | "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"



Any questions?
Don't hesitate to ask them! 👇