DEV Community

Cover image for 7 Open Source Projects You Should Know - JavaScript Edition โœ”๏ธ
Domenico Tenace for Playful Programming

Posted on • Edited on • Originally published at javascript.plainenglish.io

7 Open Source Projects You Should Know - JavaScript Edition โœ”๏ธ

Overview

Hi everyone ๐Ÿ‘‹๐Ÿผโ€‹
In this article, I'm going to look at seven OSS repository that you should know written in JavaScript, interesting projects that caught my attention and that I want to share.
Let's start ๐Ÿค™๐Ÿผโ€‹


1. Appwrite

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps.
You can easily integrate your app with user authentication, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

GitHub logo appwrite / appwrite

Appwriteยฎ - complete cloud infrastructure for your web, mobile and AI apps. Including Auth, Databases, Storage, Functions, Messaging, Hosting, Realtime and more

We just announced DB operators for Appwrite Databases - Learn more

Appwrite Cloud is now Generally Available - Learn more

Get started with Appwrite


Appwrite banner, with logo and text saying

Appwrite is a best-in-class, developer-first platform that gives builders everything they need to create scalable, stable, and production-ready software, fast.

We're Hiring label Hacktoberfest label Discord label Build Status label X Account label

English | ็ฎ€ไฝ“ไธญๆ–‡

Appwrite is an end-to-end platform for building Web, Mobile, Native, or Backend apps, packaged as a set of Docker microservices. It includes both a backend server and a fully integrated hosting solution for deploying static and server-side rendered frontends. Appwrite abstracts the complexity and repetitiveness required to build modern apps from scratch and allows you to build secure, full-stack applications faster.

Using Appwrite, you can easily integrate your app with user authentication and multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, messaging, and more services.

Appwrite project dashboard showing various Appwrite features

Find out more atโ€ฆ

2. melonJS

melonJS is an HTML5 game engine that empowers developers and designers to focus on content.
The framework provides a comprehensive collection of components and support for a number of third-party tools.
It is an alternative to other JavaScript game engines such as Phaser ๐Ÿคž

GitHub logo melonjs / melonJS

a fresh, modern & lightweight HTML5 game engine

melonJS 2

melonJS Logo

Build Size Tree-shaking NPM Package jsDeliver Boss Bounty Badge Contributor Covenant

A fresh, modern & lightweight HTML5 game engine

melonJS

melonJS 2 is a modern version of the melonJS game engine that was first released in 2011. It has been rebuilt entirely using ES6 class, inheritance and semantic, and bundled using esbuild for blazing fast build performance and provide modern features such as tree-shaking.

Note: migrating an existing project to melonJS 2 (version 10.0 and higher) will definitely break your game (ES6 semantic and inheritance, nodeJS event emitter, and no backward compatibility with deprecated legacy APIs), and you might want to read first this small step by step guide on upgrading to melonJS 2. If you are looking at the legacy version (9.x and lower) of melonJS, you can find it here under the legacy branch.

melonJS is open-source, licensed under the MIT License, and actively developed and maintained with the help of a small team of enthusiastsโ€ฆ

3. GDevelop

GDevelop is another free, open-source game engine build from any platforms like PC or phone.
The peculiarity of this game engine is that it is possible to create video games without using code, because it uses a logic system based on conditions and actions.

GitHub logo 4ian / GDevelop

๐ŸŽฎ Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.

GDevelop logo

GDevelop is a full-featured, no-code, open-source game development software. You can build 2D, 3D and multiplayer games for mobile (iOS, Android), desktop and the web. GDevelop is designed to be fast and incredibly intuitive: make games using an easy-to-understand yet powerful event-based system and modular behaviors. Create with AI that assists or builds alongside you.

The GDevelop editor when editing a game level

The GDevelop editor when editing a game level

Getting started

โ” I want to... ๐Ÿš€ What to do
๐ŸŽฎ Use GDevelop to make games Go to GDevelop homepage to download the app!
โš™๏ธ Create/improve an extension Read about creating an extension, with no-code or code.
๐Ÿง‘โ€๐Ÿ’ป Contribute to the editor or game engine Follow this README.
๐Ÿ‘พ Create or sell a game template Submit a free example or a paid template on the Asset Store.
๐ŸŽจ Share or sell an asset pack Submit a free or paid asset pack on the Asset Store.
๐ŸŒ Help translate GDevelop Go on
โ€ฆ

4. Egg.js

Egg.js is a simple library that allows you to easily add web easter eggs by watching the user's key strokes.
It's simple to use and very funny ๐Ÿคฃ

GitHub logo mikeflynn / egg.js

A simple javascript library to add easter eggs to web pages.

Egg.js

Egg.js

Egg.js is a simple JS library that has no prerequisites and allows you to easily add web easter eggs by watching the user's key strokes.

Example

It's really easy to use. Just include the egg.js file on the page...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egg.js/1.0/egg.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

(Thanks to Cloudflare for hosting the library!)

...then use the addCode() function to add in your easter eggs. You need to pass it the character sequence to trigger the easter egg callback (which can either be in plain English or Javascript key codes), a function to trigger when it happens, and an optional set of metadata. Metadata can be anything from a string to an object.

