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?

1. 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.
2. 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.
3. Microscopic Schema Adapters: Adapters for Zod, Yup, and Valibot are under 500 bytes. The core runtime has zero third-party dependencies.
4. Built-in Multi-Step Memory: useWizard and preserveUnmountedValues: true keep your unmounted step values hydrated without complex state contexts.
5. 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(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}>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 built penciled, a small MIT library for persistent text highlights and notes in the browser. It uses the CSS Custom Highlight API instead of wrapping ranges in <span>s, so the DOM stays intact and layout/selection quirks are milder. Anchoring tries to survive edits when you come back to the page.

npm: penciled
GitHub: https://github.com/marcellosso/penciled

There's also a companion browser extension (same engine) if you want highlights on arbitrary sites, happy to answer questions about the API or the anchoring approach.

You can overwrite the prepareStackTrace property of the Error object by String prototype's functions and invoke them without parentheses. Then by overwriting the Error and Array prototype it is possible to control the arguments. Combining this behavior, together with some JSFuck-inspired tricks, it is possible to generate arbitrary JavaScript strings and run arbitrary JavaScript with only letters + - = and ,

How to make this game better ?

When you scale a Node.js backend using node:cluster, you run into a surprisingly annoying problem:

How do you rate-limit external APIs like Stripe or OpenAI while making sure all workers share the same rate limit?

The first solution that comes to mind is usually: "Just use Redis."

But does it really make sense to introduce additional infrastructure complexity, network overhead, and an entire external dependency just to coordinate a few API calls coming from the same server?

That's exactly why I built cluster-rate-limiter.

A Node.js library that gives you coordinated rate limiting across workers, powered entirely by Node.js's native IPC messaging, with no Redis and absolutely zero external dependencies.

Rather than diving into the internals here, here's what you get out of the box:

• Zero Setup: Install it and start using it. No additional infrastructure required.
• Developer-Friendly API: The run() method accepts your fetch call or any function directly, along with all its arguments. No complicated callback patterns.
• Two Types of Limits: Supports both Semaphore-based concurrency limits and Duration-based rate limits for enforcing strict time windows, such as those imposed by Stripe APIs.
• Typed Errors: If a request times out waiting for permission, the library throws a clear, specific error that you can easily translate into an HTTP 429 Too Many Requests response.

And when it comes to performance, the core data structure for tracking request timestamps uses a zero-allocation approach built around a Float64Array ring buffer.

This eliminates the need for repeated array reallocations and significantly reduces garbage collection pressure under heavy load.

If you're interested in the low-level details, I've explained the ring buffer implementation and how it reduces memory overhead in the README.

If you're running a clustered Node.js backend and want to avoid the overhead of introducing Redis just for rate limiting, check out the links below, explore the architecture, and let me know what you think!

Buenas! Quiero compartir un proyecto personal en el que he estado trabajando: una biblioteca de recursos de desarrollo web.

La idea es reunir ejemplos y componentes que sirvan para aprender, experimentar, encontrar inspiración y reutilizar código en otros proyectos.

Si estás aprendiendo frontend o ya desarrollas páginas web, me gustaría conocer tu opinión.

¿Qué tipos de componentes o recursos te gustaría encontrar en una biblioteca así?

¡Cualquier feedback constructivo es bienvenido!

I just released v0.1.1 of my HTML-first progressive enhancement framework with zero AI assistance. It is designed to support the needs of civic tech websites.

Places.js has these features.

• Dynamic HTML-first web components rendered with data from an API endpoint or other external source.
• Easy integration with existing projects through HTML-first templates and web components.
• No build step. Places.js can be downloaded from a CDN.
• Rendering agnostic stores that can be integrated with vanilla JS web components or another framework.
• Support for partial re-rendering through using signals.

Places.js is optimized for fast performance and outperforms Lit, React, and Svelte. When benchmark testing, Places.js took approximately 140 milliseconds to render 1000 rows of tabular data.

• Lit: 156 milliseconds
• React: 162 milliseconds
• Svelte: 153 milliseconds

Examples of using Places.js

• Automated test runner
• Event listing website

Getting started

Download the places-js-latest.js file from the CDN.

A detailed reference guide can be seen here: https://createthirdplaces.org/tech/placesjs/reference/presentationComponent.html

Priorities for next release

• Adding more unit test coverage.
• Compatibility with other tools, especially hypermedia UI tools including Datastar and HTMX
• Implementing hypermedia controls.
• Testing integration with Leaflet and other mapping libraries.

Specific TODO items are listed on the issues page. I am looking for help testing compatibility with other tools.

Also, Places.js has a strict policy that meas all code changes, comments, or new issues must be created by humans. AI tools such as ChatGPT, ClaudeUse of ChatGPT, Claude, or GitHub Copilot cannot be used.

Additional code examples

Creating a component with a template to list events.

<presentation-component data-store = "search-results-store">
  <div>
      <p id="no-events-found">No events found</p>
      <h1 id="search-results-header">Event search results</h1>
      <ul data-template=data>
          <li>
            <a class="btn secondary" href="{url}">
              {eventName}
            </a>
            <div class="event-time">
              {eventTime}
            </div>
            <div class="event-location">
              {location}
            </div>
          </li>
      </ul>
  </div>
</presentation-component>

Defining a store for component with backend data fetching and reactivity configured by signals.

function getSearchResultsQueryConfig(searchParams) {
  let url;
  // Logic to determine API url for store goes here.
  return {
    url: url,
  };
}

