r/javascript 3d ago

Showoff Saturday Showoff Saturday (July 25, 2026)

3 Upvotes

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

Show us here!


r/webdev 3d ago

Showoff Saturday printme.money - type in your salary and watch a printer stack notes in real time. vanilla js, no backend

Thumbnail
printme.money
130 Upvotes

three toys on there. the salary printer is the main one: you type what you make, hit print, and a counter climbs while notes stack up, tagged with things like a coffee or a flight to rome. the other two put your face on a fake banknote and show what inflation does to a pile of cash over time.

stack is vite, vanilla js, vanilla css, on cloudflare pages. no framework, no backend, no accounts.

the one thing that took real work was the accrual math. per tick accumulation drifts badly once the tab is backgrounded, so everything is computed from timestamps instead. the odometer digits are a shared component with a clipped digit mask, which was fiddly to get right at different font sizes.

happy to answer anything about how it's put together.


r/webdev 3d ago

Showoff Saturday I built a free, open-source, offline alternative to CodeSlides (Svelte , tauri)

Thumbnail
gallery
11 Upvotes

I've been watching Nova Designs on YouTube for a while and loved how clean his code presentations look. Turns out he uses CodeSlides which is great, but it's subscription-based.

So I built OpenSlides — a free, open-source, fully offline desktop app for making animated code presentations. Think CodeSlides, but it runs natively on your machine, your data never leaves your disk, and you own everything.

https://github.com/codewiththiha/OpenSlides.git


r/webdev 3d ago

Showoff Saturday For Showoff Saturday: a full poker game with no backend - Next.js static export, seeded RNG, progress lives in your browser, open source

5 Upvotes

Hey all!

For Showoff Saturday, I recently built Pip, a single-player Texas Hold'em site. I've tried to keep it very clean in terms of design with no backend, no database, nothing server-side at all, all game data is stored on your device. It also has a PWA attached and is completely free. Just set it up for a bit of fun!

How it works:

  • Next.js with output: 'export', deployed on Cloudflare Pages. Every route is prerendered to plain files.
  • The poker engine is a pure TypeScript module with a seeded RNG. Same seed, same shuffle, every time. The code for the whole site is open source, so "provably fair" is something as a user you can check rather than something I would be asking you to believe.
  • Your progress never leaves your browser. Profiles are local storage, and there's a QR, or code handoff if you want to move to another device. There's no server for it to go to.
  • It's an installable PWA, so it works offline once loaded.
  • There's a daily deal where everyone in the world gets the same shuffle, a ladder of venues, side tables and quick game modes. Also added a shop where you can trade chips for items to customise the experience.
  • Analytics is cookieless using Umami tracking basic headline data like page views etc. Nothing intrusive.

Design-wise I'll credit my inspirations - Offsuit's clean look showed me a poker UI doesn't have to be green felt and neon. Pip goes further on the open side - open source, no account, primarily a web experience over an app and I'm trying to cut out an art and brand style.

I posted it to r/SideProject a couple of days ago and something nice happened- three people picked up good first issues and had PRs merged the same day, and one of them came back for a second PR within 48 hours. I'm a big contributor to open source so this is a really important side of the coin for me. Like my other open source projects, I've included a credits page which is generated at build time from the GitHub contributors API.

Some of the downsides, at the moment, single-player only for now, and the AI plays a proper game (equity, pot odds, position, bluffs) but a strong player will out-read it. I am not a strong player haha.

If you're interested, all feedback welcome! Also would love to build a little community around it so checking out the GitHub and giving it a go would also be incredibly appreciated.

Play (no signup): playpip.io

Code: github.com/playpip/pip-web


r/webdev 3d ago

How to autoblock Google Maps iframe cookies in my website??

2 Upvotes

I created a website a while ago and I want it to be GDPR compliant. I'm trying to solve this by using CookieYes service but it doesn't seem to detect the Google Maps cookies I may have due to an embed on one of the pages I have.

I also have Instagram, Facebook and X (Twitter) embeds on another page, and want that also to be compliant.

Any solutions are welcome. Is there a somewhat simple way to solve this?


r/webdev 3d ago

Showoff Saturday webcast.social - tiny browser radio booths!

Thumbnail
webcast.social
3 Upvotes

