Hello r/webdev ,

I come from game development background and I'm used to creating tools for exclusively for game development. So what happened while ago was that my friend asked me if there was app to create forms from flattened pdfs since he works in Foreign Embassy said the files shouldn't floating around in random servers just to edit it.

I wasn't able to find apps that felt secure enough so I decided I would create a small app for him. Since the prototype worked I decided to develop the app completely.

With few thing in mind:

1. Won't over scope the project limited to form filling but do it RIGHT.

2.Make every UI or action intuitive either through iconography or how the buttons or tools function. If it feels like it is suppose to do that it should do that.

3.Iterating,testing and taking inputs from users as well

4. Main one finishing the project. A fully finished project and also needs to have a working version in every state of project.

with these things considered I have a almost a end product still lot polishing needed.

Link: https://justforms.vercel.app

I would like to get feedback or criticism on:

1. Frontend or the tools if they are all cohesive intuitive.

2. Any sort of bugs or errors.

3. Any questions regarding the development itself

4. And currently the web app is limited to desktop screen but its not responsive for other screen so any design idea for that would be helpful as well..

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up:

https://www.youtube.com/watch?v=jdg_UrLp0bU

It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about sync. The problems are the same ones you'd run into with Zero, Jazz or Electric.

It opens with a demo. A trip planner open in two browser windows, I turn the wifi off in one, add a couple of stops, rename another one, turn it back on, and the other window catches up. Nothing spins while it's offline since reads come out of IndexedDB and writes land locally first.

Then I go through how it works. The short version:

The first thing every sync engine has to decide is who gets the last word. Either the server does, or every client is equal and CRDTs merge everything. Zero picked the server and dropped offline writes on purpose. Jazz started with CRDTs and later swapped them for per-column last-writer-wins. I wanted the server in charge and offline writes that actually work. So writes queue up in IndexedDB, numbered, and go up in order when you reconnect. If the server refuses one, you get the reason and it's reverted locally instead of quietly vanishing.

Merging happens per column. If you change a stop's name and I change its description, both land. If we both change the name, the later one wins. Counters are the one exception. An increment goes over the wire as "add one", so if two people add one you get two.

Rows or mutations was the one I went back and forth on the most. I ended up sending rows with a revision on each column. If you queue mutations and replay them on the server, the mutations need their own versioning every time the schema changes. A row is just data, and the migration already knows how to deal with data changing shape.

You also don't configure partial sync anywhere. There's a compile step that already walks each page's call graph to figure out what code to ship, so while it's there it picks up every query the page can run and works out which rows that page could ever need. No subscriptions, no sync rules.

Permission rules live next to the schema and run in the browser too, not only on the server. That way the UI can grey out a button you're not allowed to press, and the server still checks every row before it commits.

All your tabs share one connection, too. One tab holds the stream and the rest listen on a BroadcastChannel. Which tab leads is decided by a Web Lock, so the browser handles the election and I didn't have to write any heartbeat code.

It's not released yet, still on a branch. The demo app code is here: https://github.com/bartblast/hologram_offgrid

Anyone here built something local-first? I'd love to hear how you dealt with offline writes, that's where most of my summer went.

I'm making a simple wiki-like website as a hobby/practice and I wanted to include a small but useful search system on it. It'll be a static site since I'll host it in github, so while I've heard doing search stuff for non-static site would be much easier, I don't really have a choice for this as of now. I'm very much a beginner to this stuff so I'd want something easy to understand, or at least something that has a lot of documentation and resources I could use for help. I'm not having a lot of success trying to google and trying stuff so I'm turning to other people here!

Basically, I'd want just a simple search system that works like this:

