Cool Snippets

Turn code into beautiful, shareable images.
A free and open-source alternative to ray.so, Carbon and snappify — no account, no paywall, no upload. Everything runs in your browser.

---

What it does

Paste a snippet, style it, export it. Drop the result into a blog post, a slide, a README, or a tweet.

• 43 languages with real syntax highlighting, powered by CodeMirror 6
• 17 syntax themes — Dracula, Nord, One Dark, Gruvbox, Solarized, Material, Sublime and more
• 25 coding fonts bundled — Fira Code, Cascadia, Hasklig, Comic Mono, and others
• Window chrome — macOS, Windows and Unix terminal headers with editable titles and file icons
• Effects — glow, glassmorphism, blur, corner radius, custom padding
• Backgrounds — solid colours, gradients, patterns and your own images
• A real canvas — drag in text, images and icons alongside the code block, not just one fixed frame
• Export to PNG, JPEG, WEBP or SVG, or copy straight to the clipboard, with presets for social, presentation, portfolio and print

Why another one of these

Most code-to-image tools are either closed, gated behind a subscription once you want a second export size, or they send your snippet to a server. Cool Snippets is MIT licensed, free in full, and never transmits your code — your work is saved in localStorage and nowhere else. There is nothing to sign up for.

It is funded by sponsors, not by locking features away.

Compared to

	Cool Snippets	ray.so	Carbon	snappify
Open source	✅ MIT	✅	✅	❌
Free, no limits	✅	✅	✅	Partial
No account needed	✅	✅	✅	❌
Multi-element canvas	✅	❌	❌	✅
SVG export	✅	❌	✅	✅
Self-hostable	✅	✅	✅	❌

Getting started

Requires Node 22+ and Yarn 1.x.

git clone https://github.com/simpleneeraj/cool-snippets.git
cd cool-snippets
yarn install
yarn dev

Open http://localhost:3000 — the editor lives at /studio.

No environment variables are needed for local development. BASE_URL is the only one the app reads, and it is used purely to build absolute URLs for sitemap.xml and robots.txt; on Vercel it is inferred automatically, and locally it falls back to http://localhost:3000.

Command	What it does
yarn dev	Dev server (Turbopack)
yarn build	Production build
yarn start	Serve the production build
yarn lint	ESLint with --fix
npx tsc --noEmit	Typecheck

Built with

• Next.js 16 (App Router) and React 19
• TypeScript and Tailwind CSS v4
• coss UI on Base UI for components
• CodeMirror 6 for the editable code block
• Zustand for editor state, persisted to localStorage
• Tiptap for rich text elements

Project layout

The codebase is feature-sliced. Dependencies only point downward: app shell → features → shared → vendor/data.

src/
├── app/                   # Next.js routes only — thin, no logic
├── features/
│   ├── studio/            # The editor: canvas, panels, toolbars, store, export
│   ├── editor-rte/        # Vendored Tiptap rich-text editor (private internals)
│   └── marketing/         # Public site sections
├── shared/                # Feature-agnostic: ui, uikit, motion, fonts,
│                          #   hooks, lib, config, types, icons
├── vendor/codemirror/     # Language and theme registries
├── data/                  # Static datasets (icon sets, patterns, presets)
├── layouts/ providers/    # App shell
└── styles/globals.css     # Tailwind v4 theme tokens

Each layer has its own path alias (@features/*, @shared/*, @vendor/*, @data/*), so an import always names the layer it crosses into. ESLint enforces the direction — yarn lint fails on a violation. Two rules worth knowing:

• shared/ must not import from a feature. If it needs a feature's types or store, the code belongs to that feature instead.
• Features are independent. The one exception is studio → editor-rte, and it must go through the barrel: import { … } from '@features/editor-rte'.

Adding a theme or a language means adding one entry to the matching registry under src/vendor/codemirror/ — that is usually the easiest first contribution.

Contributing

Issues and pull requests are welcome. If you are picking up something non-trivial, open an issue first so we do not duplicate work.

Before opening a PR, please make sure npx tsc --noEmit and yarn build both pass.

Status

Beta, and desktop-first. The studio is not usable on small screens yet — that is a known gap rather than an oversight, and help there is very welcome.

Support the project

Cool Snippets is free and intends to stay that way. If it saves you time, you can sponsor it on GitHub or buy me a coffee.

Star History

License

The code is MIT © simpleneeraj.

The bundled assets are not — some fonts and background images were collected during early development without a proper record of their licensing, and a few of them almost certainly should not be redistributed. NOTICE.md sets out exactly what is in here and what is uncertain.

If you own any of that work and want it gone, open an issue and it will be removed straight away.