Beautiful code block image generator inspired by ray.so with syntax highlighting, customizable themes, and stunning gradient backgrounds perfect for social media and documentation.
Make it with Workshop
Build your own component with AI
Details
Create stunning, shareable code snippets that stand out on social media, in documentation, and during presentations. This powerful component transforms your code into beautifully styled images with professional syntax highlighting and eye-catching backgrounds.
Key Features
Multi-Language Support: Supports over 23 programming languages, including JavaScript, TypeScript, Python, Java, C++, HTML, and CSS.
Intelligent Auto-Detection: Automatically detects the programming language based on code syntax and keywords.
Advanced Syntax Highlighting: A custom regex-powered highlighting engine provides proper color coding for keywords, strings, comments, functions, and numbers.
4 Beautiful Themes: Choose from Dark, Light, Oceanic, and Monokai themes with carefully crafted color schemes.
Stunning Backgrounds: Includes 6 gradient presets (Sunset, Ocean, Forest, Fire, Cosmic, Minimal), solid colors, and custom images.
Customizable Window Chrome: Optional macOS-style window controls with red, yellow, and green buttons.
Professional Typography: Separate font controls for the title and code, with monospace defaults.
Line Numbers: Toggle line numbers for enhanced readability.
Responsive Design: Auto-sizing works perfectly on any screen size.
HTML Entity Escaping: Safe rendering prevents code interpretation issues.
Perfect For
Social media code sharing (Twitter, LinkedIn, Instagram)
Technical blog posts and articles
Documentation and tutorials
Presentations and slides
Code portfolio showcases
Educational materials
Use Cases
Developers: Share code snippets with proper syntax highlighting.
Educators: Create visual code examples for courses and tutorials.
Content Creators: Generate eye-catching code images for social media.
Technical Writers: Enhance documentation with beautiful code blocks.
Presenters: Add professional code visuals to presentations.
Technical Highlights
React + TypeScript with full type safety.
Custom syntax highlighting engine (no external dependencies).
Responsive height that follows the container while keeping code blocks centered.
HTML-safe rendering with proper entity escaping.
Optimized performance with React hooks and memoization.
Framer-native property controls for seamless editing.
The component automatically centers code blocks within custom heights, making it perfect for creating consistent layouts while ensuring your code always looks crisp and readable. Whether you're sharing a quick JavaScript function or a complex Python algorithm, this component makes your code look professional and engaging.
