Edit in StackBlitz next generation editor ⚡️
A custom HTML element-based spline editor for creating and managing animation splines. This tool uses the Web Components standard to offer a reusable, encapsulated graphical interface for defining and manipulating spline curves through a browser.
- Create Splines: Click on the graph to add control points.
- Adjust Control Points: Click and drag points to modify the spline curve.
- View Coordinates: Hover over control points to display their coordinates.
- Custom Curve Types: Select between different spline curve types using radial buttons (e.g., cubic Bezier).
- Lightweight and Reusable: Built using Web Components (Custom Elements), this editor can be integrated into any web project with ease.
This project leverages Web Components, a suite of technologies to create reusable, encapsulated HTML tags. These technologies include:
- Custom Elements: Define your own HTML tags and behaviors using the
HTMLElementclass. - Shadow DOM: Encapsulates the component’s internal DOM and styling, preventing interference from external styles.
- HTML Templates: Use templates to define reusable HTML structures within the component.
To use this project:
-
Clone the repository:
git clone https://github.com/sjefvanleeuwen/spline-editor.git
-
Navigate to the project folder:
cd spline-editor -
Install dependencies:
npm install
-
Build and run the project:
npm run build npm run start
-
Open the application in your browser:
http://localhost:5000
To use the spline editor as a custom element in your project:
-
Import the JavaScript file:
<script src="path-to-spline-editor.js"></script>
-
Add the custom element to your HTML:
<spline-editor></spline-editor>
-
Customize the spline editor's behavior using its API and properties (details in documentation).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="path-to-spline-editor.js"></script>
<title>Spline Editor</title>
</head>
<body>
<spline-editor></spline-editor>
</body>
</html>Feel free to submit issues and pull requests to improve this project. Contributions are welcome!
This project is licensed under the MIT License.