const presentationSignals = {
  eventData: {
    id: (eventData) => eventData.eventId,
    update: {
      eventTime: (eventData) => {
        if (eventData.isRecurring) {
          return `${eventData.dayOfWeek}s at ${eventData.nextEventTime}`;
        }
        return `${eventData.nextEventDate} at ${eventData.nextEventTime}`;
      },
      location: (eventData) => {
        return `${convertLocationDataForDisplay(eventData.eventLocation)}`;
      },
      url: (eventData) => {
        return `/html/groups/event.html?id=${eventData.eventId}&groupId=${eventData.groupId}`;
      },
    },
  },
};

export const SEARCH_RESULTS_STORE = DataStore.createWithApiLoadSignal({
  queryConfig: getSearchResultsQueryConfig,
  presentationSignals: presentationSignals,
  storeName: "search-results-store",
});

DigitalVisualMixer is a visual mixer for musicians, DJs, VJs, streamers and anyone curious about generative art. It uses Hydra, a creative-coding language where a single line like osc().kaleid() becomes a moving kaleidoscope. The app makes it approachable for beginners and fast for experts.

Start with zero knowledge. Right-click in the editor to insert ready-made functions, hover them to see their parameters, and open the built-in Guide with F1. Every change shows up first in a private preview.

Build a set. Save each visual in its own channel. Search, reorder by drag and drop, and send channels live with cut, crossfade or add transitions, all from the keyboard.

Perform it. Turn any number into a live variable and move it with a slider, a gamepad, a MIDI controller or the keyboard. The visual changes smoothly, without restarting. Perform view gives you big pads for channels and presets, so you can play a full show without touching code.

Show it anywhere. The live output runs in a separate window, so you keep working while the audience watches. It’s also shared on your local network: open it on a projector, a second PC, a tablet or a phone.

No setup. A single file, no installation. Windows and macOS.

I recently got a PR merged into TanStack Query's ESLint plugin to fix a false-positive issue in the no-unstable-deps rule

.

The existing tests missed a few JavaScript edge cases, so I fixed the underlying issue and added regression tests.

It's a good reminder that passing tests don't always mean every edge case is covered. Sometimes the real work is finding what the tests missed.

How do you usually spot gaps in test coverage when the existing suite is already passing?

Author here. Nanoviews builds real DOM once, and signals update it in place. No JSX, no virtual DOM. It's around 4 kB gzipped and even runs without a build step. The same weather app weighs 10 kB with Nanoviews versus 66 kB with React. In js-framework-benchmark it comes right behind Solid and Svelte. There's a StackBlitz demo in the post.

Self reporting of what it took to decouple my workspace/codebase from the tool that has served me well for a very long time, with the assistance of AI.

I’ve been building this EM simulator as a side project aimed to help students understand and visualize electromagnetic phenomena such as radiation, polarization and wave interference.

I hope someone might find it useful and I’d love to hear what people think :)

GitHub:

https://github.com/rotemTsafrir/antenna_sim

Author here. Nano Kit is a ~2 kB signals core with a router, data fetching, i18n and SSR on top of it, and adapters for React, Preact and Svelte. The panel needs no browser extension or bundler plugin, and none of it reaches the production bundle. There's a StackBlitz demo in the post.

Author here. I needed Word-style pages in a TipTap editor. The official Pages extension is paid, and the community ones I tried broke my CSS, so I built this.

How it works

• It inserts spacer decorations at page boundaries, so the document itself is never modified and getHTML() stays clean
• Tables split between rows (never inside a rowspan) and the header row repeats on the next page
• Floated images and CSS margin collapsing are handled
• About 5 KB gzipped, TipTap 3 only: npm install tiptap-a4-pagination

Demo: https://text-editor-react-neon.vercel.app/

Paste a long doc or a big table to try it. Feedback welcome, especially documents that break the layout!

Free and open source, no signup. The theme changes with the era. Borders before ~500 BC are approximate, and leader data is thin before 1600, so corrections are very welcome. Link in comments.

code: https://github.com/nsijwali/WhoRuled

built this after getting tired of manually writing fetch wrappers for sites with no public API. point it at a HAR file (browser network capture) and it generates a typed client.

input: a captured request to something like `GET /users/42`

output (simplified):

export interface User {

id: number;

name: string;

email: string;

}

export async function getUser(id: number): Promise<User> {

const res = await fetch(`${baseUrl}/users/${id}`);

if (!res.ok) throw new ApiError(res.status, await res.text());

return res.json();

}

it infers the types from the actual response bodies in the capture, templates dynamic path segments like `{id}`, and also generates an OpenAPI spec + mock server from the same HAR.

also tries to catch GraphQL/tRPC/JSON-RPC calls instead of treating everything as REST, and strips anything sensitive (tokens, cookies) from the captured data before it reaches the generated code.

npx har2sdk capture.har -o ./sdk

repo: https://github.com/Mersbyte/har2sdk

curious what people think of the generated code style, or if anyone's hit an API shape it chokes on.

Spent the last months building

@datastripes/forecast
@datastripes/dashboard
@datastripes/anomaly 

These are framework-agnostic npm packages (React, Vue, Angular, or a plain custom element) that add time-series forecasting, an editable dashboard builder, and anomaly detection to any frontend app.

Everything runs client-side via WebAssembly, so no user data ever hits a server except a license check without a backend to deploy, no Python microservice.

Would genuinely love feedback from anyone who's had to build this kind of feature in-house.

https://datastripes.com/forecast-widget/

https://datastripes.com/dashboard-widget/

https://datastripes.com/anomaly-widget/