Skip to content

Streams

Append

Appends the content within the template tag to the container designated by the target dom id.

<turbo-stream action="append" target="dom_id">
<template>
Content to append to container designated with the dom_id.
</template>
</turbo-stream>

Prepend

Prepends the content within the template tag to the container designated by the target dom id.

<turbo-stream action="prepend" target="dom_id">
<template>
Content to prepend to container designated with the dom_id.
</template>
</turbo-stream>

Replace

Replaces the element designated by the target dom id.

<turbo-stream action="replace" target="dom_id">
<template>
Content to replace the element designated with the dom_id.
</template>
</turbo-stream>

Update

Updates the content within the template tag to the container designated by the target dom id.

<turbo-stream action="update" target="dom_id">
<template>
Content to update to container designated with the dom_id.
</template>
</turbo-stream>

Remove

Removes the element designated by the target dom id.

<turbo-stream action="remove" target="dom_id">
</turbo-stream>

Before

Inserts the content within the template tag before the element designated by the target dom id.

<turbo-stream action="before" target="dom_id">
<template>
Content to place before the element designated with the dom_id.
</template>
</turbo-stream>

After

Inserts the content within the template tag after the element designated by the target dom id.

<turbo-stream action="after" target="dom_id">
<template>
Content to place after the element designated with the dom_id.
</template>
</turbo-stream>

Targeting Multiple Elements

To target multiple elements with a single action, use the targets attribute with a CSS query selector instead of the target attribute.

<turbo-stream action="remove" targets=".elementsWithClass">
</turbo-stream>

<turbo-stream action="after" targets=".elementsWithClass">
<template>
Content to place after the elements designated with the css query.
</template>
</turbo-stream>

Next: Events