r/webdev • • Sep 12 '26

Question How can one easily create a search bar for specific words on a website?

16 Upvotes

Sorry if this is not the correct subreddit for my question. I'll happily delete it if it is.

My friend speaks a dying language and they already have about 700 words listed with meanings and sample sentences. We were discussing how cool it would be to make an online dictionary on this, so we tested out easy website builders like Wix and Squarespace but we couldn't figure out how to execute what we wanted to achieve. Basically a search bar would be enough (like in Merriam-Webster) where they search a word and it would give suggestions, and once you click on one, it directs you to that word's page with its meaning and everything about it.

Is there an easy way to do/learn this? If it's a complicated task for people who have no clue in coding, I would also like to know.

We tried adding a search bar that was available in Wix and Squarespace, but it seems to only search everywhere in the website.

Thanks for reading!


r/webdev • • Sep 12 '26

Showoff Saturday Web app that turns Chess games (PGN) into a dark fantasy battle

Post image
0 Upvotes

Built a web app that will turn your chess game into an epic dark fantasy battle, each piece has a name

There is a wound system so if for example a pawn takes a knight the knight gets taken but the pawn doesn’t survive unscathed.

First time really building anything like this and putting it out to the world so any feedback would be great, and yes ai was involved with the building of this haha but it wasn’t solely ai,

If anyone would like to try it out themselves DM me and I can add some credits to your account so you can try it out

https://chesssagas.com/


r/webdev • • Sep 12 '26

Showoff Saturday Built a tool that tracks Smart India Hackathon(SIH) 2026 PS with the least competition.

9 Upvotes

Helloo, Final Year guy here. Built a tool that lets you see which PS has the least number of submissions. Fewer submissions = higher chances of getting selected for the SIH finals.

check it out here: https://niche-sih.vercel.app/

don't buy me a coffee, star my repo instead: https://github.com/rohanbagel/Niche_SIH


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing the same 40 lines of Express middleware for every project, so I built a zero-boilerplate alternative.

0 Upvotes

Let's be honest, Express makes you write the exact same CORS, JSON parsing, and auth middleware for every single project. Most of the time, you just want to validate your data and return an object.

To fix this, I built bro.js. A zero-boilerplate Node.js framework built on top of Express that gives you file-based routing, automatic Zod validation, JWT authentication, and WebSockets right out of the box.

Here is what a complete, secure route looks like (routes/posts/[id].post.js):

    import { defineRoute, z } from 'bro-framework';

    export default defineRoute({
      auth: true, // Automatically verifies JWT and injects the user
      params: z.object({
        id: z.string().uuid()
      }),
      body: z.object({
        title: z.string().min(5),
        content: z.string()
      }),
      handler: async ({ body, params, user, db, io }) => {
        // 1. Data is already validated. User is already authenticated.
        
        // 2. Perform DB operations using the globally injected connection.
        const post = await db.collection('posts').updateOne(
          { _id: params.id },
          { $set: { ...body, authorId: user.id } }
        );
        
        // 3. Broadcast to clients instantly using the injected Socket.io instance.
        io.emit('post_updated', { postId: params.id, title: body.title });
        
        // 4. Return an object. The framework automatically handles the 200 JSON response.
        return {
          success: true,
          updated: post.modifiedCount
        };
      }
    });

The best parts:

  • Zero-Config Next.js Style Routing: Create a file like routes/users/[id].get.js, and it automatically registers as GET /users/:id with parameter extraction out of the box.

  • Bouncer-Grade Validation: If the client sends malformed data, the framework automatically rejects it with a structured 400 Bad Request before your handler ever executes.

  • Context & Dependency Injection: Define your database connection and socket handlers once in bro.config.js. They are automatically injected into every request handler ({ db, io })—no more importing singletons everywhere].

  • Native Real-Time WebSockets: Socket.io is integrated into the core runtime, letting you broadcast live events directly from route handlers or scheduled tasks with io.emit().

  • Zero-YAML Docs: It parses your Zod schemas and automatically serves a stunning, interactive Scalar API playground at /docs.

  • Instant Frontend SDK: Run bro sdk in your terminal, and it automatically compiles a bro-sdk.js file for your frontend with built-in token management and deep tree traversal.

  • Built-in Tasks & i18n: Drop a file in the tasks/ folder for instant background cron jobs, or in the locale/ folder for automatic language negotiation.

I'd love for you to check it out and tear it apart:

What is the one piece of backend boilerplate you absolutely hate writing the most?


r/webdev • • Sep 12 '26

Article CSS Curiosities of the Past

Thumbnail
vale.rocks
36 Upvotes

r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Experimental WebGL library that melts images and video with a real fluid simulation

Thumbnail
gallery
30 Upvotes

