01 / FEATURE
Write with context
Edit code with syntax highlighting for a range of languages and an adjustable filename.
ARCHIVE / CREATIVE TOOL
A STUDIO FOR CODE
SNIPLAB
Make the snippet worth sharing.
A code-to-image studio with syntax highlighting, live artwork preview, and configurable export sizes.
CASE FILE — 03
- STATUS
- LIVE
- YEAR
- 2024
- TYPE
- Creative Tool
- ORIGIN
- Code to Image
ART DIRECTION / SNIPLABSTYLIZED CONCEPT MOCKUP
01
THE STARTING POINT
The idea behind it.
Elevate a basic code screenshot generator into a flexible mini-editor for polished visual snippets.
THE CHALLENGE
The hard part is keeping preview and exported artwork in sync while users change layout, size, theme, and typography.
THE APPROACH
Use one artboard model for preview and export, then offer Electric Blue styling, syntax highlighting, and light/dark code windows.
02
WHAT WENT INTO IT
Built with intention.
02 / FEATURE
Compose the scene
Background themes, padding, text scale and multiple aspect-ratio presets.
03 / FEATURE
Light or dark
The editor interface and code window can use independent appearance settings.
04 / FEATURE
High-resolution PNG
Choose 2× or 3× output while keeping layout tied to the artwork model used in the preview.
03
STATE OF THE BUILD
Where it stands.
CURRENT STATUS / LIVE
SNIPLAB V2 is live at sniplab.sutkaew.xyz with export scaling and customizable artboards. Further real-browser export-parity testing is still worthwhile.
04
THE NEXT ITERATION
Never really finished.
01
Compare exported PNGs with browser previews
02
Broader language support
03
Improve the live export experience