Hey all, listen, you guys are legends!

I know I said i was gonna do my demo in pure React but after some of you mentioning phaser.js and using scenes, I looked into things and got curiosly excited....

So I've decided to slow down with this project.

I'm still writing the main FE in jsx and the logic in js but the battle scenes will be written in phaser.... yes this will put me back by a fair few months, but I'm not doing this for money or a job.... unless someone wants to offer 👀😂.. So f... it, you lot have sent me on a new rabbit hole 🫡👊🏿

Rant over....

Hey devs! 👋

I've been working on WelkUI, an open-source React component library that brings a fun, hand-drawn, comic-style look to modern web applications.

Most UI libraries focus on being minimal and corporate-looking. I wanted to try something different something playful, expressive, and a little less boring.

WelkUI is available on npm, and I'd love for you to give it a try!

🔗 Website: https://ui.welkdock.com

💻 GitHub: https://github.com/welkdock/welkUI

📦 npm: https://www.npmjs.com/package/@welkui/react

It's still evolving, so feedback, suggestions, and contributions are more than welcome!

What do you think? Would you use comic-style components in your projects?

If you've shipped a Vite or CRA app, you've probably seen this: you share /pricing or /blog/my-post and every chat app shows your home page's title and image. Link preview bots don't run JavaScript, so they only ever see the one index.html.

The usual fixes are moving to Next.js or wiring up a prerender service. I wanted something that leaves the app alone, so I built ogee.

It gives every page its own title, description, Open Graph tags and JSON-LD, and draws a preview card for each page in your site's colors, fonts and logo. It also writes sitemap.xml and llms.txt.

Version 0.3.0 is out today, and it no longer needs Cloudflare:

- Static hosts (Vercel, Netlify, GitHub Pages, S3): add `

npx @virusdev/ogee build dist 

` after your build.

- Your own server or edge function (Node, Bun, Deno, Hono): `createHandler(config)`.

- Cloudflare Worker: in front of your site, handling every page live, including ones built from API data.

To try it: `

npx @virusdev/ogee init https://your-site.com 

` reads your site in a headless browser, picks up your brand and routes, and detects your host. `

npx @virusdev/ogee check 

` grades any link's preview, yours or anyone's.

One limit worth knowing: the static build only knows pages listed at build time, so dynamic routes like /products/:id need their ids in the config. The Worker and handler don't have that limit.

It's MIT: https://github.com/virus-dev-official/ogee

Feedback welcome, especially if your setup breaks it.

I’ve been using React Hook Form for a few years, and lately I keep wondering if it’s still the best choice.

My POV: for most small and medium forms, I think the plain HTML way is enough. Use the name attribute, read values with FormData, and validate with Zod. You write less code and keystrokes don’t cause re-renders.

For bigger forms (multi-step, dynamic fields, complex validation), a library still saves a lot of time, so I wouldn’t drop it completely.

Here’s the simple rule I follow now:

• Small form (login, contact): native HTML + Zod
• Big form (wizard, dynamic fields): React Hook Form

What do you use in your projects, and why? Curious to hear different opinions.

I maintain several legacy React apps: CRA, React 18, client-side routing, CMS content. SEO and OG tags need real HTML. A client-side app gives crawlers an empty page.

I built snappy-prerender as a replacement for react-snap to ease my headaches. It is now a full-featured static site generator.

Point it at the app you already have. At build time it opens each route in a browser, follows links, writes static HTML, and checks that the client uses that HTML. The verifier detects React, Vue, Svelte and Preact. You keep your framework, router, build and deploy process.

npm install --save-dev snappy-prerender npx snappy-prerender init npx snappy-prerender 

Or run it from vite build with the Vite plugin.

What changed since the launch post:

• Verification reports whether each route hydrated or re-rendered, and shows the first mismatch.
• The audit checks route health, links, metadata, sitemap and CSP. It writes a JSON report and can fail the build with failOnAuditError. I use this report most.
• Routes can come from crawling, a file, or a local or remote sitemap. maxRoutes and routePriority make the crawl deterministic.
• routeOverrides changes waits and crawl behavior per route. transformHtml applies a final HTML transform.
• SEO output includes JSON-LD, lang/dir, hreflang alternates and image sitemap entries.
• csp: 'hash' emits a meta policy with inline script and style hashes. preloadLinks injects module, font and LCP hints.
• init can migrate an existing reactSnap block.

It also handles CSS-in-JS, form state, captured API data, critical CSS and strict CSP.

What it is not:

• Not SSR. New content needs a build.
• Not for Next.js, Remix or Astro.
• Not a fix for pages that render differently on every load. It reports the route and the first mismatch.
• Not a new framework. You keep the app you already have.

Links:

• npm: https://www.npmjs.com/package/snappy-prerender
• GitHub: https://github.com/sayakmukherjee080/snappy-prerender

MIT. Issues and PRs welcome. If you have an old SPA, React or not, try it and tell me what breaks.

I’m sharing Anky UI, my open-source React library for putting AI edits inside the text a user is already working on.

The interaction is select → choose an action → review a streamed diff → accept or reject. The library supplies the UI and state primitives; your application supplies the model endpoint and commits the accepted text to its editor.