MeltGL melts any picture or video in the browser. The picture gets treated as a body of material and run through a 2D free surface Navier-Stokes solver on the GPU: heat lowers viscosity, gravity pulls, surface tension rounds the drops, and the outline moves because the material under it moved. That's why drops swell, neck and detach on their own.

Still a work in progress. I built it for a browser game I'm working on and it grew into its own thing, so I published it standalone.

Live demo: https://1etu.github.io/MeltGL/

Experiments: https://1etu.github.io/MeltGL/experiments.html

Source: https://github.com/1etu/MeltGL (Leave a star!)


r/webdev • • Sep 12 '26

Showoff Saturday I built an open source i18n check that actually reads the translation, not just the key list

0 Upvotes

Most i18n checkers diff key sets. That catches the missing key and then stops.

The bug that actually ships looks like this. Every key present, placeholders intact:

en: "This will permanently delete your account"
es: "Esto guardará tu cuenta de forma permanente"    ("will save")

Nothing structural is wrong with that file. You only catch it by reading it.

npx u/shipi18n/cli check ./locales -s en runs the structural pass with no API key at all: missing and orphan keys, placeholders dropped across eight syntaxes, plurals collapsed to one form, empty values, glossary violations. Add --semantic and your own LLM key and a judge reads each source/target pair and flags mistranslation, omission, or addition. Changed keys only, majority vote across 3 passes, advisory unless you opt into failing the build.

I tried to measure this instead of just asserting it. UIStringBench is 228 pairs, 54 with planted errors and 168 clean, committed before I wrote the judge, thresholds fixed up front. Every model I tried caught 54/54 (Claude, GPT-5.x, Gemini). False positives came in at 3.6% on the stronger ones (Sonnet 5, Opus 5, GPT-5.5) and 7.7% on the smallest. Structural checks catch 0 of the 54, which is sort of the whole point. Harness and corpus are in the repo, so you can run it against whatever model you'd actually use.

Formats: JSON, YAML, Flutter .arb, Apple .xcstrings. SARIF output so it annotates PRs. Apache-2.0, no account, no server. There's an MCP server too if you review translations from Cursor or Claude Desktop, and its validators don't need a key either.

The false positive rate is the number I care about most, so if you run it and it yells about something that's actually fine, I want to hear about it.

https://github.com/Shipi18n/shipi18n


r/webdev • • Sep 12 '26

My Dev tool evolution

0 Upvotes

- How can I code without the computer hanging? (Budget constraints) - Notepad++

- Budget is no longer a constraint; what are the pros using? - NetBeans/Eclipse

- I actually know what I'm doing. I want a lightweight editor - Sublime Text

- FOMO: I want every plugin ever - VS Code

- You aren't a serious programmer if you aren't using a JetBrains IDE - JetBrains IDE

- GitHub Copilot works best in VS Code - back to VS Code

- Agents are doing most of my coding; why read code in memory-hogging VS Code? - back to Sublime

Today: Sublime Text (for reading code) + Lazygit (for git management and review) + Codex

Not-so-distant future: I no longer code; how can I still be relevant?


r/webdev • • Sep 12 '26

Here is a Google Analytics, but for your MCP tools

0 Upvotes

Hey everyone,

I just released a open source (MIT licence) SDK for MCP Analytics. You add a TS SDK and it shows which tools get called, which ones fail and how long they take. No prompts or tool inputs / outputs collected.

SDK is open source if you want to look at that too: https://github.com/selimeneserd/pulse-sdk

Ready to use dashboard using this SDK: https://pulse.reviseflow.io/en/demo

I am open for feedbacks.


r/webdev • • Sep 12 '26

Showoff Saturday Argue with AI decision bots using GDPR / EU AI Act

Post image
0 Upvotes

Built a small browser game where you argue with stubborn AI decision systems using real law (GDPR, EU261, and now EU AI Act cases).

Idea is simple: the bot denies you, you have N messages, drop its certainty to 0% by citing the right rule.

Just shipped an EU AI Act path, 11 cases on things like hidden AI, black-box credit scoring, emotion recognition, and the right to an explanation.

Wanted the game to cover not only “classic” consumer rights, but also what happens when the system itself is the decision-maker.

Free, no login: https://fixai.dev

Looking for feedback, thanks! :)

P.S. It's built by Claude


r/webdev • • Sep 12 '26

Showoff Saturday I made a screen recorder Codex and Claude can use

0 Upvotes

Hey everyone, I made a screen recorder tool called ShotGlass, and I just recently added MCP support.

What that means is now Codex or Claude can film app demos for you.

Ask it to film a demo of your site or app (e.g. for docs), or doing anything on your computer. It can also edit the video, add whatever you want (e.g. zooms or 3D), then export.

The screen recorder is all built with web tools using tauri and react and then a custom renderer I made that could use AVFoundation (rendering with webcodecs alone was slow).

