https://github.com/ikcede/ts-bezier-easing-editor
Typescript React bezier editor for CSS easing curves
https://github.com/ikcede/ts-bezier-easing-editor
bezier bezier-curve react typescript
Last synced: 3 months ago
JSON representation
Typescript React bezier editor for CSS easing curves
- Host: GitHub
- URL: https://github.com/ikcede/ts-bezier-easing-editor
- Owner: ikcede
- License: mit
- Created: 2024-07-10T23:00:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-19T03:36:34.000Z (7 months ago)
- Last Synced: 2025-11-19T05:28:40.380Z (7 months ago)
- Topics: bezier, bezier-curve, react, typescript
- Language: TypeScript
- Homepage: https://ikcede.github.io/ts-bezier-easing-editor/?path=/story/components-beziereditor--default
- Size: 509 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Typescript React Bezier Editor
[](https://www.npmjs.com/package/ts-bezier-easing-editor) [](https://github.com/ikcede/ts-bezier-easing-editor/blob/main/LICENSE) 
A Typescript implementation of a bezier editor React component for the CSS easing function. Click and drag the knobs to visually modify your beziers!
If you like this, please give the project a GitHub 🌟
## Demo & Docs
Check out the [live Storybook instance](https://ikcede.github.io/ts-bezier-easing-editor/?path=/docs/components-beziereditor--docs) for a demo and docs of all the props.
## Installation
```sh
npm install ts-bezier-easing-editor
```
## Usage
1. Import the `BezierEditor` component
```tsx
import { BezierEditor } from 'ts-bezier-easing-editor';
```
2. Now you can use the editor component in your tsx
```tsx
```
Check out [example/App.tsx](https://github.com/ikcede/ts-bezier-easing-editor/blob/main/example/App.tsx) for a simple example
## Work in Progress
- Configure for extended Y coordinates
- Improve test coverage
- Fix position calculation with CSS zoom applied
- Support auto resize
- Support linear() and step() views
## Local Development
If you wish to fork the repo, after installing the deps, you can run these scripts:
### `npm start`
Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
**Note**: This runs the App files in example/ as the dev environment.
The page will reload if you make edits. You will also see any lint errors in the console.
### `npm test`
Runs tests in Jest
### `npm run format`
Formats everything with Prettier
### `npm run build`
Using `vite-build.config.ts`, compiles and exports the TS library into `dist/main.js` and `dist/main.d.ts`.
### `npm run storybook`
Starts up a Storybook server on [http://localhost:6006](http://localhost:6006)
### `npm run build-storybook`
Builds a static web app version of Storybook to `/storybook-static`