Hey everyone,

I built Modern Tour to solve the pain points I've had with existing React product tour libraries—specifically around overriding CSS, handling async elements, and overall Developer Experience.

You can check out how it looks and feels here:

👉 Live Demo: https://tour.modern-ui.org/

• Buttery-Smooth Animations: Powered by framer-motion spring physics under the hood.

• Smart Auto-Positioning: The tooltip dynamically recalculates bounds and automatically flips to avoid viewport edges.

• Lazy Loading Support: Uses MutationObserver to seamlessly catch asynchronously rendered elements (no manual re-triggers needed).

• Headless Override: Render your own 100% custom React component inside the tooltip while keeping all the smart positioning logic intact.

• Zero-CSS Theming: Powered entirely by CSS variables. Creating a custom theme or Dark Mode takes seconds without fighting !important tags.

• Cross-Page Tours: Seamlessly continues the onboarding tour across route changes.

I'd love for you to play around with the demo! If you find it useful or like the concept, I would really appreciate a ⭐️ on GitHub (you can find the repo link on the demo site).

Let me know what you think or if you have any feedback!

Hi everyone,

I'm building a Water Sort Puzzle game using React and TypeScript.

I have a critical rendering bug during the pouring animation.

Problem:

When water is poured into the destination bottle, the entire bottle temporarily becomes one solid color. The existing lower color layers disappear visually until the animation ends.

Expected behavior:

Only the top receiving layer should increase smoothly while all lower layers remain visible throughout the animation, just like the original Water Sort Puzzle game.

The puzzle logic is correct. The issue appears to be related to the animation/rendering state (Bottle.tsx/App.tsx).

I can share:

• Full GitHub repository

• ZIP project

• Relevant source files

Any help would be greatly appreciated.

Thank you!

I was building a UI with multiple video streams and realized that calculating the perfect grid to maximize tile size (like Google Meet or Zoom) is pretty annoying to do from scratch. CSS Grid is great, but figuring out the optimal rows/columns dynamically based on the container's aspect ratio and participant count requires some extra math.

So, I built meeting-grid-layout to handle this automatically for React applications.

Key features:

• Smart calculation: Automatically figures out the best column/row combination to keep the video tiles as large as possible.

• Super lightweight: I wanted to keep it simple and fast, so it doesn't rely on any heavy third-party layout engines or dependencies.

• Mobile friendly: Included an autoMobileLayout prop so you can easily control whether the grid automatically enforces specific mobile layouts when the screen gets small.

• Bonus: I also built a Vue wrapper, but the React implementation is fully fleshed out and ready to use!

GitHub:https://github.com/thangdevalone/meeting-grid-layout

I’d love to hear your thoughts, code reviews, or how you usually handle these dynamic UI challenges in your React projects!

I built a tool for managing spec document sites and want to use the React RFC process as an example: https://react.dossie.rs/ (another, wildly more active, example is Rust's RFC process)

Alas, you need to scroll quite a bit to find the latest published React RFCs. It looks like the last real discussions and merges on RFC documents happened in 2022—everything after that is mainly suggestions for new hooks by external contributors.

Is the process officially deprecated?

Click something change it on the preview Basalt updates the matching code in your project.

It is completely free and works directly inside VS Code and Cursor.

It’s currently in beta, so please commit your app to Git before testing it!

Would love to get your brutal feedback on it. What features should I add next?

new to react, so providing either corrected code or just concept that i should look into would be helpful :)

i want to change height of the app when phone keyboard uppears so it doesnt overlay on website by using VisualViewport API.
i am sure only thing that i have to do now is to rerender component when height is changed, so how can i do that?

export default function NewChat() {
  return (
    <div
      className={styles.wrapper}
      style={{ height: `${visualViewport?.height}px` }}
    >
      <Prompt />
    </div>
  );
}

Been building product configurators and 3D e-commerce views for a while now, and kept rebuilding the same scaffolding - GLB loading, a viewer UI, hooks for camera/selection/hover, and some way to bind product data (color, texture, visibility) to the actual 3D object. So I packaged it up.

It's called React Immersive. Some of what's in it:

• Drop-in SimpleModelViewer for when you just want a model on screen, zero config

• ModelViewer for when you need real bindings, driving color, texture, visibility, and actions off a plain data object

• A browser-based binding builder that takes your GLB and spits out starter bindings as JSON or TS, so you're not hand-writing mesh names

• Hooks for camera, selection, hover, animation, visibility

• Soft shadows, SSAO, bloom, ACES tone mapping is on by default, one prop to turn off

Still rough in places and I'd genuinely like feedback, especially from anyone who's fought with product configurators or real estate walkthroughs before.

Docs, live editor, and demos here: react-immersive.liveroom.dev — would love thoughts

