Documentation

kalp documentation

kalp is a visual style inspector for React apps. You click any element on your running page, change its styles with sliders and pickers, see the result live — and then kalp writes those changes back into your real source files.

Getting Started

Install the package, add one component, and make your first visual edit in a few minutes.

The Visual Editor

Everything the floating editor can do: selecting elements, the Style and Layout tabs, undo, and applying edits.

How It Works

What happens under the hood: the bridge server, the edit log, and how Claude Code edits your files.

API Reference

The <Kalp /> component props, package exports, and the bridge server's HTTP endpoints.

What is kalp?

When you build a UI, small style changes are slow: find the file, find the class, guess a value, save, look, repeat. kalp removes that loop. You edit the page visually, like in a design tool, and kalp turns your edits into real code changes.

It ships as one npm package, @deval2498/kalp, with two pieces that run together during development:

<Kalp /> — a React component you render in your app. It draws the floating paintbrush button and the editor panel on top of your page.
kalp — a small local server you run next to your dev server. It receives your edits from the browser and uses Claude Code to write them into your source files, in the styling idiom your project already uses (Tailwind classes, CSS files, inline styles, and so on).

kalp is a development tool. It never runs in production, and it only ever edits files in the project where you started the kalp server.

The short version

1. Install

npm install @deval2498/kalp

2. Render the component (development only)

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

function App() {
  return (
    <>
      {/* your app */}
      {process.env.NODE_ENV === "development" && <Kalp />}
    </>
  );
}

3. Run the bridge server next to your dev server

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

Then click the paintbrush button in the bottom-right corner of your app, pick an element, and start editing. The Getting Started guide walks through this step by step, including the one prerequisite: a working Claude Code login.