@deval2498/kalp

A visual style inspector for React apps that can apply changes back to your source code.

Kalp ships two pieces that run together in development:

• <Kalp /> — a React component you render in your app.
• kalp — a local bridge server (Express, auto-picks a port in 42424-42443) that reads and writes your project's source files so edits made in the inspector land in code.

Install

npm install @deval2498/kalp

Requires React 18+ (peer dependency).

Usage

Render the component in your app:

import { Kalp } from "@deval2498/kalp";

function App() {
  return (
    <>
      {/* your app */}
      <Kalp />
    </>
  );
}

Run the bridge server alongside your dev server, from your project root:

// package.json
"scripts": {
  "dev": "kalp & vite"   // or "kalp & next dev", etc.
}

The component auto-discovers the server — no configuration needed. To pin a custom port instead (binds exactly, errors if busy), pair the flag with the component prop:

kalp --port 45000

<Kalp port={45000} />

Multiple projects

Each kalp server announces which project it serves (name + folder). If more than one is running, <Kalp /> shows a small picker above the paintbrush button instead of guessing — your choice is remembered per browser and re-verified against the project folder on every reload, and every apply is double-checked server-side, so edits can never land in another project's code.

Next.js

<Kalp /> uses browser APIs, so wrap it in a Client Component:

// app/kalp-dev.tsx
"use client";
import { Kalp } from "@deval2498/kalp";
export default function KalpDev() {
  return <Kalp />;
}

Render it (development only) in app/layout.tsx, and run the bridge server alongside Next with "dev": "kalp & next dev".

License

MIT