Preview:
event: message
id: 0
data: <turbo-stream action="replace" target="observee184">
data:   <template>
data:     <li class="my-1 py-3 d-flex list-group-item list-group-item-success" id="observee184">
data:       <div class="container">
data:         <div class="row">
data:           <div class="col px-0">
data:             <a class="fw-bold text-dark" href="file:src/sample/test.file">Test File</a>
data:           </div>
data:           <div class="col-auto px-0 shadow-sm">
data:             <span class="badge green">Instances
data:               <span class="badge bg-info ms-1 text-dark text-etched">1</span>
data:             </span>
data:           </div>
data:         </div>
data:         <div class="row">
data:           <div class="col px-0">
data:             <span class="fw-bold">Healthy</span>
data:             <span class="fw-lighter x-small fst-italic">at</span>
data:             <time class="fw-lighter x-small font-monospace"
data:                   data-bounce="2021-10-06T00:51:11.603948Z"
data:                   datetime="2021-10-06T00:47:11.186060Z">00:47:11</time>
data:           </div>
data:         </div>
data:       </div>
data:     </li>
data:   </template>
data: </turbo-stream>

event: message
id: 1
data: <turbo-stream action="replace" target="observee193">
data:   <template>
data:     <li class="my-1 py-3 d-flex list-group-item list-group-item-success" id="observee193">
data:       <div class="container">
...
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter