# Carbon turns pasted code into framed PNG and SVG images for sharing

> Carbon is a JavaScript MIT licensed web editor at carbon.now.sh that turns pasted code into styled PNG and SVG images for social posts and embeds.

**carbon-app/carbon** — :black_heart: Create and share beautiful images of your source code

- Repository: https://github.com/carbon-app/carbon
- Website: https://carbon.now.sh
- Stars: 36,111 · Forks: 1,975
- Language: JavaScript
- License: MIT
- Published: 2026-08-17 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/carbon-app-carbon

## Plain screenshots lose formatting on social feeds, Carbon answers with framed images

Social posts filled with plain code screenshots look uneven. Fonts shift, backgrounds clash with the timeline, and long lines get cropped by the client. Carbon at carbon.now.sh addresses that narrow presentation step. Paste source text, pick a syntax theme and window style, and download a framed picture for a tweet, a slide, or a post header. According to the repository description, the scope stops at creating and sharing beautiful images of source code. People who write release notes, tutorials, hiring posts, conference slides, or documentation teasers get the most value. People who need runnable samples, reviewable diffs, or searchable code should keep the snippet in a gist or a repository and use Carbon only for the display copy.

## Drop a file, append a gist ID, or type straight into carbon.now.sh

Open carbon.now.sh in a browser. No local installer runs first. Code enters through one of three paths. Drop a file onto the editor surface. Append a GitHub gist ID to the site URL. Or click into the empty editor and type. The gist form uses the short address shape shown below, with the 32 character example ID taken from the project documentation.
```bash
https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8
```
Loading that address pulls the referenced gist into the editor for styling. The embed route uses a separate prefix for publishing on other sites.
```bash
carbon.now.sh/embed
```
A saved snippet or a gist can use the longer embed form with an identifier suffix.
```bash
carbon.now.sh/embed/:id
```
After the code appears, adjust the visual controls, then move to export. Readers who expect a package install or a shell command will not find one in this flow.

## Theme, window chrome, padding, shadows, and fonts decide the final PNG

Styling controls decide whether the export reads well at small sizes. Syntax theme sets token colors. Background color sets the canvas behind the window. Window theme sets the frame and its dots or flat edge. Padding sets breathing room around the code block. Shadows add depth against light pages. Fonts change character width and line rhythm. Each control affects the PNG and SVG output directly, so wide code with a large font can overflow a narrow timeline crop. Carbon renders through CodeMirror 5.65.5 with add on modes such as GraphQL, Elixir, and Solidity listed in package.json, plus highlight.js 10.7.2 in the same dependency set. That pairing explains why many languages color correctly without extra setup. It also means rendering quirks trace back to editor modes and theme CSS rather than to a custom highlighter the project maintains by itself.

## Saved snippets unfurl on Twitter and Slack, anonymous exports do not

Sharing splits into two very different outcomes. Anonymous editing produces an image file and nothing else. There is no link to revisit, no edit history, and no automatic preview on social clients. Saved snippets behave differently. Signing in through the Sign in/Sign up button turns on automatic saving. Copying the browser URL then shares a page that unfurls as an image on Twitter and Slack while still giving viewers access to the source text. Returning to that same link opens the snippet for editing. That distinction matters for teams. A one off PNG works for a slide deck that will never change. A tutorial thread, a release announcement with fixes, or any post that might need a correction calls for the signed in route. Without an account, a typo means rebuilding the image from scratch and reposting every copy.

## Tweet button, embed iframe, and Copy Image cover different sharing routes

Each distribution path fits one destination. The Tweet button posts the image and encodes alt text for accessibility, which helps screen reader users on that network. Posting the file by hand skips that encoding step, so authors who upload manually need to write the picture description themselves following the linked Twitter help page. Embedding suits personal sites and blogs. The Copy Menu copies an iframe snippet or an encoded URL for platforms such as Medium, and readers can copy the code with a button click. Direct download suits decks and chat uploads. Carbon lists PNG and SVG as download types, plus Export Open to view the render in a browser tab and Copy Image to place the picture on the clipboard through the Copy menu. Pick the path before styling. An iframe embed preserves selectable code, while a PNG flattens everything into pixels that no reader can copy or search.

## Chrome PWA prompt replaces a desktop download for offline use

There is no packaged desktop binary, no dmg, no exe, and no apt target in the documentation. Offline use means installing the site as a Progressive Web App from a supporting browser such as Google Chrome. Visit carbon.now.sh, open the browser settings menu, and select Install Carbon. That leaves several gaps. Browsers without PWA support get no offline path. The installed copy still reflects the hosted editor rather than a versioned release on the machine, so pinning to 4.9.10 locally is not part of the documented flow. Editor plugins soften the annoyance for some setups, with entries for IntelliJ IDEA, Atom, VS Code, Sublime Text 3, Vim and Neovim, Emacs, and Xcode, plus the nef Xcode extension, each opening the current selection in Carbon. Those plugins hand code to the site. They do not remove the site dependency, and a network outage or a domain change still blocks the whole workflow.

## Version 4.9.10, Node 12 floor, and a site dependency set the upkeep bill

Self hosting carries its own cost. Package.json names the project carbon at version 4.9.10, under the MIT license, with engines set to node >=12, and scripts named dev, build, start, test:e2e, deploy, prettier, lint, contrib:add, contrib:build, cy:run, and cy:open. Dependencies pin next to the 12.1.6 line, next-pwa to the 5.5.2 line, firebase to the 8.9.1 line, and puppeteer-core to the 9.0.0 line. That stack is dated, so a fresh Node runtime, a current Next.js setup, or a hardened Firebase project can introduce breakage the documentation does not address. Release history adds caution. The newest tagged releases are 4.9.10, 4.9.9, and 4.9.8 from May and June 2022, while the last push on the main branch was on 2026-02-10. A GitHub gist keeps text history, search, and forks. Carbon keeps pixels for display. Anyone choosing Carbon for durable publishing should confirm the live editor still exports clean PNG and SVG at their code width before promising it in a workflow.

## Conclusion

Use Carbon when you need a quick framed PNG or SVG of code for a post, a slide, or a blog embed, and you are fine working in the hosted editor at carbon.now.sh. Skip it when you need versioned code sharing, offline batch rendering, or a maintained self hosted renderer, and verify the live site, the sign in flow, and the PNG SVG output in your browser before you depend on it for publishing.

## FAQ

### What does Carbon from carbon-app do?

Carbon is a web editor at carbon.now.sh that formats pasted code with a syntax theme, window chrome, padding, and shadows, then exports the result as a PNG or SVG image for sharing.

### How do I import code into Carbon?

Paste code by dropping a file onto the editor, by appending a GitHub gist ID to the carbon.now.sh URL, or by typing directly. Then adjust the theme and background before downloading or sharing.

### Does Carbon support shared snippets on social platforms?

Yes. Saved snippets shared by URL unfurl as images on Twitter and Slack while still linking back to the source code, and following the link lets the author edit the snippet.

### What export formats does Carbon offer?

Carbon supports PNG and SVG download, plus Export Open in the browser and Copy Image to the clipboard. The embed route uses carbon.now.sh/embed URLs for websites and blogs.

## Sources

- [Official documentation](https://carbon.now.sh)
- [Official README](https://github.com/carbon-app/carbon#readme)
- [Project repository](https://github.com/carbon-app/carbon)
- [Release notes](https://github.com/carbon-app/carbon/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/carbon-app-carbon