Sculpted

Sculpted is a development-only inspector for editing supported source-backed UI values in the browser and writing those edits back to source. It supports Panda CSS styles and uniform @lisse/react smooth corners.

It is useful when you want to inspect a Vite-powered React or Preact app using Panda CSS, @lisse/react, or both, accept edits in the browser, and have supported source writes applied immediately by the dev server. Source shapes that cannot be written safely are shown as read-only or rejected instead of guessed.

Supported Scope

Use Sculpted only in a project you have under version control. The dev server can write source files as inspector edits are accepted.

Sculpted supports:

• Vite development server only;
• React and Preact applications using Panda CSS;
• static local Panda css({ ... }) object literals;
• existing literal primitive values such as strings, numbers, booleans, and null;
• nested literal paths when the source object remains directly patchable;
• set and delete edits to supported source paths;
• supported inline source creation and style-module attach/detach actions;
• named, aliased, and namespace SmoothCorners imports from @lisse/react;
• static inline uniform corners objects, including creating the object when the prop is absent;
• opt-in TSRX support for the same stable-range static css({ ... }) writeback and inline source creation shapes.

Sculpted does not edit:

• production inspection or writeback;
• recipes, patterns, JSX style props, or cva();
• variable style object resolution;
• renaming style properties;
• converting computed CSS values back to design tokens;
• Lisse per-corner, variable-backed, spread, conditional, or other dynamic configurations;
• Lisse borders, shadows, effects, shadowStrategy, and useSmoothCorners calls;
• broad property-specific editors.

Batched writebacks are prepared before writing. When a multi-file batch write fails after an earlier file was written, Sculpted attempts to restore the earlier file before reporting the failure.

Install

pnpm add -D sculpted

Sculpted is intended as a dev dependency. It injects no inspector runtime during production builds.

Vite Setup

Use the sculpted Vite plugin from the sculpted/vite subpath:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { sculpted } from 'sculpted/vite'

export default defineConfig({
  plugins: [sculpted(), react()],
})

Preact projects use the same plugin:

// vite.config.ts
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import { sculpted } from 'sculpted/vite'

export default defineConfig({
  plugins: [sculpted(), preact()],
})

In development, the plugin instruments supported Panda css({ ... }) calls and Lisse <SmoothCorners> elements, injects the browser runtime and inspector panel, serves inspector metadata endpoints, and exposes source writeback routes for supported saves.

In production builds, the plugin is dark: no runtime script is injected, no inspector metadata is added, and no manifest or writeback route is registered.

React Router 7 framework-mode apps should render SculptedRuntime from sculpted/react in the root document because React Router renders HTML outside Vite's index.html transform. See React Router 7 framework mode.

See Vite plugin options for the full option surface, defaults, and endpoint configuration.

Try A Supported Edit

Start your Vite dev server, open the app in a browser, and inspect an element whose class comes from a static local Panda css({ ... }) call:

import { css } from '../styled-system/css'

export function Card() {
  return (
    <section
      className={css({
        backgroundColor: 'white',
        color: 'gray.900',
        padding: '24px',
      })}
    >
      Body
    </section>
  )
}

Preact projects can use the same supported css({ ... }) authoring shape with class.

The inspector previews accepted edits while it writes them back to source. Supported changes include literal value updates and property adds/removals within patchable style objects. It will not rename a property or resolve styles hidden behind variables or spreads.

If an element has supported and unsupported Panda contributors, Sculpted should surface that state instead of pretending the full cascade can be edited safely.

Sculpted also provides a dedicated editor for a static uniform Lisse configuration:

import { SmoothCorners } from '@lisse/react'

export function Card() {
  return <SmoothCorners corners={{ radius: 24, smoothing: 0.65 }}>Body</SmoothCorners>
}

The Smooth Corners section edits radius, curve, applicable smoothing or exponent values, and preserveSmoothing. These accepted edits go straight to JSX source; Vite HMR supplies the rendered update rather than a browser-only preview. asChild remains selectable because Sculpted's marker class survives Lisse's class merge. A custom component passed through as must forward className to its rendered DOM element.

When an element is inspected, Sculpted dispatches a bubbling sculpted:inspect custom event on it before resolving its inspector metadata. Application code can listen on a transient UI boundary and pin content such as a menu open while it is being inspected:

menu.addEventListener('sculpted:inspect', () => {
  keepMenuOpen()
})

menu.addEventListener('sculpted:uninspect', () => {
  releaseMenu()
})

The matching bubbling sculpted:uninspect event fires before the next inspection and when the inspector is hidden or unmounted.

Documentation

• Vite plugin options covers setup, defaults, and dev/prod behavior.
• Source writeback covers the safety model, supported edit shapes, and common failure modes.
• Source syntax adapters covers opt-in TSRX support.

Troubleshooting

No editable entries appear:

• Confirm the app is running through the Vite dev server, not a production build.
• Confirm the file is included by the plugin include patterns.
• Confirm the element uses a local static css({ ... }) object literal imported from your Panda styled-system/css path.
• For Lisse, confirm SmoothCorners is imported directly from @lisse/react and uses a static inline uniform corners object, or omits corners entirely.
• In React Router 7 framework mode, confirm the root document renders SculptedRuntime from sculpted/react.
• Open /@sculpted/manifest while the dev server is running and check whether entries exist.

The inspector shows a target as read-only:

• Check for variable style objects, object spreads, computed keys, dynamic values, recipes, patterns, cva(), or JSX style props.
• For Lisse, check for per-corner values, identifiers, calls, spreads, conditional expressions, or non-literal uniform properties.
• For TSRX, check that the file uses supported TSRX component syntax and that sourceSyntax from sculpted/tsrx is configured.

Save fails:

• Check whether the source changed after the manifest was generated. Restarting or waiting for Vite to refresh the manifest may clear stale-source failures.
• Check for duplicate keys or unsupported parent object shapes around the edited path.
• For parser errors, fix the source syntax first; Sculpted will not write into a file it cannot parse safely.

Production build has no inspector:

• This is expected. Sculpted is development-only and should be dark in production output.