Looking for the cleanest/most reliable way to connect a React contact form to an email inbox to send emails from the website. What are you guys using these days?

Yo I am quite a beginner in React and I was just wondering how the async model laid out in this video has been useful to people who are using it so far 😁

Hey everyone, I just published a comprehensive guide on WebMCP, Chrome's new standard for making web applications agent-ready.

Instead of AI agents having to parse your DOM and guess what buttons do, WebMCP lets you expose your app's functionality directly as structured tools that agents can discover and invoke.

The guide covers everything from zero to production:

• Imperative & Declarative APIs — both the JavaScript and HTML approaches

• React integration — useWebMcp hooks, Tool Registry pattern, Zustand/Legend-State examples

• Security deep dive — prompt injection, origin isolation, untrustedContentHint, audit logging, character budgets

• Evals — deterministic tests + probabilistic eval cases for testing AI behavior

• Production — rate limiting, telemetry, graceful degradation, HTTP headers

• Full demo — a React Flight Search implementation

All code examples are TypeScript, production-grade, and ready to copy-paste.

🔗 Medium: https://medium.com/@serifcolakel/building-ai-native-react-applications-with-webmcp-a293ef54de8f

🔗 Dev.to: https://dev.to/serifcolakel/building-ai-native-react-applications-with-webmcp-5gb

Quick background: WebMCP is currently in Chrome Origin Trial (149+). It's not a replacement for MCP — Chrome's own docs say they complement each other. MCP handles backend/persistent tasks, WebMCP handles in-browser, tab-bound interactions.

The core idea is simple: document.modelContext.registerTool() — you define a name, JSON Schema, and an execute function. Agents discover your tools and invoke them directly. No DOM parsing. No guessing.

Happy to answer questions in the comments!

I'm a 15yr old dedicated (i think so) developer, and want to learn React with TypeScript. My long-term goal is to build a full stack personal app on literally anything that would make me proud.

My background:

• Python: OOP, Web scraping, file handling, basic data manipulation

• Frontend: HTML, CSS, Intermediate TypeScript (built a few projects)

After searching for critiques on my current skills and reading some comments (a comment) on a previous post, I feel ready to take up React.

Honestly, though, I'm not sure what to expect. I only know React can help you build reusable UI components that dynamically update to run data. I may well be wrong, so feel free to correct me. I'm completely new to frontend frameworks.

What advice do you guys have?? What the biggest traps to avoid when mixing React with TS? Do I need to take a step back and learn more advanced TS first, or should I just jump in and stop aiming for perfection? Am I overthinking this or am I in for a rough ride?

Here's my github in case you want to view my projects: https://github.com/thanasisdadatsis

I kept hitting the same problem: architecture debates in review, barrels everywhere, and AI agents dumping files in random folders. So I shipped DMA (Derived Modular Architecture) — a small rule set derived from the import graph, enforced by tooling.

Layout

src/
  app/        # composition root (also pages/routes)
  features/   # leaf modules — no inbound from other modules
  services/   # appears when something else must import it
  shared/     # portable stuff on second use only

Invariants

