Show HN: Snippp.io – a code organizer for creative coders

[tophercully]

Hey all! I'd love some feedback on this. The idea is to reduce friction between needing a tool and having it. There are plenty of code snippet apps out there, but this one is focused on efficiency and creative coding. ie:graphics and front end dev.

Hit me with whatever you think, I really do want this project to push me :)

[perryraskin]

This actually has a lot of potential I think. It reminds me of https://bit.dev (obviously without most of the main features). But the core is there - the idea that components should be organized in a way that makes them easily reusable.

If you were to add a preview functionality of each component, this would already look A LOT like the Bit platform.

Personally, I've been trying to figure out a way to create a component library where my components are easily shareable and importable, but haven't yet come to a real solution. Bit is a good one but I am not yet ready to pay per component after my 20 free components are used up.

I think this would be actually extremely useful to me personally if you added these two things:

- component live preview (perhaps with mock props/data?)

- a way to store the components in the cloud so that they can be important into any project, where the source of truth is in this cloud platform

In the future, you could add things like:

- component-level testing

- AI features

- version control and PR reviews

- CI integrations / other integrations

[tophercully]

Thank you! I do see the use for these, though a few things are a little off target for what the app hopes to solve. Component preview and mock props is actually something I have planned for the future with a subtype of snippet for templates, so when you intend to have custom inputs there is a way to test with different data. First though I'd have to build a different system for live previews and a dynamic environment that can adapt to which component it might be hosting.

Storing in the cloud to grab them with something like a cli tool is super cool. I have a feature on the mvp+ list to download a list as a library or to fork to github as a lib, just converting it into a folder. But I'm trying not to let scope creep distract me from just making it as easy as possible to grab a quick tool without downloading a whole library, not trying to compete with npm or any other package/version manager.

At present the only AI features I can think could benefit the app are search tools and framework detection, but these can also be improved traditionally without the need for linear algebra or paying for use of any ai api I think.

Basic version control could be cool too! like storing previous versions if a tool was useful to you in different forms

I do overall though feel the goal of this is a little different from the Bit platform, but some lessons could be learned about what people want based on the product's popularity :)

[mska]

I've been trying to build what you're asking with https://divmagic.com

It has most of the things you said: Create your own component library, easily share through cloud, import and use them, live view and edit them online at Studio [1]

I'm also working on adding versioning and a NPM package so you can refer to your components with unique IDs and directly use them in your code.

[1] https://divmagic.com/studio

[zabana]

Lovely little product !

I wanted to ask how you handle language autodetection for snippets.

[tophercully]

Hey! thank you! I actually have a great use for my site itself, you can find the language detection utility on this list: https://snippp.io/list/18

but tldr I'm using hljs to detect and return a string with the language title, and comparing that key against my array of categories.

[st_asqi]

10 hours up and no comments? For shame, it's a good tool!

I'm not a natural user of this product and have never used any snippet tools, so I'm commenting as an outsider. But I really like several things you've done:

1. Homepage is super clean and easy to navigate, love it

2. Black/white visual style is crisp

3. I like that your components are actual rectangles, no rounded borders or shadows or fades

4. Great ergonomics to copy snipppets: just click on the code

Specific feedback:

1. The progress bar on the copied-to-clipboard popup makes sense from a "when is this thing gonna go away" point of view, but the copy (I suspect) happens instantly and my instinct is "I need to wait for the progress bar to complete" -- so you're sending a mixed message there. That's probably the biggest thing I'd change actually.

2. Your search is a bit bogus. I can relate, having also shipped a demo on HN with a very bogus search. Some tests I did: "void" and "float", which gave me unrelated snippets. Maybe an off-by-one error somewhere?

3. Font weight 100 is really light; it renders as a 1px line width on my 4k laptop screen, which is 0.08mm wide. I can read it, but I wouldn't be able to read it in daylight for example.

4. Your "copy" and "share" buttons have pretty animations that I find endearing and I think you should hate. I struggle with this: I want my things to be distinctive and pretty, and ultimately I just need to hate the fluff and get to the point with my designs. Your "copy this thing" button doesn't need character, it needs purpose -- and those two are very different. (I'm not using strong words because it matters, it's just something I struggled with and framed it this way when I wanted to change my mind. So I'm sharing that with you in case it helps.)

5. Searchable tags if I click on them? Also, "show more" just to get tags seems un-ergonomic -- but I know how it is when you're coding these things.

6. On Firefox, the keyboard shortcuts popup overflows off to the right, so some of them aren't readable.

7. If I were going to use this, I would run it on local k8s; do you have a Docker image?

8. CodeBERT embeddings + vector DB for search?

9. What's your privacy policy?

10. That "about" page ... duuuude ... it feels like you wrote the product, had a few beers, and went "you know what? THIS ONE'S FOR ME". And I fucking love it. It's transparently awful and has a great visual personality. I would totally ship it.

Overall, nice project! It's clear you know what you wanted and had opinions. And I appreciated going through it as a user because I got some valuable perspective on my own project. Hope it goes well for you!

[OuterVale]

I pretty much second this. You nailed most of the points that jumped to mind, especially the 'Copy to Clipboard' functionality.

I will add that I wasn't able to navigate to the about page on mobile; the nav should probably allow that.

Otherwise, it's excellent.

[tophercully]

Thank you so much! This is all incredibly helpful, I felt like I needed to respond when it had my full attention haha

1: The countdown is definitely something I can adjust so we have some way of letting you know without thinking anything is loading.

2:Search is super bogus right now, what I'd actually love to do is run the search on the database itself but wanted to prioritize speed. Even so, I had not included the code itself as searchable since I thought it may bloat results a bit too much vs only searching for the high level descriptions of what you need to do. I am playing around today with how I can weight and sort so the search is more useful to everyone but may need more data to make it great :)

3: Absolutely agreed, went over the site and pulled the 100s up to 2-300, ty :)

4: hahaha I am struggling to figure out the riddle of the first sentence, but I do agree this was an embellishment. In an app where the goal is efficiency and clarity there is no need for a bell or whistle like that. I do want to give character somehow, without getting in the way. Some way to make it feel snappy without completely stripping it down.

5: Love clickable tags, the tags being in the show more is just a matter of visual clutter. My thinking: Most users will likely not need tags > description, so they are easy to find if you need them but not distracting. Open to other points of view on this

6: oooooo I will do more testing on browserstack

7: I don't have an image atm, but I can put that together :) though aside from consistency and scalability, I don't know how much of a benefit it has as an end user, but I admit I am semi-ignorant to the k8s world

8: This is foreign to me and seems like a decent project to take on, but I can't knock the benefits.

9: I'm working on putting this together for the faq and to display on signup, but more or less never sharing with any third party, I only collect google profile information for sake of creating a user profile on the app, with email to future-proof the accounts system if I decide to expand to something other than google accounts. I'm using a trusted cloud storage provider for data. The app currently only retains some details in local and session storage to smooth out the app's operations, but don't save any cookies on users, that's all on the client side. I do currently use vercel/google analytics so it may be reporting things like location, device, browser, and page visits.

10: Lmao I'll take that compliment, It was for me and I will not be accepting revisions <3

Thank you for all the information! I can use a lot of this to improve experience, and hopefully make this useful to someone :)

[8mobile]

Hi, I'm sorry but there are now numerous snippet collectors, the graphics are nothing special and there are few elements. I'm sorry but you had to wait a while for the launch.