Hey r/reactjs!

I got tired of constantly opening browser DevTools, filtering out noisy browser extensions, and switching between tabs just to check local storage or quick fetch responses during local development.

To solve this, I built React Dev Companion — a lightweight, zero-dependency developer tools overlay that embeds directly into your React / Next.js application UI.

💡 Key Features:

• Real-Time Network Interception: Intercepts native window.fetch non-invasively to capture HTTP methods, endpoints, and status codes.
• Storage Inspector: Switch between localStorage, sessionStorage, and cookies to view, inject, or delete keys in real-time.
• Zero Extra Dependencies: Designed to keep bundle overhead minimal.
• Dev-Only Friendly: Easy to mount conditionally (e.g., inside Next.js Root Layout or Vite main component).

🔍 Quick Example (Next.js App Router):

```tsx 'use client'; import { DevCompanion } from 'react-dev-companion';

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} {process.env.NODE_ENV === 'development' && <DevCompanion />} </body> </html> ); } ```

We set up a strict CI/CD pipeline using GitHub Actions, TypeScript, Conventional Commits, and Husky to keep the codebase clean.

🐙 GitHub Repository: https://github.com/Kickz1nn/react-dev-companion
📖 Dev.to Article: https://dev.to/kickz1nn/building-an-embeddable-zero-dependency-devtools-panel-for-react-nextjs-3ic6

I'd love to hear your thoughts, feedback, or any features you'd like to see added next!

Burrow is a personal-data desktop app (budget, journal, todos, habits, notes). The stack is a Vite and React frontend, a Node server that owns a single SQLite database, and a Tauri shell that packages the two into a Windows installer for x64 and ARM64.

Things in the repo that might interest React devs:

- A hard JavaScript bundle budget enforced in CI, with the number pinned in a test so it cannot creep.

- Visual regression baselines regenerated on a side branch in CI rather than committed from dev machines.

- Modules are isolated under src/modules and server/modules with a small shared envelope for API errors.

- The assistant UI streams from a local Ollama server, so no API keys anywhere in the app.

It went free this week and the core is AGPL. Links in the comments.

Hey everyone,

I built Developer Shield—an open-source desktop app created specifically for devs and homelab enthusiasts who want to scan their local network without sending any telemetry or data to the cloud.

Key Features:

- Zero-Knowledge Local Scanning: Everything stays strictly on your local network/LAN.

- Custom Rules Engine: Define your own security checks and scan targets.

- Local LAN Sync: Sync scan reports across your local machines securely.

- Built with React & Tauri for a lightweight desktop footprint.

I’d love to get feedback from this community on features you'd like to see, code architecture, or custom rules!

GitHub: https://github.com/dvirby6/developer-shield

Hey all, I’m exploring a new runtime for React.

The idea is to let agents understand your UI, but also let them click buttons, fill out forms, and trigger actions on behalf of users. New frontier models like Terra 6.1 excel at these tasks, and this is just a new primitive in React to put them to use.

If you’re into design and interfaces, I think you’ll find it worth a look. It’s still in early alpha, built quickly using Codex/Sol, so expect some rough edges.

Link: https://ruakit.com

I've been building tintly.art, a free coloring site people mostly use on their phones (Next.js 16 + Konva). A few things I learned along the way:

1. Konva lives outside React. The canvas is plain Konva classes (fill layer, stroke layer, outline layer), not react-konva. React only renders the toolbar, palette and sheets. They talk through tiny stores with subscribe(), read with useSyncExternalStore. Drawing a stroke never re-renders a single component.

2. One stroke = one Konva.Line. While you drag, only a preview line updates. On release it's committed as one command, so undo/redo is just a stack of commands.

3. Raster cache for cheap phones. After ~24 strokes the committed group gets cached into one bitmap, so the frame cost stays flat no matter how much someone draws. When you zoom past the cache resolution it switches back to vector so nothing blurs.

4. The eraser uses destination-out on the stroke layer only, so it can never erase the fills or the outlines underneath.

5. Tap-to-fill works on SVG regions turned into Konva.Paths, and glitter fills are just a generated pattern tile as fillPatternImage.

Huge thanks to Anton Lavrenov and everyone behind Konva. It's honestly giving colors to my vision. People color on it every day, and it brings them a bit of joy and a calm little break.

Happy to answer questions about any of this. 🎨

I’ve just released Detent, a React wheel picker that grew into a much bigger exploration of interaction details.

The wheel has its own momentum and spring physics. I spent a lot of time tuning mouse wheel input alongside trackpads, including the awkward cases where a physical scroll wheel keeps spinning after you let go.

It also includes two separate components:

• Detent Text: matching letters stay while the changed parts roll.
• Detent Number: locale-aware formatting with digits that roll through intermediate values.

The examples range from practical time and date pickers to an arc menu, a zoom ring, and some more experimental visual treatments.

There’s a headless hook, separate imports for text and numbers, keyboard support, reduced motion, and no additional runtime dependencies beyond React and React DOM.

Demos and playground: https://detent.hayder.sh
Intro: https://x.com/kghayder/status/2118373654010466733?a=PzCQRSXhM5m8KUTdHk8&s=20

I’d especially appreciate feedback on how the wheel feels with your mouse or trackpad, and whether the API makes sense for something you’d actually build.

