bezier-easing-editor

Cubic Bezier Curve editor made with React & SVG.

Example

(click to open)

Install

npm install bezier-easing-editor

Requires React 17 or higher. TypeScript types are included.

Usage

Controlled

Provide value and an onChange handler:

import { useState } from "react";
import BezierEditor, { type BezierValue } from "bezier-easing-editor";

function MyEditor() {
  const [value, setValue] = useState<BezierValue>([0.25, 0.25, 0.75, 0.75]);
  return <BezierEditor value={value} onChange={setValue} />;
}

Uncontrolled

Just define a defaultValue:

<BezierEditor defaultValue={[0.2, 0.2, 0.8, 0.8]} onChange={console.log} />

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | [x1, y1, x2, y2] | — | current easing (controlled mode) | | defaultValue | [x1, y1, x2, y2] | [0.25, 0.25, 0.75, 0.75] | initial easing (uncontrolled mode) | | onChange | (value) => void | — | called when a handle is dragged | | width | number | 300 | svg width in pixels | | height | number | 300 | svg height in pixels | | padding | [top, right, bottom, left] | [25, 5, 25, 18] | padding around the grid | | progress | number | 0 | progress in [0,1] to visualize on the curve | | readOnly | boolean | false | hide the handles and disable edition | | background | string | "#fff" | background color | | gridColor | string | "#eee" | grid color | | curveColor | string | "#333" | curve color | | curveWidth | number | 2 | curve stroke width | | handleColor | string | "#f00" | handle color | | handleRadius | number | 5 | handle circle radius | | handleStroke | number | 2 | handle stroke width | | progressColor | string | "#ccc" | progress lines color | | textStyle | CSSProperties | sans-serif 10px | style of the axis labels | | style / className | — | — | applied to the root svg | | children | ReactNode | — | extra SVG elements rendered in the editor |

Development

npm install
npm test          # run the test suite (vitest)
npm run build     # build the library (tsup: ESM + CJS + types)

cd example
npm install
npm run dev       # run the example app (vite)

The example app is deployed to GitHub Pages automatically on every push to master by the deploy workflow.

Release

Releases are automated with changesets. Run npx changeset in your PR to describe the change and pick a semver bump. On merge, the release workflow opens a "Version Packages" PR; merging it publishes to npm (via trusted publishing, no token) and creates the GitHub release.

See also

• bezier-easing