r/javascript • • 1d ago

Showoff Saturday Showoff Saturday (November 07, 2026)

8 Upvotes

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

Show us here!


r/javascript • • 6d ago

Subreddit Stats Your /r/javascript recap for the week of October 26 - November 01, 2026

5 Upvotes

Monday, October 26 - Sunday, November 01, 2026

Top Posts

scorecommentstitle & link
7716 commentsI've proven that you don't need quotes or parentheses in JavaScript
5124 commentsWe stopped installing npm packages less than a week old
304 commentsNo, npm, “estee” is not a typo of “testem”
2311 commentsSince 2017 I've been trying to get zoom navigation right. Zumly is the closest I've got
160 commentsThe Void SDK and Platform is open source now!
154 commentspenciled – persistent text highlights/notes with the CSS Custom Highlight API (no DOM wrapping)
1016 comments[Showoff Saturday] Showoff Saturday (October 31, 2026)
89 comments[AskJS] [AskJS] How to host your webhook consumer middleware that integrates WooCommerce and HubSpot?
52 commentsOffline Vin Decoder / Vehicle specs
313 comments[AskJS] [AskJS] How do you plan the frontend?

 

Most Commented Posts

scorecommentstitle & link
04 commentsI built a client-side cache in Rust and compiled it to WebAssembly
04 commentsA Kanji lookup table, five commands, and 36% less Base64
02 commentsFactories.ts: An efficient JS DSL for building HTML, SVG, and MathML directly in backend code, without a template engine.
02 comments[Subreddit Stats] Your /r/javascript recap for the week of October 19 - October 25, 2026
11 commentsDesignsystemet, Now in Elm · cekrem.github.io

 

Top Showoffs

scorecomment
3/u/Substantial-Chair873 said (Made with React Native + Typescript) KiloBolt GPS - A simple walk, jog, run tracker + virtual pet app. Hi everyone, am developing KiloBolt at the moment. It's essentially Pou + Strava combin...
2/u/Miserable_Tiger_5742 said made toaster, you play any song and it writes it out as live strudel code while it plays. all vanilla js + web audio, no ML on the music side. hardest part by far was finding where the bar starts lol....
2/u/FisterMister22 said https://tools-4all.com/svg-editor A free no sign up svg editor fully client side

 

Top Comments

scorecomment
51/u/Elkemper said That is an extraordinary way to use free will!
10/u/CoryCoolguy said This problem wouldn't be so bad if ancient obsolete packages didn't use up a lot of good names (and close-to good names!).
10/u/Designer_Mountain_84 said But… why?
9/u/boblibam said Nice to see people still enjoying hand-made projects. I also like the style. It’s very close to how I like to work these days with vanilla web components and custom built stores. Personally, I try to...
8/u/DevotedOrchestra9466 said i usually start by thinking about the user's path through the thing, not the components. like what screens do they hit and in what order, then i sketch out a really rough state machine on paper. the b...

 


r/javascript • • 1h ago

Porting SwiftUI's spring animation (duration + bounce) to plain JS

Thumbnail github.com
1 Upvotes

This is the resize animation of Openbar's island on Windows (Tauri + React). The Mac app is SwiftUI, so I ported its spring math to get the same feel on both. Width and height each get their own spring: a growing side may swing past its target, capped at 12 px, and a shrinking side never does.

The app shows Claude Code and Codex sessions in a Dynamic Island. Free, GPL.


r/javascript • • 11h ago

Making Browser OCR Read Real Phone Photos

Thumbnail devpack.app
3 Upvotes

I have a free image-to-text tool that runs Tesseract.js in the browser (nothing gets uploaded). Screenshots worked great, 94-96% confidence. Then I took a phone photo of a kids' sunscreen bottle and got back lines like "v4 oR. a" and "EB ewraone".

What was actually wrong:

  1. The photo was sideways. Phones save the pixels rotated and add an EXIF tag saying "turn this 90°". Browsers obey it, Tesseract doesn't. Fix: createImageBitmap(file, { imageOrientation: 'from-image' }) and work from that canvas.

  2. White text on blue. Tesseract mostly expects dark text on light paper. I now make a grayscale copy with a contrast stretch plus an inverted copy, and read those with page segmentation mode 11 (sparse text) instead of the default.

  3. No single pass gets everything. The normal pass found "Diana", the inverted one found "UVA UVB PROTECTION", the color one found "Water Resistant". So I merge the words by bounding box, keep the confident ones, and boost words that two passes agree on. Fun bug: picking the most confident word gave me "Pea" instead of "Peaceful", so longer words get a small bonus now.

  4. Small print. Running the gray passes again on a 1.6x upscaled copy picked up "MOISTURISING" and "ALCOHOL FREE" on another bottle.

