PageSourceSearch

https://data-star.dev/guide/getting_started

html data-star.dev collected 2026-10-02 04:27:18 UTC 110,858 bytes, 346 lines download raw bytes

1<!doctype html><html lang="en"><head><title>Getting Started Guide</title><meta charset="UTF-8"><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"><link rel="canonical" href="https://data-star.dev/guide/getting_started"><link rel="stylesheet" href="/static/css/stellar-6a9f349320ba1454716709d478056c22a0760566a820d968c2d3ad614275ff88.css"><link rel="stylesheet" href="/static/css/site-10346120b813dff74cb4591ba36a1b0cab4d0eab72818afc154de52766a3f866.css"><link rel="stylesheet" href="/static/css/internal-d45e6cdb86e041f6febd01cbe6c06081a067566243721aab163da2a1f4a0f4c2.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Menlo&family=Inter&family=Silkscreen&display=swap"><link rel="icon" type="image/png" sizes="512x512" href="/cdn-cgi/image/format=auto/static/images/rocket-512x512-d36eedfbf7dd91899cc8a6b7906cafec20787b5e6b542f699b4358a67ab95a1d.png"><link rel="icon" type="image/png" sizes="48x48" href="/cdn-cgi/image/format=auto/static/images/rocket-48x48-4c739bfaffe86a6ffcc3a6d77e3c5547730f03d74c11aa460209596d1811f7a3.png"><link rel="icon" type="image/png" sizes="32x32" href="/cdn-cgi/image/format=auto/static/images/rocket-32x32-ed698adfdcbd311b92a315e16adb723ae34e8e67893ef819f6fae6fed4b41992.png"><meta property="og:title" content="Getting Started Guide"><meta property="og:description" content=""><meta property="og:image" content="https://data-star.dev/static/images/rocket-social-preview-71d85961f7c66e6839a562e9980a4393f069c5956f5cee21853ba441c45a3634.png"><meta property="og:url" content="https://data-star.dev/"><meta property="og:type" content="website"><meta property="og:site_name" content="Datastar"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Getting Started Guide"><meta name="twitter:description" content=""><meta name="twitter:image" content="https://data-star.dev/static/images/rocket-social-preview-71d85961f7c66e6839a562e9980a4393f069c5956f5cee21853ba441c45a3634.png">
1<script type="importmap" nonce="">{"imports":{"datastar":"/static/js/datastar-pro-demo-9ad04b4f9a81e52c16cdc343ff25e05c5b1ab1edd1782ceb9c3b3cb94f06fa63.js"}}</script>
1 
1<script type="module" src="/static/js/datastar-pro-demo-9ad04b4f9a81e52c16cdc343ff25e05c5b1ab1edd1782ceb9c3b3cb94f06fa63.js"></script>
1<script src="https://analytics.putyourlightson.com/js/script.js" defer data-domain="data-star.dev"></script>
1<script src="/static/lib/iconify-icon-758d94838db0cafdeb97eb0b54a120de36cfb3c7fe862eed989f37e80c550f02.min.js"></script>
1<script type="module" src="/static/rocket/copy-button-963ebbef9aa9e3f1eb79c237ec20479e8a2502ec1de917f853dd7c6efa95fb75.js"></script>
1</head><body><header class="top" data-signals="{showSearch: false, showMore: false, sidebarOpen: false}"><nav><button class="hamburger small" data-on:click="$sidebarOpen = !$sidebarOpen" aria-label="Toggle navigation menu"><iconify-icon icon="pixelarticons:menu" noobserver=""></iconify-icon></button> <a href="/" class="home" title="Home"><img srcset="/cdn-cgi/image/format=auto,width=24/static/images/rocket-48x48-4c739bfaffe86a6ffcc3a6d77e3c5547730f03d74c11aa460209596d1811f7a3.png 1x, /cdn-cgi/image/format=auto,width=48/static/images/rocket-48x48-4c739bfaffe86a6ffcc3a6d77e3c5547730f03d74c11aa460209596d1811f7a3.png 2x" src="/cdn-cgi/image/format=auto,width=24/static/images/rocket-48x48-4c739bfaffe86a6ffcc3a6d77e3c5547730f03d74c11aa460209596d1811f7a3.png" alt="Datastar Logo" width="24" height="24" loading="eager"><span>Datastar </span></a></nav><nav><kbd data-on:click="$showSearch = true" data-on:keydown__window="(evt.ctrlKey || evt.metaKey) && evt.key == 'k' && ($showSearch = true) && evt.preventDefault()" title="Search" aria-label="Search"><iconify-icon icon="pixelarticons:search" noobserver=""></iconify-icon><span data-show="!/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)"><span data-text="navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'"></span>K</span></kbd><nav><a href="/guide">Guide</a> <a href="/reference" class="dropdownable small">Reference</a> <a href="/examples" class="dropdownable medium">Examples</a> <a href="/how_tos" class="dropdownable large">How-Tos</a><div data-class:open="$showPro" class="dropdown"><a data-on:click="$showPro = true" data-on:click__outside="$showPro = false" class="dropdownable medium highlighted">Pro</a><div class="content"><a href="/pro">Datastar&nbsp;Pro</a> <a href="/pro/sign-in">Sign in</a></div></div><div data-class:open="$showMore" class="dropdown"><a data-on:click="$showMore = true" data-on:click__outside="$showMore = false">More</a><div class="content"><a href="/star_federation">About&nbsp;Us</a> <a href="/essays">Essays</a> <a href="/examples" class="dropdownable medium">Examples</a> <a href="/gratitude">Gratitude</a> <a href="/how_tos" class="dropdownable large">How-Tos</a> <a href="/pro" class="dropdownable medium highlighted">Pro</a> <a href="/reference" class="dropdownable small">Reference</a> <a href="/shop">Shop</a> <a href="/videos">Videos</a></div></div></nav><div class="socials"><a href="https://github.com/starfederation/datastar/" title="GitHub" target="_blank" rel="noopener noreferrer"><iconify-icon icon="simple-icons:github" noobserver=""></iconify-icon></a> <a href="https://discord.gg/bnRNgZjgPh" title="Discord" target="_blank" rel="noopener noreferrer"><iconify-icon icon="simple-icons:discord" noobserver=""></iconify-icon></a> <a href="https://www.youtube.com/@data-star" title="YouTube" target="_blank" rel="noopener noreferrer"><iconify-icon icon="simple-icons:youtube" noobserver=""></iconify-icon></a></div></nav><div id="search-modal" data-signals:search="" data-show="$showSearch" data-on:keydown__window="evt.key == 'Escape' && ($showSearch = false)" data-effect="$showSearch == true && (searchInput.focus(), searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length))" style="display: none;"><div class="backdrop" data-on:click="$showSearch = false"></div><div class="modal"><label><iconify-icon icon="pixelarticons:search" noobserver=""></iconify-icon><input id="searchInput" type="search" data-bind:search data-indicator:searching data-on:input__debounce.300ms="$search.length == 0 ? searchResults.innerHTML = '' : @get('/search', {headers: {'X-Search-From-Header': 'true'}})" placeholder="Search..."><div data-class:loading="$searching" class="indicator"><img srcset="/cdn-cgi/image/format=auto,width=32/static/images/rocket-animated-1d781383a0d7cbb1eb575806abeec107c8a915806fb55ee19e4e33e8632c75e5.gif 1x, /cdn-cgi/image/format=auto,width=64/static/images/rocket-animated-1d781383a0d7cbb1eb575806abeec107c8a915806fb55ee19e4e33e8632c75e5.gif 2x" src="/cdn-cgi/image/format=auto,width=32/static/images/rocket-animated-1d781383a0d7cbb1eb575806abeec107c8a915806fb55ee19e4e33e8632c75e5.gif" alt="Indicator" width="32" height="32" loading=""></div></label><div id="searchResults"></div></div></div></header> <main><div class="sidebar-overlay" data-show="$sidebarOpen" data-on:click="$sidebarOpen = false" style="display: none"></div><aside data-class:open="$sidebarOpen"><div class="heading">Guide</div><div class="subheading">Start building with explanations and interactive demos.</div><nav><div><a href="/guide/getting_started" aria-selected="true">Getting Started</a> <div data-on:click="$sidebarOpen = false"><a href="#installation">Installation</a><a href="#data-*"><code>data-*</code></a><a href="#patching-elements">Patching Elements</a></div></div><div><a href="/guide/reactive_signals" aria-selected="false">Reactive Signals</a> </div><div><a href="/guide/datastar_expressions" aria-selected="false">Datastar Expressions</a> </div><div><a href="/guide/backend_requests" aria-selected="false">Backend Requests</a> </div><div><a href="/guide/the_tao_of_datastar" aria-selected="false">The Tao of Datastar</a> </div></nav></aside><article><nav><a></a> <a href="/guide/reactive_signals" class="button small">Next →</a></nav><h1>Getting Started</h1><p>Datastar simplifies frontend development, allowing you to build backend-driven, interactive UIs using a <a href="https://hypermedia.systems/hypermedia-a-reintroduction/" target="_blank" rel="noopener noreferrer">hypermedia-first</a> approach that extends and enhances HTML.</p><p>Datastar provides backend reactivity like <a href="https://htmx.org/" target="_blank" rel="noopener noreferrer">htmx</a> and frontend reactivity like <a href="https://alpinejs.dev/" target="_blank" rel="noopener noreferrer">Alpine.js</a> in a lightweight frontend framework that doesn’t require any npm packages or other dependencies. It provides two primary functions:</p><ol><li>Modify the DOM and state by sending events from your backend.</li><li>Build reactivity into your frontend using standard <code>data-*</code> HTML attributes.</li></ol><h2 id="installation">Installation <a href="#installation" class="anchor">#</a></h2><p>The quickest way to use Datastar is to include it using a <code>script</code> tag that fetches it from a CDN.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;script type=&#34;module&#34; src=&#34;https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js&#34;&gt;&lt;/script&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="1666b830f6b747c_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#1666b830f6b747c_line_1">1</a></span><span>&lt;<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;module&#34;</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;https://cdn.jsdelivr.net/gh/starfederation/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7216130613010613003204435c425c46">[email&#160;protected]</a>/bundles/datastar.js&#34;</span>&gt;&lt;/<span style="color:#7ee787">script</span>&gt;</span></span></code></pre></div></div><p>Hosting the file yourself is recommended. Download the <a href="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js" target="_blank" rel="noopener noreferrer">script</a> or create your own bundle using the <a href="/pro/bundler">bundler</a>, then include it from the appropriate path.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;script type=&#34;module&#34; src=&#34;/path/to/datastar.js&#34;&gt;&lt;/script&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8848b9c5fd2a71da_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#8848b9c5fd2a71da_line_1">1</a></span><span>&lt;<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;module&#34;</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;/path/to/datastar.js&#34;</span>&gt;&lt;/<span style="color:#7ee787">script</span>&gt;</span></span></code></pre></div></div><p><a href="/reference/rocket">Rocket</a> is available in the separate <a href="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar-rocket.js" target="_blank" rel="noopener noreferrer"><code>datastar-rocket.js</code></a> bundle. This bundle includes Datastar and Rocket, so use it instead of <code>datastar.js</code> when building Rocket components.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;script type=&#34;module&#34; src=&#34;/path/to/datastar-rocket.js&#34;&gt;&lt;/script&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="b24e62cf41f22a65_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#b24e62cf41f22a65_line_1">1</a></span><span>&lt;<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;module&#34;</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;/path/to/datastar-rocket.js&#34;</span>&gt;&lt;/<span style="color:#7ee787">script</span>&gt;</span></span></code></pre></div></div><p>To import Datastar using a package manager such as npm, Deno, or Bun, you can use an import statement.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper">
1<copy-button code="// @ts-expect-error (only required for TypeScript projects)
2import &#39;https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js&#39;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="e67c91621c8cf50c_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#e67c91621c8cf50c_line_1">1</a></span><span><span style="color:#8b949e;font-style:italic">// @ts-expect-error (only required for TypeScript projects)
3</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="e67c91621c8cf50c_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#e67c91621c8cf50c_line_2">2</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#ff7b72">import</span> <span style="color:#a5d6ff">&#39;https://cdn.jsdelivr.net/gh/starfederation/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debabfaabfadaabfac9ea8eff0eef0ea">[email&#160;protected]</a>/bundles/datastar.js&#39;</span></span></span></code></pre></div></div><h2 id="data-*"><code>data-*</code> <a href="#data-*" class="anchor">#</a></h2><p>At the core of Datastar are <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes" target="_blank" rel="noopener noreferrer">data-*</a></code> HTML attributes (hence the name). They allow you to add reactivity to your frontend and interact with your backend in a declarative way.</p><blockquote>The Datastar <a href="https://marketplace.visualstudio.com/items?itemName=starfederation.datastar-vscode" target="_blank" rel="noopener noreferrer">VSCode extension</a> and <a href="https://plugins.jetbrains.com/plugin/26072-datastar" target="_blank" rel="noopener noreferrer">IntelliJ plugin</a> provide autocomplete, diagnostics, hover documentation, and syntax highlighting.</blockquote><p>The <a href="/reference/attributes#data-on"><code>data-on</code></a> attribute can be used to attach an event listener to an element and execute an expression whenever the event is triggered. The value of the attribute is a <a href="/guide/datastar_expressions">Datastar expression</a> in which JavaScript can be used.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;button data-on:click=&#34;alert(&#39;I’m sorry, Dave. I’m afraid I can’t do that.&#39;)&#34;&gt;
4    Open the pod bay doors, HAL.
5&lt;/button&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="c644c56966a86293_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#c644c56966a86293_line_1">1</a></span><span>&lt;<span style="color:#7ee787">button</span> data-on:click<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;alert(&#39;I’m sorry, Dave. I’m afraid I can’t do that.&#39;)&#34;</span>&gt;
6</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="c644c56966a86293_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#c644c56966a86293_line_2">2</a></span><span>    Open the pod bay doors, HAL.
7</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="c644c56966a86293_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#c644c56966a86293_line_3">3</a></span><span>&lt;/<span style="color:#7ee787">button</span>&gt;</span></span></code></pre></div></div><fieldset class="demo"><legend>
7Demo</legend><div><button data-on:click="alert(`I’m sorry, Dave. I’m afraid I can’t do that.`)" class="warning large">Open the pod bay doors, HAL. </button></div></fieldset><p>We’ll explore more data attributes in the <a href="/guide/reactive_signals">next section of the guide</a>.</p><h2 id="patching-elements">Patching Elements <a href="#patching-elements" class="anchor">#</a></h2><p>With Datastar, the backend <em>drives</em> the frontend by <strong>patching</strong> (adding, updating and removing) HTML elements in the DOM.</p><p>Datastar receives elements from the backend and manipulates the DOM using a morphing strategy (by default). Morphing ensures that only modified parts of the DOM are updated, and that only data attributes that have changed are <a href="/reference/attributes#attribute-evaluation-order">reapplied</a>, preserving state and improving performance.</p><p>Datastar provides <a href="/reference/actions#backend-actions">actions</a> for sending requests to the backend. The <a href="/reference/actions#get"><code>&#64;get()</code></a> action sends a <code>GET</code> request to the provided URL using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a> request.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;button data-on:click=&#34;@get(&#39;/endpoint&#39;)&#34;&gt;
8    Open the pod bay doors, HAL.
9&lt;/button&gt;
10&lt;div id=&#34;hal&#34;&gt;&lt;/div&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="b8e2bcf7cfb08d88_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#b8e2bcf7cfb08d88_line_1">1</a></span><span>&lt;<span style="color:#7ee787">button</span> data-on:click<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;@get(&#39;/endpoint&#39;)&#34;</span>&gt;
11</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="b8e2bcf7cfb08d88_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#b8e2bcf7cfb08d88_line_2">2</a></span><span>    Open the pod bay doors, HAL.
12</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="b8e2bcf7cfb08d88_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#b8e2bcf7cfb08d88_line_3">3</a></span><span>&lt;/<span style="color:#7ee787">button</span>&gt;
13</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="b8e2bcf7cfb08d88_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#b8e2bcf7cfb08d88_line_4">4</a></span><span>&lt;<span style="color:#7ee787">div</span> id<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;hal&#34;</span>&gt;&lt;/<span style="color:#7ee787">div</span>&gt;</span></span></code></pre></div></div><blockquote>Actions in Datastar are helper functions that have the syntax <code>&#64;actionName()</code>. Read more about actions in the <a href="/reference/actions">reference</a>.</blockquote><p>If the response has a <code>content-type</code> of <code>text/html</code>, the top-level HTML elements will be morphed into the existing DOM based on the element IDs. </p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="&lt;div id=&#34;hal&#34;&gt;
14    I’m sorry, Dave. I’m afraid I can’t do that.
15&lt;/div&gt;"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9906775380944c63_line_1"><a style="outline:none;text-decoration:none;
15color:inherit" href="#9906775380944c63_line_1">1</a></span><span>&lt;<span style="color:#7ee787">div</span> id<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#34;hal&#34;</span>&gt;
16</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9906775380944c63_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#9906775380944c63_line_2">2</a></span><span>    I’m sorry, Dave. I’m afraid I can’t do that.
17</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9906775380944c63_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#9906775380944c63_line_3">3</a></span><span>&lt;/<span style="color:#7ee787">div</span>&gt;</span></span></code></pre></div></div><p>We call this a “Patch Elements” event because multiple elements can be patched into the DOM at once.</p><fieldset class="demo"><legend>
17Demo</legend><div><button data-on:click="@get('/guide/getting_started/open_the_bay_doors_html')" class="warning large">Open the pod bay doors, HAL. </button><code id="hal_html">Waiting for an order...</code> <div id="hal_html_reset"></div></div></fieldset><p>In the example above, the DOM must contain an element with a <code>hal</code> ID in order for morphing to work. Other <a href="/reference/sse_events#datastar-patch-elements">patching strategies</a> are available, but morph is the best and simplest choice in most scenarios.</p><p>If the response has a <code>content-type</code> of <code>text/event-stream</code>, it can contain zero or more <a href="/reference/sse_events">SSE events</a>. The example above can be replicated using a <code>datastar-patch-elements</code> SSE event. Note that SSE events must be followed by two newline characters.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="event: datastar-patch-elements
18data: elements &lt;div id=&#34;hal&#34;&gt;
19data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
20data: elements &lt;/div&gt;
21
22"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="54fdfa565852f964_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#54fdfa565852f964_line_1">1</a></span><span>event: datastar-patch-elements
23</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="54fdfa565852f964_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#54fdfa565852f964_line_2">2</a></span><span>data: elements &lt;div id=&#34;hal&#34;&gt;
24</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="54fdfa565852f964_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#54fdfa565852f964_line_3">3</a></span><span>data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
25</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="54fdfa565852f964_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#54fdfa565852f964_line_4">4</a></span><span>data: elements &lt;/div&gt;
26</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="54fdfa565852f964_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#54fdfa565852f964_line_5">5</a></span><span>
27</span></span></code></pre></div></div><p>Because we can send as many events as we want in a stream, and because it can be a long-lived connection, we can extend the example above to first send HAL’s response and then, after a few seconds, reset the text.</p><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="event: datastar-patch-elements
28data: elements &lt;div id=&#34;hal&#34;&gt;
29data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
30data: elements &lt;/div&gt;
31
32event: datastar-patch-elements
33data: elements &lt;div id=&#34;hal&#34;&gt;
34data: elements     Waiting for an order...
35data: elements &lt;/div&gt;
36
37"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_1"> 1</a></span><span>event: datastar-patch-elements
38</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_2"> 2</a></span><span>data: elements &lt;div id=&#34;hal&#34;&gt;
39</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_3"> 3</a></span><span>data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
40</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_4"> 4</a></span><span>data: elements &lt;/div&gt;
41</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_5"> 5</a></span><span>
42</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_6"> 6</a></span><span>event: datastar-patch-elements
43</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_7"> 7</a></span><span>data: elements &lt;div id=&#34;hal&#34;&gt;
44</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_8"> 8</a></span><span>data: elements     Waiting for an order...
45</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_9"> 9</a></span><span>data: elements &lt;/div&gt;
46</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="75425fcee443f5f8_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#75425fcee443f5f8_line_10">10</a></span><span>
47</span></span></code></pre></div></div><fieldset class="demo"><legend>
47Demo</legend><div><button data-on:click="@get('/guide/getting_started/open_the_bay_doors_sse')" class="warning large">Open the pod bay doors, HAL. </button><code id="hal_sse">Waiting for an order...</code></div></fieldset><p>Here’s the code to generate the SSE events above using the SDKs.</p><div class="code-switcher" data-signals:lang__ifmissing="'go'" data-persist="{include: /^lang$/}"><div class="icons"><button data-on:click="$lang = &#39;clojure&#39;" data-attr:aria-selected="`${$lang === &#39;clojure&#39;}`" title="Clojure"><iconify-icon icon="vscode-icons:file-type-clojure" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;csharp&#39;" data-attr:aria-selected="`${$lang === &#39;csharp&#39;}`" title="C#"><iconify-icon icon="vscode-icons:file-type-csharp2" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;go&#39;" data-attr:aria-selected="`${$lang === &#39;go&#39;}`" title="Go"><iconify-icon icon="vscode-icons:file-type-go" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;java&#39;" data-attr:aria-selected="`${$lang === &#39;java&#39;}`" title="Java"><iconify-icon icon="vscode-icons:file-type-java" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;kotlin&#39;" data-attr:aria-selected="`${$lang === &#39;kotlin&#39;}`" title="Kotlin"><iconify-icon icon="vscode-icons:file-type-kotlin" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;php&#39;" data-attr:aria-selected="`${$lang === &#39;php&#39;}`" title="PHP"><iconify-icon icon="vscode-icons:file-type-php3" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;python&#39;" data-attr:aria-selected="`${$lang === &#39;python&#39;}`" title="Python"><iconify-icon icon="vscode-icons:file-type-python" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;ruby&#39;" data-attr:aria-selected="`${$lang === &#39;ruby&#39;}`" title="Ruby"><iconify-icon icon="vscode-icons:file-type-ruby" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;rust&#39;" data-attr:aria-selected="`${$lang === &#39;rust&#39;}`" title="Rust"><iconify-icon icon="vscode-icons:file-type-rust" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;typescript&#39;" data-attr:aria-selected="`${$lang === &#39;typescript&#39;}`" title="TypeScript"><iconify-icon icon="vscode-icons:file-type-typescript-official" noobserver=""></iconify-icon></button><button data-on:click="$lang = &#39;zig&#39;" data-attr:aria-selected="`${$lang === &#39;zig&#39;}`" title="Zig"><iconify-icon icon="vscode-icons:file-type-zig" noobserver=""></iconify-icon></button></div><div class="snippets"><div data-show="$lang === &#39;clojure&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code=";; Import the SDK&#39;s api and your adapter
48(require
49 &#39;[starfederation.datastar.clojure.api :as d*]
50 &#39;[starfederation.datastar.clojure.adapter.http-kit :refer [-&gt;sse-response on-open]])
51
52;; in a ring handler
53(defn handler [request]
54  ;; Create an SSE response
55  (-&gt;sse-response request
56                  {on-open
57                   (fn [sse]
58                     ;; Patches elements into the DOM
59                     (d*/patch-elements! sse
60                                         &#34;&lt;div id=\&#34;hal\&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;)
61                     (Thread/sleep 1000)
62                     (d*/patch-elements! sse
63                                         &#34;&lt;div id=\&#34;hal\&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;))}))"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_1"> 1</a></span><span><span style="color:#8b949e;font-style:italic">;; Import the SDK&#39;s api and your adapter</span>
64</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_2"> 2</a></span><span>(<span style="color:#d2a8ff;font-weight:bold">require</span>
65</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_3"> 3</a></span><span> <span style="color:#ff7b72;font-weight:bold">&#39;</span>[<span style="color:#79c0ff">starfederation.datastar.clojure.api</span> <span style="color:#a5d6ff">:as</span> <span style="color:#79c0ff">d*</span>]
66</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_4"> 4</a></span><span> <span style="color:#ff7b72;font-weight:bold">&#39;</span>[<span style="color:#79c0ff">starfederation.datastar.clojure.adapter.http-kit</span> <span style="color:#a5d6ff">:refer</span> [<span style="color:#79c0ff">-&gt;sse-response</span> <span style="color:#79c0ff">on-open</span>]])
67</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_5"> 5</a></span><span>
68</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_6"> 6</a></span><span><span style="color:#8b949e;font-style:italic">;; in a ring handler</span>
69</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_7"> 7</a></span><span>(<span style="color:#ff7b72">
69defn </span><span style="color:#79c0ff">handler</span> [<span style="color:#79c0ff">request</span>]
70</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_8"> 8</a></span><span>  <span style="color:#8b949e;font-style:italic">;; Create an SSE response</span>
71</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_9"> 9</a></span><span>  (<span style="color:#d2a8ff;font-weight:bold">-&gt;sse-response</span> <span style="color:#79c0ff">request</span>
72</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_10">10</a></span><span>                  {<span style="color:#79c0ff">on-open</span>
73</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_11">11</a></span><span>                   (<span style="color:#ff7b72">fn </span>[<span style="color:#79c0ff">sse</span>]
74</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_12">12</a></span><span>                     <span style="color:#8b949e;font-style:italic">;; Patches elements into the DOM</span>
75</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_13">13</a></span><span>                     (<span style="color:#d2a8ff;font-weight:bold">d*/patch-elements!</span> <span style="color:#79c0ff">sse</span>
76</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_14">14</a></span><span>                                         <span style="color:#a5d6ff">&#34;&lt;div id=\&#34;hal\&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;</span>)
77</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_15">15</a></span><span>                     (<span style="color:#d2a8ff;font-weight:bold">Thread/sleep</span> <span style="color:#a5d6ff">1000</span>)
78</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_16"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_16">16</a></span><span>                     (<span style="color:#d2a8ff;font-weight:bold">d*/patch-elements!</span> <span style="color:#79c0ff">sse</span>
79</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="9a2ca1e5256b094d_line_17"><a style="outline:none;text-decoration:none;color:inherit" href="#9a2ca1e5256b094d_line_17">17</a></span><span>
79                                         <span style="color:#a5d6ff">&#34;&lt;div id=\&#34;hal\&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;</span>))}))</span></span></code></pre></div></div></div><div data-show="$lang === &#39;csharp&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="using StarFederation.Datastar.DependencyInjection;
80
81// Adds Datastar as a service
82builder.Services.AddDatastar();
83
84app.MapGet(&#34;/&#34;, async (IDatastarService datastarService) =&gt;
85{
86    // Patches elements into the DOM.
87    await datastarService.PatchElementsAsync(@&#34;&lt;div id=&#34;&#34;hal&#34;&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;);
88
89    await Task.Delay(TimeSpan.FromSeconds(1));
90
91    await datastarService.PatchElementsAsync(@&#34;&lt;div id=&#34;&#34;hal&#34;&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;);
92});"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_1"> 1</a></span><span><span style="color:#ff7b72">using</span> <span style="color:#ff7b72">StarFederation.Datastar.DependencyInjection</span>;
93</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_2"> 2</a></span><span>
94</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_3"> 3</a></span><span><span style="color:#8b949e;font-style:italic">// Adds Datastar as a service</span>
95</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_4"> 4</a></span><span>builder.Services.AddDatastar();
96</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_5"> 5</a></span><span>
97</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_6"> 6</a></span><span>app.MapGet(<span style="color:#a5d6ff">&#34;/&#34;</span>, <span style="color:#ff7b72">async</span> (IDatastarService datastarService) =&gt;
98</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_7"> 7</a></span><span>{
99</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_8"> 8</a></span><span>    <span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.</span>
100</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_9"> 9</a></span><span>    <span style="color:#ff7b72">await</span> datastarService.PatchElementsAsync(<span style="color:#a5d6ff">@&#34;&lt;div id=&#34;&#34;hal&#34;&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;</span>);
101</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_10">10</a></span><span>
102</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_11">11</a></span><span>    <span style="color:#ff7b72">await</span> Task.Delay(TimeSpan.FromSeconds(<span style="color:#a5d6ff">1</span>));
103</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_12">12</a></span><span>
104</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_13">13</a></span><span>    <span style="color:#ff7b72">await</span> datastarService.PatchElementsAsync(<span style="color:#a5d6ff">@&#34;&lt;div id=&#34;&#34;hal&#34;&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;</span>);
105</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f44629edb0ee8e24_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#f44629edb0ee8e24_line_14">14</a></span><span>});</span></span></code></pre></div></div></div><div data-show="$lang === &#39;go&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="import (
106    &#34;github.com/starfederation/datastar-go/datastar&#34;
107    time
108)
109
110// Creates a new `ServerSentEventGenerator` instance.
111sse := datastar.NewSSE(w,r)
112
113// Patches elements into the DOM.
114sse.PatchElements(
115    `&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;`
116)
117
118time.Sleep(1 * time.Second)
119
120sse.PatchElements(
121    `&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;`
122)"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_1"> 1</a></span><span><span style="color:#ff7b72">
122import</span><span style="color:#6e7681"> </span>(<span style="color:#6e7681">
123</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_2"> 2</a></span><span><span style="color:#6e7681">    </span><span style="color:#a5d6ff">&#34;github.com/starfederation/datastar-go/datastar&#34;</span><span style="color:#6e7681">
124</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_3"> 3</a></span><span><span style="color:#6e7681">    </span>time<span style="color:#6e7681">
125</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_4"> 4</a></span><span><span style="color:#6e7681"></span>)<span style="color:#6e7681">
126</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_5"> 5</a></span><span><span style="color:#6e7681">
127</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_6"> 6</a></span><span><span style="color:#6e7681"></span><span style="color:#8b949e;font-style:italic">// Creates a new `ServerSentEventGenerator` instance.</span><span style="color:#6e7681">
128</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_7"> 7</a></span><span><span style="color:#6e7681"></span>sse<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">:=</span><span style="color:#6e7681"> </span>datastar.<span style="color:#d2a8ff;font-weight:bold">NewSSE</span>(w,r)<span style="color:#6e7681">
129</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_8"> 8</a></span><span><span style="color:#6e7681">
130</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_9"> 9</a></span><span><span style="color:#6e7681"></span><span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.</span><span style="color:#6e7681">
131</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_10">10</a></span><span><span style="color:#6e7681"></span>sse.<span style="color:#d2a8ff;font-weight:bold">PatchElements</span>(<span style="color:#6e7681">
132</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_11">11</a></span><span><span style="color:#6e7681">    </span><span style="color:#a5d6ff">`&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;`</span><span style="color:#6e7681">
133</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_12">12</a></span><span><span style="color:#6e7681"></span>)<span style="color:#6e7681">
134</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_13">13</a></span><span><span style="color:#6e7681">
135</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_14">14</a></span><span><span style="color:#6e7681"></span>time.<span style="color:#d2a8ff;font-weight:bold">Sleep</span>(<span style="color:#a5d6ff">1</span><span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">*</span><span style="color:#6e7681"> </span>time.Second)<span style="color:#6e7681">
136</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_15">15</a></span><span><span style="color:#6e7681">
137</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_16"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_16">16</a></span><span><span style="color:#6e7681"></span>sse.<span style="color:#d2a8ff;font-weight:bold">PatchElements</span>(<span style="color:#6e7681">
138</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_17"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_17">17</a></span><span><span style="color:#6e7681">    </span><span style="color:#a5d6ff">`&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;`</span><span style="color:#6e7681">
139</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="12da9ecc5eb6c0ce_line_18"><a style="outline:none;text-decoration:none;color:inherit" href="#12da9ecc5eb6c0ce_line_18">18</a></span><span><span style="color:#6e7681"></span>)</span></span></code></pre></div></div></div><div data-show="$lang === &#39;java&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="import starfederation.datastar.utils.ServerSentEventGenerator;
140
141// Creates a new `ServerSentEventGenerator` instance.
142AbstractResponseAdapter responseAdapter = new HttpServletResponseAdapter(response);
143ServerSentEventGenerator generator = new ServerSentEventGenerator(responseAdapter);
144
145// Patches elements into the DOM.
146generator.send(PatchElements.builder()
147    .data(&#34;&lt;div id=\&#34;hal\&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;)
148    .build()
149);
150
151Thread.sleep(1000);
152
153generator.send(PatchElements.builder()
154    .data(&#34;&lt;div id=\&#34;hal\&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;)
155    .build()
156);"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_1"> 1</a></span><span><span style="color:#ff7b72">
156import</span><span style="color:#6e7681"> </span><span style="color:#ff7b72">starfederation.datastar.utils.ServerSentEventGenerator</span>;<span style="color:#6e7681">
157</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_2"> 2</a></span><span><span style="color:#6e7681">
158</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_3"> 3</a></span><span><span style="color:#6e7681"></span><span style="color:#8b949e;font-style:italic">// Creates a new `ServerSentEventGenerator` instance.</span><span style="color:#6e7681">
159</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_4"> 4</a></span><span><span style="color:#6e7681"></span>AbstractResponseAdapter<span style="color:#6e7681"> </span>responseAdapter<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#6e7681"> </span><span style="color:#ff7b72">new</span><span style="color:#6e7681"> </span>HttpServletResponseAdapter(response);<span style="color:#6e7681">
160</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_5"> 5</a></span><span><span style="color:#6e7681"></span>ServerSentEventGenerator<span style="color:#6e7681"> </span>generator<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#6e7681"> </span><span style="color:#ff7b72">new</span><span style="color:#6e7681"> </span>ServerSentEventGenerator(responseAdapter);<span style="color:#6e7681">
161</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_6"> 6</a></span><span><span style="color:#6e7681">
162</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_7"> 7</a></span><span><span style="color:#6e7681"></span><span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.</span><span style="color:#6e7681">
163</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_8"> 8</a></span><span><span style="color:#6e7681"></span>generator.send(PatchElements.builder()<span style="color:#6e7681">
164</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_9"> 9</a></span><span><span style="color:#6e7681">    </span>.data(<span style="color:#a5d6ff">&#34;&lt;div id=\&#34;hal\&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;</span>)<span style="color:#6e7681">
165</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_10">10</a></span><span><span style="color:#6e7681">    </span>.build()<span style="color:#6e7681">
166</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_11">11</a></span><span><span style="color:#6e7681"></span>);<span style="color:#6e7681">
167</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_12">12</a></span><span><span style="color:#6e7681">
168</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_13">13</a></span><span><span style="color:#6e7681"></span>Thread.sleep(1000);<span style="color:#6e7681">
169</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_14">14</a></span><span><span style="color:#6e7681">
170</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_15">15</a></span><span><span style="color:#6e7681"></span>generator.send(PatchElements.builder()<span style="color:#6e7681">
171</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_16"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_16">16</a></span><span><span style="color:#6e7681">    </span>.data(<span style="color:#a5d6ff">&#34;&lt;div id=\&#34;hal\&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;</span>)<span style="color:#6e7681">
172</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_17"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_17">17</a></span><span><span style="color:#6e7681">    </span>.build()<span style="color:#6e7681">
173</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="ec0a8b6cb3b2f9f2_line_18"><a style="outline:none;text-decoration:none;color:inherit" href="#ec0a8b6cb3b2f9f2_line_18">18</a></span><span><span style="color:#6e7681"></span>);
173</span></span></code></pre></div></div></div><div data-show="$lang === &#39;kotlin&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="val generator = ServerSentEventGenerator(response)
174
175generator.patchElements(
176    elements = &#34;&#34;&#34;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;&#34;&#34;,
177)
178
179Thread.sleep(ONE_SECOND)
180
181generator.patchElements(
182    elements = &#34;&#34;&#34;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;&#34;&#34;,
183)"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_1"> 1</a></span><span><span style="color:#ff7b72">val</span> <span style="color:#79c0ff">generator</span> = ServerSentEventGenerator(response)
184</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_2"> 2</a></span><span>
185</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_3"> 3</a></span><span>generator.patchElements(
186</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_4"> 4</a></span><span>    elements = <span style="color:#a5d6ff">&#34;&#34;&#34;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;&#34;&#34;</span>,
187</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_5"> 5</a></span><span>)
188</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_6"> 6</a></span><span>
189</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_7"> 7</a></span><span><span style="color:#f0883e;font-weight:bold">Thread</span>.sleep(ONE_SECOND)
190</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_8"> 8</a></span><span>
191</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_9"> 9</a></span><span>generator.patchElements(
192</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_10">10</a></span><span>    elements = <span style="color:#a5d6ff">&#34;&#34;&#34;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#34;&#34;&#34;</span>,
193</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="f3e018490b34e95c_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#f3e018490b34e95c_line_11">11</a></span><span>)</span></span></code></pre></div></div></div><div data-show="$lang === &#39;php&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="use starfederation\datastar\ServerSentEventGenerator;
194
195// Creates a new `ServerSentEventGenerator` instance.
196$sse = new ServerSentEventGenerator();
197
198// Patches elements into the DOM.
199$sse-&gt;patchElements(
200    &#39;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#39;
201);
202
203sleep(1);
204
205$sse-&gt;patchElements(
206    &#39;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#39;
207);"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_1"> 1</a></span><span><span style="color:#ff7b72">
207use</span> starfederation\datastar\ServerSentEventGenerator;
208</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_2"> 2</a></span><span>
209</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_3"> 3</a></span><span><span style="color:#8b949e;font-style:italic">// Creates a new `ServerSentEventGenerator` instance.
210</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_4"> 4</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#79c0ff">$sse</span> <span style="color:#ff7b72;font-weight:bold">=</span> <span style="color:#ff7b72">new</span> ServerSentEventGenerator();
211</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_5"> 5</a></span><span>
212</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_6"> 6</a></span><span><span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.
213</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_7"> 7</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#79c0ff">$sse</span><span style="color:#ff7b72;font-weight:bold">-&gt;</span>patchElements(
214</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_8"> 8</a></span><span>    <span style="color:#a5d6ff">&#39;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#39;</span>
215</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_9"> 9</a></span><span>);
216</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_10">10</a></span><span>
217</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_11">11</a></span><span>sleep(<span style="color:#a5d6ff">1</span>);
218</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_12">12</a></span><span>
219</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_13">13</a></span><span><span style="color:#79c0ff">$sse</span><span style="color:#ff7b72;font-weight:bold">-&gt;</span>patchElements(
220</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_14">14</a></span><span>    <span style="color:#a5d6ff">&#39;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#39;</span>
221</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="bba6804d8105c490_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#bba6804d8105c490_line_15">15</a></span><span>);
221</span></span></code></pre></div></div></div><div data-show="$lang === &#39;python&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="from datastar_py import ServerSentEventGenerator as SSE
222from datastar_py.sanic import datastar_response
223
224@app.get(&#39;/open-the-bay-doors&#39;)
225@datastar_response
226async def open_doors(request):
227    yield SSE.patch_elements(&#39;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#39;)
228    await asyncio.sleep(1)
229    yield SSE.patch_elements(&#39;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#39;)"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_1">1</a></span><span><span style="color:#ff7b72">from</span> <span style="color:#ff7b72">datastar_py</span> <span style="color:#ff7b72">import</span> ServerSentEventGenerator <span style="color:#ff7b72">as</span> SSE
230</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_2">2</a></span><span><span style="color:#ff7b72">from</span> <span style="color:#ff7b72">datastar_py.sanic</span> <span style="color:#ff7b72">import</span> datastar_response
231</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_3">3</a></span><span>
232</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_4">4</a></span><span><span style="color:#d2a8ff;font-weight:bold">@app.get</span>(<span style="color:#a5d6ff">&#39;/open-the-bay-doors&#39;</span>)
233</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_5">5</a></span><span><span style="color:#d2a8ff;font-weight:bold">@datastar_response</span>
234</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_6">6</a></span><span><span style="color:#ff7b72">async</span> <span style="color:#ff7b72">def</span> <span style="color:#d2a8ff;font-weight:bold">open_doors</span>(request):
235</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_7">7</a></span><span>    <span style="color:#ff7b72">yield</span> SSE<span style="color:#ff7b72;font-weight:bold">.</span>patch_elements(<span style="color:#a5d6ff">&#39;&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#39;</span>)
236</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_8">8</a></span><span>    <span style="color:#ff7b72">await</span> asyncio<span style="color:#ff7b72;font-weight:bold">.</span>sleep(<span style="color:#a5d6ff">1</span>)
237</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="8ee75b6fa5b62c6_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#8ee75b6fa5b62c6_line_9">9</a></span><span>    <span style="color:#ff7b72">yield</span> SSE<span style="color:#ff7b72;font-weight:bold">.</span>patch_elements(<span style="color:#a5d6ff">&#39;&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;&#39;</span>)</span></span></code></pre></div></div></div><div data-show="$lang === &#39;ruby&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="require &#39;datastar&#39;
238
239# Create a Datastar::Dispatcher instance
240
241datastar = Datastar.new(request:, response:)
242
243# In a Rack handler, you can instantiate from the Rack env
244# datastar = Datastar.from_rack_env(env)
245
246# Start a streaming response
247datastar.stream do |sse|
248  # Patches elements into the DOM.
249  sse.patch_elements %(&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;)
250
251  sleep 1
252  
253  sse.patch_elements %(&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;)
254end"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_1"> 1</a></span><span>
254require <span style="color:#a5d6ff">&#39;datastar&#39;</span>
255</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_2"> 2</a></span><span>
256</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_3"> 3</a></span><span><span style="color:#8b949e;font-style:italic"># Create a Datastar::Dispatcher instance</span>
257</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_4"> 4</a></span><span>
258</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_5"> 5</a></span><span>datastar <span style="color:#ff7b72;font-weight:bold">=</span> <span style="color:#79c0ff;font-weight:bold">Datastar</span><span style="color:#ff7b72;font-weight:bold">.</span>new(<span style="color:#a5d6ff">request</span>:, <span style="color:#a5d6ff">response</span>:)
259</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_6"> 6</a></span><span>
260</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_7"> 7</a></span><span><span style="color:#8b949e;font-style:italic"># In a Rack handler, you can instantiate from the Rack env</span>
261</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_8"> 8</a></span><span><span style="color:#8b949e;font-style:italic"># datastar = Datastar.from_rack_env(env)</span>
262</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_9"> 9</a></span><span>
263</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_10">10</a></span><span><span style="color:#8b949e;font-style:italic"># Start a streaming response</span>
264</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_11">11</a></span><span>datastar<span style="color:#ff7b72;font-weight:bold">.</span>stream <span style="color:#ff7b72">do</span> <span style="color:#ff7b72;font-weight:bold">|</span>sse<span style="color:#ff7b72;font-weight:bold">|</span>
265</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_12">12</a></span><span>  <span style="color:#8b949e;font-style:italic"># Patches elements into the DOM.</span>
266</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_13">13</a></span><span>  sse<span style="color:#ff7b72;font-weight:bold">.</span>patch_elements <span style="color:#a5d6ff">%(&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;)</span>
267</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_14">14</a></span><span>
268</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_15">15</a></span><span>  sleep <span style="color:#a5d6ff">1</span>
269</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_16"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_16">16</a></span><span>  
270</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_17"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_17">17</a></span><span>  sse<span style="color:#ff7b72;font-weight:bold">.</span>patch_elements <span style="color:#a5d6ff">%(&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;)</span>
271</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="67f62b7db54d2b98_line_18"><a style="outline:none;text-decoration:none;color:inherit" href="#67f62b7db54d2b98_line_18">18</a></span><span><span style="color:#ff7b72">end</span></span></span></code></pre></div></div></div><div data-show="$lang === &#39;rust&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper">
271<copy-button code="use async_stream::stream;
272use datastar::prelude::*;
273use std::thread;
274use std::time::Duration;
275
276Sse(stream! {
277    // Patches elements into the DOM.
278    yield PatchElements::new(&#34;&lt;div id=&#39;hal&#39;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;).into();
279
280    thread::sleep(Duration::from_secs(1));
281    
282    yield PatchElements::new(&#34;&lt;div id=&#39;hal&#39;&gt;Waiting for an order...&lt;/div&gt;&#34;).into();
283})"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_1"> 1</a></span><span><span style="color:#ff7b72">use</span><span style="color:#6e7681"> </span>async_stream::stream;<span style="color:#6e7681">
284</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_2"> 2</a></span><span><span style="color:#6e7681"></span><span style="color:#ff7b72">use</span><span style="color:#6e7681"> </span>datastar::prelude::<span style="color:#ff7b72;font-weight:bold">*</span>;<span style="color:#6e7681">
285</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_3"> 3</a></span><span><span style="color:#6e7681"></span><span style="color:#ff7b72">use</span><span style="color:#6e7681"> </span>std::thread;<span style="color:#6e7681">
286</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_4"> 4</a></span><span><span style="color:#6e7681"></span><span style="color:#ff7b72">use</span><span style="color:#6e7681"> </span>std::time::Duration;<span style="color:#6e7681">
287</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_5"> 5</a></span><span><span style="color:#6e7681">
288</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_6"> 6</a></span><span><span style="color:#6e7681"></span>Sse(<span style="color:#d2a8ff;font-weight:bold">stream!</span><span style="color:#6e7681"> </span>{<span style="color:#6e7681">
289</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_7"> 7</a></span><span><span style="color:#6e7681">    </span><span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.
290</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_8"> 8</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#6e7681">    </span><span style="color:#ff7b72">yield</span><span style="color:#6e7681"> </span>PatchElements::new(<span style="color:#a5d6ff">&#34;&lt;div id=&#39;hal&#39;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;&#34;</span>).into();<span style="color:#6e7681">
291</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_9"> 9</a></span><span><span style="color:#6e7681">
292</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_10">10</a></span><span><span style="color:#6e7681">    </span>thread::sleep(Duration::from_secs(<span style="color:#a5d6ff">1</span>));<span style="color:#6e7681">
293</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_11">11</a></span><span><span style="color:#6e7681">    
294</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_12">12</a></span><span><span style="color:#6e7681">    </span><span style="color:#ff7b72">yield</span><span style="color:#6e7681"> </span>PatchElements::new(<span style="color:#a5d6ff">&#34;&lt;div id=&#39;hal&#39;&gt;Waiting for an order...&lt;/div&gt;&#34;</span>).into();<span style="color:#6e7681">
295</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="dce2e42a1bbf1134_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#dce2e42a1bbf1134_line_13">13</a></span><span><span style="color:#6e7681"></span>})</span></span></code></pre></div></div></div><div data-show="$lang === &#39;typescript&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="// Creates a new `ServerSentEventGenerator` instance (this al
295so sends required headers)
296ServerSentEventGenerator.stream(req, res, (stream) =&gt; {
297    // Patches elements into the DOM.
298    stream.patchElements(`&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;`);
299
300    setTimeout(() =&gt; {
301        stream.patchElements(`&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;`);
302    }, 1000);
303});"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_1">1</a></span><span><span style="color:#8b949e;font-style:italic">// Creates a new `ServerSentEventGenerator` instance (this also sends required headers)
304</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_2">2</a></span><span><span style="color:#8b949e;font-style:italic"></span>ServerSentEventGenerator.stream(req, res, (stream) <span style="color:#ff7b72;font-weight:bold">=&gt;</span> {
305</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_3">3</a></span><span>    <span style="color:#8b949e;font-style:italic">// Patches elements into the DOM.
306</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_4">4</a></span><span><span style="color:#8b949e;font-style:italic"></span>    stream.patchElements(<span style="color:#a5d6ff">`&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;`</span>);
307</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_5">5</a></span><span>
308</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_6">6</a></span><span>    setTimeout(() <span style="color:#ff7b72;font-weight:bold">=&gt;</span> {
309</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_7">7</a></span><span>        stream.patchElements(<span style="color:#a5d6ff">`&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;`</span>);
310</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_8">8</a></span><span>    }, <span style="color:#a5d6ff">1000</span>);
311</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="266aa383df1aeec7_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#266aa383df1aeec7_line_9">9</a></span><span>});</span></span></code></pre></div></div></div><div data-show="$lang === &#39;zig&#39;"><div class="code-highlight-wrapper"><div class="copy-button-wrapper">
311<copy-button code="const datastar = @import(&#34;datastar&#34;);
312
313// Example of using patchElements
314fn openTheDoorsHal(http: *datastar.HTTPRequest) !void {
315    // Use NewSSESync here for synchronous writes over the SSE connection
316    var sse = try http.NewSSESync();
317    defer sse.close();
318
319    try sse.patchElements(
320        \\&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;
321        , .{});
322
323    http.io.sleep(.fromSeconds(1), .real) catch {};
324
325    try sse.patchElements(
326        \\&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;
327        , .{});
328}"></copy-button></div><div class="code-highlight" data-ignore><pre style="color:#e6edf3;background-color:#0d1117;"><code><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_1"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_1"> 1</a></span><span><span style="color:#ff7b72">const</span><span style="color:#6e7681"> </span>datastar<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#6e7681"> </span>@import(<span style="color:#a5d6ff">&#34;datastar&#34;</span>);<span style="color:#6e7681">
329</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_2"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_2"> 2</a></span><span><span style="color:#6e7681">
330</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_3"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_3"> 3</a></span><span><span style="color:#6e7681"></span><span style="color:#8b949e;font-style:italic">// Example of using patchElements
331</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_4"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_4"> 4</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#ff7b72">fn</span><span style="color:#6e7681"> </span><span style="color:#d2a8ff;font-weight:bold">openTheDoorsHal</span>(http<span style="color:#ff7b72;font-weight:bold">:</span><span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">*</span>datastar.HTTPRequest)<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">!</span><span style="color:#ff7b72">void</span><span style="color:#6e7681"> </span>{<span style="color:#6e7681">
332</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_5"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_5"> 5</a></span><span><span style="color:#6e7681">    </span><span style="color:#8b949e;font-style:italic">// Use NewSSESync here for synchronous writes over the SSE connection
333</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_6"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_6"> 6</a></span><span><span style="color:#8b949e;font-style:italic"></span><span style="color:#6e7681">    </span><span style="color:#ff7b72">var</span><span style="color:#6e7681"> </span>sse<span style="color:#6e7681"> </span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#6e7681"> </span><span style="color:#ff7b72">try</span><span style="color:#6e7681"> </span>http.<span style="color:#d2a8ff;font-weight:bold">NewSSESync</span>();<span style="color:#6e7681">
334</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_7"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_7"> 7</a></span><span><span style="color:#6e7681">    </span><span style="color:#ff7b72">defer</span><span style="color:#6e7681"> </span>sse.<span style="color:#d2a8ff;font-weight:bold">close</span>();<span style="color:#6e7681">
335</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_8"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_8"> 8</a></span><span><span style="color:#6e7681">
336</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_9"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_9"> 9</a></span><span><span style="color:#6e7681">    </span><span style="color:#ff7b72">try</span><span style="color:#6e7681"> </span>sse.<span style="color:#d2a8ff;font-weight:bold">patchElements</span>(<span style="color:#6e7681">
337</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_10"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_10">10</a></span><span><span style="color:#6e7681">        </span><span style="color:#79c0ff">\\&lt;div id=&#34;hal&#34;&gt;I’m sorry, Dave. I’m afraid I can’t do that.&lt;/div&gt;</span><span style="color:#6e7681">
338</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_11"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_11">11</a></span><span><span style="color:#6e7681">        </span>,<span style="color:#6e7681"> </span>.{});<span style="color:#6e7681">
339</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_12"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_12">12</a></span><span><span style="color:#6e7681">
340</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_13"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_13">13</a></span><span><span style="color:#6e7681">    </span>http.io.<span style="color:#d2a8ff;font-weight:bold">sleep</span>(.<span style="color:#d2a8ff;font-weight:bold">fromSeconds</span>(<span style="color:#a5d6ff">1</span>),<span style="color:#6e7681"> </span>.real)<span style="color:#6e7681"> </span><span style="color:#ff7b72">catch</span><span style="color:#6e7681"> </span>{};<span style="color:#6e7681">
341</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_14"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_14">14</a></span><span><span style="color:#6e7681">
342</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_15"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_15">15</a></span><span><span style="color:#6e7681">    </span><span style="color:#ff7b72">try</span><span style="color:#6e7681"> </span>sse.<span style="color:#d2a8ff;font-weight:bold">patchElements</span>(<span style="color:#6e7681">
343</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_16"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_16">16</a></span><span><span style="color:#6e7681">        </span><span style="color:#79c0ff">\\&lt;div id=&#34;hal&#34;&gt;Waiting for an order...&lt;/div&gt;</span><span style="color:#6e7681">
344</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_17"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_17">17</a></span><span><span style="color:#6e7681">        </span>,<span style="color:#6e7681"> </span>.{});<span style="color:#6e7681">
345</span></span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681" id="cd50997d5fce51c7_line_18"><a style="outline:none;text-decoration:none;color:inherit" href="#cd50997d5fce51c7_line_18">18</a></span><span><span style="color:#6e7681"></span>}</span></span></code></pre></div></div></div></div></div><blockquote>In addition to your browser’s dev tools, the <a href="/pro#datastar-inspector">Datastar Inspector</a> can be used to monitor and inspect SSE events received by Datastar.</blockquote><p>We’ll cover event streams and <a href="/reference/sse_events">SSE events</a> in more detail <a href="/guide/backend_requests">later in the guide</a>, but as you can see, they are just plain text events with a special syntax, made simpler by the <a href="/reference/sdks">SDKs</a>.</p><nav><a></a> <a href="/guide/reactive_signals" class="button small">Next →</a></nav></article></main><footer class="internal"><div>&copy; <a href="/star_federation">Star Federation</a></div><div>Hosted by <a href="https://www.arcustech.com/" target="_blank" rel="noopener noreferrer">Arcustech</a></div></footer>
vendor: 108 bytes, line 345
345<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
345<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"10db1d5587034896bb6898061de2c9f0","r":1,"spa":2}' crossorigin="anonymous"></script>
345
346</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.