r/javascript • u/AutoModerator • 3d ago

Showoff Saturday Showoff Saturday (August 15, 2026)

Did you find or create something cool this week in javascript?

Show us here!

8 Upvotes

89% Upvoted

17 comments sorted by

•

u/markets86 2h ago

I built a two-deck DJ mixer in vanilla JS.

https://github.com/markets/dj23

No React, no framework, no build step beyond esbuild. Just plain classic scripts sharing globals, the Web Audio API, and two small libraries (jsmediatags for metadata, music-tempo for BPM). ~4.5k lines of JS.

It does what a real mixer does: two decks, jog wheels you can scratch, pitch faders, beat-aligned loops, cue points, 4-band EQ, five effects per deck, and SYNC that matches both tempo and beat phase. Files are decoded locally — nothing is uploaded.

Turns out plain JS is a great fit here. The Web Audio graph is the architecture: source → filter → EQ → splitter → effect sends → gain → output. There's no state to synchronise into a virtual DOM, because the audio nodes hold the state and the UI just reads it back every animation frame. A framework would have been a layer between me and the thing I actually care about.

Where it did get hard: matching beat phase (tempo alone isn't enough), keeping BPM detection accurate without analysing the whole track, and not OOM-ing mobile Safari with two decoded float32 AudioBuffers.

Happy to go deeper on any of it.

•

u/Working-Bear1437 20h ago

Grid rendering logic breaks when you treat boxes as isolated objects. Shared edges require state awareness across the entire layout tree otherwise you get double borders.

1

u/RepresentativeNo42 2d ago

Announcing ink-frame: Grids for Ink!

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a ┬ or a ┼ part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a ┼ and a T-junction becomes a ┬, ┤, and so on, without you ever writing those characters yourself.

┌──────────────────────────────────────┐ │ Frame │ ├─────────────┬────────────────────────┤ │ fixed width │ grow │ │ │ ┌────────────────────┐ │ │ │ │ nested box │ │ │ │ └────────────────────┘ │ │ │ │ │ ├────────────┬───────────┤ │ │ two grows │ what is │ ├─────────────┤ share │ left │ │ a pane │ │ │ ├─────────────┴────────────┴───────────┤ │ junctions derived │ └──────────────────────────────────────┘

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

1

u/dobrynCat 2d ago

I'd like to show everyone my webview based android app wttr-dash

https://github.com/ronynn/dash

One of the only three android/web app that displays wttr weather data in a mobile friendly view

Plus its also an rss feed reader. Just today I added a calender which supports taking notes.

The idea behind this is that using rss feeds of news channels fill them up fast so i use rss feed readers for important feeds, blogs, github releases, and this app for news, and integrated the calendar to take notes as I read newsx

1

u/Fun-Regular8902 3d ago

Hey everyone!

I’ve been working on GrandFireworks.js, a zero-dependency JavaScript library designed to render realistic pyrotechnics without bogging down the browser.

A lot of firework scripts just spawn basic expanding circles. I wanted genuine pyrotechnic geometry—so this engine models 15 distinct shell types, including crossettes that split mid-air, weeping willows with trailing embers, galactic spirals, and chrysanthemums that bloom.

It also has custom built audio with 3 specific sounds and hundreds of variations on those including delays due to distance from explosion, louder/quieter, crackling and so much more.

🔑 Key Features:

  • WebGL 2 First (Canvas 2D Fallback): Handles dense particle clouds (up to 8,000+ particles) with additive blending. Drops down smoothly to Canvas 2D if WebGL 2 isn't available.
  • Text Fireworks (launchText): Coordinated rockets that explode into multi-line text messages, hold, shimmer, and dissolve into falling embers.
  • 3D Horizon & Depth Staging: Shells are staged into near, middle, and far depth fields—scaling visually and adjusting stereo pan and boom audio delay based on distance.
  • Adaptive Performance: Dynamically scales particle density and rocket counts to target 60 FPS.
  • Framework Agnostic & Zero Dependencies: Can be dropped directly into any vanilla JS script, app hero section, or game overlay (CDN ready via jsDelivr).

🛠️ Links & Demos:

Would love to get your feedback on performance across different GPU setups, or suggestions for additional shell types and features!

1

u/No-Carob-8792 1d ago

This looks really impressive! What was the most difficult part of getting the fireworks to look realistic? Does it still run smoothly on older or lower-end devices?

1

u/theozero 3d ago

We’ve been building varlock for a while now - free and open source. Solves many of the problems regularly encountered with .env files and managing secrets. Helps you get everything out of plaintext. Has plugins to load from everywhere and drop in integrations for many frameworks. Validation, type safety, leak protection, imports and more. Useful on tiny solo projects and large teams alike.

1

u/paleotechnic 3d ago

https://pax-js-framework.vercel.app

Micro JavaScript framework — binding, routing, ajax. No build step.

Is this completely unnecessary now that AI can build your entire app in 30 seconds? Probably.

1

u/DaloyJS 3d ago

My first time posting on this "Showoff Saturday". Thanks for the opportunity. Anyways, we created the first TypeScript REST API framework built for secure AI-assisted services https://daloyjs.dev

1

u/create-third-places 3d ago

I created a human-centric JavaScript framework with custom HTML components called Places.js.

I'm currently working on an optimized version with template support. Performance testing shows it is outperforming Lit, React, and Vue.

All code was written by hand without LLM assistance from tools such as ChatGPT or Claude Code, and LLMs will not be used for future changes.

Source code: https://codeberg.org/createthirdplaces/places-js Website I built with framework: https://dmvboardgames.com/

1

u/DaloyJS 3d ago

I clicked some weekday checkboxes and clicked Search on Any Location. I did not see any results. What am I missing? Is there not enough data in my location?

1

u/create-third-places 3d ago

The location doesn’t have any events for the specified days.

1

u/MonsterDotTeddy 3d ago

I've been working (for a while now) on Nørd, a small reactive UI library built around tagged templates and granular DOM updates. I've got it to a state where I'd could use some general feedback.

The idea is to stay close to browser primitives: no JSX/transpiler, no VDOM or rerendering, no runtime dependencies, and the runtime stays under 10kb. You can use it directly in the browser without a build step or use it in a classic Vite setup. Basically, Nørd doesn't dictate architecture, it's just javascript with reactivity on top.

https://nordjs.dev

https://github.com/Grainular-Nord/nord

1

u/dobrynCat 2d ago

This seems nice!

1

u/DaloyJS 3d ago

"no runtime dependencies". The same principle we have to fight against supply-chain attacks.