Flux

Flux

A design editor for your localhost

Point to an element on the UI, tweak visual properties, and copy the changes. Send the copied diff to any AI agent with your source so the updates come alive in code.

npm install @sanmid/flux

How it works

  1. Add the editor with npm install @sanmid/flux (usually in development).
  2. Point at elements and tweak spacing, type, color, and layout in context.
  3. Copy the structured change list and send it to any AI agent with your source.

Installation

npm install @sanmid/flux

React only. Works with Tailwind, CSS modules, or plain CSS.

Add to your app

Add the component anywhere in your React app, ideally at the root level.

import { DesignEditor } from "@sanmid/flux";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === "development" ? <DesignEditor /> : null}
      </body>
    </html>
  );
}

By default, Flux is available in development environments. Use <DesignEditor force /> for production use.

Created by Sanmid AnavkarMIT License