Carbon — Create Beautiful Images of Your Source Code

Introduction

Carbon turns source code snippets into visually attractive images suitable for sharing on social media, documentation, or presentations. It renders code with syntax highlighting inside a styled window frame with configurable backgrounds, shadows, and padding.

What Carbon Does

• Converts code snippets into PNG or SVG images with syntax highlighting
• Applies window chrome styling (macOS-style traffic lights, title bar)
• Supports 150+ programming languages via highlight.js and CodeMirror
• Allows background customization with solid colors, gradients, or images
• Provides direct sharing to Twitter or clipboard with one click

Architecture Overview

Carbon is a Next.js application using CodeMirror for the code editor and dom-to-image for image rendering. When a user pastes code, the React component tree renders it with the selected theme and styling. The export function captures the styled DOM node as a canvas, then converts it to PNG or SVG format for download.

Self-Hosting & Configuration

• Clone the repo and run yarn install followed by yarn dev
• Deploy to Vercel or any Node.js hosting with zero additional config
• Pre-fill code via URL query parameters for shareable links
• Embed carbon widgets in documentation using the iframe API
• Environment variables configure default theme and language

Key Features

• 30+ syntax themes including Dracula, Monokai, Solarized, One Dark
• Adjustable padding, font size, line height, and window shadow
• SVG export for resolution-independent images
• URL state encoding for sharing configurations via link
• Auto-language detection based on code content

Comparison with Similar Tools

• Ray.so — Raycast-built alternative with fewer themes but cleaner UI
• Chalk.ist — animated code snippet images with step-by-step reveal
• Silicon — Rust CLI that generates images locally without a browser
• Codeimg.io — similar concept with more social-media-oriented templates

FAQ

Q: Can I use Carbon from the command line? A: Yes, carbon-now-cli (npx carbon-now-cli file.py) opens a headless browser, renders the image, and saves it locally.

Q: What image formats are supported? A: PNG (default) and SVG. SVG preserves vector quality at any zoom level.

Q: How do I set a custom font? A: Select from available monospace fonts in the settings dropdown. Custom fonts require self-hosting.

Q: Is there a maximum code length? A: No hard limit, but very long snippets produce oversized images. Keep snippets focused for best results.

Sources

• https://github.com/carbon-app/carbon
• https://carbon.now.sh