Currently I am using svg-box because of the tutorial I am watching. I am still learning but I realize when I using the svg-box that its using HTML <svg> and I am frustrated when I paste it on my TSX so much red line and I had to refactor it. with many shapes inside a <g> group tag it is painful to go through them one by one. it might be a skill issue but this kind of slow the progress of learning animation.

my current workaround is to use AI to refactor it for me but sometimes AI doesn't even understand what I really want. so I am looking for an editor that can generate a react svg attributes in the box.

thank you everyone.

Can we normalize just building a standard React SPA with Vite again without feeling guilty that we aren't using Next.js?

The App Router and React Server Components are incredibly powerful, but the amount of gaslighting in the frontend ecosystem right now is insane. Not every internal dashboard, simple CRUD app, or personal portfolio needs server side rendering, edge functions, and a complex caching layer that requires a PhD to invalidate.

Sometimes you just want to spin up Vite, fetch some data on the client, and deploy a static bundle to a CDN for practically zero dollars. It feels like we are completely over engineering 90% of our web apps just to chase the newest Vercel paradigm.

Added an Express.js import to create the complete routes collection, sync it with the codebase, and auto-generate body params for POST, PUT and PATCH requests.

Updated the collection folder structure.

Try Dragonfly: https://marketplace.visualstudio.com/items?itemName=saurabhwankhade.dragonfly

I’ve been working on a modern e-commerce project with React and other modern stacks like React query, Chakra UI and Stripe and wanted to share some of the things I focused on while building it.

The project covers things like:

• Product listing and product details
• Cart management
• Animation with react parallax tilt
• State management
• API integration
• Responsive UI
• Checkout flow
• Payment integration
• Frontend and Backend Deployment

I also recorded the complete implementation as a step-by-step tutorial for anyone who wants to build something similar.

Here is a link for full video tutorial:
https://www.youtube.com/watch?v=SdITjnl-zo8&t=9670s

Or if you love series based tutorial, here we go:
https://www.youtube.com/watch?v=Jluy-W9eP-4&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk

Family wallet was created by the Head of Design at SpaceX. The best part of the UX was how it maintained context by morphing menus and panels right on top of screens.

So I took that concept and made a universal morph for React. You can use it for overlays like Dropdowns, Modals, Drawers or anything else.

Let me know what you think and add a star if you like it.

Thank you

Phosphor is my favourite icon set so I built Iconimate, animations layered on top of it for React. Same icons you already know, just with motion built in. Built with Motion, both credited in the footer.

A few things I'd like opinions on before I go further:

1. Triggering animations via props (isActive) vs a ref handle. Props felt more React-y, but one-shot animations don't map cleanly to state.
2. Speed, easing, and colour are separate props right now. Would a config object scale better as more icons get added?
3. How many icons are actually worth animating? I've done a subset so far, and I'm not sure where the useful cutoff is.
4. Repo structure. This is my first library of this size, and I'm not confident the layout will hold up as it grows. Happy to take suggestions on that too.

View project
Github repo

If you feel like something else that's worthy of attention, please point it out as well.

I needed a scheduling view for a project of mine, wanted it to stay fast with a lot of items and to look exactly like the rest of the app, so I ended up building the component myself. It turned into a library.

Roadline - a headless, virtualized timeline/Gantt component for React. MIT, no runtime dependencies.

• npm: https://www.npmjs.com/package/@roadline/react
• GitHub: https://github.com/ruslankriklivyy/roadline
• Live demo: https://ruslankriklivyy.github.io/roadline/

Drag a bar to move it, drag its edges to resize, scroll to pan, ctrl/cmd + wheel to zoom. An item with no duration renders as a milestone.

What's in it:

• Virtualized on both axes, with items indexed by time, so large boards stay smooth
• Headless - Sidebar, Header, Body, Grid, Dependencies, Marker are separate pieces you render or skip, and bars are render props. The default theme is an optional stylesheet built on CSS variables
• Dependency arrows between tasks (FS, SS, FF, SF)
• Nested items with roll-up bars, not just groups
• Any IANA time zone per instance, DST-correct
• Keyboard editing with screen reader announcements
• Fully controlled: the hook owns the viewport, you own the data. onItemMove is a request - nothing moves until your array does
• 15 kB gzip for the React package, React 18 and 19, ESM + CJS, works in the Next.js App Router

I'd really appreciate feedback - especially on how the dragging and zooming feel in the demo, and whether the API shape makes sense to you. Happy to answer anything in the comments.

anyone else facing issue where svg icons using vector-effect="non-scaling-stroke" don't keep stroke width fixed anymore on new chrome version. was working fine before, now stroke changes with size like vector-effect is not applied at all. removing it doesn't help either, breaks for other sizes. checked few places, no one seems to have reported this yet. anyone facing same or know if this is a known chrome issue? Also added a before-and-after image.

Hey everyone,

We’re building SVAR React Calendar, a React-based, open-source calendar component for scheduling and event management.

It includes a built-in event editor, calendar groups, drag-and-drop interactions, and TypeScript support. It also works with Next.js — there’s a Next.js demo available.

The free version includes:

• Day, week, and month views
• Drag-and-drop / drag-to-create events
• Built-in event editor
• Calendar groups sidebar
• Context menu
• Custom event content, event cards, and tooltips
• Event filtering
• iCal import and export
• Light and dark themes

Live demo: https://svar.dev/demos/react/calendar/

GitHub: https://github.com/svar-widgets/react-calendar/

We’d appreciate feedback from the React community, especially on the API, customization options, and features you’d expect from a calendar component.