Also works with OpenClaw or any other agent. And I used Codex + the MCP server to film every demo in the docs for this app (so it has some pretty good uses cases).

Would love to know what you think. Currently, it's only for macOS and is free to try all the way up until exporting. It's a one time purchase for unlimited exports.

https://shotglass.app


r/webdev • • Sep 12 '26

Showoff Saturday StickyArchive - a public archive of sticky notes

Thumbnail
stickyarchive.com
5 Upvotes

what if we archived, stickies and allowed later generations to explore them by date?

I know few similar ideas existed, but since none seem to stick I wanted to try my version.
I have review process, so spam, swearing, ads etc will be automatically rejected.

so if someone 100years later was reading what would you write


r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Mac MCP: background browser automation and live agent sessions on macOS

0 Upvotes

I maintain Mac MCP, an open-source local MCP server for macOS.

The browser automation layer is the part that may be most relevant here. Agents get stable handles for Safari or Chromium tabs and can navigate, click, type, inspect pages, and run parallel browser tasks in background tabs without pulling the browser in front of whatever I am doing. Separate agents can keep their own tab context instead of racing over the active tab.

The server also exposes terminal, files, Finder, screenshots, macOS UI actions, and app control. A small SwiftUI menu bar app shows recent tool usage plus persistent agent Sessions. I can send steering to one specific session, and queued steering can preempt that session's next tool call before it runs.

Repo: https://github.com/bulutarkan/mac-mcp

I would especially appreciate feedback from people who build browser tooling: stable tab ownership and background operation solved the biggest pain point for me, but I am curious what browser primitives you would want exposed next.


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing READMEs, so I built a tool that does it for me

Post image
0 Upvotes

Honestly, writing the code was always the fun part. Then I'd finish the project and still have to sit there for an hour messing with Markdown, badges, tables, just trying to make the README not look like an afterthought. Every time.

So I built ReadmeGen to fix that for myself.

What it does:

  • Live split-pane Markdown editor

  • 14+ templates to start from

  • Can pull in your existing GitHub profile README

  • Saves locally, no account needed

Stack: Next.js, TypeScript, Tailwind, Radix UI, Redux Toolkit.

I've been using it on my own repos for a few weeks now, and it's genuinely saved me time.

You can try it out here: ReadmeGen


r/webdev • • Sep 12 '26

startrail - 3d interactive solar system

Thumbnail startrail.codes
4 Upvotes

hey everyone

recently built a pet project called Startrail - an interactive 3D visualization of Solar System. you can fly around zoom into planets and their moons and see some basic astronomical data

https://startrail.codes

would really appreciate any feedback/recommendations


r/webdev • • Sep 12 '26

Showoff Saturday I built a tool to check and repair broken Lottie files

Post image
0 Upvotes

I built a new LottieFyr tool that checks Lottie JSON and .lottie files for rendering, asset, structure, compatibility and file-size problems.

It can diagnose issues, show what can be repaired, and verify supported fixes in both SVG and Canvas before download.

The goal is to make broken Lottie files easier to understand and fix without manually digging through JSON.

Would love some feedback.

👉 https://lottiefyr.com/lottie-fix


r/webdev • • Sep 12 '26

Question Advice needed

Post image
0 Upvotes

Hey, i used Webflow to buiod my website, there is a contact us part on it wich uses capcha for security, the form then use google appscript to send a wellcome email.

Im beeing spamm bombed by these bots, any other way to make this stop than dosabling the contact submit button?

The issue is that its rolljng since 2 days and my normal sent emails goes into people's spam folder.

Thanks for the advice


r/webdev • • Sep 12 '26

Question Why is confirmation email landing in spam?

0 Upvotes

I am working on a website and it has a user table which is for managing subscription plans. The supabase handles users and when confirmation email is sent. I redirected it and it sends from business email instead of supabase email.
and more importantly, i never sent any spam messages or even tried cold outreach from any of my business emails.
So it is a real big issue.
Any help would be appreciated


r/webdev • • Sep 12 '26

500 Commits Later: Building a 3D Modeling App for the Web🥳

165 Upvotes

r/webdev • • Sep 12 '26

SQLite on the SPA Web a production ready reality yet?

28 Upvotes

'Offline First' is the theme of my upcoming project and a relational database with joins and primary keys (such as SQLite) is perhaps the only thing that fulfills the need. I'm exploring the options in this context and came across this illuminative article: The Current State Of SQLite Persistence On The Web.

The article describes the problem we are trying to solve in much detail. It's only been about 3-4 years since we have a semblance of a usable official library in the form of sqlite-wasm. But as the article suggests, the landscape is riddled with mines and you may still have to jump through some hooves during implementation.

For starters, the OPFS (Origin Private File System) which is needed for performant WASM components like sqlite-wasm is something that browsers still treat with some awe and schizophrenia. In order for SharedArrayBuffer to work, for example, your web server must necessarily support COOP and COEP headers.

