​

Hey everyone!

I've been working on a learning garden where I write technical deep dives into frontend development, with a focus on understanding how things actually work under the hood rather than just learning APIs.

Currently, it has three main learning paths:

- How React Works — Understanding React's behavior from the ground up.

- React Internals — A source-level tour of React 19, from "createRoot", lanes, and fibers to hooks, the commit phase, and the React Compiler.

- Next.js in Practice — Exploring Next.js concepts and how they work in real applications.

My goal is to make these topics easier to understand by connecting the underlying implementation to what we experience as developers.

I'm particularly interested in the details that are easy to overlook when building applications every day: how updates are scheduled, what happens between a state change and a DOM update, and why the framework behaves the way it does.

You can check it out here: https://garden.drhexe.ir

I'd genuinely appreciate feedback, especially on the technical accuracy, depth of the explanations, and what you'd like to see covered next.

If you're interested in React internals, framework architecture, or understanding frontend beyond the API level, I'd love to hear your thoughts!

Hi all, I want to share a WebSocket library I built, chanx-js. It makes the messages on both ends of a socket typed, keeps the frontend in sync with what the server really sends, and comes with React hooks.

Every realtime feature I built in React ended up the same way. lastMessage was any, so I wrote the message types by hand and found out the backend had changed them only when something broke in production. On top of that I kept rewriting the same reconnect logic and the same switch over message types in every project.