• SelectionPalette: floating actions anchored to a DOM selection, using floating-ui.
• InlineDiff: word/character diffs while a rewrite streams, with Cmd/Ctrl+Enter to accept and Escape to reject.
• GhostInput: textarea autocomplete with Tab/right-arrow acceptance.
• useOptimisticAIState: streaming state, rollback, and undo/redo.

React 18/19, including Next.js App Router Client Components. Tailwind presets are optional. It consumes raw text/SSE, with helpers for OpenAI, Anthropic and Vercel AI SDK wire formats. Keep API keys on your server.

Source and quick start: https://github.com/ErAnkushPatil/anky-ui

29-second walkthrough: https://x.com/ErAnkushP/status/2115629939106230425

Install: npm i @erankushpatil/anky-ui

Or copy the source: npx anky-ui add selection-palette

To try the included mock-stream demo without a model key:

sh git clone https://github.com/ErAnkushPatil/anky-ui.git cd anky-ui pnpm install pnpm dev:demo

One integration detail: rendering an InlineDiff and accepting its state does not by itself replace the selected DOM text. Your editor owns that commit step. The rich-text adapters also need verification against your editor version.

Which edge cases would you test first: selection moving during a rewrite, interrupted streams, or undo/redo behavior?

Disclosure: this launch post was prepared with ChatGPT, using the repository documentation; I’m the library’s author.

Hey r/reactjs,

Like many of you, I've used React Hook Form and Formik across several production projects. While they're powerful, I always felt friction with how modern form libraries force you to treat standard HTML forms as legacy: - Having to manually register every input with refs: {...register("email")} - Wrapping UI components in custom controllers - Giant bundle sizes once you add schema resolvers and adapters

I wanted to see if we could go back to standard HTML5 forms as the single source of truth without sacrificing React ergonomics or type safety.

So I built Native Form: * GitHub: https://github.com/sunilsv26/native-form * npm: npm i @native-form/react

What makes it different?

• Zero Input Registration: You write plain HTML inputs with standard name attributes (<input name="email" />). Native Form discovers them automatically from the DOM via MutationObserver.
• Uncontrolled DOM-First Performance: Keystrokes don't trigger component re-renders. Your view only re-renders when form state (validation errors, submission status) actually changes.
• Microscopic Schema Adapters: Adapters for Zod, Yup, and Valibot are under 500 bytes. The core runtime has zero third-party dependencies.
• Built-in Multi-Step Memory: useWizard and preserveUnmountedValues: true keep your unmounted step values hydrated without complex state contexts.
• Framework Agnostic Under the Hood: The core runtime (@native-form/core) runs in pure Vanilla JS, Vue, or Svelte, while @native-form/react provides React 18 & 19 hooks (useForm, useField, useWatch, useWizard).

Quick Example:

```tsx import { useForm } from "@native-form/react"; import { zodResolver } from "@native-form/zod"; import { z } from "zod";

const schema = z.object({ email: z.string().email(), age: z.number().min(18), });

export function Form() { const { formRef, formState } = useForm({ schema: zodResolver(schema), serializationMode: "typed", // automatically coerces type="number" and range to numbers onSubmit: (values) => console.log("Submitted:", values), });

return ( <form ref={formRef} noValidate> <input name="email" type="email" placeholder="Email" /> {formState.errors.email && <span>{formState.errors.email}</span>}

 <input name="age" type="number" placeholder="Age" /> {formState.errors.age && <span>{formState.errors.age}</span>} <button type="submit" disabled={formState.submitting}> {formState.submitting ? "Submitting..." : "Submit"} </button> </form> 

); } ```

I recently released v0.1.2 with fixes for discrete controls, range sliders, and custom design system integration (like Material UI).

I'd love to hear your feedback on the architecture, API design, or any edge cases you'd like to see covered!

I have been thinking about this a lot lately. Most React content is about how to do things, but the decisions that really shape a project are the big early ones: architecture, state management, framework choice, rendering strategy.

And with React 19.x, the React Compiler, and Server Components all in the picture, a lot of us are now living with choices we made years ago.

So I’m curious about the experienced people here:

• What was the biggest React/architecture decision you made that you would reverse if you could?
• What did it cost you (time, performance, team confusion, rewrites)?
• What did you learn, and what would you pick today instead?

Hey guys,

One of the biggest issues with the current wave of "AI financial assistants" is hallucination. An LLM might sound authoritative while completely mangling basic portfolio math, drawdown calculations, or Sharpe ratios.

While building Ting AI (an AI thinking partner for retail equity investors), we took a strict architectural stance:

1. Deterministic Layer in TypeScript & PostgreSQL:
   All position weights, cash buffer ratios, and concentration risks are calculated deterministically first. The numbers are treated as immutable ground truth.
   
2. Qualitative Synthesis in Gemini Pro:
   We only pass the verified metrics into Gemini Pro with strict JSON Schema enforcement to evaluate macro context, thesis weaknesses, and qualitative risks before the market opens.
   
3. Edge Streaming:
   Multi-ticker risk decomposition streams under ~1.4s p95 via edge pipelines.

I documented the full system topology, engineering decisions, and live metrics in my interactive portfolio here:
https://faturachman.my.id (check the Ting AI case study drawer).

Curious to hear how other teams here are handling the boundary between deterministic code and generative outputs in production apps!

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

​

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.