How I Started My First Open-Source Project: “WYSIWYG Rich Text Editor built on Draft.js and React”

ButterflyEditor Caption

A few months ago, I started the development of an Open-Source Project which is a Rich Text Editor while I was learning Facebook Draft.js Open Source Framework and alongside React.js simply because I was looking for some good WYSIWYG Text Editor with nice themes and extendable Interface and could not find anything worth using.

When I first started creating the “**ButterflyEditor**” I was just going to create a simple text editor just to use it with my CMS I was building at the time but as the development went I clearly saw that a lot of people may find this editor useful either for taking it as an example since Drat.js is a quite interesting framework but with less documentation or using it for their own apps.

Some of you may think that creating, deploying and maintaining an Open-Source project is simple as taking your old java calculator that has been on your computer since you wrote your first hello world program, and just use GIT to deploy it to your GitHub Account, well, it’s not that simple! 😉

You can take a look on the ButterflyEditor Github Repo or see a Live Demo on

Here are some Tips and Tricks you should consider if you’re thinking about starting an Open-Source Project.

Some techniques that you may find useful along the way of creating and maintaining an open-source project that will definitely help you get on your feet.

1. Think Out of The Box or Just about High-Level

If you have an Idea that has been a while roaming inside your mind and you badly want to realize an open-source project out of it, well make sure you’re thinking straight out of the box and your idea should be crazy enough and kind of unique because you don’t want to reinvent what has already been there at least think of something that helps you as a developer on your own and you would like to share it with other developers like you have the same level of metalness in order to use or contribute to such a project.

Although, you don’t have to be a clever badass more than normal humans even though your idea isn’t quite as unique as may need to be you still can create something completely awesome but you need to think about creating Top-Level app with considering (Performance, UI/UX, Simplicity…)

2. Use Tools, CLIs and Boilerplates

By releasing an Open-Source Project you are intending to attract people to contribute and use your project, therefore, using Boilerplates and following a specific efficient project structure is really important for allowing other developers to easily figure out the way your project is structured and how it works without spending too much time.

CLIs could also be very helpful when it comes to maintaining your project over time since it provides you with commands that assist you throughout the development process (ex: Starting a Dev Server or Building App for Deployment) and for CLIs it depends on the platform you’re developing for and what frameworks you’re using, for example, it is better to use create-react-app.

3. Simplify Contribution Guidelines

One of the main goals that you Github Project is versioning on is having other developers with better and different skillsets to contribute on your open-source project and help grow it so you need to make sure to create simple and easy guidelines to walk devs interested in your idea on how they can set up and run your project on their local machines.

4. Write Meaningful Documentation for your Project

Documentation is one of the important pieces that allows you to take your project to the next level since as developers (you and me) we all know that learning a new library or framework may be very hard where you can make it a bit easier by simplifying and putting an elegant DOCs together so when a developer tries to use your app and look for the first time into the DOCs you wrote they have to get what they want in an easy way otherwise they will look for something else.

5. Provide Examples and Demos

Demos are the showcase of your app or project it shows what your app can do and what makes it better compared to other tons of apps, so you have to be a bit tricky when it comes to creating demos (where most people skip the demos part) no you should consider it.

6. 💻 Enjoy Coding

Most Importantly if you badly want to create an open-source project, just start it don’t overthink the consequences, since you’re a developer and a programmer who love ❤️ being creative and constantly improve your self just pick up something you think it would be great and create it (you will learn by creating).

Here is my Open-Source Project: WYSIWYG Rich Text Editor on Github

Also, Check out the Demo and Docs from Here.

I Create Video Tutorials on Youtube and on Ipenywis Learning Platform so if you are interested, check them out.

Youtube Channel: IPenywis Ipenywis is a Learning Channel and Platform For Web Development, Software Enginnering and Coding All in one place with…

Learning Platform: Ipenywis Learning Website Getting Started React is a great front-end framework for building user interfaces with a manageable state and reusable…

Twitter: IslemPenywis (@Ipenywis) | Twitter The latest Tweets from IslemPenywis (@Ipenywis). Full Stack Web Developer, Making Video/Written Tutorials At…

If you enjoy Articles like this and more coming up on the way make sure to stay updated.

No Comments Yet