How I Created My First Successful NPM Package

How I Created My First Successful NPM Package


4 min read

I've created a few NPM packages in the past, but they never really took off (not that they were intended to in the first place). Last year, however, I created a tool called Lightbox for Bootstrap 5 (bs5-lightbox on NPM) and it's currently getting around 3 million CDN hits per month and has over 12,000 downloads on NPM. Since I never expected or meant for this to be so popular—I mean, it's just a simple lightbox gallery plugin—I thought I would analyze what made this project different in case that might be of use to anyone.

Based on my findings, here are a few things you can try if you want a more successful project.

A major reason why bs5-lightbox gets the amount of attention it does is because it was created for Bootstrap, an incredibly popular front-end framework. By creating a plugin that piggybacks off of an existing project, you're immediately introducing your package to a large audience that is already interested in what you're offering.

Replace an out-of-date tool

I think another large contributing factor to the success of bs5-lightbox is that it replaces an already successful, but out of date tool called Ekko Lightbox. Many people, including myself would reach for it but then realize it was only compatible with Bootstrap 4. So, by creating a tool to fill that void, I was able to attract users who were looking for a similar solution.

Have a good name

This might seem like a no-brainer, but it's important to have a name for your project that is both accurate and memorable. In the case of bs5-lightbox, the name is accurate (it's a lightbox gallery plugin for Bootstrap 5) and it's also easy to remember.

Make it as simple as possible

This is probably the most important tip I can give. The bs5-lightbox package is extremely simple. It's just one JavaScript file. That's it. It just works. And I think that's why people like it so much. It's easy to install and it does one thing well.

Lightbox for Bootstrap 5 is also very easy to setup. It can be installed with a simple npm install bs5-lightbox or by adding a script tag with a link to the CDN. No need to fiddle with any build tools or configuration files.

Offer a live demo

People are always more likely to use something if they can see it in action first. That's why I created a live demo of bs5-lightbox that people can try out before they download it. This not only lets people see what the lightbox looks like, but it also shows them how easy it is to use.

Have good documentation

Once people have decided to use your package, it's important to have good documentation so they know how to do so. This can be in the form of a README file, a wiki, or even a blog post like this one. As long as it is clear and concise, people will be able to get up and running with your package in no time.

Keep it updated

Finally, it's important to keep your package updated with the latest versions of the dependencies it uses. In the case of bs5-lightbox, that means always using the latest version of Bootstrap. Not only does this ensure that your package works with the latest versions of the dependencies, but it also shows that you are keeping up with the latest changes.

Offer support

I try to offer support for bs5-lightbox as much as I can through its GitHub page. I think this is important because it shows that I'm actively involved in the project and care about its users. I respond to issues as soon as I can and I encourage developers who have solved problems with the package to create Pull Requests.

Be open to feedback

Finally, I was open to feedback and was always looking for ways to improve the project. I never wanted to rest on my laurels and I think that helped me keep people interested in the project.

I don't think there's a magic formula for making a successful project, but I do think the popularity Lightbox for Bootstrap 5 was a combination of these factors. I was lucky enough to create a tool that filled a void for a large and active community. But, I also put in the work to make sure people knew about it and understood how to use it. If you're thinking about creating an NPM package, I hope this was helpful. Good luck!

Did you find this article valuable?

Support trav by becoming a sponsor. Any amount is appreciated!