DEV Community

Kai Oswald
Kai Oswald

Posted on

How to gain traffic for your open-source library

In this post I will describe you a process in how you can get traffic for your open-source libraries.

Introduction

I made my first open-source library that I knew can be useful for other people too. So I created an npm-package, but it didn't find a lot of traffic. It was until I got my very first random GitHub star that motivated me to spread the word about the package I built. The following steps will describe the process I took to grow the weekly download count to 600+ and GitHub stars to 80+.

Create & Publish the package

The first thing you'll have to do is create a reusable package of your library and publish it to the public registry of the ecosystem your package belongs to.
Here's a quick overview of some of the more popular registries.

language registry
JavaScript npm
.NET NuGet
Ruby Rubygems
Python pip / PyPi

If your language is not listed don't worry, there's probably a public registry too. You'll probably find it with a quick google search: {language} package registry.

Good README and documentation

Add a good README to your repository, so other developers can quickly get started using your library.
A good README should include at the minimum:

  • What the package is about
  • How to install the package
  • A sample how to use the package
  • How to customize the package

If your package is for the UI, you should also include a visual demo.
This can be just an Image/Gif or even a full documentation site dedicated to it.

For the documentation you can quickly get started with static site generators and host them for free on GitHub pages.
GitHub has a nice article of the process.

Post in related forums

Find forums related to your library. You could just submit the link to your repository or write a full blog post about what problems the library solves. Examples for such forums can be:

  • reddit
  • dev.to
  • hackernews
  • discord

Post on social media

Make a post on social media with related hashtags showcasing your library.

Submit it to a newsletter

If the ecosystem of your library has an official newsletter you can submit it there!
Often times you just have to submit the link to your repository. Again, you could also write a full blog post about it and submit the blog post to the newsletter.

Look for an awesome list

Awesome lists are lists of awesome tools for a particular ecosystem. There even is an awesome list of awesome lists. Find your list and create a pull-request with your added repository.

Concluding

The most important thing however about open-source is to provide added value for others. And if you provide added value your package will be used.

For the curious here are some stats and a link to my repository.
Overview of the package download count over a few months

GitHub logo kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

vue-svg-transition

Create 2-state, SVG-powered animated icons

Demo

Codesandbox Demo

inspired by Icon Transition Generator

npm version badge

Quick start

npm install --save vue-svg-transition
import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);
Enter fullscreen mode Exit fullscreen mode

Template Example

It is recommended to use vue-svg-loader so we can import our SVGs from external files. But it's possible to use inline SVG as well.

<template>
    <svg-transition :size="size">
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
    data() {
        return {
            size: {
                width: 48,
                height: 48
            }
        }
    }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Trigger programmatically via ref

<svg-transition ref="transition"
…
Enter fullscreen mode Exit fullscreen mode

Top comments (0)