shiki-image

November 12, 2025 · View on GitHub

Convert code snippets into images. Powered by shiki and takumi. Super fast 🚀

Example:

Example output

Note

This was a quick experimental project. Contributors needed!

Usage

import { writeFile } from "node:fs/promises";
import { codeToImage } from "shiki-image";

const buffer = await codeToImage('console.log("hello, world!");', {
  lang: "js",
  theme: "github-dark",
  format: "webp",
});

await writeFile("image.webp", buffer);

Options

`lang`

Code language. See shiki supported languages

`theme`

Rendering theme. See shiki supported theems.

`style`

Additional container styles. See takumi stylesheets.

`format`

Output format can be either png, webp, avif, or jpeg (default is webp).

`quality`

Image quality between 0 to 100 (jpeg format only)

`font`

Font used to render the code. Can be either a string (remote URL to fetch) or an ArrayBuffer.

Note

If no font is specified, it will use the builtin Geist Mono font from Takumi.

Tip

If a URL is passed, response will be cached in memory for the next renders.

`width`

Rendering width. If not specified, it will be auto computed based on the code.

Note

Default font size is 32 and can be customized using style.fontSize.

`height`

Rendering height. If not specified, it will be auto computed based on the code.

Note

Default lineHeight is 1.3 and can be customized using style.lineHeight.

Development

local development

Clone this repository
Install latest LTS version of Node.js
Enable Corepack using corepack enable
Install dependencies using pnpm install
Run interactive tests using pnpm dev

Showcase

Alekhya: Code image generator with API support
Modern Monaco Demo: Uses shiki-image to generate og image.

License

Published under the MIT license.