Code Editor

Get to know the code editor element in detail.

The code editor is the core element of snappify. Doesn't matter if you want to turn your code into a beautiful image, embed it on another website, or share it with anyone else - the code editor element let's you present your code in many beautiful ways.

Let's dive into it and see how it works πŸ‘‡

Code Explanations

There's a context-menu option which enables you to easily explain certain parts of your code snippets.

Just select a piece of code, right-click and select "Explain" from the context-menu. You can see how it works in the video below.

Video showing the new code explanation feature

When you add a new code explanation, three elements will be added to your canvas:

  • A Rectangle, positioned excactly at your selected code
  • A Rich-Text element, positioned right to the Rectangle and containing a placeholder text, ready for you to type in your explanation (just type Enter on your keyboard)
  • An Arrow element, pointing from the Rich-Text to the Rectangle. It's attached to both elements so when you e.g. move the Rich-Text element, the arrow will still point to the Rectangle and vice-versa

AI Explanations

On the context-menu of the Code Editor you'll find a second menu item called "Explain with AI" which enables you to add explanations to your code snippets using our AI-powered solution.

It works the same as the normal Code Explanations described above, but our AI will generate an explanation for the code you've selected. You can then edit the explanation to your liking.

Depending on your Subscription Plan you'll have several explanations available per month.

Video showing the AI code explanation feature


To display the filename of your code, simply click on the plus icon in the tab. If the file has a recognized extension, you'll see the associated icon next to the filename.

Adding a filename to the code editor
Adding a filename to the code editor

Note: The plus icon or the close icon won't be visible when exporting an image, sharing the snap via the public link, or using iframe embedding.

Right toolbar

Let's have a look at the right toolbar and what you can configure there.


We provide an interactive User-Interface for the padding settings. Usually the top and bottom as well as the left and right paddings are linked together. But you can also change them individually by clicking on the line between them.

Video showing how to change the padding of the code editor

In case you prefer to enter the padding values manually, you can do so by clicking on the icon-button like seen in the video above.

Advanced Styles

The code-editor elements supports the following advanced styles:

  • Opacity
  • Blur
  • Scale
  • Rotation
  • Tilting
  • Border-radius (default: 10px)
  • Box shadow
  • Grayscale
  • Sepia
  • Hue rotation

Programming Language

The syntax highlighting in your code is based on the programming language you're using. Right now, the system doesn't automatically detect the language, so you'll need to select it manually.


To customize the appearance of your code editor, select a theme from the "Theme" dropdown menu. This will change the background color and the colors used for syntax highlighting of the code-editor. If you prefer a light theme, click the "lightbulb" icon button to get all available light themes.

Activate light theme
Activate light theme

Pro: Tip πŸ’‘

For skimming through the themes quickly, you can focus the "Theme" dropdown and press the UP or DOWN arrow keys.

Line numbers

If you prefer to have line numbers in your code, you can enable line numbering in the code editor and specify the starting number for the line count.

Tab size

By default the tab size is set to 2 spaces. You can change the tab size up to 6 spaces.

Code highlighting

Enhance the presentation of your code with our line highlighting feature. Simply select the lines you want to highlight and choose from our range of highlighting options.

  • Opacity: 25%, 50%, 75% or 100% (default)
  • Washout: Blur or Gray-Out
  • Git-diff: Added or Removed
Variation of code highlighting
Variation of code highlighting

Window Control

We offer a variety of window controls to customize the look and feel of your code editor.

Variation of window controls
Variation of window controls

Editor color

The editor color is the background color of the code editor. Each theme has a default editor color, but you can customize it to any color you prefer. Gradient colors and colors with transparency (alpha channel) are also supported. You can experiment with different colors to find the one that works best for you.

linear-gradient(145deg, rgba(20, 20, 23, 0.47), rgba(20, 20, 23, 0.83), rgba(20, 20, 23, 0.56))
linear-gradient(145deg, rgba(20, 20, 23, 0.47), rgba(20, 20, 23, 0.83), rgba(20, 20, 23, 0.56))


You can adjust the border of the code editor to achieve even more unique styles.

Border styling possibilities
Border styling possibilities

Window tab

Even though the code editor window tab is the most prominent design aspect of our product, we still offer plenty of options for customizing it! For example, you can use the "accent" switch to change the accent color of the window tab. Or, if you want to hide the window tab completely, you can use the "hide" switch to do that.


The default font for our code editor is the popular MonoLisa font, but you have the option to choose from other fonts as well. We regularly add new fonts to our system, so you can always find the perfect font for your code.

You can also customize the font size and enable font ligatures (if the font supports it) to suit your preferences.

Format code

Our code formatter can help you format your code quickly and easily. Simply click on the "Format Code" button or use the keyboard shortcut to access it. ( + S)

Any questions?
Don't hesitate to ask them! πŸ‘‡