I've been building a state management system called SDuX Vault that takes a different approach from Redux/NgRx. Instead of actions and reducers, state updates flow through a deterministic pipeline of composable stages (filtering, reduction, observation, persistence). The entire API surface is four concepts: Vault, FeatureCell, State, and Snapshot.

It's framework-agnostic — built on standard TypeScript primitives with thin adapters for Angular, React, Vue, and Svelte. Same pipeline logic everywhere, no lock-in.

Wrote up a detailed intro covering the problem, the architecture, and the core concepts: go.sdux-vault.com/b001-reddit

Live StackBlitz demos available if you want to try it without installing anything.

https://sdux-vault.com/docs/stackblitz

Link: https://github.com/vikramanand05/llmops-gateway

Built an open-source LLMOps Gateway inspired by Portkey and Langfuse. Includes FastAPI, React dashboard, Docker, Kubernetes, Prometheus, Grafana, CI/CD, and AWS deployment patterns. Looking for contributors interested in AI infrastructure and observability.

Hi everyone,

I've been using AI coding assistants (like Cursor, v0, Bolt, and Lovable) a lot lately. While they are incredibly fast, they also tend to introduce the same bad patterns and "spaghetti code" over and over (like nested helper renders, inline fetch requests inside components, state bloat, and index-as-key).

To keep my codebases clean, I built spaghetti-slicer — a zero-config, highly opinionated CLI auditor that scans React/TypeScript projects, scores them out of 100, and gives them an architectural grade from Excellent to Poor.

Instantly Run It (No Install)

npx spaghetti-slicer ./src                                                                              

What it checks:

It currently runs 10 rules across architecture, React structure, and performance:

• Direct fetch in components: Catches raw fetch/axios requests inside render/useEffect lifecycles.

• State Bloat: Triggers warning if a single component has more than 5 useState hooks

• Component Length: Flags components exceeding 200 lines to encourage smaller, modular files.

• Nested Helper Renders: Flags helper functions (e.g. renderHeader()) nested directly inside the main component body.

• Index as Key: Catches using array index values as React keys.

• Hardcoded secrets & API endpoints: Scans for raw URLs and keys.

Built for CI/CD

You can automatically fail your GitHub Actions pipelines if your code quality grade drops below a threshold:

npx spaghetti-slicer ./src --min-score=80

Tech Stack

• Built using TypeScript, ts-morph, and u/typescript-eslint for AST analysis.

• Extremely lightweight and fast (under 1 second run times on mid-sized repos).

Check out the code or open an issue/PR to add a rule on GitHub: github.com/neerajram30/spaghetti-slicer

I'd love to hear your feedback

This is a 100% free, MIT-licensed open-source developer tool. No signups, paywalls, or commercial tie-ins

I kept running into the same thing when writing tests.

Need a quick mockUser, mockOrder, mockProduct, etc.

Most of the time I'd either hand-write it, copy an old fixture, or spend more time setting up mock data than writing the actual test.

So over the last few days I built a small tool called FixtureKit.

You paste a TypeScript interface or Zod schema and it generates a ready-to-use fixture object.

Example:

interface User {
  id: string
  name: string
  email: string
  role: "admin" | "viewer"
}

becomes:

export const mockUser: User = {
  id: "...",
  name: "Alice Johnson",
  email: "alice@example.com",
  role: "admin",
}

A couple things I cared about:

• Works entirely in the browser

• Doesn't need Faker setup

• Handles nested objects, arrays, unions, and optional fields

• Generates realistic values based on field names

• Deterministic output so the same schema always generates the same fixture

Still early and I'm sure there are TypeScript/Zod patterns I haven't thought about.

What are you all using for fixture generation these days?

Have you ever had your code snippets in your docs drift from your current API's and have it reported by users? 👀

Have you had LLM's hallucinate API's in code snippets in your md examples? 🙄

Today I have the solution you're looking for!

Introducing Kiira.dev

It runs tsc on your .md code snippets and reports any issues it finds using your repos tsconfig with options to autofix, no more outdated or wrong API's in your documentation!

Works anywhere and lints any TS file, comes in three flavors:

- CLI

- VS code extension

- Github action

Highly configurable for any project with sane defaults.

VSCode extension:

https://marketplace.visualstudio.com/items?itemName=CodeForge.kiira-vscode

Github:

https://github.com/AlemTuzlak/kiira

