CodeFrame

Code → PNG, entirely in your browser.

No server. No tracking. No watermarks.

---

What is CodeFrame?

CodeFrame converts source code into high-resolution PNG images, running entirely in the browser via WebAssembly. There is no backend - every highlight, every pixel, every export happens locally on your machine.

Built as a lightweight alternative to carbon.now.sh and ray.so, with one differentiator: export resolution is not capped by your screen's devicePixelRatio. You can export at 4x, 8x, or even 12x scale for print-quality output.

Features

• Browser-native rendering - syntax highlighting via syntect, canvas drawing via web-sys. No DOM screenshots, no html2canvas.
• High-resolution export - user-selectable scale up to 12x. Canvas pixel size = logical size × scale, not upscaled after the fact.
• 15 languages - Rust, Python, JavaScript, TypeScript, Go, Java, C, C++, HTML, CSS, JSON, YAML, TOML, Bash, SQL.
• 7 themes - Dracula, One Dark, Nord, GitHub Light, Tokyo Night, Catppuccin Mocha, Monokai.
• 3 monospace fonts - JetBrains Mono, Fira Code, Cascadia Code (all bundled as woff2/ttf).
• Live preview - Reactivity-driven canvas updates as you type, with a capped preview scale for performance.
• SVG export - token-accurate SVG output alongside PNG, using the same layout engine.
• Split-screen comparison - side-by-side view with separate code inputs for each panel.
• 7 B&W background presets - Snow, Top Glow, Bottom Glow, Left Beam, Right Beam, Center Radial, Dark Vignette. Curated monochrome gradients, no custom color picker needed.
• Zero dependencies at runtime - static WASM, no server required.

Getting Started

Prerequisites

• Rust (stable)
• Trunk (cargo install trunk)
• wasm32 target: rustup target add wasm32-unknown-unknown

Development

trunk serve

Opens at http://localhost:8080 with hot-reload on file changes.

Production Build

trunk build --release

Outputs a static site to dist/ - deployable to Cloudflare Pages, Vercel, GitHub Pages, or any static host.

Project Structure

CodeFrame/
├── crates/
│   ├── app/          # Leptos CSR UI - components, signals, event handlers
│   ├── highlighter/  # syntect wrapper, framework-agnostic token stream
│   ├── renderer/     # Canvas2D drawing logic, no Leptos dependency
│   └── models/       # Shared types: Theme, ExportOptions, Token, Language
├── fonts/            # Bundled monospace fonts (woff2/ttf)
├── themes/           # Bundled .tmTheme files (7 themes: Dracula, One Dark, Nord, GitHub Light, Tokyo Night, Catppuccin Mocha, Monokai)
├── syntaxes/         # Extra .sublime-syntax grammars (TypeScript, TOML)
├── style.css         # UI design tokens and component styles
├── index.html        # Trunk entry point
└── Trunk.toml        # Trunk configuration

Available Scripts

Command	Description
trunk serve	Dev server with hot-reload
trunk build --release	Optimized static build to dist/
cargo test --workspace	Unit tests + doctests
cargo clippy --workspace --all-targets -- -D warnings	Lint check
cargo fmt --all --check	Format check

Architecture

CodeFrame follows a workspace-based architecture with clear crate boundaries:

• models - Shared vocabulary (Token, ExportOptions, Background, GradientDir, Language, Theme). No web-sys or Leptos dependency.
• highlighter - Takes source code + language, returns a colored token stream. Framework-agnostic.
• renderer - Takes tokens + export options, draws onto a CanvasRenderingContext2d (PNG) or emits SVG markup. No Leptos dependency.
• app - The only crate that knows about Leptos. Wires signals, components, and event handlers.

This separation allows renderer and highlighter to be unit-tested without a WASM runtime.

Design System

CodeFrame uses an editorial monochrome design system inspired by austere, restraint-first aesthetics:

• Monochrome palette with five tiers of grey for the entire UI
• Hairline dividers instead of thick borders or shadows
• Tonal surface shifts for depth (no drop shadows on chrome)
• Black pill buttons for primary actions (border-radius: 9999px)
• 8px spacing grid with consistent token scale

See DESIGN.md for the full specification.

Contributing

See CONTRIBUTING.md for dev setup, CI checks, and crate boundary rules.

Security

See SECURITY.md for the security posture, data flow, and vulnerability reporting.

Known Limitations

• Font ligatures - Canvas2D fillText() does not support ligature shaping. Sequences like != or => in ligature fonts (Fira Code, JetBrains Mono, Cascadia Code) render as separate glyphs. A warning is shown in the UI when a ligature font is selected.
• No server-side rendering - export is purely client-side via canvas.toBlob().

License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this software for personal or commercial purposes, provided that the original copyright notice and this permission notice are included in all copies or substantial portions of the software. See the full license text for details.