Snip.Cards
Explore
App.svelte
Documentation Preset · Switch language anytime
App.svelte typescript

FOUND A BUG OR HAVE SUGGESTIONS?

Help us make Snip.cards better. If you spotted an export glitch, broken syntax highlight, or have feedback, let us know directly at

Documentation Preset

Code Snippet Beautifier for Technical Documentation & READMEs

This documentation snippet tool generates lightweight, infinitely scalable SVG code images for GitHub READMEs and Notion docs, processing your proprietary code entirely offline.

How to Export SVG Code Images for Documentation

  1. Import: Paste your source code into the 760px optimized canvas for documentation.
  2. Theme: Select a neutral or transparent background that matches your documentation site theme.
  3. Adjust: Choose a clean syntax highlighting theme for maximum readability.
  4. Customize: Adjust the inner padding to maintain a minimal, content-focused layout.
  5. Export: Export as an SVG file to embed directly into your markdown or HTML files without quality loss.

Feature Comparison

Feature Snip.Cards Carbon OS Screenshot
Privacy 100% Client-Side Server Processed Local
Format SVG (Vector) & PNG PNG / SVG PNG / JPEG
Width Range 760px (GitHub Optimal) Limited Fixed to Window

Frequently Asked Questions

How do I embed an SVG code image in a GitHub README?
Export your code card as SVG, upload the file to your repository's /assets or /docs directory, then reference it in your README using: `![Code example](./assets/code-snippet.svg)`. GitHub renders SVGs natively — no additional configuration needed. Avoid using raw SVG inline in README.md as GitHub's Markdown sanitizer will strip most SVG attributes.
How do I ensure the code image is readable in both light and dark mode documentation?
The neutral slate background (#0f172a) used in this preset provides strong contrast against both white and dark page backgrounds. For light-mode documentation sites, switch the background type to 'Transparent' in the Background controls — the exported PNG will have no background, blending seamlessly with your page color. For maximum accessibility, choose a theme with a contrast ratio of 4.5:1 or higher between text and background.
Does Snip.Cards process my code locally, or does it send it to a server?
100% local. All syntax highlighting, rendering, and export happen inside your browser using the Web Canvas API and the Shiki highlighting engine. Your source code never leaves your device — making it safe for proprietary internal documentation, private repositories, and confidential architecture diagrams.

Looking for the default editor? Open Code Snippet Studio or explore other presets: Social Media, Documentation, Carbon Alternative.