How it works, in three steps: `

1. The server declares its messages and handlers. Here with chanx-js on Node:

​

const Chat = defineMessage('chat', z.object({ text: z.string() }));
const Notice = defineMessage('notice', z.object({ text: z.string() }));

const chat = consumer('/ws/chat/{room}', {
  name: 'chat',
  groups: (conn) => [`room.${conn.params.room}`],
}).on(Chat, { output: Notice }, (m, ctx) =>
  ctx.broadcast(Notice.create({ text: m.payload.text })),
);

1. The server publishes those as AsyncAPI, and the CLI turns them into a typed channel:

   npx @chanx-js/codegen http://localhost:8000/asyncapi.json # writes src/generated

   // src/generated/channels.ts export type ChatToServer = ChatMessage; // { action: 'chat'; payload: { text: string } } export type ChatToClient = NoticeMessage; // { action: 'notice'; payload: { text: string } } export type ChatReplies = { chat: NoticeMessage };

   export const chat = defineChannel<ChatToServer, ChatToClient, ChatReplies>()({ name: 'chat', address: '/ws/chat/{room}', });

2. Your component uses that channel with useChannel:

   import { createClient } from '@chanx-js/client'; import { ChanxClientProvider, useChannel } from '@chanx-js/client/react'; import { chat } from './generated';

   const client = createClient({ baseUrl: 'ws://localhost:8000' });

   function ChatRoom({ room }: { room: string }) { const { status, messages, send } = useChannel(chat, { params: { room }, buffer: 'all', });

   return ( <> <p>{status}</p> {messages.map((m, i) => ( <p key={i}>{m.payload.text}</p> ))} <button onClick={() => send({ action: 'chat', payload: { text: 'hi' } })}> Send </button> </> ); }

   root.render( <ChanxClientProvider value={client}> <ChatRoom room="lobby" /> </ChanxClientProvider>, );

params must have room because the path does, m.payload.text is a string, and send({ action: 'chat', payload: { txt: 'hi' } }) fails to compile. When the backend changes a message, you regenerate and TypeScript shows every place to fix.

What else it gives you:

• const reply = await request({ action: 'chat', payload: { text: 'hi' } }), with the reply typed from ChatReplies
• Reconnects, and topic subscriptions (room:lobby, ...) restored after a reconnect
• lastMessage for the latest message, or an on map with callbacks that don't re-render, and batch: 'raf' for busy streams
• The server side too: one validated handler per message type, AsyncAPI docs generated from the code, broadcasts across instances through Redis

The backend needs to be a chanx server, since the client relies on its message format and the AsyncAPI it publishes. That can be chanx-js on Node (ws, Express, Fastify, Hono, NestJS), Bun or Deno, or chanx on Django and FastAPI, the Python version I started with.

• Repo: https://github.com/chanx-dev/chanx-js
• React guide: https://js.chanx.dev/client/integrations/react
• npm: https://www.npmjs.com/package/@chanx-js/client

It's still new on the JS side, so if you run into any problem or have ideas to improve it, please open an issue or a discussion. Stars and PRs are welcome too.

Live demo: https://tactileui.dev/objects/odometer Source, tests and docs: https://github.com/cipriantitire/tactile-ui-free

Most animated number components start every changing digit on the first frame. On a real odometer a drum only turns while the one to its right goes from 9 to 0, so 1,099 to 1,100 should look different from 1,000 to 1,001.

The counter animates one number with a single spring. Every drum's position is worked out from that value each frame, and only the last drum is driven. Drum k turns only while drum k-1 passes 9 to 0. With the default spring the units drum is 95% done at 300 ms, and the tens and hundreds start about 268 ms in and finish at 417 ms. odometer.js slides every changing column over the same duration, starting together, and as far as I can tell from its docs NumberFlow has no carry between digits either.

The drums are ten-sided prisms in CSS 3D with real text on the faces. With reduced motion the value changes instantly and no frame is requested.

It's a plain class, not a component, so in React you create it in an effect and destroy it on unmount:

useEffect(() => {
  odo.current = new Odometer(host.current, { value, digits: 3 })
  return () => odo.current.destroy()
}, [])
useEffect(() => { odo.current?.setValue(value) }, [value])

Where it's worse than NumberFlow: it's heavier because it ships a numerals font so the drums look the same everywhere, it draws a physical object instead of text in your line, and it's new.

Install: npx shadcn add @tactile/odometer (or npm i tactile-odometer). Free and MIT, one of 60+ free pieces from Tactile UI, which I make. Source and tests are on GitHub (link at the top).

If the carry looks wrong anywhere (long jumps, fast updates), tell me and I'll look.

shadcn OIDC: OpenID Connect Configuration Registry

shadcn announced a new official registry dedicated to building OpenID Connect (OIDC) configuration interfaces.

The registry lets developers compose authentication settings by selecting identity providers, form controls, and validation libraries tailored to their application stack.

snapcn: Remotion Video Registry by shadcn-labs

shadcn-labs released snapcn, an official community registry providing Remotion components designed for rendering product demo videos programmatically.

Developers can use the shadcn CLI to install animated text reveals, terminal sessions, device frames, logo stings, and complete scenes directly into React codebases.

canvas-kit: Infinite Canvas Primitives for React

canvas-kit is an open-source infinite canvas implementation distributed as a shadcn registry.

The package provides pan, zoom, drag, and marquee selection primitives that install directly into your project as editable source files, enabling custom whiteboard and node interfaces without third-party canvas runtimes.

Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized domain toolkits, media players, and supervisory primitives this week.

• @videojs Audio, video, and live streaming player skins from Video.js delivered as editable React and Tailwind CSS source.
• @wick-charts Smooth realtime canvas charts that handle streaming data while styling with active shadcn theme tokens.
• @creance Supervisory UI components for AI agents featuring approvals, tool call tracking, run timelines, and diff reviews.
• @pluginui Audio effect and instrument interface controls for web applications and native DAWs powered by the Maru Audio platform.
• @twelfth Domain components for retail buying and category managers, including P10–P90 forecast bands and pricing scoreboards.
• @notionic React Server Component primitives for Notion pages including KaTeX math, Mermaid diagrams, and toggle lists.

📙 Articles, Tutorials & News

Using shadcn/ui with Rspress

The Rspress documentation framework published a guide detailing how to integrate shadcn/ui primitives, Base UI, and Tailwind CSS styling into Rspress sites.

Zero-React shadcn Primitives for HTMX

A community discussion detailing 96 plain HTML and Tailwind CSS components styled to match shadcn/ui, paired with an MCP server for non-React stacks.

📦 Projects, Packages & Tools

ReUI: Excalidraw Whiteboard Blocks

ReUI published interactive whiteboard canvas blocks powered by Excalidraw, installable via the @reui registry CLI command or directly as AI prompts.

shapcn: Shape-Aware Icon Morphing

A motion-centric primitive for shadcn/ui that provides smooth, shape-aware icon morphing transitions across interactive states.

watermelon-ui: Expansive Registry with MCP Server

An MIT-licensed shadcn registry offering over 500 component variants, 131 animated components, 189 blocks, 12 dashboards, and a keyless MCP server for coding agents.

night-glass: Dark Glassmorphism Theme

A dark theme preset for shadcn/ui with near-black surfaces, liquid-glass panels, and single accent colors, compatible with Tailwind CSS v3 and v4.

creative-ui: Expressive Components and Claude Skills

A collection of expressive animated components and Claude Code design skills that can be installed into .claude/skills with a single shadcn CLI command.

shadcn-table: Turnkey TanStack Table Solution

A data table library built on top of TanStack Table and shadcn/ui primitives, featuring motion-driven transitions and full sorting, filtering, and pagination support.

blobz: Deterministic SVG Avatar Registry

An open-source deterministic SVG avatar generator that provides an MIT-licensed shadcn registry of avatar primitives and block layouts.

shadcn create for Figma: Variable & Token Switcher

A Figma community tool mirroring shadcn's create workflow, allowing designers to swap themes, radii, fonts, and icon sets across canvas files using native variables.

🌈 Related

nxui: Animated Components for shadcn-vue

Over 360 animated Vue 3 components, WebGL backgrounds, charts, and shader effects designed to install via the shadcn-vue CLI.

Astryx: Meta's Open Source Design System

Meta published Astryx, an open-source design system featuring accessible React components, hooks, and page templates that integrate with the shadcn registry format.

looot-crm: Intent-Driven CRM on shadcn/ui

An open-source, self-hosted CRM built with Next.js, Supabase, and shadcn/ui that tracks account buying-intent signals such as hiring and tech stack updates.

solidping: Self-Hosted Uptime Monitoring

An AGPL-3.0 self-hosted uptime monitoring and status page platform featuring a monitoring dashboard built entirely with shadcn/ui.

Read the full issue: https://www.shadcnweekly.com/issues/5

I use AI when coding, but I don’t want to lose the ability to work through a problem without it. It’s easy to get working code now. Understanding what it does, why it breaks, and whether a suggested fix is actually right still takes practice.

That’s why I built Debug React: https://debugreact.com

You get a small broken React app and a bug report. Investigate it, fix it in the live editor, run behavioural checks, and explain your reasoning. Then review someone else’s proposed fix for the same bug. Some look right but miss something important.

The idea is to do the exercises without AI. Documentation, debugging tools, and built-in hints are welcome. I wanted a place to keep practising the understanding that comes from figuring things out yourself.

Four scenarios so far, covering async requests, list state, failed saves, and effects and event listeners. Each takes about 20 minutes. Free, no account, no scores. Progress stays in your browser. Best on a computer.

If you try one, I’d love to hear what was confusing, whether the checks felt fair, and which React bug you’d want next. Honest feedback welcome, including the critical kind. Thanks for taking a look!

While developing a tool for designing products directly in code, I kept running into the same issue: AI agents recreating basic UI components for every project, often with inconsistent styles and token structures.

So I created Varelyo UI, a React/TypeScript component library with typed APIs, predefined states, variants and a three-layer token architecture:

Core - base design values

Semantic - tokens that define how those values are used

Component - component-specific styling

You get the actual component source code to use and modify in your own projects. You can change the brand through tokens, customize components and extend the system as your product grows.

I originally made this for my own workflow, but decided to open-source it under MIT. It works independently of my desktop tool or any AI agent.

GitHub: https://github.com/varelyo/ui

Would appreciate feedback on the component APIs and token architecture.

Hey everyone,

I built an interactive 3D tactical command center using React and CesiumJS to track real-time global telemetry feeds.

Key React implementation details:

• Canvas & WebGL Integration: Synced Cesium's render loop with React state without triggering unnecessary re-renders during high-frequency telemetry updates.

• Custom Hooks: Encapsulated live ADS-B flight feeds, orbital satellite calculations (SGP4), and threat feeds into dedicated streaming hooks.

• Performance: Avoided standard React DOM nodes for map markers; batched updates directly into Cesium primitive collections to maintain a smooth 60 FPS.

• Dynamic Telemetry: Global fiber optic lines, data centers, and live GNSS interference zones rendered dynamically.

Looking for feedback on React state management patterns when handling high-frequency WebGL data streams!

(Live demo link added in the comments below)

I was building a web app and wanted Excel files to live within it and be fully modifiable / saveable, but couldn't find anything open source that fully fit the bill. I ended up building the repo below.

Basically full Excel functionality in our React app including:

• Import .xlsx and csv file, export to .xlsx
• Fully preserves existing Excel formatting
• Real-time calc that's a heavily modified fork of ironcacl
• Formulas and calculations
• Multiple worksheets
• All the formatting options you'd use on day-to-day basis
• Fully open source

https://github.com/pixelsmasher13/gridpath. Please let me know if you end up trying it out.

Skeleton screens always felt like a guess to me: grey bars in roughly the right shape, then the real content pops in somewhere slightly different.

So I built Arrivo. While loading is true, an effect plays exactly where your content will land. When it turns false, the real elements are revealed in place.

Demo : https://tuancuongpham.github.io/arrivo/ 

Code: https://github.com/tuancuongpham/arrivo

npm i u/brottin/arrivo

import { Reveal } from '@brottin/arrivo';

import { halftone } from '@brottin/arrivo/effects';

<Reveal effect={halftone} loading={isLoading}>

  <ArticleCard post={post} />

</Reveal>

How it works:

• Your content stays in the DOM, hidden with visibility, so nothing shifts when it lands.
• Each wrapper gets one canvas overlay. Text lines are measured with Range rects and images are read from the page, so the effect draws the real shape of your content instead of a guess.
• An effect is two draw functions, idle() and reveal(p). One shared requestAnimationFrame loop drives every instance, off-screen ones pause, and reduced motion turns every reveal into a 150 ms fade.
• Zero runtime dependencies, about 8.5 KB gzipped for the core and 0.7 to 3.4 KB per effect, tree-shaken.

The 13 effects: split-flap, redacted, quadtree mosaic, CMYK halftone, CRT tune-in, ink (with 8 threshold maps), particle swarm, darkroom, Tetris, fuse (with a Lunar New Year mode), equalizer, thermal and snowfall.

It's 0.1.0, so feedback is very welcome, especially on where you'd actually use something like this and where it would be too much.

Hey everyone! 👋

I've been working on Pimolu UI, an open-source React component library focused on clean design, customization, and smooth interactions.

I wanted to share my first motion showcase, featuring some of the components, their interactions, and examples of interfaces you can build with them.

My goal is to make building modern, consistent UIs easier while keeping components flexible and developer-friendly.

This is still a work in progress, and I'd genuinely love to hear your thoughts!

• What do you think of the design and animations?
• Is there anything you'd improve?
• What would make you consider using a new UI library?

🌐 Website: https://pimolu.com

Any feedback is appreciated! 🚀

Just added 3 new components to Ovio, bringing the collection to 20 animated React components. Each available in 4 styles: Minimal, Craft, Retro, and Toy.

Built on the shadcn registry model, Ovio is for developers who want their websites to feel a little less ordinary, with motion and interactions that go beyond the usual UI.

The motion layer for developer websites.

Explore Ovio → https://ovioui.vercel.app

I recently created a complete tutorial where I build a Redux Toolkit-inspired state management library from scratch using React and JavaScript.

The goal is to understand how Redux-style state management works internally instead of only using the package.

In the tutorial, I implement:

• A custom createStore function
• Store Provider
• Reducers and actions
• Subscribers and listeners
• useSyncExternalStore
• useSelector and custom store hooks
• Redux DevTools integration
• createSlice
• combineReducers
• shallowEqual
• Thunk functionality
• Final testing and debugging

YouTube tutorial:
https://www.youtube.com/watch?v=LucUJ-5COjg

I would appreciate feedback from the community, especially on the library design, API structure, and any improvements that could make this project more reliable or easier to use.

Please note: this is an educational project designed to understand Redux and state management concepts internally. It is not intended to replace the official Redux Toolkit.

I read a few books on JavaScript and coding in general

This was in late 2025 and a few months later I started writing react js,
Ai has gotten so good at writing code, it is way better than I am.

I have pretty okay fundamentals of coding that I have been able to spin up some interesting projects with Ai.

But if you ask me what some parts of the code does, I have very little idea about it.

How can I catch up with so many years old coding experience and survive in this field if Ai learns 20x faster.

Hey everyone,

I kept writing the same code for every form in my projects: react-hook-form setup, a try/catch around the server action, mapping server errors back onto the fields, a loading state, stopping double submits, a toast, refreshing the data, resetting the form... and doing it again for every add/edit/delete dialog.

So I pulled all of that into a small package called **submitly**.

It’s headless, so it doesn’t render anything. You keep your own components (shadcn, Radix, Base UI, plain inputs, whatever you use).

What it does:

* `useCrudForm`: react-hook-form + schema validation + your action in one hook

* Works with any Standard Schema library: Zod 3/4, Valibot, ArkType

* Server errors get mapped to the right fields automatically (nested ones like [`items.0.name`](http://items.0.name) too)

* Ignores double submits while a request is in flight

* Locks the dialog while saving, so the user can’t close it halfway through a request

* `useCrudAction` for delete/toggle buttons, with the same behavior

* One provider where you plug in your own toast, router and refresh logic

* Next.js helpers: `runAction` for server actions (validates again on the server, revalidates on success, turns thrown errors into a clean result), and it handles `redirect()` from server actions properly

* Also works in plain React + Vite (there’s an example with React Router + TanStack Query)

* Around 3 kB gzipped, typed end to end, tested on React 18 and 19

Quick example:

const { form, onSubmit, isSubmitting } = useCrudForm({

schema,

defaultValues: { name: "" },

action: createProduct,

onSuccess: () => closeDialog(),

});

It’s still early (0.x), so I’d really like feedback: what’s missing, what’s confusing, or what you’d do differently.

Docs: https://submitly-docs.vercel.app

GitHub: https://github.com/toony10/submitly

If you find it useful, a star on GitHub would mean a lot. Thanks for reading 🙏

Hello. Does anyone know how to host a web application built with React—both the frontend and the backend?

Hey everyone,

I kept writing the same code for every form in my projects: react-hook-form setup, a try/catch around the server action, mapping server errors back onto the fields, a loading state, stopping double submits, a toast, refreshing the data, resetting the form... and doing it again for every add/edit/delete dialog.

So I pulled all of that into a small package called submitly.

It’s headless, so it doesn’t render anything. You keep your own components (shadcn, Radix, Base UI, plain inputs, whatever you use).

What it does:

• useCrudForm: react-hook-form + schema validation + your action in one hook
• Works with any Standard Schema library: Zod 3/4, Valibot, ArkType
• Server errors get mapped to the right fields automatically (nested ones like items.0.name too)
• Ignores double submits while a request is in flight
• Locks the dialog while saving, so the user can’t close it halfway through a request
• useCrudAction for delete/toggle buttons, with the same behavior
• One provider where you plug in your own toast, router and refresh logic
• Next.js helpers: runAction for server actions (validates again on the server, revalidates on success, turns thrown errors into a clean result), and it handles redirect() from server actions properly
• Also works in plain React + Vite (there’s an example with React Router + TanStack Query)
• Around 3 kB gzipped, typed end to end, tested on React 18 and 19

Quick example:

const { form, onSubmit, isSubmitting } = useCrudForm({
  schema,
  defaultValues: { name: "" },
  action: createProduct,
  onSuccess: () => closeDialog(),
});

It’s still early (0.x), so I’d really like feedback: what’s missing, what’s confusing, or what you’d do differently.

Docs: https://submitly-docs.vercel.app/
GitHub: https://github.com/toony10/submitly

If you find it useful, a star on GitHub would mean a lot. Thanks for reading 🙏

I built Honest Mailbox (my project, link at the bottom), a couples app with a draw-and-guess game, Four in a Row and card decks. All game logic is pure functions on the client, and security rules decide who can touch a game. Drawings are stored as compact strings on a 0–1000 grid, split into chunks so no single write gets big.

Open questions:

• Each stroke is a separate Firestore write. Is that fine at two-user scale, or should I batch?
• Is client-side scoring acceptable when both players are trusted partners?
• Would you use rules-only access control for something like this?

Hello again everyone. I have been trying to using the react binding for the Leaflet API. I followed the documentation but I keep running into this error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This is my Map component. It is the child component of my main App component.

import { MapContainer, TileLayer, useMap, Marker, Popup } from 'react-leaflet'


function MyComponent() {
  const map = useMap();
  console.log('map center:', map.getCenter())
  return null;
}


const Map = () => {
    return ( <MapContainer center={[50.5, 30.5]} zoom={13}>
      <MyComponent />
    </MapContainer>);
}
 
export default Map;

I am not sure whether it has something to do with muddled dependencies because I am pretty sure I installed leaflet and leaflet react in the terminal

  "dependencies": {
    "@testing-library/dom": "^10.4.2",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.3",
    "@testing-library/user-event": "^13.5.0",
    "leaflet": "^1.9.4",
    "react": "^19.3.1",
    "react-dom": "^19.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Thank you so much for taking the time to read this.

I needed Word-style pages in a TipTap editor. The official Pages extension is a paid add-on, and the community ones I tried injected global CSS that broke my tables. So I wrote my own and open-sourced it.

Demo: https://text-editor-react-neon.vercel.app/ Repo (MIT): https://github.com/HuyPhan1232203/Text-editor-react npm: npm install tiptap-a4-pagination

How it works

• It measures the top-level blocks and inserts spacer decorations where a block would cross the bottom of a page. The document is never modified, so getHTML() / getJSON() stay clean.
• Tables split between rows, never inside a rowspan, and the header row repeats at the top of the next page.
• Floated images (text wrapping) and CSS margin collapsing are handled.
• The page-break math is a pure function, so it's unit tested.
• About 5 KB gzipped, TipTap 3 only.

The full editor (React 19 + TipTap 3) also has

• Google Docs paste that keeps headings, checklists, tables and indents
• PDF export through the browser's print dialog (no server) that keeps the editor's page breaks and puts page numbers in the footer
• Image resize and text wrap, KaTeX math (lazy-loaded), autosave to IndexedDB, optional real-time collaboration over WebRTC (?room=name)
• Lighthouse: 100 on desktop

Known limitations

• A single paragraph taller than the remaining space moves to the next page as a whole; it is never split.
• A table row taller than a page overflows.

I'd love feedback on the API, and on documents that break the layout. Paste a long Google Doc or a big table into the demo to try it.

I've been building describe-me, a Vitest plugin plus a viewer that turns component tests into docs. It records the DOM after every render and interaction of a test and shows the frames as a browsable catalog: each describe is a group, each it a story, each step a frame. No story files, so the docs cannot drift from the component: if they would, the test fails.

Short demo (23 s): https://github.com/grzehub/describe-me#readme

What's new in 0.11:

Live: a link to a test mounts the component for real, in your project's own Vite, exactly as the test's arrange phase set it up. You click and type in it, and vi.fn() props show their calls.

Foundations: it reads the design system your tests load (CSS custom properties, Tailwind 4, shadcn/ui, Material UI, or a theme module) and shows the tokens, light and dark, with WCAG contrast of color pairs.

Works in browser mode and in jsdom, with Testing Library and user-event. React 18 and 19, Vitest 4 and 5. It's early and React-only for now; the Limitations page lists every known limit.

Try it in StackBlitz: https://stackblitz.com/github/grzehub/describe-me/tree/main/examples/stackblitz

Example viewers:
shadcn/ui: https://grzehub.github.io/describe-me/examples/shadcn/,
Material UI: https://grzehub.github.io/describe-me/examples/mui/

Docs: https://grzehub.github.io/describe-me/

The question I'd most like answers to: does "tests as the source of stories" fit how your team writes component tests, or do you keep states in tests that you'd never want in docs?