Reading view

Batteries-included React data grid for teams who don’t want to rebuild the same data-grid plumbing again

Repo: https://github.com/coterahq/griddle - demo's linked in the readme.

We've been running data-grids over large parquet backed datasets in prod for quite a while now, and we decided to OS the component for others that might find it useful.

submitted by /u/tjaartbroodryk to r/reactjs
[link] [comments]
  •  

React Surgeon: click a broken element, it maps it to the JSX and repairs it, but only calls it fixed if a browser replay passes

I have been building this for a while and it is finally on npm, so I would rather put it in front of people who will tell me what is wrong with it.

How it works. A development-only Vite plugin stamps source coordinates onto intrinsic JSX during serve. You click the broken element in your browser and it reports the file and line that rendered it. Babel then assembles a narrow slice of context from the clicked component, its imports and related components, and a small local model proposes an exact substring replacement. Not a file rewrite. It has to match a unique existing substring or the patch is rejected.

The part I actually care about is that the model's opinion does not count. After every edit it runs your typecheck, lint, tests and production build, then replays your acceptance scenario in a real Chromium instance. Only if all of that passes does it report VERIFIED. Otherwise it reports BLOCKED, leaves the diff in your working tree so you can read it, and tells you the undo command.

That distinction earned its keep while I was testing. One patch passed typecheck, lint, tests and the production build and was still completely wrong. It set state back to the previous array reference, React bailed out on Object.is, and nothing re-rendered. Four green checks on a broken fix. Only the browser replay caught it.

It also refuses to run if your acceptance scenario already passes against the unmodified app, so it cannot invent a reproduction to look useful.

Everything is local. Qwen 2.5 Coder 1.5B on CPU through node-llama-cpp, which npm installs as a prebuilt binary, so nothing needs to be on your PATH. If you already run Ollama or LM Studio you can point it there instead. No API keys, no telemetry, nothing leaves the machine.

npm install -g @react-surgeon/cli cd your-react-app npm install -D @react-surgeon/vite-plugin react-surgeon init 

Honest limitations, because I would rather say them than have you discover them:

  • The 1.5B model solves roughly half the bugs it attempts on my three-bug demo app and refuses the rest instead of guessing. Read every diff.
  • Analysis resolves ordinary relative imports. Path aliases, higher order components, re-exports and provider chains are where it will get the context wrong, and that is the next thing I am working on.
  • You write the acceptance scenario. There is a command that drafts one from a recorded interaction and tells you which values changed, but you still decide what correct means.

Repo, docs, and a demo app with three reproducible bugs: https://github.com/waleedmustafa971/React-surgeon

MIT licensed.

I am genuinely after criticism on the approach, particularly whether the verification gate is strict enough or whether I am fooling myself with it.

submitted by /u/Sudden_Advantage_911 to r/reactjs
[link] [comments]
  •  

Looking for a free dashboard template/skeleton for a Bitcoin Forensics project (React/Graph UI)

Hi everyone, I'm building a Bitcoin Forensics and AML (Anti-Money Laundering) dashboard that visualizes pre-computed ML classification results and network graphs using React and Cytoscape.js. My backend and core graph logic are fully functional, but I'm struggling to put together a clean, professional dashboard UI layout (sidebars, risk score cards, metrics, alert logs) under a tight deadline. Does anyone know of any open-source dashboard boilerplates, free UI kits, or quick workarounds suitable for data-heavy forensic tools? Any recommendations would be greatly appreciated. Thanks!

submitted by /u/Cautious_Today_1830 to r/reactjs
[link] [comments]
  •  

[For Hire] Senior React.js / Next.js / React Native Engineer | 10+ Years | Remote | Any Time Zone

Hi everyone! 👋

I’m currently exploring full-time remote opportunities as a Senior React.js Engineer / Frontend Engineer / Tech Lead, and I’m open to working with teams across any time zone.

I have 10+ years of software engineering experience, with a strong focus on React.js, Next.js, TypeScript, JavaScript, and React Native.

A few things that define my experience:

• 🚀 React.js & Next.js — building production-grade applications, reusable component systems, performance-focused UIs, SSG/ISR, and modern frontend architectures.

• 📱 React Native — full ownership from architecture and development all the way to iOS/Android builds, CI/CD, signing, TestFlight/App Store and Google Play releases.

• 🧑‍💻 Strong hands-on ownership — I’ve independently designed and delivered products end-to-end, including working directly with requirements, architecture, development, deployment, and ongoing improvements.

• 🌎 Multiple clients & products — experience working across different client projects and business domains, adapting quickly to new requirements and technologies.

• 👥 Technical leadership — experience leading teams, mentoring developers, conducting interviews, establishing engineering processes, and driving projects from kickoff to delivery.

• 🤝 Client & stakeholder communication — comfortable communicating directly with clients and stakeholders, translating business requirements into practical technical solutions, and working effectively with distributed teams.

• ⚡ Performance & scalability — Core Web Vitals, caching, lazy loading, virtualization, memoization, bundle optimization, and scalable component architecture.