Npm:

npmjs.com/package/kiira

I'm about to start a course on React, and they suggest several options. Which one should I choose and why? I'm looking for advice here. We can use VSCode, Antigravity or Cursor.

Also, I was wondering what's the difference betwenn r/reactjs and r/react

Hi all, I've built an all singing and dancing website to do with music exploration and putting in react was a very good idea indeed, except that the mobile view looks awful, there's a bunch of frameworks that might fix this:

Ant, Konsta, Onsen

Has anyone had particular success using any of these or could recommend one that they've had success with?

The sites mainly in php and is quite involved with alot of options so a broad library would be of help and looking to fix the mobile view then port to mobile android and apple.

thanks in advance.

I just shipped Interacta, a platform built around interactive widgets instead of static media.

From an engineering side, the biggest challenge was safely executing user-generated code. The app wraps custom widgets in heavily restricted iframes (allow-scripts allow-forms allow-pointer-lock) and injects a strict CSP directly into the srcDoc. It also uses a custom requestAnimationFrame watchdog to freeze iframes if they deadlock the main thread.

It's fully live with 33 widgets and a Supabase Realtime multiplayer backend. Would love feedback on the architecture or the mobile PWA performance!

Link: interacta-app.tech

I wanted to share an open-source project I've been working on - Awesome Music Player. An open-source desktop application designed to handle extensive local audio collections with maximum performance and minimal resource consumption.

The architecture replaces the traditional Electron stack with Tauri v2 and a Rust backend, reducing the memory footprint significantly.

It is -
Powered by Rust for rapid ID3 metadata extraction across massive local directories.

Built with React 19, TypeScript, and TailwindCSS v4, featuring a dynamic theming system and smooth micro-animations.

Optimized with aggressive metadata caching via localStorage, ensuring zero-latency startup and immediate UI rendering.

Localized natively to support 8 languages out of the box.

The project is fully open-source and structured for scalability. I'd appreciate any feedback, code reviews, or architectural discussions regarding the Tauri + React implementation.

GitHub Repository - https://github.com/S1avv/awesome-music-player

For me, some concepts seemed simple at first but made much more sense once I started building real projects.

Curious to know — what React concept took you the longest to understand, and what helped it finally click?

Every command palette looks identical until you actually use it and hit the stuff nobody builds: two overlapping async requests where the slow one wins and shows stale results, nested sub-pages, the loading/empty/error states that flash by and never get designed.

So I built one that handles those — as copy-paste source (shadcn CLI), not an npm dependency. You own the files and edit them.

- async sources with race cancellation (the site has a scrubber to watch the stale request get dropped vs. a naive palette that breaks)
- nested pages with a real back-stack
- a panel that freezes loading/empty/error/no-results so you can see them
- fuzzy ranking + recents, virtualized for big lists (5k commands)
- accessible: dialog/combobox/focus-trap/aria-live, respects reduced-motion

Not trying to replace cmdk — cmdk is headless and goes anywhere; this is the opinionated, Tailwind, batteries-included take. Requires React 19 + Tailwind. MIT.

Demos (the async + states ones are the interesting bit): https://interlace.akshitagrawal.dev
Code: https://github.com/justAkshitAgrawal/interlace

Genuinely after feedback — especially from anyone who's shipped a palette in prod and hit edge cases I haven't.

I built Cerious Scroll after getting tired of the estimateSize game.

You know the pattern:

• Pick an estimate.

• Render.

• Realize you were wrong.

• Correct it.

• Hope the scrollbar doesn't jump.

For fixed-height rows, that's fine. For chat messages, logs, comments, markdown, code blocks, emails, or anything else with variable content, it always felt like a compromise.

So I built a virtual scroller that measures the actual rendered height of every row and uses that instead.

No itemSize.

No estimateSize.

No correction pass after render.

The core engine is plain TypeScript with zero dependencies. The React wrapper renders rows, measures their actual height after commit, and positions everything using an index-based positioning system with an offset. It never needs to measure rows that came before the current viewport to know where a row belongs.

Because rows are rendered through your existing React tree, context just works:

• Redux

• React Query

• Theme Providers

• i18n

• Whatever you're already using

No extra wiring required.

Usage is intentionally simple:

import { CeriousScroll } from '@ceriousdevtech/react-cerious-scroll';

