{"id":24482112,"url":"https://github.com/waleeddotdev/snappet","last_synced_at":"2026-02-14T18:01:53.573Z","repository":{"id":273309710,"uuid":"919230743","full_name":"waleeddotdev/Snappet","owner":"waleeddotdev","description":"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.","archived":false,"fork":false,"pushed_at":"2025-02-16T10:39:35.000Z","size":4598,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T16:49:59.516Z","etag":null,"topics":["code-to-image","framer-motion","monaco-editor","nextjs","open-source","react","zustand"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waleeddotdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-20T02:17:06.000Z","updated_at":"2025-02-16T10:39:38.000Z","dependencies_parsed_at":"2025-01-20T06:25:16.940Z","dependency_job_id":"fe239994-b889-4299-b25a-bebc7df531f4","html_url":"https://github.com/waleeddotdev/Snappet","commit_stats":null,"previous_names":["waleeddotdev/snappet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/waleeddotdev/Snappet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleeddotdev%2FSnappet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleeddotdev%2FSnappet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleeddotdev%2FSnappet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleeddotdev%2FSnappet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waleeddotdev","download_url":"https://codeload.github.com/waleeddotdev/Snappet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleeddotdev%2FSnappet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29451910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T15:52:44.973Z","status":"ssl_error","status_checked_at":"2026-02-14T15:52:11.208Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-to-image","framer-motion","monaco-editor","nextjs","open-source","react","zustand"],"created_at":"2025-01-21T12:12:27.975Z","updated_at":"2026-02-14T18:01:53.555Z","avatar_url":"https://github.com/waleeddotdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/othneildrew/Best-README-Template\"\u003e\n   \u003cimg width=\"200\" height=\"200\" src=\"https://github.com/waleeddotdev/Snappet/blob/cf7c0966ff22b7e0d5bcdfbcfdf61e1fc1cf9274/public/assets/logo.png\" /\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eSnappet\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Turn plain code into eye-catching visuals\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/waleeddotdev/Snappet\"\u003eView Demo\u003c/a\u003e\n    \u0026middot;\n    \u003ca href=\"https://github.com/waleeddotdev/Snappet/issues/new?labels=bug\u0026template=bug-report---.md\"\u003eReport Bug\u003c/a\u003e\n    \u0026middot;\n    \u003ca href=\"https://github.com/waleeddotdev/Snappet/issues/new?labels=enhancement\u0026template=feature-request---.md\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n![Snappet Banner](https://github.com/waleeddotdev/Snappet/blob/504010ceed8ee72ddab4feaa4bdfb4d6b4fa1e23/public/assets/readme/Banner.png)\n## About\n\nSnappet 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.\n\nWhy I Built It:\n- I created Snappet because sharing raw code as text often lacks visual appeal and doesn't capture attention on social media.\n- There was a gap in existing tools when it came to offering enough customization for code screenshots.\n- Snappet solves this by allowing users to turn their code into stunning, customizable images that are ideal for sharing.\n- The goal was to provide an easy-to-use platform for creating visually striking code images with personalization options.\n- Unlike other tools, Snappet is focused on offering a clean and attractive output that enhances the presentation of code.\n### Built With\n\nSnappet is built using modern web technologies to ensure a fast, responsive, and user-friendly experience.\n\n- [Next](https://nextjs.org)\n- [Tailwind](https://tailwindcss.com/)\n- [Zustand](https://zustand.docs.pmnd.rs/)\n- [Framer Motion](https://motion.dev/)\n- [React Colorful](https://omgovich.github.io/react-colorful/)\n- [Monaco Editor](https://www.npmjs.com/package/@monaco-editor/react)\n- [Shadcn UI](https://ui.shadcn.com/)\n## Getting Started\n\nThis is a Next.js project. If you're unfamiliar with it, check out the Next.js Documentation.\n\nTo get started, download the repo, install dependencies and run the development server:\n\n  ```sh\n  npm install \nnpm run dev\n  ```\n### Prerequisites\n\nBefore you get started, ensure you have the following installed:\n\n- Node.js (version 14 or higher)\n- npm or Yarn (to manage project dependencies)\n## Roadmap\n\n- [x] Add shadows and border sliders\n- [x] Add position and size sliders and options\n- [x] Add setting options for frame customization\n  - [x] Add dimension selector (custom and premade)\n  - [x] Enable background color customization\n  - [x] Allow background opacity adjustments\n  - [x] Add filters (blur, noise, etc.)\n  - [x] Allow background image uploads\n- [ ] Implement pre-designed templates for code presentations\n- [ ] Introduce tweet post templates for easy social media sharing\n- [ ] Build a gradient maker for more customization options\n- [ ] Expand template library with more diverse designs\n- [ ] Add support for changing font family for code styling\n- [ ] Create a custom theme maker for personalized appearances\n- [x] Improve UI and UX for a more seamless user experience\n- [x] Enhance the README with detailed guides, use cases, and examples\n\n\nSee the [open issues](https://github.com/waleeddotdev/Snappet/issues) for a full list of proposed features (and known issues).\n## Contributing\n\n\n\nSnappet 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:\n\n#### Reporting Bugs\nIf you encounter any bugs, please open an issue and describe the problem in detail so that it can be fixed.\n\n#### Suggesting Features\nIf you have ideas for new features or improvements, feel free to create a feature request issue.\n\n#### Code Contributions\nIf you want to submit code, please:\n1. Fork the repository and create a new branch.\n2. Make your changes and write tests if applicable.\n3. Open a pull request with a clear description of what you’ve done.\n\n#### Guidelines\n- Follow the existing code style.\n- Ensure your code works correctly and is properly tested.\n- Keep pull requests small and focused on a single change or feature.\n\nThank you for your interest in contributing to Snappet!\n\n## Contact\n\nWaleed Nasir - [Linkedin](https://linkedin.com/waleeddotdev) - [Instagram](https://instagram.com/waleeddotdev) - [Twitter / X](https://twitter.com/waleeddotdev) - waleeddotdev@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaleeddotdev%2Fsnappet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaleeddotdev%2Fsnappet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaleeddotdev%2Fsnappet/lists"}