I’ve also worked on enterprise platforms, logistics systems, LLM/RAG applications, content management platforms, and white-label mobile products.

I’m looking for a team where I can stay hands-on technically while also bringing my leadership and ownership experience.

📍 Location: Hyderabad, India
🌍 Preference: Fully Remote
🕐 Timezone: Open to any time zone
💼 Availability: Full-time/ Contract opportunities

LinkedIn: https://linkedin.com/in/anurag-vasi-46595810a

If you’re hiring for a senior React/Next.js/React Native role, or know of a team looking for someone with this background, I’d be happy to connect.

Thanks! 🙌

submitted by /u/anuragnoddy to r/reactjs
[link] [comments]
  •  

TipTap vs Lexical for a chat app project

I am creating a little chat app for practice, but I was unsure what direction to take with the editor, out of the options I found TipTap and Lexical, I tried a bit of both (Didn't get very far with either yet) But I am still so torn on which one I should try first

In this I want more possibilities of what you can put in the chat, for example: Embedded images, tables, maybe some excalidraw integration, etc.

I also don't want to spend too much time on either and realizing that picking one over the other was not worth it long-term because of the timetaken

If anyone has used tiptap, lexical or both could you give some pro's and con's to each and some guidance on what I should pick?

Thanks! :)

submitted by /u/BrotherManAndrew to r/reactjs
[link] [comments]
  •  

I'm building a visual builder for React components, is this actually useful?

I’ve been working on NexoreUI(v1.5), but this time I focused on the visual builder.

You can customize a component visually, change its props, preview the result, and then copy the code into your project.

The goal is to make it easier to go from “I like this component” to “I actually use it.”

Still early, so I’d love to hear from React developers:

Would you actually use a tool like this?

https://nexoreui.site
Github: https://github.com/Al1mov77/NexoreUI

submitted by /u/Al1mov_77 to r/reactjs
[link] [comments]
  •  

LaunchPad Lite: An open-source starter pairing Next.js 15, Better Auth, and Drizzle ORM

Hi all,

Sharing a project I recently finished and open-sourced: LaunchPad Lite.

It’s a clean starter template built around the Next.js 15 App Router ecosystem with a focus on type safety and modern auth:

- Better Auth: Handled via Server Actions and route handlers, avoiding legacy NextAuth quirks.

- Drizzle ORM: Minimalist schema setup designed to connect effortlessly with Supabase, Neon, or local Postgres.

- Tailwind CSS v4 + Radix UI: Fast UI primitives without CSS bloat.

GitHub: https://github.com/BZDevelopments/LaunchPad-Lite

For anyone who eventually needs full Stripe subscriptions, AI SDK v5, or multi-layout support, I also maintain a Pro version, but Lite is 100% self-contained and free forever. 

Take a look at the repo structure and let me know what you think of the architecture!

submitted by /u/Willing-Novel6708 to r/reactjs
[link] [comments]
  •  

i made an english learning app

Hi, I made an free english learning app site

it has ipa (rachel english) and speech rules with annotations to study connected speech

give it a try and use the flag button to report issues which im sure there are a lot since im not a native speak and rules are generated with ai.

thanks !

submitted by /u/No_Mud_4629 to r/reactjs
[link] [comments]
  •  

I built a PDF processing web app from scratch — looking for feedback from developers

Hey everyone 👋

I recently finished building PDFForgeLib, a project I started to explore the challenges involved in building a web application around PDF processing.

Tech stack: typescript+next.js + Python/FastAPI + supabase+vercel+render

The project focuses on common PDF operations such as:

  • Merging and splitting PDFs
  • Compressing PDFs
  • Converting files
  • Working with different PDF utilities
  • Handling file uploads and processing
  • Responsive UI for desktop and mobile

