A code snippet image maker converts pasted code text into a PNG image, and the Code to Image Generator renders that PNG locally without uploading or executing the source. The tool is designed for readers who want a clean, screenshot-style file for documentation, an issue report, teaching material, or a social post. It measures pasted lines with a locally available monospace font, paints a fixed light or dark background, and encodes the completed bitmap as a PNG. The output uses natural canvas dimensions rather than a CSS-resized preview, so the downloaded file is not silently downsampled to fit the page. Every item is treated as inert text: tags, script-looking strings, event-handler text, template expressions, quotes, ampersands, and angle brackets are drawn as ordinary glyphs rather than parsed, injected into markup, evaluated, or run. The PNG contains rendered pixels, not editable source code or language-aware token colors, so keep the original separately when exact recovery or editable text matters. Measurement, painting, encoding, previewing, and downloading all happen in the browser; nothing is sent to Lizely.
What ends up in the PNG
The visual result is deliberately plain. Every line uses one foreground color, with dark text on a pale background in light mode or light text on a dark background in dark mode. The renderer does not infer a language, parse tokens, or apply syntax highlighting. A string that resembles a command remains a row of characters, so the image should not be read as evidence that the code was understood, validated, or run.
That distinction defines the safety boundary. The renderer does not parse, compile, evaluate, highlight, inject, import, or run code. Pasted tags and script-looking content never become DOM markup; the tool only paints characters onto a Canvas. The source stays in the page's active React state for the current page, while the PNG contains neither editable source nor machine-readable syntax.
Before sharing, review the source for credentials, tokens, private URLs, and personal information. Converting text to pixels does not conceal its contents.
Controls that shape the output
| Control | Available setting | Effect |
|---|---|---|
| Theme | Light or dark | Uses a fixed pale background with dark text or a dark background with light text. |
| Font size | 12 through 32 pixels | Sets the monospace text size and affects measured width and row height. |
| Padding | 16 through 96 pixels | Adds space around the text on both sides and above and below it. |
| Syntax coloring | None | Uses one foreground color rather than language-aware token colors. |
The font size and padding options are fixed whole-number pixel choices. The browser resolves the ui-monospace, SFMono-Regular, Menlo, Consolas, and generic monospace stack from fonts available on the device. Fallback fonts and rasterization can alter glyph edges or measured width, especially for emoji, uncommon scripts, and ligatures. The same browser and font environment should produce stable measurements for the same input and options, but pixel-identical output across computers is not promised.
Create the PNG from a code snippet
- Open the Code to Image Generator and paste the complete inert code text. Include every line and any blank rows you want represented, and check the total input, logical-line count, and longest line against the limits below.
- Choose Light or Dark, then select a whole-number font size from 12 through 32 pixels and padding from 16 through 96 pixels.
- Select Generate. The browser measures every complete line, calculates a bounded natural-size Canvas, paints the full opaque background, draws each line, and asynchronously encodes the Canvas as PNG. The preview can scale for display, but the export remains at natural size.
- Inspect the preview and result summary for the actual dimensions, logical line count, and PNG size. Confirm that the complete content is visible. Editing the code, theme, font size, or padding invalidates the previous result and requires another generation.
- Download code-image.png after completing those checks, and keep the original source separately for editing or exact character recovery.
Limits checked before and during export
The generator accepts a complete input only when it fits the source, Canvas, and PNG boundaries below.
| Resource | Maximum allowed |
|---|---|
| Total input length | 50,000 UTF-16 code units |
| Logical lines | 200 |
| Any single line | 2,000 UTF-16 code units |
| Canvas width | 8,192 pixels |
| Canvas height | 8,192 pixels |
| Canvas pixel area | 32,000,000 pixels |
| Completed PNG Blob | 20 MiB |
Exact boundary values are accepted; the next code unit, line, edge pixel, total pixel, or byte is rejected. Empty input is rejected too. An over-limit request fails explicitly and creates no partial download. The workflow does not automatically clamp dimensions, skip lines, crop a region, retry at lower resolution, or silently recompress the PNG.
LF, CRLF, and CR are recognized as line separators. Accepted text is never silently shortened. Empty lines and a final trailing line break remain represented as image rows, while tabs and printable Unicode pass to the Canvas text renderer unchanged. Disallowed control characters and unpaired Unicode surrogates trigger an explicit error rather than being replaced or lost.
How the natural image dimensions are calculated
Width is based on the widest measured complete line: the content extent is rounded upward, then left and right padding are added. Height uses a line height equal to the ceiling of one and one-half times the selected font size, multiplied by the complete logical line count, with top and bottom padding added afterward. The result summary reports the dimensions actually assigned to the output Canvas.
The browser uses Canvas measureText to measure each preserved line and Canvas fillText to draw it. After the Canvas is resized, the drawing context is obtained again and the font, baseline, alignment, direction, kerning, background, and foreground settings are reapplied because resizing resets Canvas state. The complete opaque background is painted before any text. Each line starts at the same left padding position with a top baseline, and a blank line still consumes its full row.
The exported file comes from the natural-size offscreen Canvas rather than the CSS-scaled preview. This means the preview can fit inside the page without silently reducing the dimensions or resolution of code-image.png.
How failed generations are handled
PNG encoding is asynchronous, so the generate button remains disabled only while the active PNG callback is pending. Starting a generation invalidates the earlier job, revokes its local Object URL, removes the old result and error, and enters a busy state. Editing the code or any display setting causes the same immediate invalidation. A generation identifier and mounted-state guard prevent an older callback from replacing a newer result or publishing after the page unmounts; a URL created by a stale callback is revoked immediately.
If Canvas is unavailable, text measurement is invalid, dimensions exceed a budget, PNG encoding returns null, the PNG is invalid or zero-byte, its size is excessive, or Object URL creation fails, the current generation reports an error and publishes no download. The previous successful output is already removed before new work begins, so it cannot be mistaken for the new result.
Share the image without losing the source
The tool is intended for compact visual sharing, documentation illustrations, issue reports, teaching material, and social posts. It is not a code editor, compiler, sandbox, secret scanner, syntax validator, formatter, OCR system, or accessibility replacement for selectable source.
The PNG stores rendered pixels rather than editable source text, syntax structure, font files, runtime output, or execution results. Keep the original separately whenever editability, exact character recovery, review history, accessibility, or archival fidelity matters. A picture also does not prove that the code is correct, secure, licensed, formatted, or runnable.
Review the pasted code for credentials, tokens, private URLs, and personal information before distributing the image. The local rendering workflow protects the source from upload and execution, but it does not remove sensitive content from the resulting PNG.