[ Removed by Reddit on account of violating the content policy. ]

I just launched my Alpaki project using React, and I’m really impressed. It’s the first time I’ve seen these web speed scores, and everything is running... beautifully.

Coding agents can read your React source, but they can’t see what the running app is actually doing. Ask “why did this effect run six times?” and they’re often left guessing.

genie-react is an open-source CLI that gives any coding agent access to live React internals:

• Render counts, timings, and the exact prop breaking memoization
• Effect-loop tracing, including which dependency changed on each run
• Caught errors and stuck Suspense boundaries
• Runtime prop and state overrides to test component states
• TanStack Query cache, invalidations, and Router state

It works with Claude Code, Cursor, and any other agent that can run a CLI.

The demo below uses Excalidraw’s real codebase.

GitHub: https://github.com/y0u-0/genie-react

If this solves a problem you’ve hit, a star would help others discover it.

Hey Community,

We explore Grok Build, the new terminal-based TUI coding agent from x.ai. We also look at Appless, an experiment from the creators of OpenUI that bypasses chat bubbles to stream live native UI components using openui-lang.

Finally, we dive into Maestro MCP, a new tool context protocol server that lets AI agents automatically build and run YAML test flows from plain English instructions.

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

I started learning web development at the start of this year and one thing led to another and I’m now trying to build near enough an entire business’ online system.

I’m building an AI and automation enhanced business simulation.

There’s two main purposes: teach myself full stack development, and experiment with where AI and automation fits in modern business systems. I’m trying to treat it like a real business so I can see how and where things can be different to a system that doesn’t use AI or workflow automation.

It started off as an attempt to build the frontend a customer would use so I could practice with state. Then I decided it would be cool to have the opposing merchant interface where you can view the orders. So I needed to make the backend.

But, given the times we’re in, I thought it would be interesting to see I can use AI and automation in ways that would save a user time, or just deliver helpful results.

Now, my long term plan is to create an entire product pipeline, with product suggestions from a ‘supplier’, marketing content created, product going to warehouse, then product available for order. But that’s a ways off.

For now I’m focused on developing the customer and merchant ends with these primary features:

·       Shared backend

·       Customer service chatbot on customer side

·       AI assistant on merchant side

·       AI overwatch feature to monitor AI behaviour

Eventually I’d like to experiment with adding analytics and CEO suggestions features from the AI but again that’s a ways off.

I’ve set up self-hosted n8n which I’ll use for workflows where necessary, and I think once the meat of the project is done I’ll get a bit creative with that.

I’m building it in slices; rather than trying to make the whole backend at once, I’m building it by function. Currently, I’m on the first slice, the cart. This is my first time attempting to write backend code.

What I’m enjoying is the logical, layered approach; I have router, application, service and data layers, each with their own jobs. And because the backend is entirely abstract so I cant rely on looking at where my elements are going on screen (like with frontend) I’m learning to properly understand how data is passed with javascript.

I realised early on that if I’m to have an AI logging system I’ll have to think data first, and I think this has helped me massively as now it’s simply (simply) a case of getting from the front to the back and adding/changing data whose properties I’ve already determined.

I’m going to post more detailed stuff so I can learn from people on here and engage in general in the topic more.

If anyone has any questions or suggestions, please comment!

With the 1.2.0 release of VisuallyJs we've added/updated a slew of starter apps for React, including Gantt, BPMN and ERD diagrams. Demos here, with links to the Github repositories:

• https://visuallyjs.com/demonstrations/gantt
• https://visuallyjs.com/demonstrations/bpmn
• https://visuallyjs.com/demonstrations/erd

VisuallyJs is free for non-commercial usage. Give it a spin and let us know what you think!

My bank asked for dozens of PDFs for my mortgage application. I couldn’t keep track of opening and closing files, so I built a 2D Canvas app where I can open multiple PDFs simultaneously.

The pages of a single file scroll horizontally while the files themselves scroll vertically. It’s a backwards compatible PDF at the end of the day (reads as one continuous document).

Built with React, Electron and Objective-c++ overrides.

It’s free and open source:
- Repo: https://github.com/AlexandrosGounis/pdfx
- Web: https://pdfx.zip

Your feedback would be highly appreciated

Hey there guys, original post in r/chrome_extensions!

Short intro into me: I am a software engineer, with around 7-8 years of experience, and I've made a couple of extensions now, most notable for me was an internal tool for my current company that won me an internal award. But I find the process of creating extensions kind of crappy from a configuration and dev experience point of view.

So I decided a few months back to begin building by hand a meta-framework for React for building not only Chrome Extensions, but Firefox and Safari too.

I know there are a few resources around that help with this like WXT, Plasmo, Bedframe, and CXRJS, but my project goes quite a bit further. It’s deliberately quite opinionated. I think browser-extension development benefits from conventions more than endless configuration choices.

Some of the things it focuses on are:

• File-based extension surfaces (Next.JS like): add a page for a popup, options page, side panel, new tab, devtools panel, or extension tab, and it generates on the fly.
• React layouts and routing for extension pages, so larger extensions don’t become a collection of disconnected screens (again, very Next.JS like).
• Generated manifests so less of the extension’s structure is maintained by hand.
• Typed communication messaging layer between the UI and background service worker.
• Shared state that is designed around extension storage, rather than assuming a background process will always stay alive.
• React UI for content scripts that mounts in Shadow DOM, helping avoid clashes with the website it runs on.
• A development workflow with live reloading, plus build, zip, and submission oriented commands.

