GitHub
← Tutorials

Morph

Render the same template again on the server and send it: morph updates only what changed and keeps the rest of the elements, so the field the user is typing in keeps its focus, its caret and its value. It uses the morph algorithm of Alpine and Livewire.

  • morph($selector, $html)

    The element and its children become the new HTML, element by element.

  • morphContent($selector, $html)

    Only the children: the element and its attributes stay.

  • key or id

    Keeps list items that are reordered.

Controller.php
public function quote(Request $request)
{
    $html = view('quote', $this->quote($request))->render();

    return (new AsyncResponse())
        // keeps the focus and the caret of the field being typed in
        ->morph('#quote', $html)
        // ->replace('#quote', $html) would throw the form away
        ->send();
}
Try it
Update with
Per month $18.00

Type in a field.

A form rendered on the server with every keystroke

Type in Seats or Coupon: the server renders the whole form again, with the total and the errors. Switch to replace and type again to see the difference.