Project: [https://pdfforgelib.com/](https://)

One of the things I found interesting while building it was that PDF processing becomes quite different once you start thinking about larger files, processing time, browser limitations, error handling, and keeping the user experience simple.

I'm interested in hearing from developers who have worked with file processing, document systems, or similar web applications.

A few things I'd like to discuss:

  • What problems would you expect with this type of architecture as usage grows?
  • What are the important security considerations when processing user-uploaded PDFs?
  • Would you handle PDF processing primarily on the client or server?
  • What performance issues should I be looking out for?
  • Are there better approaches for handling large files?
  • What functionality would you consider essential in a PDF utility?
  • Is there anything about the UX or workflow that feels unnecessarily complicated?

I'm still improving the project, so I'm particularly interested in technical criticism, alternative approaches, and things I may have overlooked.

Would be great to hear how other developers would approach the same problem.

Thanks!

submitted by /u/ShariQ-24 to r/reactjs
[link] [comments]
  •  

The Rust React Compiler is fully ready and available with Vite

We’ve gone full-Rust with our build pipeline at Outlyne.com and it feels like the React Compiler has really arrived. The last time I posted about using React Compiler here, I talked about how good it’s been for us overall, but also about all its limitations, the biggest of which was that it would bail out on compiling any component or hook that had a try/catch with conditional logic of any kind (if/else, ternary, ??, ||, optional chaining). Another big one was that it would bail on computed object keys, which bit us a few times with assembling classes using clsx (e.g. className={clsx({ [`item-${props.index}`]: props.isItem })}).

Both of those are fixed now. The oxc team shipped official support for the Rust React Compiler on August 4th, and that support includes all of the fixes to the compiler since the v1.0 release of the Babel-based compiler. In our codebase, seven more functions the compiler had been skipping are now compiling, five from the try/catch fix, two from computed keys. And that’s lower than it would be if I hadn’t gone through and contorted eight components to keep conditionals out of their try/catch blocks, including adding a @ts-expect-error from having to drop an optional chain and extracting my auth flow into an async run() that’s immediately awaited inside the try, for no reason but to move the value blocks out of it. All of those workarounds have been rendered obsolete.

There are still bailouts, most notably logical assignment operators (??=, &&=, ||=), but far fewer, and now actively being addressed. A couple weeks ago, oxc shipped a version bump that prevents a bail out from reassigning a destructured prop that then gets read in a nested closure.

Going Rust is also, of course, much faster. The compiler step on our 1,036 files dropped from 14.3s to 0.81s (~17.6×), and the build overall from 22.1s to 9.3s. And we verified parity with the Babel compiler. Across all 1,036 files, there are zero functions the Babel compiler memoizes that the native one doesn’t. The only difference in the built JS before and after are the seven extra compiled functions.

I wrote a blog post with all the details and before/after configs both for folks using @vitejs/plugin-react and for those who use an alternative plugin (React Router framework mode’s plugin in our case): https://blog.master.dev/react-now-rusted-all-the-way-out/

submitted by /u/acusti_ca to r/reactjs
[link] [comments]
  •  

webmcp-react v1.0.0 (React hooks that let agents navigate your website through WebMCP)

Hi r/reactjs! We just shipped v1 of webmcp-react after quite a few beta versions to work out the kinks. It is MIT licensed and we're hoping to find some more contributors!

What it does AI agents currently have to parse through 1000s of HTML tokens to browse a website. They essentially scrape the DOM and guess where the buttons are. WebMCP is a new web standard that fixes this. It adds document.modelContext to the browser, where a page registers typed tools an agent can call. Chrome shipped it in Early Preview in February, and since companies like Shopify and Codex support it fully. The spec was barebones, and there was no clean React-like way to integrate it into modern UIs, so we made one!

webmcp-react gives you a provider and one hook. The hook registers a tool when the component mounts and removes it on unmount.

```tsx import { WebMCPProvider, useMcpTool } from "webmcp-react"; import { z } from "zod";

function SearchTool() { useMcpTool({ name: "search", description: "Search the catalog", input: z.object({ query: z.string() }), handler: async ({ query }) => ({ content: [{ type: "text", text: Results for: ${query} }], }), }); return null; } ```

It ships with Zod and JSON Schema inputs, a built-in polyfill, SSR support for Next.js and Remix, StrictMode safety, execution state, and cancellation through AbortSignal.

WebMCP is early and we're looking for contributors. Chrome changes the API between releases, and only a few people track it. We are a small team and we don't intend to productize this since we made it mainly to add WebMCP support to our core website. The library works, but a standard needs many hands and many real sites. We'd love any bugs / feedback. If you want to help out with the project please DM me!!

Links:

submitted by /u/naseemalnaji-mcpcat to r/reactjs
[link] [comments]
  •  

Lucet: components for the unhappy AI states (refusals, rate limits, stale answers)

Lucet: components for the unhappy AI states (refusals, rate limits, stale answers)

I kept rebuilding the same things around AI features: what to show when the model refuses, when the stream dies halfway, when the answer came out of a cache that’s four hours old, when the source you cited has since been deleted, when the month’s budget runs out mid-conversation. Every time it ended up as a toast and a spinner.

So I made a library out of them.

Demo with every state as a URL: https://lucet.design/?state=refusal — and service-down, stale-result, budget-spent.

Repo: https://github.com/I4NL4RS0N/lucet · npm i lucet-core lucet-react · MIT, 0.5.0, 12 components.

React-only right now.

If you’ve solved these states differently I’d like to hear how.

submitted by /u/Vladimir3000 to r/reactjs
[link] [comments]
  •  

Free, open-source UI avatars for React projects 👋

If you're working on a React project and need some avatars for profiles, dashboards, user lists, comments, or mock data, here's a collection that might be useful.

There are 200+ free, open-source UI avatars that you can use in your projects.

There's also a UI Avatar Guide on the page if you want to learn more about using avatars in interfaces.

🔗 https://radianui.com/resources/avatar

Sharing it in case it's useful for anyone working on a React project!

submitted by /u/Simomo22 to r/reactjs
[link] [comments]
  •  
❌