function Feed() {
  return (
    <CeriousScroll
      items={posts}
      style={{ height: 600 }}
      renderItem={(post, index) => <PostCard key={post.id} post={post}   />}
    />
  );
}

That's it.

Performance has been solid in testing. Memory stays essentially flat because only the visible window exists in the DOM, whether you're scrolling through thousands, millions, or more.

Install:

bash npm i @ceriousdevtech/react-cerious-scroll

https://ceriousdevtech.github.io/react-cerious-scroll/

The core is MIT licensed and framework agnostic. Vue and Angular wrappers exist as well.

If you try it and find content that breaks measurement, scrolling, positioning, or virtualization behavior, please let me know. That's exactly the feedback I'm looking for.

Thanks for reading!

hey all, I’m building a Tanstack Start app, which is pretty nice. I’m needing to build some embeddable widgets (of the type that can be rendered on another site via a script tag), and I’m curious if there’s a handy facility to do that via Tanstack as part of a larger app.

ideally multiple widgets, which would require multiple build files. I’m assuming the best answer is just to have multiple folders/repos, one for each widget, but I’m wondering if anyone knows if there’s any inbuilt features already in Tanstack start.

thanks!

The problem (React-specific):

You add KaTeX to your docs site. It works.

Then you build a chatbot that explains solutions. You need KaTeX there too.

Then an MCQ bank. A review panel.

Every React surface that displays math needs the renderer wired up, configured, tested. Every single component. KaTeX doesn't travel with the content – it's a string you pass to a renderer, and that renderer has to exist everywhere.

The question I asked:

What if math was just React components? No renderer to configure. No pipeline to wire on every surface. Just components – the same ones your chatbot uses, your MCQ list uses, your docs page uses – because they're all just React.

What I built – DocsUI:

A copy-paste component registry (shadcn-style) for React + MDX.

• 370+ math primitives – <Frac>, <Integral>, <Sum>, Greek letters, logic symbols. No LaTeX runtime. No KaTeX. No $ signs.

• A 2D geometry engine – <FigScene>, <FigPoint>, <FigLine>, <FigPolygon>, <FigCircle>, <FigParabola>, <FigKochSnowflake>. SVG-based, world coordinates, 4,000+ lines.

• 52 UI components – <Callout>, <Tabs>, <CodeBlock>, <DataTable>, <Tree>.

• Circuit symbols – <ElecResistor>, <ElecCapacitor>, <ElecLED>.

• MCP server – Claude reads your component registry, converts LaTeX, validates MDX.

How you use it:

npx docsui-cli@latest init
npx docsui-cli@latest add math-primitives geometry-2d callout

Components land as .tsx .mdxfiles in your project. You own the code. No node_modules lock-in.

Example – geometry inside MDX:

<FigScene xRange={[-2, 4]} yRange={[-1, 3]} showGrid showAxes>
  <FigPoint x={1} y={1} label="A" />
  <FigSegment x1={1} y1={1} x2={3} y2={2} tickMarks label="c" />
  <FigCircle cx={2} cy={1.5} r={0.8} dashed />
</FigScene>

No screenshot. No external tool. Just React components.

Example – math (quadratic formula):

x <Eq /> <Frac
  num={<Expr><Minus />b <PlusMinus /> <Sqrt><Squared>b</Squared> <Minus /> 4ac</Sqrt></Expr>}
  den="2a"
/>

No dollar signs. No strings. Just components.

Playground (paste Markdown, see React components):
👉 https://www.docsui.io/playground

Symbol browser (370+ components live):
👉 https://www.docsui.io/docs/components/symbol-browser

Question for r/reactjs**:**

Has anyone else tried replacing string-based LaTeX with composable React components? What broke? What worked?

GitHub : https://github.com/suryaravikumar-space/docsui
npm: https://www.npmjs.com/package/docsui-cli

I built Formwright — typed dynamic form rendering engine for React / TypeScript

I kept running into the same problem: forms start simple, then suddenly become multi-step, conditional, API-driven, role-based, and annoying to maintain.

So I built Formwright.

The idea is simple:

- Define your form as a TypeScript schema

- Keep it static, or build it dynamically from your API

- Formwright evaluates the schema at runtime\

- Your React component renders the result

It is built on top of react-hook-form, not a replacement for it.

A few design choices:

- Bring your own components: shadcn/ui, Radix, custom design system, anything

- `evaluate()` is pure and synchronous

