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?