I've taken Jonas Schmedtmann's HTML + CSS and JavaScript course and am soon going to start learning react and I am wondering if I should just stick with Jonas or try Maximilian. If you've taken any of these courses or both I'd really love to hear your opinion on it and how they differ and who they are for!

Hi folks, Can anyone share their react, type script, js interview questions for 5+ yoe? Anything will be helpfull?

How it works, since people usually ask:

• The odometer: each digit is its own reel of 0–9 stacked vertically, and it slides to y = −digit × 10% with a 0.9s ease-out. Commas and the $ sign never move, only digits roll. Screen readers get the plain value through an sr-only span.
• The balance and the feed share one tick (every 3.4s): a new transaction slides in at the top of the feed and the balance is recomputed from the ledger, so the two can never disagree.
• The payout is a tiny state machine: Sent → Converted → Arrived, 1.1s per step, then it holds 2.6s and starts over.
• On wide screens it's a staggered bento that runs off the fold, on tablets 2×2, on phones a swipeable row. With reduced motion everything holds still.

Free to copy if it's useful: https://ui.deliverwebsite.com/components/hero-sections/fintech-hero-section-with-gradient-cards/

Feedback on the motion very welcome. I'm trying to make every animation say something about the product

I'm a product engineer who builds MVPs for founders. A normal portfolio says "I build apps, websites, dashboards and AI features." I wanted mine to show it instead.

How it works:
- You type an idea in the hero ("a dog-walking app")
- It's handwritten onto a sticky note that unfolds into a 3D board
- As you scroll, the board builds the mobile app, the website, the admin dashboard, the AI features and the automations
- It ends on "Shipped." with your idea's name, and the contact section says "Let's ship Dog-Walking App."

Other bits:
- A "What goes in v1?" sorter: drag features into v1, later or cut, and a split-flap board shows the weeks to launch
- Testimonials shown as the messages they arrived in
- A live GitHub activity map
- A pixel pet that wanders around

Stack: Next.js, three.js, GSAP, Lenis, Tailwind. The 3D boards are drawn in canvas, not models.

Link in the comments. Roast it. What would you type in first?

Link to the tool: https://gauge-generator.niralsei.com/

Building a 5-step wizard with React Hook Form and Zod. I keep the step in the URL and drafts in a small store. What has held up in production for you, and how do you handle early-step changes that invalidate later steps?

I built CupertinoUI, a macOS-style component registry for React and shadcn/ui.

It includes controls, menus, dialogs and windows, with CSS-variable theming and light/dark appearance. Components are copied into your project through the shadcn CLI so you can edit the source.

The core components are free under MIT. There are also paid Pro components and complete app-style blocks.

Try the interactive desktop: https://www.cupertino-ui.com/demo
Browse the components: https://www.cupertino-ui.com/docs/components

Forms are still where most of my React bugs live: validation that disagrees with the backend, async defaults, conditional fields.

My current stack is React Hook Form with Zod schemas shared with the NestJS backend. It mostly works, but complex multi-step forms still get messy.

What's your setup? Anyone moved to server actions for most forms and been happy with it?

Repo: https://github.com/p10node/office-engine

Demo (drag your own file in): https://p10node.github.io/office-engine/demo/

Why: I needed "customer uploads an XLSX, fix a few cells, save it back" inside a React app. OnlyOffice / Collabora mean running a document server in Docker and an iframe talking to it, and a big sheet still sits on a spinner while the server converts it. docx-preview / SheetJS + a grid are view-only or block the main thread on a 20 MB file. Nothing in between, so I built it.

Usage:

import { DocViewer } from '@p10node/office-engine' <DocViewer src={file} style={{ height: 600 }} /> <DocViewer src="https://cdn.example.com/report.xlsx" /> <DocViewer src={file} editable onSave={(blob, name) => upload(blob, name)} /> 

src takes File / Blob / ArrayBuffer / URL. CSS is auto-injected, the container just needs a height. There's also a useDocument hook if you want to render your own UI, a vanilla mount(), an <office-viewer> web component, and a single script build.

What makes it not choke on big files:

• ZIP read lazily, HTTP Range requests from a URL, so first rows show before the file finishes downloading
• Streaming XML parser in a Web Worker, main thread only gets rows / paragraphs / slides as they arrive
• Only visible pages, cells, slides are in the DOM
• Save patches the original file instead of re-exporting it, so anything the engine doesn't understand is kept byte for byte

Bundle (gzip): main ~93 KB, worker ~155 KB (loads off the main thread), collab +17 KB optional. The standalone script with React bundled is ~307 KB.

Editing: DOCX text / styles / lists / images / tables, XLSX cells / formulas (134 functions) / formats / rows / columns / sheets, PPTX text / shapes / images / slides. Google Docs style toolbar. Optional real-time collab with cursors; that's the only part needing a backend (a small WebSocket hub, Bun script included).

Not there yet: XLSX charts / pivots / conditional formatting editing, DOCX headers / footers read-only, no PPTX animations. It needs the DOM and a Worker, so in Next.js use a client component / dynamic import with ssr: false.

Fair warning: it's a few days old and a lot of it was written with Claude Code, with me doing architecture, review and the bug hunting on real files. If you throw a file at it and it breaks, open an issue with the file, that's the fastest way it gets fixed.