Domenico Tenace for Playful Programming

Posted on Jun 19, 2024 • Edited on Feb 1, 2025 • Originally published at javascript.plainenglish.io

7 Open Source Projects You Should Know - JavaScript Edition ✔️

#opensource #javascript #github #programming

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.

appwrite / appwrite

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

Appwrite

Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place.

English | 简体中文

Appwrite is an open-source development platform for building web, mobile, and AI applications. It brings together backend infrastructure and web hosting in one place, so teams can build, ship, and scale without stitching together a fragmented stack. Appwrite is available as a managed cloud platform and can also be self-hosted on infrastructure you control.

With Appwrite, you can add authentication, databases, storage, functions, messaging, realtime capabilities, and integrated web app hosting through Sites. It is designed to reduce the repetitive backend work required to launch modern products while giving developers secure primitives and flexible APIs to build production-ready applications faster.

Find out more at https://appwrite.io.

Table of Contents:

View on GitHub

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 🤞

melonjs / melonJS

a modern & lightweight HTML5 game engine

melonJS 2

A modern & lightweight HTML5 game engine

melonJS is an open-source 2.5D game engine designed for indie developers — perspective and orthogonal cameras, GPU-accelerated tilemap rendering, post-processing effects, custom shaders, 3D mesh support, polygon-accurate physics, modern Tiled workflows, and high performance. Runs on WebGL or Canvas2D with automatic fallback, tree-shakeable so you only pay for what you use, and the entire engine fits in ~150 KB minzipped of vanilla JS/TS with no toolchain lock-in. Built with ES6 classes and bundled with esbuild.

melonJS is licensed under the MIT License and actively maintained by the team at AltByte in Singapore.

Why melonJS

melonJS is designed so you can focus on making games, not on graphics plumbing.

Canvas2D-inspired rendering API — If you've used the HTML5 Canvas, you already know melonJS. The rendering API (save, restore, translate, rotate, setColor, fillRect, ...)…

View on GitHub

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.

4ian / GDevelop

🎮 Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.

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.

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

…

View on GitHub

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 🤣

mikeflynn / egg.js

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

`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>

(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()

…

View on GitHub

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 🖐

exa-studio / ApiVault

Your gateway to a world of public APIs.

Prerequisites • How To Use • Credits • Contributing • Support • License

Click here to submit your API

Built with

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

Set .env file

Inside root repository folder rename .env.dev file

cat .env.dev > .env

Inside /frontend folder rename .env.sample file

cd frontend
cat .env.dev > .env

Same action inside /backend folder

cd backend
cat .env.dev > .env

Client/Server side using Docker

# Go into the root folder
cd ApiVault

# Run docker
docker-compose up

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", "

…

View on GitHub

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.

sweetalert2 / sweetalert2

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦🇪🇺

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement
for JavaScript's popup boxes. Zero dependencies.

Installation | Usage | Examples | Recipe gallery | React | Angular | Laravel

✨ 🚀 ✨ Get 20% discount on Hostiger Web Hosting: https://hostinger.com/?REFERRALCODE=BKZHOSTINDAB

NSFW Sponsors

Become a NSFW sponsor

female torso sex doll

STC

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.

videojs / video.js

Video.js - open source HTML5 video player

Video.js - Web Video Player & Framework

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

Quick Start

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

View on GitHub

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 👇🏻

Domenico Tenace

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

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 🥹

Top comments (11)

shahwaiz karim • Jun 22 '24 • 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!!