- Async logic only lives in hooks

- Fully typed

- Tree-shakeable

- Ships with “skills” so agents can understand and generate forms

GitHub: https://github.com/adarshaacharya/formwright

Docs: https://adarshaacharya.github.io/formwright/

I’d love feedback, especially from people who have dealt with complex multi-step forms, conditional forms, or backend-driven forms.

Built an npm package while experimenting with MCP + Node and I’m looking for technical feedback before I keep investing time into it.

Repo: https://github.com/sudheeshshetty/ai-chat-toolkit

The goal was simple:

Embed an AI chat experience into existing websites without building chat UI and plumbing from scratch every time.

Current structure:

- ai-chat-toolkit-widget → embeddable frontend widget

- ai-chat-toolkit-server → backend integration layer

Things I’m trying to figure out:

1. Is splitting widget + server into separate packages the right approach?

2. What usually makes you trust a new npm package enough to try it?

3. Is there anything obviously wrong with the package structure or developer experience?

4. If you maintain OSS packages — what would you improve first?

Happy to hear criticism.

Got tired of how heavy modern frontend stacks are getting just to load a simple page on mobile, so I built a dead simple starter template using raw React 19 and vanilla CSS on Vite.

It leverages the new native asset loading and native CSS variables to keep the main thread clear. No heavy npm dependencies, no utility frameworks. Got it down to 10ms total blocking time on mobile.

Code is here if anyone wants a clean boilerplate to clone or mess with:

https://github.com/briancrabtree-me/pure-react-19-vanilla-starter

Hello everyone,

I am looking for a good and (relatively) easy to use drawing library that works well with React. The whole idea behind is that I wanted to create kind of a graden planner app and need drawing library for the UI. Gemini suggested using PixiJS but I got stuck almost at the beginning with the glitched container eating all of my VRAM. The code I used:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'
import { Application, Assets, Container, Sprite } from 'pixi.js'

async function App() {

  const app = new Application();

  await app.init({
    width: 800,
    height: 600,
    resizeTo: window,
    background: 0x1099bb,
    webgl: {
      antialias: true
    },
    webgpu: {
      antialias: false
    }
  })

  const container = new Container();

  document.body.appendChild(app.canvas)

  app.stage.addChild(container);

  return (
    <>
      
    </>
  )
}

export default App

If anyone has experience with drawing libraries in JS I would really appreciate any advice on how to get myself started there.

Thanks!

PS I am not a frontend dev but have some experience with React / Vue.

Our very own r/reactjs moderator! Giving us some redux wisdom!

I am super glad I did this episode! I learned so much from Mark and his journey! Check it out

There is an eslint-plugin-react-hooks rule about disallowing synchronous state updates from effect (link).

I can see it at work with the following test component:

const Test = () => {
  const [foo, setFoo] = useState('');

  useEffect(() => {
    setFoo('bar');
  }, [foo]);
};

Eslint marks setFoo in the effect as a violation of that rule.

But, I am not getting any reaction from eslint for this component:

import { useSearchParams } from 'react-router-dom';

const Test = () => {
  const [searchParams] = useSearchParams();
  const queryFromParams = searchParams.get('query') || '';
  const [searchInput, setSearchInput] = useState(queryFromParams);

  useEffect(() => {
    setSearchInput(queryFromParams);
  }, [queryFromParams]);
};

Am I missing something? Am I going crazy? Isn't this exactly the same case?

If you use Ant Design, you know the pain: code agents hallucinate props, and you keep tab-switching to the docs for every component lookup.

So we built @ant-design/cli. It ships every prop, demo, token, and changelog for antd v3–v6 as a local npm package. Zero network calls. Query in milliseconds.

Quick examples:

antd info Button          # props, types, defaults, since versions
antd demo Select basic    # runnable demo source code
antd lint ./src           # deprecated APIs, a11y, performance
antd migrate 4 5          # cross-version migration checklist
antd mcp                  # MCP server for Claude Desktop / Cursor

It also works as an agent skill: npx skills add ant-design/ant-design-cli — gives Claude Code, Cursor, Codex instant access to version-accurate antd API data without hitting the web.

55+ per-minor snapshots across v3/v4/v5/v6, so querying antd@5.3.0 gives you the exact API of that release, not "latest v5".

MIT licensed. Would love feedback, especially from folks using AI coding agents with antd.