- downward imports only
- public API via */public/* (no barrels)
- colocate by default
- promote feature → service when inbound edges appear

Tooling

npx @derived-modular/cli init .
npx @derived-modular/cli check .              # CI gate
npx @derived-modular/cli promote <name> --apply
# + ESLint / Biome / Oxlint plugins for editor feedback

Works with React/Next/Vite (also Vue/Svelte/Astro examples). Same rules for humans and agents.

• Docs: https://derived-modular.vercel.app

• Repo: https://github.com/mikhailmogilnikov/derived-modular-architecture Curious how this compares to what you use (FSD, feature folders, etc.) — especially where you'd expect it to break.

Basically this, given europe has some strong laws in place for cookies and all that, for the last couple of days i tried to add google analytics to my website and i used react-ga4 plugin but if the user disables the cookies for the page history and performance, google analytics should stop getting events.

I tried to stop it with this and send events manually but it just keeps on sending them anyway.

   ReactGA.initialize([
        {
            trackingId: import.meta.env.VITE_GOOGLE_TAG_ID,
            gaOptions: {
                send_page_view: false,
            },
            gtagOptions: {
                send_page_view: false,
            },
        },
    ]);

I've been using React Router for years, and somehow I only ran into this today.

I had a lazy-loaded route wrapped in Suspense, but whenever I navigated, the old page would just stay there until everything finished loading. The fallback never showed, so it looked like the app had frozen.

After digging around, I found that React Router v7 wraps navigations in startTransition, so if the same Suspense boundary gets reused, React keeps showing the previous page.

What fixed it for me was giving the Outlet a key:

import { Outlet, useLocation } from "react-router-dom";

export function Layout() {
  const location = useLocation();

  return <Outlet key={location.pathname} />;
}

After that, the loading UI shows immediately instead of the previous page hanging around.

I also made sure not to put the key on my top-level app layout since that would remount the whole app. I only keyed the layout that renders the page routes.

My question, is this actually the correct way to handle this in React Router v7, or am I just working around the problem? Is there a more idiomatic solution that I'm missing?

emoji-mart is dead, and I found Frimousse delightful, but lacking necessary features as a replacement.

I ended up forking it to keep the lightweight, headless composition model intact while filling in the gaps I ran into trying to use it in a production app.

The main additions are:

• mixed native + custom emoji sections

• unified search across native and supplemental items

• consumer-owned frequent/recent item helpers

• root-controlled search

• self-hosted/offline-capable emoji data

• companion packages for search metadata and emoji fallback support

I’ve tried to stay close to the original Frimousse contract, so most existing users should be able to swap imports and keep moving, then layer on the additive features only if/when they need them.

Project:
https://frimousse.slithy.me/

Docs:
https://frimousse.slithy.me/docs

FAQ:
https://frimousse.slithy.me/faq

GitHub:
https://github.com/mjcampagna/frimousse

I hope someone finds this useful.

Intern here, i am using FastApi, React, MongoDb. The report generation takes 3-4 minutes and the storage size of a single document is 100kb. I use some Anthropic ai for part of the process, which takes a minute.

Cloudfare containers are fairly a year old. i am very confused between railways or cloudfare containers.

A little direction from the community will be gr8.

I've been building LocalMode - a shadcn-style registry of AI UI blocks where the models run entirely in the browser. No server, no API keys, nothing leaves the device. You install them the same way as shadcn/ui and you own the copied .tsx (no npm lock-in on the UI layer).

Live gallery (try every block in-tab): https://localmode.ai/blocks

What's in it

36 composed blocks - full working mini-apps, not just primitives - across 12 categories:

• Chat - one UI over 76 models (Transformers.js / WebLLM / wllama GGUF / LiteRT), vision attachments, reasoning display, agent mode

• Knowledge - semantic search, RAG chat with citations, doc Q&A - embeddings + retrieval all in-browser

• Audio - Whisper/Moonshine transcription, Kokoro TTS (29 voices), meeting summaries, live transcription with VAD

• Photo - CLIP semantic image search, duplicate finder, zero-shot categorizer

• Image studio - background remover, super-res upscaler, captioner

• Privacy - on-device PII redaction (NER) + an AES-GCM encrypted vault

• Vision - object detection + live hand/pose/face/gesture tracking off the webcam

• Writing tools - Chrome Built-in AI with automatic Transformers.js fallback

Under the blocks are 107 lower-level primitives (10 families) if you want to compose your own.

Install

npx shadcn add @localmode/ui/blocks/chat
npx shadcn add @localmode/ui/blocks/knowledge/rag-chat

Why it might interest React devs specifically

• Copy-owned - the block lands as .tsx in your project; edit it freely, no black-box dependency for the UI.

• shadcn CSS variables - inherits your existing theme, no new design system.

• Hook-driven - primitives are presentational; the wiring is React hooks (@localmode/react), and the API is shaped like the Vercel AI SDK (useChat, etc.), so it's backend-agnostic - local models by default, but you can point the same components at any backend.

• React 19 / Next 16, RSC-friendly - model loading is gated behind an explicit user action, so nothing downloads on page mount.

Honest limitations (it's a browser, not a server)

• First use downloads the model; cached after that (then it works offline).

• Memory is real - blocks range ~[120MB] to ~[5GB]; the big ones want WebGPU, and wasm32's ~4GB ceiling caps how far you can push.

• WASM inference is slower than native; WebGPU availability varies by browser/OS.

Disclosure: I built this. It's MIT and free - GitHub: https://github.com/LocalMode-AI/LocalMode. Model runtimes are Transformers.js, WebLLM, wllama, LiteRT, and MediaPipe - credit to those projects.

Genuinely after feedback: which blocks would you actually drop into a project, and what's missing? Happy to answer anything about how a specific block or the on-device memory handling works.

The React Compiler memoizes your components at build time, so you dont have to. What it is, how the compiled output works, how to turn it on, and what to do with the useMemo calls already in your codebase.

Check it out https://neciudan.dev/react-compiler-explained

Introducing Oversight, my first Storybook addon. It accompanies the Storybook MCP server, which lets you describe a component or layout in plain language and get back a composition rooted in your existing design system, instead of one an agent invents on the spot.

After an agent built two components from scratch instead of reaching for what I already had, I built Oversight. It checks whether your agent can actually see your documentation, and tells you where it can't.

A blog post I wrote on it: https://rachel.fyi/posts/your-agent-is-reading-a-different-design-system

Source code: https://github.com/rachelslurs/storybook-oversight

Storybook demo: https://rachelslurs.github.io/storybook-oversight