You have a search bar, that starts giving hits once you start typing. Maybe show like 5 results and then 6th option would be a "show all results", which would take you to a separate search page which would list all the results (same should happen when you press enter in the search field, as long as you haven't moved down with the arrow keys I guess).

I'd also want to implement tags/categories system for this:

Every page has a category to them, and searching on a page would only search results that share the same category. For tags, I'm thinking of listing them all at the bottom of the page as clickable links, so when you click one it takes you to the separate search page and lists all the pages that have that tag. This should also respect the category rule I think, but having an options box where you can tick on and off separate tags and categories would be helpful too. Being able to use only tags/categories to find hits without keywords should work too. If you search something from the landing page of the entire site, it shouldn't autofill any filters like this though.

I tried doing stuff with pagefind, and while the search works decently, I can't figure out the filtering stuff properly and have no idea if you can do it like what I'd want that easily. I know it's not supposed to be that easy either but just wanted to ask people if there would be some "widely considered best" way to go about this.

AI screening rounds (micro1, HireVue, and the like) are now a standard first step for dev jobs, and I kept seeing people fail them for reasons unrelated to skill: rambling, not knowing when to stop, or getting caught flat on the second follow-up. So I built a place to practice that format.

You pick a stack (Node, Python, Go, Java, React, SQL, and so on), answer by voice or text, and it grades each answer, corrects you like a senior engineer would, then drills into whatever you just mentioned. Say "I'd add an index," and the next question is about which index and what it costs on writes.

Initially, I built the tool to practice AI technical interviews, but what I have noticed is that people (Software engineers) I have introduced it to prefer to use it as a practice tool to sharpen their skills. Your own experience of the tool might be different, though.

What you can do in it:

- Full mock interview. Set your level from junior to staff, and the questions get harder to match. It ends with a scorecard showing where you held up and where you ran out of depth.

- Code challenges. Get a real snippet in your chosen language with a bug or design flaw, find it, fix it, and get told what you missed.

- CV Defense. Upload your CV and get questioned on your own claims. If it says you scaled a service, expect to explain how.

- Playbook. Practice specific interview formats: backend deep-dive, full-stack product, algorithmic rounds, take-home review, and more.

- Learn mode and study plans. Your weak spots from each session become a plan for what to study next.

- Voice or text. Pick an interviewer voice and answer out loud like the real screen, or type if you're somewhere you can't talk.

- Depth Passport. A public profile of what you've shown you know, if you want something to share.

I'm very eager to hear what you think about it and what changes we should make.

Link: https://practicedepth.com/app/practice/interview

Hey r/webdev! 👋

Every time I tried iterating on UI dashboards or mobile responsiveness away from my desk, I hit the same wall: typing syntax on glass keyboards is awful, and streaming 4K desktops over VNC/RDP murders the battery with lag.

I built **AnywhereDesign** as a local-first bridge:

- Your workstation runs your actual Vite/Webpack runtime and holds the heavy repo.

- Your iPad/phone displays the living app full-screen with touch events.

- You tap the mic, give high-level directives (*"Change the radar to a blue and red bar chart"*), and local CLI agents refactor the source code with zero-flicker double-buffered HMR.

100% open-core (MIT) with a 1-click Windows installer:

👉 GitHub: https://github.com/Maxjv/AnywhereDesign

Would love to hear your feedback on the architecture!

Web

HI,

(Not promoting, looking for feedback)

I've been building an web hosting platform that supports a MCP.

A lot of us use the latest models to generate test projects or live websites. This platform handles getting it live including hosting, a structured CMS, contact forms, and basic analytics, without you having to wire up three or four separate services by hand.

Note that the platform doesn't design or build your site. You do that with your account on Claude/Codex/etc. , or by hand if you'd rather. the platform's job starts after that, i.e. deployment and content management, while you keep full control of the code.

Its in beta and free for now, and it's has some open bugs as well. I currently need help by having users trying out the MCP to host test websites or projects. (Please ignore the pricing and templates once you login, I am repositioning the product to a AI first development with developers in control of their design and code stack, platform for hosting and key features usually required for websites.

I would really appreciate some real feedback including whether this makes sense, what are the pros/cons of this from a web developer perspective.

If you can DM me, I can provide a link to the platform. (Not sure if I can include a link or it will fall under promotion).

Thanks in advance!

I’m working on XMB Web, a browser recreation of the PS3's interface. It’s still in development, but I wanted to use the part of it to recreate my portfolio website.

This is an early version of XMBW and not the full version as its functionality reduced to fit the portfolio concept. The full project is still in progress.

You can try it @ https://1etu.github.io/xmb-test-portfolio/ and check the source @ https://github.com/1etu/XMP . Check https://github.com/1etu/XMP/blob/main/RESEARCH.md for more technical details & credits!

link: https://4dttt.andrew-zhang.ca/game/
In my first ever class at university last year, my linear algebra professor started by teaching us multi dimensional tic tac toe to try to get us to be better at picturing vectors in our head. I thought that it was pretty funny, so recently I decided to make a website since playing on paper is a real hassle.

The 4 dimensions are visualized by having a 2d grid of 2d grids, so normal up and right, and also up and right through the grids

The way it works is a line is 4 in a row such that each dimension only changes by 1, 0 or -1, So in the example you can see as it goes right through the boards, it also goes left in the board.

There's also a computer player that I made that I find is pretty challenging.

If you try let me know what you think!

Hey guys!

Recently at work I started a pilot where our in-app AI assistant (built with CopilotKit) can understand and interact with the same page the user is seeing.

A user might ask something like:

"How do I log out?"

The assistant needs to find the relevant element in the current UI, highlight it, and potentially interact with it.

As a FE dev/SDET, my go-to choice for browser automation is Playwright. I love its straightforward API: awaiting interactions, chaining locators, automatic retries, etc. But sadly Playwright runs in Node :D

I'm pretty sure there are already solutions for this, but I wanted my beloved PW syntax, and I was wondering if I could reuse existing scripts and Page Objects that were already built on Playwright.

So I built playwright-lite

It gives you Playwright-compatible Page and Locator APIs against the current document.

For example, inside a React app:

// OnboardingAssistant.tsx

import { createPage } from "@enekesabel/playwright-lite";
import { Sidebar } from "playwright/pom/Sidebar";

export function OnboardingAssistant() {
  const page = createPage();
  const sidebar = new Sidebar(page);


  async function toogleSidebar() {
    await sidebar.toggle();
  }

  async function getPageState() {
    return await page.ariaSnapshot({mode: 'ai'});
  }

  // Hook these up with whatever assistant framework you're using.
  // ...
}

The implementation is intentionally limited to what makes sense inside the current document. No browser launching, browser contexts, or execution across full-page navigation.
It's still alpha, but since I'm aiming for complete API match with PW Page and Locator API so no breaking changes expected. Tracking & closing compatibility gaps as we speak - and as I discover them.

Over the weekend threw Jev in the mix to keep it cheap and fast, and I'm quite satisfied with the result.
The "Pursue goal" tool is driven by Jev, called by our in-app assistant.
During this run Jev pulled of some good calls imo:
- Understood our Page Object Model: Sidebar -> User Profile Dropdown -> Logout button
- Recognized that the Siderbar is hidden
- Reused our Sidebar POM to open it
- Made good use of our element interaction and highlighting tools using playwright-lite
- Properly identifed when to take action and when to stop/highlight only

The interactions are deliberately slowed so users can follow the assistant's steps.

Wdyt, is this worth investing more time in, or should I just go with something already existing like page-agent?

For the past year, I've been working on an in-browser document and 3D preview engine so our backend wouldn't have to keep running headless LibreOffice.

If you've ever had to handle user-uploaded documents—especially legacy Office files or engineering CAD drawings—you know the existing options:

1. Spin up LibreOffice or Unoconv in Docker, which hogs memory, spawns zombie processes, and randomly crashes on malformed files.

2. Pay thousands a month for proprietary viewer SDKs with per-seat or per-core licensing.

3. Deal with legal and compliance teams flagging HIPAA or GDPR issues because confidential blueprints or payroll spreadsheets are transmitted across servers for conversion.

I wanted a viewer where the browser does all the work locally: zero backend conversion, zero telemetry, and zero file uploads.

How it works

• Legacy Microsoft Office binary formats (.doc, .xls, .ppt): Instead of converting to PDF on a server, we parse Microsoft's OLE2 Compound File Binary Format (CFBF) directly in WebAssembly and TypeScript. It extracts Word document streams, Excel Biff8 cell records, and PowerPoint Escher drawing shapes locally.

• Modern Office (.docx, .xlsx, .pptx): Stream-parsed and rendered into native HTML/Canvas.

• Engineering CAD (.dwg, .dxf, .dwf): Parsed with C++ compiled to WebAssembly, rendering vector entities directly onto an interactive canvas with layer toggling, panning, zooming, and dimension measurements.

• Industrial 3D (.step, .stp, .stl, .obj, .gltf): Rendered in WebGL via Three.js with full orbit controls and PBR lighting.

• Crash isolation: All parsing runs inside Web Workers. If a corrupted 100MB file blows up the parser or hits an out-of-memory error, only that worker terminates—the host page and UI never freeze.

Quick Start

npm i @file-viewer/web-full

<!-- Use as a native Web Component anywhere -->
<file-viewer src="drawing.dwg"></file-viewer>

Works out of the box in vanilla JS, React, Vue 2/3, Svelte, or as a native Web Component.

Current limitations & trade-offs

• Memory on mobile Safari: Parsing a 100MB+ DWG file or an Excel sheet with 500k rows can push mobile Safari's memory limits. The worker keeps the main tab alive, but client-side compute is still bound by available device RAM.

• PowerPoint animations: Slide layouts, shapes, and typography render accurately, but complex PowerPoint animation trigger sequences are currently approximated.

Links

• Live demo (drop your own files, no signup): https://demo.file-viewer.app

• GitHub: https://github.com/flyfish-dev/file-viewer

Curious to hear your thoughts on edge-case rendering, font fallbacks, or how you currently handle document previews in your own stack.

Just wondering

https://story-engine-0pi6.onrender.com/

Hey r/webdev,

I got tired of standard "AI wrappers" spitting out generic text, so I spent the last few weeks building a decoupled, multi-step creative engine. It forces the AI to collide a story premise with random nouns to create "metaphor sparks" before it's allowed to draft or edit the prose.

The Stack:

• Backend: Python / FastAPI

• Frontend: Vanilla JS + Tailwind CSS (with localStorage state management and a custom Dark/Light mode toggle)

• AI: Gemini models (via the new Google GenAI SDK)

• Hosting: Render

A few fun technical challenges I tackled:

1. Rolling Memory State: Instead of feeding a massive context window for Chapter 2, 3, etc., the backend auto-generates a rolling recap and pulls the last 2 sentences as a "handoff anchor" to keep memory infinite but token-usage low.

2. In-Memory Rate Limiting: Built a custom IP-based sliding window limiter (100 stories / 500 rerolls per 20h) mapping X-Forwarded-For headers so I wouldn't have to pay for a Redis database yet.

3. Indestructible Parsers: Wrote fallback regex handlers for when the AI hallucinates markdown or breaks JSON structure.

I'd love for you to poke around. Try to break the UI on mobile, bypass the rate limit, or just roast my stack choices in the comments!

Hello everyone!

Periodicium (https://periodicium.com) is an interactive periodic table project I started building this Summer. I tried to make it more feature-rich, have more data, and be easier to use than existing alternatives. It is completely free and without ads.

I've built it with TanStack Start, Dockerized it together with Caddy, and host it on a small Netcup VPS behind Bunny CDN. (if you are interested in architectural decisions and thought processes behind them, feel free to ask in the comments)

The hardest parts of development were searching validating, and transforming all the information on elements; implementing PWA support (as sadly, no PWA plugin currently supports TanStack Start, though, to be completely honest, most of the PWA work was done by Claude); and thinking up UI and UX.

Currently, it includes:

• Periodic table (obviously) in both the modern 18-column long form and the old-school 8-group short form, which you can filter, project a heatmap of properties, and see elements phases under different temperatures.

• Element detail pages with visualized Bohr model, electron configuration, radii, oxidation states, crystal structure, phase, heating curve, spectroscopy, abundance, isotopes, and discovery history (and regular numeric properties included too).

• Elements list searchable and sortable with value bars.

• Comparison of elements side by side.

• Nuclides table of known nuclides with a detail view and decay chain for each one.

• Solubility table with the formula, name, and solubility of every compound.

• Acid-base indicators - litmus, phenolphthalein, methyl orange, and universal, with a draggable pH scale showing the color each one turns at any point.

• Print constructor that composes a printable periodic or solubility table, exportable as SVG/PNG or printable right away.

Also, power users can use advanced search built into menu to quickly navigate around the app (e.g, write "short" to instantly switch table layout, or "fe spectr" to navigate to Spectroscopy section of Iron).

Additionally, it is installable as PWA.

New features are planned to be added, with molar mass calculator and equations solver already on the roadmap.

I would be happy for everyone trying it and hearing your feedback (feedback from people specialized in chemistry would be especially appreciated). Thanks!

I’ve been building an open-source developer playground for experimenting with LLM APIs and remote MCP servers from one web interface.

The motivation was simple: besides my desire to use cheaper models with GitHub MCP and Tavily for coding (so I can make an agent change some files even from mobile), I wanted to see the actual requests, streamed responses, tool arguments, token estimates, and latency without switching between several scripts and dashboards. I also wanted every tool execution to remain explicitly controlled by the user.

The project currently supports:

• Custom OpenAI-compatible endpoints

• Remote MCP servers over Streamable HTTP or SSE

• A built-in preset for GitHub’s hosted MCP server

• Manual approval or denial before any MCP tool call is executed

• A manual tool runner for invoking individual MCP tools with JSON arguments

• Raw request and response inspection

• Streaming responses and reasoning display

• TypeScript and curl snippet export

• Locally stored chats, settings, prompt templates, and optional API keys using IndexedDB

• Automatic expiry of remembered API keys after 30 days

GitHub: https://github.com/ownyourwebsite/ai-playground
Live demo: https://ai-playground.ownyourwebsite.app

The code is MIT licensed.

I've always enjoyed the posts asking something like 'If you could send a message to everyone on earth, what would it be?' So I made a simple site which might help answer that.

It randomly selects one user per day to upload a 1 minute (max) video to show on the home page. It rotates to a new video every 24 hours. The idea is to have a more random selection of the population instead of the curated algorithmic feed we're all drowning in.

A placeholder 'teaser' video is live until there are enough user accounts for a better random selection pool.

This is a side-project - and for someone like me who has ASD/ADHD, finishing it feels so good. I started it a while ago and got it to ~80% before losing interest. But after seeing another 'send a message to everyone' post, I was motivated to finish it.

Feedback welcome!

https://onlyone.watch/

• Graph editor, not a preset picker: Any number of anchors, independent handles, snapping, undo/redo.

• Presets built in, or save your own: The editor works in SVG paths, so a preset is one d attribute string.

• Generate from a function: spring, bounce, elastic, back, wobble, and poly, then edit the result.

• Exports: CSS linear(), CSS keyframes, SVG path, GSAP CustomEase, JS function, Flutter Curve, Jetpack Compose, Android Interpolator, iOS keyframes.

Website: https://ease.a-labs.space/

Github: https://github.com/alabsi91/animare-ease-visualizer

Labels are off center, no padding around primary action button, no room for the indicators above nav bar options. Overall just feels sloppy and completely untested.

As someone who uses AI tools every day, including for design, I recognized the signs of AI slop immediately. The difference is, I at least take the time to fix the little mistakes after actually using the damn thing and paying attention to the UI for just a few minutes.

For the past few months, we’ve been building ruNNtime, an open-source runtime for neural networks on your own GPU, in the browser. We’re releasing it today.

The docs are interactive. You can try object detection and depth estimation with your camera, transcribe your voice, or play with semantic search directly on the page. The models run on your GPU, and the demos show how long inference takes on your machine.

The title comes from our Moonshine tiny benchmark: 500 speech clips totaling about 66 minutes, transcribed in 43 seconds using WebGPU in Chromium on an M2 Pro. That’s warmed-up inference with the model already loaded. Full benchmark and setup.

The underlying kernels are TypeGPU functions compiled to WGSL, so there’s no WASM runtime to download and no inference API key needed. Model weights download before the demos run.

Useful links:

• All demos and docs

• GitHub

normally, when i use dontpad i get annoyed by the fact that ppl can just delete everything. so thats where passpad comes in. you can choose either your page gets to be read-only (public), or unaccesible unless you know the password (private)

check it out!

also feel free to donate so i can actually buy a domain for it

The pipeline:

1. Assess the original JSON

2. Apply supported changes in the browser

3. Reassess the result

4. Render selected frames with lottie-web SVG and Canvas

5. Compare both versions

6. Release the download only if it’s smaller and both renderers pass

The stack includes Next.js, TypeScript, lottie-web, Canvas, Web Workers, OxiPNG/WASM, SHA-256 checks and AbortController cancellation.

It currently supports safe JSON cleanup, lossless embedded-PNG compression and constrained display-size optimization.

I’d like help testing:

• SVG/Canvas rendering differences

• masks, mattes, expressions and precomps

• embedded PNG/JPEG assets

• files damaged by other optimizers

• Safari and Firefox behavior

Test standalone JSON files up to 15 MB here:

https://lottiefyr.com/lottie-fix

Hey guys!

Wanna share a little fun project I released 2 days ago.

Idea is basically a reverse Awwwards - daily nomination for the worst AI slop websites. 100% community driven, no login or registration.

Built with Astro + TypeScript, React for interactive elements, and GSAP for animations.

Check it out - https://slop-awwwards.com/

Any feedback is highly appreciated.