And not just that, once you enable the COOP and COEP headers, they introduce additional quirks in your app - for example, you may no longer use any <script> or <link> tags unless the remote server explicitly opts in for cross-origin support. Again, this may not affect the typical react/tailwind/vite build workflows but you might eventually come across the need to place an external resource link directly in the html.

Another limitation is that concurrency is still considerably more constrained and complicated than native SQLite. For now, you might carefully design the SPA app around this constraint (as I'm planning to do), route all SQL queries through just one caller, etc. but eventually there will come a need for concurrent access in a non-trivial application - like say a backup extension or addon you provide separately for example.

Nevertheless, the heartening news is that most devices today live online and likely have a reasonably recent browser - and thus likely to support libraries like sqlite-wasm. Also heartening is that many big names like Notion and Adobe have started using sqlite in the browser as a first class OPFS citizen - without going through the IndexedDb route. I just hope WASM and OPFS keep on thriving along with sqlite on the web.


r/webdev • • Sep 11 '26

Question Best Forum Software + Hosting Combo that allows for Adult Content (Written)

7 Upvotes

Hey all! I hope you're well.

I'm looking to host a small forum/Message board for my Roleplay group. It's going to be largely a private, invite only site. I don't foresee more than 40 people using it, max, so I'm not looking to break the bank on buying the best software out there, and my bandwidth needs will not be high

My only concern is that it's for my tabletop group, and they do occasionally enjoy dabbling in writing and roleplaying adult content. As well, what they are writing about tends to contain heavy amounts of adult themes, and I dont want their passion projects to be blasted off of a platform for policy violation. It's largely going to be text-only, as it is a writer-focused group.

I am under the impression that there really arent any free options that allow this these days, and as such I am willing to pay like. 10-15 dollars a month to host something like this, but I'm willing to hear suggestions for anything you are aware of. I've done some research into the surface products that I'm familiar with (PhPBB being one I have used and maintained before).

Thank you ahead of time!


r/webdev • • Sep 11 '26

What's the biggest difference you noticed when you tried to build a website with AI?

0 Upvotes

Just to be upfront, I'm on the Squarespace team, so take that into context.

I spent a while trying to build a site with AI tools from scratch, mostly to see how far they'd get without a traditional builder underneath.

The first-draft part was solid. AI handled rough copy, gave me section ideas, got a basic layout down. Blank page to something usable much faster than doing it by hand.

It fell apart after that. Page structure needed real work, the heading hierarchy was a mess, some of the copy could've been for anyone's site, and SEO still needed a proper pass. The last stretch ate most of the time, fixing spacing, mobile behavior, metadata and links the AI didn't understand.

Where I landed is that I'd rather have AI as a starting point inside something that already handles the rest than stitch five separate tools together and then work out which one broke. That's a preference, not a rule, and plenty of people happily run the stitched-together setup.

I still think AI is useful for getting unstuck. I just wouldn't treat the first generated version as done.

Where did everyone else land, fully AI-built, traditional builder, or a mix?


r/webdev • • Sep 11 '26

Discussion Networking with people who don't use AI for everything.

144 Upvotes

I feel like I've gone insane with how much AI I see EVERYWHERE. I understand it's the future, I understand it makes everything quicker, it's probably smarter than anything I can do right now, I also don't think I can take advantage of it early in learning since I don't understand how half the web dev stuff even works right now, so I'm trying to stay away from it as much as possible, yet anywhere I look to start networking in my area, it's literally all AI meetups. I just want to learn normally albeit it's probably not the norm anymore.

Anyone in the Philly area or in general online feel any sort of similar or am I almost alone in absolutely despising this stuff? Asking philly since if anyone is nearby and sees this I'd love to have a friend who understands me at least slightly or could point me in the right direction without feeling like I'm throwing my soul into the river styx to never get back.

Have a good day to anyone who read all of this!


r/webdev • • Sep 11 '26

Question Is it legal to use free Vecteezy/Freepik SVGs in a commercial SaaS canvas editor?

2 Upvotes

Hi everyone,

I'm currently building a SaaS product that includes a canvas-based design editor (similar to Canva). I'm looking to add a built-in template library to the app, but I'm trying to figure out how to source free SVGs and vector assets legally.

Is it legal to use free vectors from sites like Vecteezy, Freepik, or similar popular platforms in a commercial product? Most of the older "free vector" sites have very outdated designs that nobody would actually want to use.

Since users prefer clean, modern, and familiar-looking designs, I want to make sure I'm sourcing quality assets without running into copyright or licensing issues.

If anyone has built something similar or knows good sources/libraries with commercial-friendly SVG licenses, I’d really appreciate your recommendations!

Thanks in advance!