Snappet

Turn plain code into eye-catching visuals
View Demo · Report Bug · Request Feature

About

Snappet is a web app that allows developers to generate beautiful images of their code, making it easy to share on social media platforms such as Instagram, Twitter, and LinkedIn. With Snappet, you can showcase your coding skills in an attractive, engaging way by converting raw code into visually appealing images.

Why I Built It:

• I created Snappet because sharing raw code as text often lacks visual appeal and doesn't capture attention on social media.
• There was a gap in existing tools when it came to offering enough customization for code screenshots.
• Snappet solves this by allowing users to turn their code into stunning, customizable images that are ideal for sharing.
• The goal was to provide an easy-to-use platform for creating visually striking code images with personalization options.
• Unlike other tools, Snappet is focused on offering a clean and attractive output that enhances the presentation of code.

Built With

Snappet is built using modern web technologies to ensure a fast, responsive, and user-friendly experience.

• Next
• Tailwind
• Zustand
• Framer Motion
• React Colorful
• Monaco Editor
• Shadcn UI

Getting Started

This is a Next.js project. If you're unfamiliar with it, check out the Next.js Documentation.

To get started, download the repo, install dependencies and run the development server:

npm install 
npm run dev

Prerequisites

Before you get started, ensure you have the following installed:

• Node.js (version 14 or higher)
• npm or Yarn (to manage project dependencies)

Roadmap

• Add shadows and border sliders
• Add position and size sliders and options
• Add setting options for frame customization
  • Add dimension selector (custom and premade)
  • Enable background color customization
  • Allow background opacity adjustments
  • Add filters (blur, noise, etc.)
  • Allow background image uploads
• Implement pre-designed templates for code presentations
• Introduce tweet post templates for easy social media sharing
• Build a gradient maker for more customization options
• Expand template library with more diverse designs
• Add support for changing font family for code styling
• Create a custom theme maker for personalized appearances
• Improve UI and UX for a more seamless user experience
• Enhance the README with detailed guides, use cases, and examples

See the open issues for a full list of proposed features (and known issues).

Contributing

Snappet is an open-source project, and contributions are welcome! If you want to help improve Snappet, feel free to submit pull requests or suggest new features. Here's how you can contribute:

Reporting Bugs

If you encounter any bugs, please open an issue and describe the problem in detail so that it can be fixed.

Suggesting Features

If you have ideas for new features or improvements, feel free to create a feature request issue.

Code Contributions

If you want to submit code, please:

1. Fork the repository and create a new branch.
2. Make your changes and write tests if applicable.
3. Open a pull request with a clear description of what you’ve done.

Guidelines

• Follow the existing code style.
• Ensure your code works correctly and is properly tested.
• Keep pull requests small and focused on a single change or feature.

Thank you for your interest in contributing to Snappet!

Contact

Waleed Nasir - Linkedin - Instagram - Twitter / X - waleeddotdev@gmail.com