I made maybe a controversial decision to only support MV3, it primarily targets Chrome, already supports Firefox, and Safari builds work but still need some love.

So, I'd love to hear some feedback from the community to hear your opinions on this, and what you yourself like and dislike about the current state of chrome extension development, and if you think this could be a fit for you and your project or is it too restrictive.

The goal for this to be open source and free for everyone to use!

Thanks, and looking forward to hearing from you!

TL;DR: I’m building an opinionated React framework that removes much of the configuration and setup friction from browser-extension development. It targets MV3 Chrome and Firefox today, and I’d love feedback on whether this would help your workflow.

Spent the last few months building Raylight, a motion design tool that runs fully in the browser: 3D canvas, timeline, animations, cinematic FX, video export. Clip below is a free template from the app.

Here are some of the parts that had me regretting building this.

1. Multi-layer-select rotation. Rotating one asset is trivial. Rotating a selection of assets as one rigid body, when each has its own position and tilt in 3D, fought me for weeks. Every math bug looks the same on screen (things drift or shear slightly) so you can't tell which transform in the chain is wrong just by looking.

2. Making effects look good, not just work. Bloom, glow, glass, depth of field. Getting them to render is a weekend. Getting them to not fall apart is months: bloom pops when a fading asset crosses the threshold, glow reads as a blurry blob instead of light, glass bends the wrong way at edges. Every effect ended up with little invariants you only discover by staring at ugly frames.

3. Editor preview has to be fast AND pixel-identical to export. One renderer serves both, but a 60fps interactive preview and an offline encode pull in opposite directions. Res-capping post-FX and dropping quality during interaction buys the speed, but any shortcut that leaks into export means users ship something that doesn't match what they saw. Color spaces alone (sRGB getting decoded twice, videos coming out darker) burned days.

Honestly, if anyone has build similar WebGL/three.js heavy products before would love to hear from you!

I built Basalt because when im editing a React Native/Expo app I always would guess a value, save, wait for reload, look at my phone, repeat. For small stuff like spacing or color it was way more friction than it should've been.

Basalt runs in VS Code/Cursor, shows a live preview of your app, and lets you click any element to edit it directly: drag to reposition, change text, change color, and it writes the change straight back into your actual source file.

It is completely free and it’s currently in beta, so please commit your app to Git before testing it!

Would love to get your brutal feedback on it.

https://wikiracing.org

I am a new self-taught react dev, trying to build a custom software system for smoke shops that will compare distributors, control inventory and run a website with pickup order option, but I'm having trouble marketing to shops. Does anyone have any advice?

https://github.com/debabrata100/reactcanvas

Hello

I’m developing a project that offers precise editing capabilities for creating React prototypes.

It allows you to import and edit any React code. This way, you can experiment with different prototypes on the canvas during the ideation phase and later integrate them into your codebase.

The project is in its early stages, I’d love to hear your thoughts.

https://visualwizard.app/

As i am phasing into senior role i want to get my basics crunched down , learn more about react itself and how can i build products i.e web apps / mobile apps more efficiently.

Sharing what I and fable did as Fable is going away from us Pro users this week. You can add custom animations, keyframes, animate different properties and export up to 4K60P. Still need a bit of cleaning up but pretty satisfied with the outcome. The project saves as a big JSON. So you can get any AI to build custom animations that can be easily imported into this studio.

As an ECE engineer + game dev, I wanted to make textbook concepts something you can actually touch. Five browser tools, no install, all under one hub:

🔗 https://labbench-hub.vercel.app/

• 🌊 Real-time FFT spectrum analyzer + filters
• 🤖 PID line-follower you tune live
• 🔌 Drag-and-wire logic sim w/ truth tables
• 📡 Modulation + constellations + BER
• ⧉ Click-to-drive Verilog-style timing diagrams

React + TypeScript, all the math written from scratch (real FFT via Web Audio, a double-integrator PID plant, an iterative solver so feedback circuits settle, Monte-Carlo BER, a real edge-triggered register model). Everything's free to use — added an optional ₹29/mo Pro tier recently for people who want to save/reload sessions, but that's not the point of the post. Repos are open. Would love feedback on the approach.

Basically title. I have a few years experience as a fullstack / mostly frontend React dev, and now I'm back on the job hunt. Almost all frontend job postings I see now are for NextJS. Even more prevalent though, 70-80% of the jobs I'm seeing are for backend heavy fullstack with .NET, Spring Boot, etc. I enjoy React a lot, and I'm pretty good at it by now, but I'm feeling a lot of pressure to pivot. It seems like the jobs are mostly gone. Anyone else having the same experience? Or you guys still doing fine out there?

REACT COMPONENT LIBRARY
Text effects thatmake your UI shine
22 variants, 23+ colors — marker, brush, brushstroke, gradient, slide, glow, scratch, double, wave, pill, dashed, blur, shimmer, underline-animated, stamp, neon-border, rainbow, spotlight, typewriter, ink-drip, splatter, chrome. Zero dependencies beyond React.

Test in Live the Library