Introduction

morphkit is a JavaScript library that provides a common interface for different morphing libraries.

It allows developers to easily switch between different morphing libraries by providing a simplified and unified interface to handle the DOM manipulation and updates, making it easy to implement DOM morphing features in any project.

Why use morphkit?

The morphdom library has been the go-to for morphing elements in the DOM. However, alternative libraries have emerged with their own nuances.

With morphkit, you can easily swap between different morphing libraries to find the best one for your project by providing a unified interface.

Supported libraries

morphkit supports the following morphing libraries:

• morphdom (default)
• @alpinejs/morph
• nanomorph
• micromorph
• idiomorph
• diffhtml
• diff-dom

Installation

To add morphkit to your project, run the following command in your terminal:

yarn add morphkit

Then, in the JavaScript file where you want to use morphkit import the morph function:

import { morph } from "morphkit"

Usage

Interface (WIP)

morph(currentElement: Element, previousElement: Element, options: Object)

Development

To run the test runner:

yarn install
yarn build
yarn test

Inspiration

This library is inspired by this pull request: https://github.com/marcoroth/turbo-morph/pull/6