Skip to content
Lizely

Code to Image Generator

Turn complete code text into a clean light or dark PNG locally, without uploading or executing it.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Paste the complete inert code text within the character, line, and per-line limits.
  2. 2.Choose a light or dark theme, font size, and padding, then generate the bounded natural-size PNG.
  3. 3.Check the preview, actual dimensions, line count, and PNG size, then download code-image.png.

About Code to Image Generator

Code to Image converts plain code text into a PNG screenshot-style image in the current browser tab. Paste text, choose a fixed light or dark palette, select a font size from 12 through 32 pixels, choose padding from 16 through 96 pixels, and generate the image. The browser measures every complete line with the selected local monospace font stack, allocates a bounded Canvas at natural output dimensions, paints the entire background, draws each line with Canvas fillText, and encodes the finished bitmap as PNG.

The input is always inert text. This tool does not parse, compile, evaluate, highlight, inject, import, or run code. HTML tags, script-looking strings, event-handler text, template expressions, quotes, ampersands, and angle brackets remain ordinary Canvas text. They are never assigned to innerHTML or inserted as DOM markup. No syntax-highlighting grammar, package, remote renderer, or language runtime is used, so the output deliberately uses one foreground color and cannot claim language-aware token coloring. A string that looks executable is only a sequence of glyphs.

Accepted text is never silently shortened. Empty lines and a final trailing line break remain represented as image rows. LF, CRLF, and CR are recognized as line separators. Tabs and printable Unicode are passed to the Canvas text renderer unchanged. Disallowed control characters and unpaired Unicode surrogates are rejected with an explicit error instead of being replaced or lost. The source is kept only in the active React state for the current page; it is not embedded as editable source or machine-readable syntax in the PNG.

Font fallback and glyph shape can vary between operating systems because the browser resolves the declared ui-monospace, SFMono-Regular, Menlo, Consolas, and generic monospace stack from locally available fonts. 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. Emoji, uncommon scripts, ligatures, antialiasing, hinting, and fallback fonts can change the measured width or rasterized glyph edges. The result summary reports the dimensions actually assigned to the output Canvas.

The width calculation measures every preserved line after setting the chosen font. It takes the largest finite measured width, rounds the content extent upward, and adds padding on both sides. Height uses a line height equal to the ceiling of one and one-half times the font size, multiplied by the complete logical line count, plus top and bottom padding. After assigning Canvas width and height, the drawing context is obtained again because resizing resets Canvas state. Font, baseline, alignment, direction, kerning, background, and foreground are therefore explicitly reapplied before drawing.

The complete Canvas is painted with the selected opaque background before any text. Light mode uses a pale background and dark foreground; dark mode uses a dark background and light foreground. Each line is drawn left aligned from the same padding position with a top baseline. Blank lines consume their full row even though they paint no glyph. The exported PNG comes from this natural-size offscreen Canvas, not from the CSS-scaled preview, so the downloaded file is not silently downsampled to fit the page. The preview constrains only on-screen display.

Strict resource limits protect the tab before large Canvas allocations occur. Input may contain at most 50,000 UTF-16 code units, 200 logical lines, and 2,000 code units on any one line. Canvas width and height may each be at most 8,192 pixels, and total area may be at most 32,000,000 pixels. The complete PNG Blob may be at most 20 MiB. Exact limits are accepted and the next unit, line, edge pixel, total pixel, or byte is rejected. Invalid or zero-byte PNG output is also rejected. No automatic clamp, skipped-line count, cropped region, partial image, lower-resolution retry, or silent recompression is used.

PNG encoding is asynchronous. Starting a generation invalidates the prior job, revokes its local ObjectURL, removes the old result and error, and enters a busy state. Editing code, theme, font size, or padding performs the same invalidation immediately. A generation identifier and mounted-state guard prevent an older toBlob callback from replacing a newer result or publishing after unmount. If a stale callback creates a URL before it detects replacement, that URL is revoked immediately. Current result URLs are revoked on edit, replacement, and component cleanup.

If Canvas is unavailable, a text measurement is invalid, dimensions exceed a budget, PNG encoding returns null, PNG size is invalid or excessive, or ObjectURL creation fails, the current generation reports an error and publishes no download. The old successful output is already gone before work begins. The generate button stays disabled only while the active PNG callback is pending. Because all drawn material is local text and solid colors, the Canvas has no cross-origin image source and does not become tainted through this workflow.

All measurement, painting, PNG encoding, previewing, and downloading happen locally. Nothing is sent to Lizely. The PNG stores rendered pixels rather than editable source text, syntax structure, font files, runtime output, or execution results. It does not prove the code is correct, secure, licensed, formatted, or runnable. Keep the original text separately whenever editability, exact character recovery, review history, accessibility, or archival fidelity matters.

This 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. Review code for credentials, tokens, private URLs, and personal information before sharing the PNG. For machine-readable formatting use JSON Formatter, HTML Formatter, CSS Minifier, or JavaScript Minifier as appropriate.

Methodology & sources

Treat input exclusively as inert text; reject empty input, unsupported controls, unpaired surrogates, more than 50,000 UTF-16 code units, more than 200 logical lines, or a line above 2,000 code units. Validate fixed whole-number font and padding options. Set the local monospace Canvas font, measure every complete line, calculate line height as ceil(font size times 1.5), and reject dimensions above 8,192 pixels or area above 32 million pixels before allocation. Resize the Canvas, reacquire and fully configure its context, paint an opaque background, and draw every preserved line with left-aligned top-baseline fillText. Encode the natural-size Canvas asynchronously as image/png, reject null, zero-byte, invalid, or above-20-MiB Blobs, publish a local ObjectURL only for the current live generation, and revoke it on edit, replacement, stale completion, or unmount.

Frequently asked questions

Does Code to Image execute or upload my code?
No. Code is handled only as inert text and painted with Canvas in the current browser tab. It is never evaluated, injected as HTML, or uploaded.
Will long code be silently cropped?
No. Character, line, per-line, Canvas edge, pixel-area, and PNG byte limits are checked explicitly. An over-limit request fails and creates no partial download.
Why can the font look different on another computer?
The browser uses a local monospace font stack. Font availability, fallback glyphs, and rasterization vary by operating system, so cross-device pixel identity is not guaranteed.
Does the PNG keep editable or highlighted code?
No. The PNG contains pixels only. This tool uses one foreground color and does not perform language-aware syntax highlighting, so keep the original source for editing.

Related tools

Developer Tools guides

View all