Create and customize stunning screenshots of your code. Visionary Capture provides a rich set of features to make your code snippets visually appealing for articles, tutorials, social media, and presentations.
- Multiple Languages: Syntax highlighting for a wide range of popular programming languages.
- Rich Customization:
- Choose from a curated list of beautiful background gradients or pick any solid color.
- Select from multiple window themes (Dark, Light, Midnight, Sunrise).
- Adjust padding, brightness, contrast, and saturation.
- Code Settings: Toggle line numbers and add a custom watermark to your image.
- Responsive Design: A seamless experience across desktop, tablet, and mobile devices.
- PWA Ready: Install the app on your device for quick and easy offline access.
- High-Resolution Export: Download your final creation as a high-quality PNG image.
- Paste Your Code: Open the app and replace the placeholder code with your own snippet.
- Select Language: Choose the correct programming language from the settings panel for accurate syntax highlighting.
- Customize: Use the controls in the sidebar to style your image.
- Adjust the background, theme, and padding.
- Fine-tune the look with brightness, contrast, and saturation sliders.
- Toggle line numbers or add a watermark.
- Download: Click the "Download PNG" button to save your masterpiece.
- Next.js – React Framework
- React – JavaScript Library
- Tailwind CSS – CSS Framework
- ShadCN UI – Component Library
- PrismJS - Syntax Highlighting
- html-to-image - Generating images from DOM nodes
This is a Next.js project.
First, run the development server:
npm run devOpen http://localhost:9002 with your browser to see the result.
You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.