Guide: Code Screenshot
↑ Back to toolWhat it makes
Paste a snippet and download a PNG. This code screenshot tool is for a slide, a chat, or a social post where a picture of the code travels better than a fenced block. The picture sits under the editor and updates as you type.
How to use
- Paste the lines you want people to read. Load example if you want a starting snippet.
- Pick Night, Paper, or Ember. The picture under the editor changes immediately.
- If a note appears, shorten a line or delete lines past 40.
- Download the PNG from the side card.
Themes
- Night — a dark card. Use it when the post around it is dark, or when you want the code to stand out in a feed.
- Paper — a light card. Easier to read in a slide or a document with a white page.
- Ember — a warm dark card, for a different look from Night when you are posting more than one snippet.
What gets colored
Lines that start with // or # are comments. Text inside quotes is a string. Digits are numbers. Words such as function, return, const, class, and import are keywords. Everything else stays in the body color. A language that uses other comment marks, such as block comments, is not specially colored.
Length and width
Forty lines is the cap so the image stays a card and not a scroll of a whole file. The width grows with the longest line, then stops. Past that stop, the end of the line is clipped and the page tells you. Break the call onto the next line in the editor. The three window dots and the spoold.com mark are part of the picture, so leave them when you post it if you want people to find the tool.
Common mistakes
- Pasting a whole file. The 40th line is the last one in the PNG. Cut it down to the function you mean.
- One long line. Formatters sometimes leave a 200-character call on one line. Split it before you export.
- Expecting your editor’s theme. Night, Paper, and Ember are the three looks. They are not a copy of VS Code or JetBrains.
- Secrets in the snippet. The PNG is easy to post. Remove keys and tokens before you download.
FAQ
Does the snippet get uploaded?
No. The picture is drawn on a canvas in this browser. Download the PNG. The code is not sent anywhere to make the image.
How much code fits?
The first 40 lines. If you paste more, the page says so and the picture stops at line 40. A short function or a config block is the right length for a post.
What if a line is cut off?
The picture has a maximum width. A line that does not fit is clipped, and the page says a long line was cut off. Break that line in the editor and the picture updates.
Which languages get colors?
Comments, strings, numbers, and a shared set of keywords such as function, return, const, class, and import. It is a light highlight so the picture stays readable, not a full language server.
Can I post the picture?
Yes. Download the PNG and attach it. A small spoold.com mark sits in the corner.
Where is the preview?
Under the editor, at the width of the editor, so you can read it before you download. The download button stays in the side card.
Related terms
Code screenshot, code image generator, snippet to PNG, code to image, code snippet image.
Similar tools
To edit the snippet in a full editor first, open the code editor. The write-up is in the code screenshot guide.