Overview · Quick prompt · Agent integrations · Hosted API · CLI · License
Monoshot creates code images with type-aware editing, annotations, multiple languages, themes, exports, shareable links, and more.
Try it: monoshot.dev
Prompt your agent:
Use monoshot.dev/md and create a code snippet of simple viem usage. Use the golden gate dark theme.
Add Monoshot as an agent skill:
npx monoshot skills add
Or register the MCP server:
npx monoshot mcp add
The server exposes open, render, share, and themes directly. Pass embed: true to render when the MCP client cannot read files from the server filesystem.
Base URL: monoshot.dev/api
curl https://monoshot.dev/api/image \
--header 'content-type: application/json' \
--data '{"code":"const answer: number = 42","lang":"typescript","theme":"vitesse-dark"}' \
--output code.pngMonoshot resolves Twoslash annotations in JavaScript and TypeScript automatically. Add a ^? query to render an inferred type, or send "twoslash": false to disable type resolution.
npx monoshot render -c 'console.log("Hello, world!")' -o hello.png
npx monoshot render -c 'console.log("Hello, world!")' -o hello.svg
npx monoshot render -c 'console.log("Hello, world!")' --preview
npx monoshot render -c 'console.log("Hello, world!")' --embed --format json
npx monoshot share -c 'console.log("Hello, world!")' -t vitesse-lightNote
Use pnpx monoshot with pnpm or bunx monoshot with Bun.
--preview displays the image with native terminal graphics when available and ANSI blocks otherwise. --embed includes a data URL for clients that cannot read the output path.
Usage: monoshot <command>
Commands:
open Open the snippet in a browser.
render Render a snippet to an image.
share Build a link that opens the snippet in a browser.
themes List every theme.
Integrations:
completions Generate shell completion script
mcp Register as MCP server (add, doctor)
skills Sync skill files to agents (add, list)
Run npx monoshot <command> --help for command options and examples.