Home Original page

GitHub - marcoroth/turbo-morph: Morph action for Turbo Streams

NPM Version NPM Downloads NPM Bundle Size

Getting Started

turbo-morph is a morphdom integration for Turbo Streams. It provides a new Turbo Stream morph action.

Note: Requires Turbo 7.2+

// application.js
import * as Turbo from '@hotwired/turbo'

+import TurboMorph from 'turbo-morph'
+TurboMorph.initialize(Turbo.StreamActions)

Example

<turbo-stream action="morph" targets="body">
  <template>
    <body data-updated="true">
      <h1>This is the new body</h1>
    </body>
  </template>
</turbo-stream>

children-only option

morphdom exposes a childrenOnly option that can be passed to a morph call.

With Turbo Streams you can apply this option by adding the [children-only] attribute to your <turbo-stream> element.

<turbo-stream action="morph" targets="body" children-only>
  ...
</turbo-stream>

Usage with Rails

The turbo_power-rails gem ships a Rails helper for using turbo_stream.morph in your application. Check out the Getting Started section over there.

Acknowledgments

tubro-morph is MIT-licensed open-source software from Marco Roth.

Turbo is MIT-licensed open-source software from Basecamp.

morphdom is MIT-licensed open-source software from Patrick Steele-Idem