Explore 4 Must‑Try Open‑Source JavaScript Tools by Alyssa

This article curates four notable open‑source JavaScript projects created by developer Alyssa, each offering distinct capabilities for web developers.

Screenity – Chrome Screen Recorder

Screenity is a powerful Chrome extension that records the screen, allows drawing, adding text and arrows, and captures computer audio. Recorded clips can be trimmed, exported as MP4 or GIF, and saved directly to Google Drive.

Programming language: JavaScript

GitHub repository: https://github.com/alyssaxuu/screenity

Related open‑source components used:

Interactive text and arrows: https://github.com/fabricjs/fabric.js

Dropdown menu component: https://github.com/hernansartorio/jquery-nice-select

Trim/clip range slider: https://github.com/leongersen/noUiSlider

Color picker: https://github.com/Simonwep/pickr

Async video saving: https://github.com/jimmywarting/StreamSaver.js

Fix video duration metadata: https://github.com/yusitnikov/fix-webm-duration

Omni – Powerful Browser Plugin

Omni provides a simple interface to manage tabs, bookmarks, history, and execute various commands. It supports quick search, integration with Notion and Figma, and offers advanced settings for power users.

Programming language: JavaScript

GitHub repository: https://github.com/alyssaxuu/omni

Mapus – Real‑Time Collaborative Map Tool

Mapus enables collaborative exploration and annotation on maps. Users can draw, place markers, define areas, and synchronize plans with others in real time. Map data can be exported for further use.

Programming languages: JavaScript, CSS, HTML

GitHub repository: https://github.com/alyssaxuu/mapus

Flowy – Lightweight Flowchart Library

Flowy is a lightweight JavaScript library (≈10 k stars) that lets developers embed draggable flowchart blocks into web applications.

Usage steps:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

<!-- Add a container with class "create-flowy" -->
<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>

GitHub repository: https://github.com/alyssaxuu/flowy

These projects demonstrate a range of practical front‑end solutions, from screen capture to collaborative mapping and visual workflow design, and are freely available for developers to integrate and extend.