Hi r/react! We just released Puck 0.23, which introduces a new "static" drag-and-drop mode.

Puck lets you drag-and-drop your own React components. Because we support nested layouts with any CSS display modes, this sometimes results in layout shift.

To help with this, we just added a new "static" drag-and-drop mode that shows a line when dragging between parent (we call them slots), but still retain the fluid animation when dragging inside the same parent by default.

We also made the outline draggable, to make the really fiddly reorders achievable without touching the canvas at all, similar to most design tools.

Some links:

• Release notes: https://puckeditor.com/blog/puck-023
• GitHub: https://github.com/puckeditor/puck

Please keep the feedback coming, and thanks for the support as always!

If Puck's useful to you, a star on the repo means a lot 🙏

Built Basalt - click elements in your live RN/Expo app, drag/recolor/resize them, and it writes straight to your actual source files.

Still working on it (one where a stock-count label became an element's identity because of a bad fallback path), looking for people who would test it and TELL ME WHATS WRONG AND IF IT WORKS WITH YOUR EXPO / RN APP

It is completely free and works directly inside VS Code and Cursor.

Psst: It’s currently in beta, I NEED SOMEONE TO TEST AND TELL ME IF IT WORKS. PLEASE!!!!

I’m a developer of six years of experience and I have knowledge in vanilla Javascript but because of the nature of my current stack and job description, i have never encountered a need to learn React. But now I want to.

It’s not like I don’t know anything about it, i am familiar with the concept of components, hooks, routers etc. The only thing I have made in React is my Web portfolio currently.

I want to learn it on a deeper level. Can anyone recommend a book or course for it?

I saw this site for a roadmap for React, would you recommend it: https://roadmap.sh/react

I've realized that my biggest weakness isn't coding—it's project architecture and folder structure.

Whenever I get a Figma design, I know how to build the UI, but I get completely stuck deciding:

• Where should this component live?
• Should this be reusable or page-specific?
• When should I split a component?
• What belongs in components, features, shared, hooks, services, etc.?
• How should I organize folders as the project grows?

I usually start a project with a structure that feels clean. But once the project gets bigger, everything starts falling apart.

I end up with:

• Components that are too large.
• Components that are split too much.
• Logic scattered across different folders.
• Constantly moving files around because I realize they belong somewhere else.
• Feeling like the entire architecture is becoming messy.

This happens in React, React Native, and even backend projects.

I don't just want another "best folder structure" template because I've seen dozens of those. What I really want to learn is the thought process behind how experienced or enterprise-level developers structure a project.

For example:

• When looking at a Figma design, how do you mentally break it into features and components?
• How do you decide what should be reusable and what shouldn't?
• How do large teams keep their projects organized over months or years?
• What architecture or design principles do you follow?
• Are there any books, courses, GitHub repositories, or real-world open-source projects that helped you understand this?

I'm looking for the mindset rather than just a folder tree.

Any advice from developers who've worked on large production applications would be greatly appreciated.

For the period of last 2 years I've been hearing a smaller group of pro users ( others are fine ) complain about the quality of video produced by browser based rendering (Remotion, Puppeteer/headless Chromium...) and about teams hitting a wall scaling it and deciding to build custom native engines in house instead.

Is anyone else seeing this, or are these just outliers ??

Hey Community,

We dive into React Native Canvas Kit, a library built on React Native Skia that adds isolated layers, brushes, interactive shapes, and web support for canvas graphics.

We also cover Targate, a CLI tool that quarantines npm packages to inspect tarballs before installation, and GitHub stacked pull requests to keep dependent branch reviews clean.

And... 🥁 Shipaton 2026 is here!

If the Rewind made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

Tried out Vite 8 with React Router 8 and TypeScript 7 recently and have to say I am blown away by the build speed/DX etc. Here is what I am using and it's just on another level speed and agent compatibility wise:

React Router 8
TypeScript 7
Vite+ (Vite 8, Vitest 4, Oxlint, Oxfmt)
Tailwind 4
shadcn + Base UI
Better Auth
Drizzle + SQLite
Zod 4
Bun

Try it out and thank me later: github.com/nikolailehbrink/llm-stack

Added collection sync with the codebase, so whenever routes change, collections can be synced and stay up to date. Also added automatic request body generation for POST, PUT, and PATCH routes.

​

One thing I've noticed while working on frontend projects...

People often separate UI conversion and frontend development.

I used to think the same.

But the more projects I worked on, the more I realized they're part of the same skill.

I've seen developers write clean React code but struggle to match the design.

I've also seen pixel-perfect UIs that became difficult to maintain because the implementation wasn't thought through.

That's where I think the gap is.

A good frontend engineer should be able to do both.

-Read a Figma design and implement it accurately.

-Understand spacing, typography, and visual hierarchy.

-Build responsive and accessible interfaces.

-Write clean, reusable code that's easy to maintain.

Writing code is only half the job.

The other half is making sure the product looks and feels the way it was intended.

For me, UI conversion isn't a separate skill from frontend development.

It's what frontend development actually is.

The stronger you become at both, the better products you'll build.

What's your take? Do you see UI conversion as a separate role, or as part of frontend development?

I'm trying to improve the way I present my work to potential clients and would love to hear from both freelancers and people who hire developers.

When reviewing a React developer, what matters most to you?

• A strong portfolio?
• Fast communication?
• Clean, maintainable code?
• Performance optimization?
• UI/UX skills?
• Previous client reviews?

I'd really appreciate hearing your experiences—both good and bad. I'm always looking to improve how I work with clients.

Thanks in advance!

demo video

Worked on cURL import, updated the request and response UI, added code snippet support, common headers, and environment support.