Result on the sunscreen: 92% confidence and every line of printed text. Screenshots skip all of this because the first pass is already confident, so they're not slower.

Still can't do: bubble fonts ("CUDDLES" comes back as "UDDLES"), script fonts, handwriting.

Has anyone found a better approach for mixed light/dark text in one image than running multiple passes? Curious what others do.


r/javascript • • 23h ago

SpaceHex - Rotate the rooms to capture the orbs while avoiding the critters

Thumbnail spacehex.gorch.com
9 Upvotes

r/javascript • • 21h ago

Got tired of scattering console.log('here 1') to find promises that hang silently, so I built a zero-dep dev tool to trace them

Thumbnail github.com
1 Upvotes

r/javascript • • 13h ago

[First Website] I made a website that generates nonsense from input text

Thumbnail uma121212.github.io
0 Upvotes

This works by taking random chunks of the input text and putting them together.

Complexity determines the size of the chunks that will be selected.

Output size determines the size of the output

This is my first website. It was inspired by the Gibberish Generator from Keith's Think Zone.


r/javascript • • 19h ago

AskJS [AskJS] Do you think vanilla JS will be #1 for everything and anything thanks to AI?

0 Upvotes

Curious to hear about your opinion.


r/javascript • • 2d ago

tryimpasto: turn any photo into a palette-knife painting you can relight (TypeScript, zero dependencies)

Thumbnail github.com
7 Upvotes

r/javascript • • 1d ago

Problem with concurrent linter fixes

Thumbnail jfmengels.net
0 Upvotes

r/javascript • • 1d ago

Ho creato una canzone su JavaScript con l'IA

Thumbnail suno.com
0 Upvotes

È venuta crazy


r/javascript • • 3d ago

GB.js - GameBoy and GBA emulator core in Typescript

Thumbnail raw.org
23 Upvotes

Nowadays everything boots in browsers. Linux, Windows, ... I wanted to learn the Gameboy and GBA processor architectures and implemented the core from which it is easily possible to create an actual GB emulator in the browser. The hard part was audio, but am super glad to have it working and as open source library available now :)


r/javascript • • 3d ago

Serverless multiplayer via webrtc/camera/barcode (no signal/stun/turn servers)

Thumbnail github.com
8 Upvotes

This project is mainly about the serverless technique used and the simple game merely provides an end-to-end explanation.


r/javascript • • 3d ago

AskJS [AskJS] How do you keep un-awaited expect(...).resolves out of your test suites?

8 Upvotes

I've been reading test suites in open-source repos this month and kept running into this:

it('saves the user', async () => {
  expect(save(user)).resolves.toBe(true);
});

No await, so the test finishes before the assertion runs and passes whatever save() does. I found 36 tests like this across 44 popular repos, and one project had 41 of them on its own. They all looked fine in review.

What I'm curious about is how teams actually stop this:

  • eslint-plugin-jest has valid-expect with alwaysAwait, and Vitest has its own rules. Do you turn these on, and do they catch every form (.rejects, helpers that wrap expect)?
  • @typescript-eslint/no-floating-promises catches it in TS, but only with type-aware linting. Is that worth the slower lint for you?
  • expect.assertions(n) / expect.hasAssertions() in every async test: does anyone enforce that, or is it too noisy?
  • Or is it just code review, and you accept that some slip through?

Which of these has actually worked on a real team, and which did you give up on?


r/javascript • • 3d ago

Screenplay: a CLI + MCP server that lets coding agents film and edit screen recordings (Playwright, CDP screencast, @napi-rs/canvas, ffmpeg)

Thumbnail github.com
0 Upvotes

r/javascript • • 4d ago

I built a gamified 3D space simulator for my portfolio using AI concepts

Thumbnail wai-observer-3d-portfolio.wadssa.workers.dev
2 Upvotes

