Introducing snippet: An Elegant Code Snippet Generator with Next.js 15

January 08, 2025

Available in :

I'm excited to introduce snippet, a new open-source project I just published on GitHub. This tool allows you to transform your code snippets into elegant and professional PNG images, perfect for sharing on social networks like X (Twitter), LinkedIn, or in your presentations. Built with Next.js 15 and Tailwind CSS, it offers a modern and intuitive experience.

Use it directly online! Create and share your code snippets in just a few clicks at https://snippet.timoner.com

🚀 Key Features

Support for over 30 programming languages
Advanced syntax highlighting
High-quality PNG export optimized for social media
Portrait and landscape formats adapted for each platform
Intuitive user interface

🛠️ Technologies Used

Frontend: Next.js 15, React, TypeScript
UI: Tailwind CSS, Shadcn/UI, Radix UI
Tools: html2canvas, react-syntax-highlighter
Deployment: Vercel

🔧 Local Installation (optional)

If you want to contribute or host your own instance:

bash
1# Clone the repository
2git clone https://github.com/offroadlabs/snippet.git
3cd snippet
4
5# Install dependencies
6bun install
7
8# Start the development server
9bun dev

📝 Usage Example

The interface is simple and intuitive:

Go to snippet.timoner.com
Paste your code in the editor
Select the language and customize the appearance
Export to PNG
Share directly on your favorite social networks!

🎯 Strong Points

Performance: Optimized for fast generation
Flexibility: Extensive customization options
Modern: Using latest technology versions

🤝 Contributing

The project is open source under MIT license. Feel free to:

⭐ Star the repository
🐛 Report bugs
💡 Suggest improvements
🔧 Contribute to the code

📚 More Information

For more details, check out:

The GitHub repository
Documentation in the README
The online version

Have questions or suggestions? Find all my open source projects and schedule a meeting to discuss them at hub.timoner.com, or open an issue directly on GitHub.

Recommended next reads

Continue with these curated articles on the same topic.

Nov 13, 2024Next.js 15: TypeScript Forms with Prisma and Clean Architecture 🚀

Learn how to create a professional form system with Next.js 15 following a hexagonal architecture. Features include: type-safe validation with Zod, modern components with shadcn/ui, data persistence with Prisma, all illustrated through a fun example of Jedi Academy registration. A complete tutorial that goes beyond simple forms to cover development best practices and modern React application architecture.

Nov 06, 2024Understanding Next.js in 2 Minutes: The Ultimate React Framework!

Practical guide to master Next.js 14 and its modern features: App Router, Server Components, Server Actions, and more.

Oct 31, 2024Next.js 15: All the New Features to Discover

Discover Next.js 15 new features: new hooks, Turbopack, improved SSR, and enhanced TypeScript support.

🔧 Local Installation (optional)

If you want to contribute or host your own instance:

bash

1# Clone the repository
2git clone https://github.com/offroadlabs/snippet.git
3cd snippet
4
5# Install dependencies
6bun install
7
8# Start the development server
9bun dev