var egg = new Egg();
egg
  .addCode("up,up,down,down,left,right,left,right,b,a", function() {
    jQuery('#egggif').fadeIn(500, function()
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

5. API Vault

API Vault is a beautiful project written in JavaScript: it's an online platform that works as a gateway to a world of public APIs.
You can also filter the APIs by category and find the one that's right for you ๐Ÿ–

GitHub logo exa-studio / ApiVault

Your gateway to a world of public APIs.

apivault dark ApiVault

screenshot

Apivault - Your gateway to a world of public APIs. | Product Hunt


Prerequisites โ€ข How To Use โ€ข Credits โ€ข Contributing โ€ข Support โ€ข License

Built with

Nuxt.js Vue.js Django


Prerequisites

Before starting to use the software make sure you have docker installed.

How To Use

Clone the repository

git clone https://github.com/exifly/ApiVault
Enter fullscreen mode Exit fullscreen mode

Set .env file

Inside root repository folder rename .env.dev file

cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

Inside /frontend folder rename .env.sample file

cd frontend
cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

Same action inside /backend folder

cd backend
cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

Client/Server side using Docker

# Go into the root folder
cd ApiVault

# Run docker
docker-compose up
Enter fullscreen mode Exit fullscreen mode

Important note:

On first docker-compose launch, your terminal could tell you:

database_dev  | 2023-05-26 13:38:01.598 UTC [83] ERROR:  relation "vault_api" does not exist at character 232
database_dev  | 2023-05-26 13:38:01.598 UTC [83] STATEMENT:  SELECT "vault_api"."id", "vault_api"."name", "
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

6. sweetalert2

sweetalert2 is a beautiful, responsive, customizable, accessible replacement for JavaScript's popup boxes without external dependencies.
Primarily designed for JavaScript projects, you can integrate it with the three big frontend frameworks: Angular, React, and Vue.

GitHub logo sweetalert2 / sweetalert2

โœจ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. ๐Ÿ‡บ๐Ÿ‡ฆ๐Ÿ‡ช๐Ÿ‡บ




7. Video.js

Video.js is a web video player built that supports HTML video and Media Source Extensions, as well as other playback techs like YouTube and Vimeo. It supports video playback on desktops and mobile devices.
As with sweetalert2, you can integrate this library with the three JavaScript frameworks: Angular, React, and Vue.

GitHub logo videojs / video.js

Video.js - open source HTML5 video player

Video.js logo

Video.js - Web Video Player & Framework

NPM

Update: Big changes coming in Video.js 10, early 2026! Read the discussion.

Video.js is a full featured, open source video player for all web-based platforms.

Right out of the box, Video.js supports all common media formats used on the web including streaming formats like HLS and DASH. It works on desktops, mobile devices, tablets, and web-based Smart TVs. It can be further extended and customized by a robust ecosystem of plugins.

Video.js was started in May 2010 and since then:

  • Millions of websites have used VideoJS over time (source Builtwith)
  • Billions of end-users every month of just the CDN-hosted copy (source Fastly stats)
  • 900+ amazing contributors to the video.js core
  • Hundreds of plugins

Table of Contents

Thanks to the awesome folks over at Fastly, there's a free, CDN hosted versionโ€ฆ


Conclusion

This list lists seven open source projects that are worth checking out, either to use them or even to contribute๐Ÿ––
Happy coding!โœจ


Hi๐Ÿ‘‹๐Ÿป
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects ๐Ÿซฐ๐Ÿป

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles ๐Ÿ‘‡๐Ÿป

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful ๐Ÿฅน

Buy Me A Coffee

Top comments (11)

Collapse
 
shahwaix_karim_23 profile image
shahwaiz karim • Edited

I wanna add Editor.js, because when it comes to use a WYSIWYG editor it is the best choice . If you wanna enhance your coding skills then this masterpiece is for you!!

Collapse
 
dvalin99 profile image
Domenico Tenace Playful Programming

Hi @shahwaix_karim_23 !
Thank you for the tip, I'll take a look as soon as I can :)

Collapse
 
shahwaix_karim_23 profile image
shahwaiz karim

You're welcome! dude.
Happy coding!

Collapse
 
mrshadowgames profile image
MrShadowGames

Great list! Never heard of sweet alert. What a cool library!
Thank you for sharing!

Collapse
 
dvalin99 profile image
Domenico Tenace Playful Programming

You're welcome!
It's a pleasure :)

Collapse
 
cristian_yamberlacotacac profile image
Cristian Yamberla Cotacachi

Interesante me gustรณ la de los juegos ya que reciรฉn me graduรฉ y no tengo trabajo pensaba desarrollar un juego por el momento gracias

Collapse
 
dvalin99 profile image
Domenico Tenace Playful Programming

Thank you for the feedback :)
Good luck!

Collapse
 
baartch profile image
Andreas Brunner

If you're a React developer, you should checkout million.dev/

Collapse
 
dvalin99 profile image
Domenico Tenace Playful Programming

Thanks for sharing :)

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Helpful list of OSS

Collapse
 
dusty_sameer profile image
D Sameer

Hey that was quite helpful. Thanks for sharing !!! ๐Ÿ™Œ๐Ÿป๐Ÿ™Œ๐Ÿป๐Ÿ™Œ๐Ÿป