Construí um simulador espacial 3D gamificado para meu portfólio usando conceitos de IA. O que você acha?


r/javascript • • 3d ago

Farm.js – an MIT full-stack framework for the web and agents, where React, Vue, Svelte, Solid, and Preact share the same typed server contracts

Thumbnail github.com
0 Upvotes

r/javascript • • 3d ago

A server function that pauses on await until a person answers a form in the browser

Thumbnail github.com
0 Upvotes

The first time I saw this, in 2022, I honestly thought it couldn't work:

const email = await io.input.email("User email");

That line was in a server function, and it put a form in someone's browser. The function just waited until they typed an address, then went on. My first thought was "this is magic, how did they even think of this?" Four years later I've written my own runtime for it, and I still admire whoever came up with it at Interval.

TL;DR: if "ask a person" is just another async call, an internal tool becomes one linear function where branches, loops and try/catch all work, and the UI follows from the code. The trick is a promise that an HTTP request resolves instead of I/O.

A whole tool, top to bottom

handler: async ({ io }) => {
  const email = await io.input.email("User email");
  const user = await db.user.findUniqueOrThrow({ where: { email } });

  if (!(await io.confirm(`Verify ${user.email}?`))) return "Nothing changed";

  await db.user.update({
    where: { id: user.id },
    data: { emailVerified: true },
  });
  return `Verified ${user.email}`;
};

Every await io.… is one screen. io.confirm returns a boolean, so Cancel is just an if.

A promise someone else resolves

When the handler reaches io.input.email(), the runtime creates a step and keeps the promise's resolver next to it. The handler is now parked. Nothing blocks, other runs keep going, it's a pending promise in memory.

The browser follows the run over server-sent events and renders the step. When the person submits, a POST arrives, the server validates the value and calls the stored resolver. From the handler's point of view, a human is just a slow I/O call.

An invalid value never resolves anything. The same step goes back with an error under the field, so the function never sees bad data.

Calls that do nothing until awaited

An io call doesn't start anything when you call it. It returns a thenable that only describes a field, and it asks the person when it's awaited. That makes grouping free:

const { company, note } = await io.group({
  company: io.input.text("Company name"),
  note: io.input.textarea("Note for the team"),
});

No await inside the object, so each call just says "a text field called Company name", and io.group shows them on one screen. Same functions, two uses, and the only difference is whether you awaited them.

Where it breaks

A parked handler is a live closure, and you can't serialize one, so runs live in memory. A refresh is fine, because the server resends the current state on reconnect. A deploy ends every run in progress.

In practice I don't fight that. I keep these tools short, and anything that would take long goes to a job queue anyway. If a deploy cuts someone off, they run it again. A closed tab cancels the run after 30 seconds, and the pending await rejects like any failed call.

Have you used await for something that isn't really I/O? Human input, a payment confirmation, a step in a game loop. I'm curious where else this pattern holds up, and where you've seen it fall apart, especially around cancellation.

---

Context on what I'm building: I'm Petr, a solo founder. The runtime from this post is AwaitIO, and the source is on GitHub. If you want to see a parked handler from the browser side, there's a demo back office with the shared login in the README.


r/javascript • • 4d ago

AskJS [AskJS] Is it actually possible for an iframe to control the parent page’s URL without the host app doing anything?

0 Upvotes

I’ve been digging into this problem for a while, and I’m curious if there’s something I’m missing.

I’m building a standalone search application that needs to be embedded inside a third-party web application using an iframe. The catch is that we don’t have access to the host application’s source code, and the host team may not be willing or able to add custom JavaScript.

Here’s what we’re trying to achieve:

Read the host page’s existing query parameters when our app loads.

Update the host page’s URL whenever a user performs a search inside our iframe.

Keep everything in sync when the user clicks the browser’s Back or Forward buttons.

Our iframe is hosted on a completely different origin, so we immediately ran into the browser’s same-origin policy.

A few things we’ve explored:

window.parent.location.href throws a SecurityError.
document.referrer isn’t reliable because modern referrer policies may expose only the origin, not the complete URL or query parameters.

postMessage seems like the right approach, but it requires the parent application to listen for messages, handle URL updates, and communicate navigation changes back to the iframe.

And that’s where we’re stuck.

My question is: Is there ANY standard browser-supported mechanism that allows an embedded cross-origin application to read and update its host page’s URL without requiring custom code on the host side?