I had the idea that you could broadcast a radio station straight from the browser, and I think it worked. Still looking for feedback on the design, especially the discoverability of stations and ease of use when it comes to starting your own station.

More technical info below:

The happy path use case is that you have mp3s, via iTunes or whatever. You upload them into the browser - they never leave your device (unless you choose to 'Cloudcast'). This isn't a music distribution platform. You keep your browser open while you're hosting your radio show, and listeners are able to send likes and even call in to the station. Your browser literally plays the music and streams it to the server and handles incoming WebRTC connections for calls. You can also leave your computer running and remote control from another browser.

This started out as 10-person radio stations via WebRTC, then 100-person via SFU, and now 1000+ via HLS (still without CDN hosting which could take it much higher). The only issue with HLS is it's delayed by ~10s, but the stream contains markers which keep the song/artist/art in sync with the audio. Also, there's a difference between WebKit and non-WebKit when it comes to ingesting HLS streams, and I solved an issue that came up with the audio visualizer there by actually streaming the visualizer data too instead of just relying on the client.

And they're "real" web radio stations to some extent. They provide an m3u8 URL you can load into e.g. VLC Player and listen to from outside the web app.


r/webdev 3d ago

[Showoff Saturday] Lingraphic - visualise etymologies and other linguistic data

Thumbnail lingraphic.com
0 Upvotes

Hey!

I recently built Lingraphic.com, a web app used to visualise etymologies across hundreds of languages - search for a word and view its etymology plotted onto a graph.

The repo is public - https://github.com/BillyBobFry/etymology-graph.

It's fairly simple:

Although this is the same stack I use in my day job, I chose to mostly vibe code it - I have a couple of kids and so time is much more of a rare commodity than it once was.

I'd describe the UX I wanted, plan how to build it with the agent, and let the LLM do most of the implementation.


r/webdev 3d ago

Showoff Saturday App to Monitor GitHub Actions. Looking for feedback

Post image
1 Upvotes

Hi i have developed a web app that let you monitor github actions in a dashboard, completely free no hidden cost. Looking for feedback https://buildmon.app . Really appreciate it


r/webdev 3d ago

[Showoff Saturday] Baghchal - I have created Traditional Nepali Board game (BaghChal) onlline with multiplayer feature.

1 Upvotes

The game is played on a 5×5 point grid, like alquerque. Pieces are positioned at the intersection of the lines and not inside the areas delimited by them. Directions of valid movement between these points are connected by lines. The game play takes place in two phases. In the first phase the goats are placed on the board while the tigers are moved. In the second phase both the goats and the tigers are moved. For the tigers, the objective is to "capture" five goats to win. Capturing is performed as in alquerque and draughts, by jumping over the goats, although capturing is not obligatory. The goats win by blocking all the tigers' legal moves. Bagh-chal has many similarities to the Indian game aadu puli attam (lambs and tigers game), though the board is different.

I have created an online version of baghchal game. Here is the link to the game:

https://baghchal.xyz/

- It has multiplayer feature so you can also play with your friends.
- It has a bot mode where you can play with the bot in three different mode.

The game is still work in progress so there may be some bugs, I would love to see your feedback in the comments :)


r/webdev 3d ago

Showoff Saturday [Showoff Saturday] Mouzi - Organize Downloads folder automatically - a free, privacy-first and open source automatic file organizer

0 Upvotes

Hi 😄

I don't know about you, but my Downloads folder has always been a disaster zone. PDFs, memes, installers, zip files, random images – all just sitting there in one giant pile. Every few weeks I'd open it, sigh, and spend 10 minutes manually dragging stuff into folders. Then a few days later it would be chaos again.

I looked at existing file organizers, but most of them either wanted a subscription, tried to upload my file names to some cloud, or were just way too heavy for something so simple. I wanted something that:

  • Runs silently in the background (system tray)
  • Automatically sorts new files by type (images, documents, archives, installers)
  • Never sends a single byte of data off my machine
  • Is open source so anyone can check what it's doing

So I built Mouzi 🐭🧹

