Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waleeddotdev/snappet
Snappet is a web app that allows developers to easily convert their code into beautiful, shareable images for social media, with customizable options for framing, backgrounds, and more.
https://github.com/waleeddotdev/snappet
code-to-image framer-motion monaco-editor nextjs open-source react zustand
Last synced: about 17 hours ago
JSON representation
Snappet is a web app that allows developers to easily convert their code into beautiful, shareable images for social media, with customizable options for framing, backgrounds, and more.
- Host: GitHub
- URL: https://github.com/waleeddotdev/snappet
- Owner: waleeddotdev
- Created: 2025-01-20T02:17:06.000Z (2 days ago)
- Default Branch: main
- Last Pushed: 2025-01-20T05:32:29.000Z (2 days ago)
- Last Synced: 2025-01-20T06:25:07.344Z (2 days ago)
- Topics: code-to-image, framer-motion, monaco-editor, nextjs, open-source, react, zustand
- Language: JavaScript
- Homepage:
- Size: 2.36 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](https://nextjs.org)
- [Tailwind](https://tailwindcss.com/)
- [Zustand](https://zustand.docs.pmnd.rs/)
- [Framer Motion](https://motion.dev/)
- [Monaco Editor](https://www.npmjs.com/package/@monaco-editor/react)
- [Shadcn UI](https://ui.shadcn.com/)
## 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:
```sh
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
- [x] Add shadows and border sliders
- [x] Add position and size sliders and options
- [ ] Add setting options for frame customization
- [ ] Add dimension selector (custom and premade)
- [ ] Enable background color customization (solid and gradient)
- [ ] 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](https://github.com/waleeddotdev/Snappet/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 - [@waleeddotdev](https://linkedin.com/waleeddotdev) - [email protected]