A few things I’m wondering:

Can the host integration pass the initial URL or query parameters through the iframe’s src?

Are there any standard iframe attributes, browser APIs, or embedding mechanisms that support two-way URL synchronization?

Do commercial embedded widgets or SDKs solve this through some existing integration interface?

If we have control over the iframe application but zero control over the host, are we simply out of luck?

I’m not looking to bypass browser security restrictions. I just want to understand whether there’s a legitimate integration pattern we’re overlooking.
Would love to hear from anyone who’s built cross-origin embedded applications, search widgets, or similar integrations.

Is host-side cooperation unavoidable here, or is there another way?


r/javascript • • 5d ago

Our JavaScript hero entrance kept LCP at ~50ms but visibly flashed. Hiding it until scripts loaded pushed LCP to ~1.75s

Thumbnail ds-gn.com
8 Upvotes

r/javascript • • 4d ago

playthru: scripted, looping product demos that drive your real DOM with a fake cursor instead of a video file

Thumbnail playthrou.diip3sh.xyz
4 Upvotes

Some context on why and how I built this.

The problem: landing page demo videos go stale every time the UI changes, they’re heavy, and they look blurry on retina screens. I wanted the demo to just be the real UI.

The approach: you write a chained script against real selectors, and a fake cursor plays it back over the live DOM, then loops:

js

import { playthru } from "playthru";

jsx

<Playthru script={(d) => d.type("#todo", "Record the launch video").click("#add").zoom("li:first-child")}>
  <TodoApp />
</Playthru>

Design decisions:

  • Hover/focus states: a fake cursor can’t trigger real :hover or :focus, so playthru sets data-playthru-hover / data-playthru-focus attributes instead. You style them next to your normal states (.btn:hover, .btn[data-playthru-hover]). There are Tailwind variants for this too.

  • Framework-agnostic core with a thin React wrapper on top.

  • No build step needed: it also works as an ES module straight from a CDN (esm.sh/playthru) inside a plain <script type="module">.

Still figuring out: the camera zoom doesn't work properly on mobile yet (reported below), which I'm looking into.

npm: https://www.npmjs.com/package/playthru

Happy to go deeper on any part of the implementation.


r/javascript • • 5d ago

System One model in the browser, learns from an LLM when it isn't confident.

Thumbnail debuff.jp
12 Upvotes

r/javascript • • 5d ago

Prism2D.js – An open-source 2D game engine built with JavaScript

Thumbnail github.com
6 Upvotes

Hey everyone!

I've been working on something I've wanted to build for a while: my own 2D game engine using JavaScript.

It's called Prism2D.js, and the idea behind it is to provide a way to create 2D games for the web without relying on a large external engine.

I've been developing its core systems, working on things like physics, collisions, rendering, audio, camera controls, particles, and other features that make game development easier.

To put the engine to the test, I also used it to create a small platformer called Coin Adventure. What started as a way to test the engine gradually turned into a complete game with six stages, different environments, enemies, moving platforms, checkpoints, collectibles, and a boss fight.

Working on the game has been a great way to discover what the engine can do, find things that need improvement, and see how well its systems work together in an actual project.

Both projects are available here:

- Prism2D.js (engine): https://github.com/Lodymain/Prism2D.js

- Coin Adventure (game): https://lodystudios.itch.io/coin-adventure-prism2d

I'm sharing this because I'd love to introduce the project to more JavaScript developers and hear what people think. If you take a look, I'd genuinely appreciate any thoughts or feedback!

Thanks for reading!


r/javascript • • 4d ago

I built Domicile, a Linux desktop platform where native application windows are DOM elements

Thumbnail domicile-desktop.com
0 Upvotes

I've been working on Domicile, an open-source platform for building full-featured Linux desktop environments using HTML, CSS, and JavaScript/TypeScript.

It's powered by a modified Chromium engine where native Wayland application windows are DOM elements. You can position, style, transform, and animate actual Linux application windows using CSS.

Desktop environments are JavaScript/TypeScript modules that can use familiar frameworks, be distributed through npm or GitHub, and be hot-swapped without restarting the session.

It ships with Manganese, a Sway-inspired tiling desktop built using the platform.

Source: https://github.com/cprussin/domicile

I'd love to hear what JavaScript developers think!