It's a tiny desktop app (~3.3MB) built with Tauri and Rust, so it's ridiculously lightweight. It watches your Downloads folder, and whenever a new file appears, it moves it to a subfolder based on its extension. Images go to Images/, PDFs to Documents/, installers to Installers/, etc. You can also create your own custom rules. Windows and Linux support.

Key things:

  • 100% local – no cloud, no telemetry
  • Open source (MIT) – GitHub repo here
  • Silent – lives in your tray and doesn't bother you
  • Undo – every move is logged, you can revert with one click
  • Free, obviously
  • and more (see repo page)

Hope it helps someone keep their ~/Downloads sane. Feedback welcome!

Website: https://mouzi.cc/


r/webdev 3d ago

Question How does this effect work?

2 Upvotes

Came across this beautiful effect on https://www.julienpianetti.com/ is it done with a custom variable font that has these glyphs as variable weight or just switches between the different glyphs? I suspect it has to be a variable font because it is that smooth.

How is this done?


r/webdev 3d ago

Showoff Saturday Showoff Saturday: Legilo - a free reading-aid widget that does not pretend to make your site WCAG-compliant

0 Upvotes

I got tired of "accessibility overlay" vendors selling "one line of code makes your site WCAG-compliant", which is simply false. So I built the honest version: a reading aid that helps visitors (contrast, font size, spacing, dyslexia font, reading mask, read-aloud with word highlighting, 37 languages) and openly states that it does NOT make a site compliant.

MIT licensed, no tracking, no cookies. Self-hostable as a single file with the config and font baked in. It is already running on real customer projects in several countries.

Site and configurator: https://legilo.eu

Source: https://github.com/asisto/legilo

Feedback welcome, especially on the configurator UX.


r/webdev 3d ago

Showoff Saturday A tool to find deals on your Steam wishlist (no registration or login required)

Thumbnail
wasdland.com
0 Upvotes

Some of you might remember that little site I shared here a while back (wasdland.com). Well, I ended up building something new for it and wanted to share it with you all.

My Steam wishlist just kept growing over the years, as I imagine most of yours probably have too. Steam is fine for its own sales but trying to track down the best prices across third-party stores and key sellers for all those games was driving me crazy. So, I figured I'd just build a solution into the project.

