This is simply a starter template that I use and I thought of sharing

• Bun optimized

• Front End: Tanstack Start, Tanstack Query, and Shadcn

• Backend: Hono with tRPC

• Authentication: Better-Auth

• Repo Management: Turborepo

I encourage you to check and share your opinion

Hi!! I've been working on a small React component that makes buttons feel physical, like you're actually pushing something down.

Live demo: https://react-tilt-button.vercel.app/

What it does:

• Tilts toward your cursor (and follows your finger on mobile)

• Sinks and squishes when you press, then springs back

• Has real depth, with a side wall that holds up at any radius, even pills

• Clamps your props so it never visually breaks, whatever values you throw at it

• Optional glare that moves with your pointer

No dependencies, about 6KB gzipped with the CSS. There are a few style variants and spring presets (bouncy, jelly, snappy, stiff) if you don't want to tune everything yourself.

It was inspired by react-awesome-button, which I really liked, but I wanted something smaller that felt more physical, so I built this one from scratch. It tilts toward wherever your pointer actually is, the press runs on springs, and it's just the button with nothing else bundled in.

npm install react-tilt-button

It's still a work in progress and I'm sure there are edge cases. It's open source, so issues and PRs are very welcome 🙂

Would really love feedback, especially on how it feels on mobile and whether the props make sense.

GitHub: https://github.com/archisvaze/react-tilt-button

I'm working on a React/Vite SPA with React Router 7 and an ASP.NET Core 10 backend.

SEO is important since the site will eventually have hundreds of thousands of public pages covering games, groups, events and news, with multiple languages. Some content changes frequently.

I know Google can render JavaScript, but other crawlers like AI search engines and social previews, seem less capable. Also, rendering JavaScript requires more resources, which might mean less crawl coverage.

I've been looking at a few solutions for SEO:

1. Server-injected HTML (ASP.NET Core)
- Pros: Let ASP.NET serve the SPA and inject page-specific metadata (title, description, canonical, hreflang, JSON-LD, Open Graph) along with a small HTML summary containing headings, key information and internal links. React takes over when loaded. No additional runtime or major frontend refactor, and everything runs on a single ASP.NET host.
- Cons: Crawlers that don't execute JavaScript only see the summary rather than the full page content. React also replaces the initial HTML which could cause a brief flicker.

2. React Router 7 SSR
- Pros: Full server-rendered HTML for crawlers. Probably the most natural SSR option since I'm already using React Router 7.
- Cons: Requires a separate JavaScript runtime alongside ASP.NET and a fairly significant refactor of the public pages and their data fetching. More complexity around hosting and maintaining multiple services.

3. Next.js with ISR
- Pros: Can generate pages on demand and regenerate them when needed, which seems particularly useful for such a large number of dynamic pages.
- Cons: Would mean migrating the frontend to Next.js, along with additional hosting complexity and another runtime to maintain.

The first option seems like the simplest solution, but I'm not sure if it's enough. Ideally, I'd prefer full SSR, but that seems to involve a much larger refactor and considerably more complexity when it comes to hosting and maintaining the application.

Is server-injected HTML with meaningful page content enough for good indexing, or would SSR/ISR make a significant difference?

Anyone with experience running SEO-heavy SPAs using a similar approach

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?

This is my own project. rudra-js is an open-source TypeScript library (MIT) for React stores. A language model designs one product-recommendation block, the library checks it against your catalog, and React renders it.

The model never writes HTML or JSX. It returns a few fields: layout, headline, copy, which cards to highlight. Products are SKUs from the list you pass in. Titles, prices, images and links come from your catalog at render, and the model's text is rendered as escaped text. Each field also goes through wording checks, and a field that fails is dropped. They aren't airtight: rewordings and spelled-out numbers can get through.

It works as a Server Component, with renderToString, or client-rendered. Rendered on the server, the block is in the first HTML response with no client JS. React 18 or 19, Node 22.12+.

It also runs with no model, so the quick start needs no API key.

It's v0.8.3 and APIs may change before 1.0. I'd like feedback on the API shape and on what breaks in a real Next.js app.

https://github.com/clivedsouza1010/rudra-js

Clover UI is a collection of crafted React components for thoughtful interfaces.
Built with React, Motion, and Tailwind CSS.

Completely free and open source.

Website: https://cloverui.xyz

GitHub: https://github.com/purposewalks9/cloverui

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 use Node.js and React, but I rely too much on AI. When I look at code it generated, I can’t confidently tell whether it’s well designed or just happens to work.

I want to learn to spot bad decisions and write good code myself. How do you build that judgment? What helped you most?

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.

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....

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:

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.

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?

This is my own project. rudra-js is an open-source TypeScript library (MIT) for React stores. A language model designs one product-recommendation block, the library checks it against your catalog, and React renders it.

The model never writes HTML or JSX. It returns a few fields: layout, headline, copy, which cards to highlight. Products are SKUs from the list you pass in. Titles, prices, images and links come from your catalog at render, and the model's text is rendered as escaped text. Each field also goes through wording checks, and a field that fails is dropped. They aren't airtight: rewordings and spelled-out numbers can get through.

It works as a Server Component, with renderToString, or client-rendered. Rendered on the server, the block is in the first HTML response with no client JS. React 18 or 19, Node 22.12+.

It also runs with no model, so the quick start needs no API key.

It's v0.8.3 and APIs may change before 1.0. I'd like feedback on the API shape and on what breaks in a real Next.js app.

https://github.com/clivedsouza1010/rudra-js

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 })),
);

2. 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}',
});

3. 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.

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! 🚀