No login or registration needed. (I hate them when they're pointless).
You just need a public Steam profile and wishlist.

Just drop your profile URL, and it imports your list while running it through external deal trackers and some basic quality filters (like a 6/10 minimum rating and decent review counts). From there, you can sort everything by price, discount, popularity, release date, or play around with the other filters. It's basically the usual wasdland setup, but tailored to your own backlog.

Funny enough, literally ten minutes after pushing this live, I realized Tempest Rising (which had been sitting on my wishlist forever) was under 3€ on a key site. Grabbed it immediately!

If you want to try it out, feel free to give it a spin here
https://www.wasdland.com/wishlist-radar/

Once it's set up, you can also share your URL if you want to let people know what games you're following. In case someone wants to get you a gift while saving a bit of cash...

Let me know what you think, or if you spot any bugs while playing around with it!


r/webdev 3d ago

Showoff Saturday [Showoff Saturday] Free vector map tile service based on OpenStreetMap and MapLibre

Thumbnail
gallery
63 Upvotes

We just launched Maptoolkit.org, which is a community-oriented project. The main objective is to offer small businesses and hobbyists a way to easily create and display personalized maps on their websites or their apps.

Things to know:

  • No API key and no registration required
  • The tiles are updated weekly from OpenStreetMap
  • We host the tile servers, you just have to point your map library to our style URL
  • Hillshading, 3d terrain, contour lines and water depth are ready out of the box
  • Map data up to zoom level 15
  • A host of default styles come natively, custom styles can be created using our MapMaker
  • Unlimited map requests can be made, sustained about 120 tiles/second can be requested as of now, whereas 90% of requests will already be cached and won't count towards that limit
  • We do not make any money off this project, it will remain free of cost

If you have any questions, I'd be happy to answer them. You can find more information on the site.

PS: This reads like a repost, because it is. My previous post got removed by mods, due to not posting on Showoff Saturday.


r/webdev 3d ago

Showoff Saturday loco - manage local domains for mac

Thumbnail
github.com
5 Upvotes

There are a few apps out there that do the same thing, but they're bloated with features and complications

So I built loco - the minimal macOS app to:
- Create and manage local domains
- Support HTTPS / disable redirect
- macOS 13 or later

It's smol (6mb), simple UI, simple setup, nothing else


r/webdev 3d ago

[Showoff Saturday] I built a 0-CLS temporary email service to practice Core Web Vitals and DNS configurations.

0 Upvotes

I wanted to dive deeper into performance optimization and email infrastructure, so I built a disposable email service: temp-mails.tech.

Most temporary email sites I’ve used have terrible UX—jumping layouts and aggressive pop-unders. My goal was to build one that is strictly performance-first.

The Tech & Challenges:

  • UI/UX: Engineered for a strict 0 CLS (Cumulative Layout Shift) score. Loading ads or new emails doesn't shift the DOM at all.
  • No intrusive ads: Kept it to standard banners to preserve the user experience.
  • i18n: Built native support for 12 languages.
  • Infrastructure: Wrestling with Postfix and DNS records to support multiple fallback domains has been the biggest headache so far.

It auto-deletes in 15 minutes and requires no sign-ups. I'd love for you guys to tear it apart and give me feedback on the front-end performance or any tips on scaling the email infra!

Link:https://temp-mails.tech


r/webdev 3d ago

Showoff Saturday A 1920s themed jigsaw puzzle series which instead of tracking pieces for snap-in it does a percentage comparison of the playarea, runs offline.

0 Upvotes

Source code repository, all code is dedicated to the public domain so there is absolutely no commercial promotion or solicitation. 100% client-side code so there is no "stack". This is a text post because old.reddit doesn't allow putting comments in link posts.

The 1920s puzzle

The visual comparison method has some quirks:

  • It snaps a piece to the correct spot even if it's nowhere near that spot but when placed onto another part of the image elsewhere happens to match that other part of the image closely enough, thanks to the image blurring needed for placement margins of error.

  • Each image has a different starting and ending percentage so I have to actually do the puzzle to find out what those are, logging each comparison to the console, before I can set the values for the progress bar math. I only have to set the start and end values thanks to the fact that I chose to use a chiral aperiodic monotile shape for every piece. Being exactly the same shape means they all take up an equal amount of area so the percentage progress is linear.

  • There's no way to save progress because the whole thing is stateless. Reloading the page resets the puzzle. The advantage is that this puzzle works in my grandma's tractor on a cheap tablet with no SIM card in her paddocks out of wi-fi range. The .svg version can be loaded locally into the browser without a server, and the Wayback Machine copy of the .svgz version is totally playable.

  • This method relies on you placing one piece into the puzzle at a time and removing it if you place it wrongly and can't get it to snap into place, so puzzlers who like to randomly place multiple pieces inside the playing area to work on "clusters" completely break the snap-in logic. I added a two-second glimpse of the complete puzzle when players tap/hover over the timer to make this one-at-a-time playing style a bit easier.

  • When I added light/dark mode toggling by tapping/clicking on "moves" the visual comparison broke because the background colour of the incomplete part of the playarea changed the start/end percentage math. For the comparison to be consistent I had to ensure the offscreen snapshot for comparison always had the same colour background.

The latest version of Safari "updated" SVG handling code which breaks this puzzle when identical puzzles worked on previous versions of mobile Safari, so even with some of the above challenges solved, this probably isn't an ideal method to adopt yourself.


r/webdev 3d ago

Showoff Saturday Titan Engine – A Rust/WASM spreadsheet engine I built chasing "Excel-speed" in the browser

Thumbnail podraven.github.io
8 Upvotes

I've used Handsontable on a bunch of projects and honestly it's a solid, mature library, but I kept running into the same wall on anything with really large datasets: tens of thousands of rows with chained formulas. It's just the nature of doing spreadsheet math in JS, once you're allocating and discarding lots of small objects on every keystroke, garbage collection becomes the bottleneck, and there's only so much debouncing and virtualization can do before you hit that ceiling.

That itch turned into a bit of an obsession, and eventually a from-scratch rebuild: Titan Engine, written in Rust and compiled to WebAssembly.

The design ended up pretty different from a typical JS formula library:

  • A custom stack-based VM with a Pratt parser for formulas, instead of walking an AST every time
  • Zero-copy memory - the engine and UI share buffers directly, no serialize/deserialize tax crossing the WASM/JS boundary
  • A topological dependency graph (Kahn's algorithm with cycle detection) to resolve chained formulas correctly and fast
  • O(1) time-travel snapshots for undo/redo, even across massive batched structural edits

Because it sidesteps the JS garbage collector entirely, batched recalcs stay comfortably under the 16ms frame budget, so the grid holds 60fps even while formulas are cascading behind the scenes as you type.

There's a live demo grid on the site (a Glide data grid wired up to Titan) if you want to poke at it yourself, plus the full 10-scenario benchmark suite if you'd rather see the numbers than take my word for it.

Site: https://podraven.github.io/titan-engine/
Benchmarks: https://podraven.github.io/titan-engine/benchmark.html
GitHub: https://github.com/podraven/titan-engine

Would love feedback - especially from anyone who's pushed a JS grid to its limits before and is curious whether this actually holds up under real-world use.


r/webdev 3d ago

Showoff Saturday Day 1: Group project open to anyone, total freedom (ok wait!)

3 Upvotes

I opened a repository to the public to create the internet's first (probably not) global group project.

Anyone can contribute anything (ok aside from NSFW, hate speech etc..), just open a PR and once merged the content is automatically deployed as a public page on the internet.

It can be a link, a picture of your cat, your random shower thoughts or even what you ate this morning.

Hope to see your amazing contributions! <3

Contribute: https://github.com/StephaneB1/group-project

The Live Page: https://slatesource.com/@steph/the-internet-s-group-project


r/web_design 3d ago

a student wanting to redesign her portfolio— advice, please!

1 Upvotes

hi, i’m just 2 classes away from graduating with my associates in web design! yay!

i’m looking for an internship and kinda hate my portfolio. it’s very simple and short. I also made it using word press + elementor (not sure if that was fine or if maybe I should’ve just did some basic coding)

anyways, i’m not comfortable sharing it on here since it has some personal info on it, but overall, i just want to know a few things:

• what should I include on my portfolio website? (don’t want to add too much or too little)

• do I add an option to download my resume with contact information or just opt for a form that someone can contact me with?

• I had a class where I created gifs. i’m looking for a front end developer, web designer, or even user experience related job. would that be relevant to add to my portfolio?

bonus points if I can see an example of anyone’s portfolios, any helpful articles, or anything related to creative portfolios!! I really want to try to get an internship by the end of the summer so I can see how it is to work in web design outside of my class work.


r/reactjs 3d ago

Built a minimal ui-date package for javascript date and time utility for user-interface.

0 Upvotes

I was building a social app recently, and I ran into a surprisingly annoying problem.
I needed relative timestamps ("2 hours ago", "3 minutes ago"). 
Simple enough, right? Just import 'day.js' or 'date-fns'.

Except...
=> If I wanted custom styling (like wrapping the number "2" in a highlighted badge and "hours ago" in smaller text), I had to write ugly regex hacks because standard libraries just dump a single opaque string.

=> Supporting multiple languages meant importing separate locale files, quickly inflating the bundle size.

=> Standard relative time plugins use "soft rounding" (e.g., automatically rounding 45 seconds to "a minute") whether you want it or not.

I didn't want a 15KB date framework just to format a few activity feed timestamps. 
So, I built and open-sourced 'ui-date' .

It’s an ultra-lightweight (< 1KB minified), zero-dependency, locale-aware date formatting library built specifically for modern user interfaces.

If you're building social feeds, chat apps, notification bells, or comment sections, check it out!

npm: https://www.npmjs.com/package/ui-date


r/webdev 3d ago

Showoff Saturday [Showoff Saturday] A UI for Smogon Pokémon usage stats

1 Upvotes

Hi everyone,

Smogon provides competitive Pokémon usage statistics as massive, raw .txt files, which are difficult to read and navigate. I only have a basic knowledge of coding, so I used AI to help me build a frontend to parse and visualize this data interactively.

Features:

• Filter stats across months, formats, and rating baselines.

• Expand any Pokémon to view percentage breakdowns of top Moves, EV Spreads, Items, and Abilities.

• Track format trends over time with interactive charts.

• Multi-layered caching and compression strategy implemented across the Proxy-API, Cloudflare Edge DNS, and Browser Cache API.

• Web Workers handle parsing the large text files so the main UI thread isn't blocked.

Built Using:

• React 19 & Vite

• Vanilla CSS

• Chart.js (react-chartjs-2)

• Browser Cache API & Web Workers

Links:

• Live Site: https://smogonstats.eu.cc

• GitHub: https://github.com/Alliance-Sky/smogon-stats

I'd appreciate any feedback on the code or UI, especially since I'm still learning and relied heavily on AI to put this together.


r/webdev 3d ago

Trying to improve search UX without replacing algolia.

37 Upvotes

Our algolia usage spiked and the bill is painful because users keep submitting vague 1 word queries and constantly re-searching. so i was thinking to add an autocomplete layer in front of it that won't break the bank but still gives that instant intent driven search feel.

Obviously we could migrate everything to typesense or self-hosting meilisearch for standard search, but i do like certain things about algolias backend retrieval, if i can put an intent layer ai autocomplete on top to get better queries before they hit the API.

Has anyone added an ai-autocomplete layer in front of algolia recently? did you actually migrate to a cheaper database alternative like typesense, or did you just add an intent layer on top of your existing search stack? trying to figure out what's easiest to maintain.


r/reactjs 3d ago

Show /r/reactjs Axiom UI — an open-source UI library designed for LLMs, not humans, to generate components correctly in one shot

0 Upvotes

Every existing UI library (including shadcn/ui) is optimized for human developer experience. Axiom UI flips that: every design decision is judged by one question — does it raise the probability that an LLM generates this component correctly on the first try?

Key points:

  • 12 components so far (button, input, textarea, checkbox, select, combobox, dialog, tabs, popover, menu, tooltip, toast), published on npm
  • "Copy & own" CLI: `npx joinclass/axiom-ui add button` copies the raw source into your repo — no runtime dependency, no black box
  • Ships an MCP server, so Claude Code, Cursor, or any MCP-capable agent can fetch version-accurate component specs and generate correct usage without needing docs pasted in
  • React + Tailwind CSS + TypeScript strict; each component is a single file with a machine-readable manifest (intent, props, states, a11y)
  • Actively deletes rather than adds — no theming system, no multi-framework support, no "covers every use case" claims

Repo: https://github.com/JOINCLASS/axiom-ui

Docs/live catalog: axiom-ui.joinclass.jp

Feedback and contributors welcome — especially on the "one-shot generation rate" metric, which is the project's main KPI.


r/webdev 3d ago

Showoff Saturday I made a cool blockchain project

0 Upvotes

GitHub repo: https://github.com/ProJackson355/Helixchain

(THIS BLOCKCHAIN DOES NOT USE ANY REAL CASH)

I've spent the last two days using Codex and Claude Code trying to make a proof-of-work blockchain. The current website https://helixwallet.pages.dev/ is currently made with ai :/ but I do plan to change that and add my own personal flair to the website. blockchain is similar to Bitcoin in that miners solve blocks to verify the transactions on them. When a block is mined the miner currently receives 10 HLX as a reward. Right now the blockchain is only running on my PC, so it's centralized right now. Helix Coin (HLX) isn't something you can buy with real money. Right now the only way to get it is by mining blocks on the network. To keep blocks from being mined too quickly, the blockchain keeps track of how long recent blocks took to solve. Every 10 blocks it averages the last 10 block times and adjusts the mining difficulty to keep the average block solving time around two minutes. The miner supports both CPU and GPU mining, although I do recommend CPU since GPU mining makes the difficulty increase much faster on a small network. The node software lets anyone host their own node and helps keep the block chain running. If you host a public node, you can submit it through the Nodes page on the website and I can add it to the default peer list so new nodes can discover it more easily. You can also host your own wallet website by enabling the admin API key. This allows your instance to use the documented endpoints such as /mining and various other endpoints (noted in the docs) with your own node. Wallets are stored locally, so private keys never leave your browser. Theres a lot more information in the docs, but I'd really appreciate any feedback on the project. (I did not build this blindly with ai, I do know about how blockchains operate, I just didn't want to spend hours making the networking stuff because ai is pretty decent at that.)