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 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 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="<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js"></script>"></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><<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"module"</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"https://cdn.jsdelivr.net/gh/starfederation/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7216130613010613003204435c425c46">[email protected]</a>/bundles/datastar.js"</span>></<span style="color:#7ee787">script</span>></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="<script type="module" src="/path/to/datastar.js"></script>"></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><<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"module"</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"/path/to/datastar.js"</span>></<span style="color:#7ee787">script</span>></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="<script type="module" src="/path/to/datastar-rocket.js"></script>"></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><<span style="color:#7ee787">script</span> type<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"module"</span> src<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"/path/to/datastar-rocket.js"</span>></<span style="color:#7ee787">script</span>></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 'https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js'"></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">'https://cdn.jsdelivr.net/gh/starfederation/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debabfaabfadaabfac9ea8eff0eef0ea">[email protected]</a>/bundles/datastar.js'</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="<button data-on:click="alert('Iâm sorry, Dave. Iâm afraid I canât do that.')"> 4 Open the pod bay doors, HAL. 5</button>"></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><<span style="color:#7ee787">button</span> data-on:click<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"alert('Iâm sorry, Dave. Iâm afraid I canât do that.')"</span>> 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></<span style="color:#7ee787">button</span>></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>@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="<button data-on:click="@get('/endpoint')"> 8 Open the pod bay doors, HAL. 9</button> 10<div id="hal"></div>"></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><<span style="color:#7ee787">button</span> data-on:click<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"@get('/endpoint')"</span>> 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></<span style="color:#7ee787">button</span>> 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><<span style="color:#7ee787">div</span> id<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"hal"</span>></<span style="color:#7ee787">div</span>></span></span></code></pre></div></div><blockquote>Actions in Datastar are helper functions that have the syntax <code>@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="<div id="hal"> 14 Iâm sorry, Dave. Iâm afraid I canât do that. 15</div>"></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><<span style="color:#7ee787">div</span> id<span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">"hal"</span>> 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></<span style="color:#7ee787">div</span>></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 <div id="hal"> 19data: elements Iâm sorry, Dave. Iâm afraid I canât do that. 20data: elements </div> 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 <div id="hal"> 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 </div> 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 <div id="hal"> 29data: elements Iâm sorry, Dave. Iâm afraid I canât do that. 30data: elements </div> 31 32event: datastar-patch-elements 33data: elements <div id="hal"> 34data: elements Waiting for an order... 35data: elements </div> 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 <div id="hal"> 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 </div> 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 <div id="hal"> 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 </div> 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 = 'clojure'" data-attr:aria-selected="`${$lang === 'clojure'}`" title="Clojure"><iconify-icon icon="vscode-icons:file-type-clojure" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'csharp'" data-attr:aria-selected="`${$lang === 'csharp'}`" title="C#"><iconify-icon icon="vscode-icons:file-type-csharp2" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'go'" data-attr:aria-selected="`${$lang === 'go'}`" title="Go"><iconify-icon icon="vscode-icons:file-type-go" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'java'" data-attr:aria-selected="`${$lang === 'java'}`" title="Java"><iconify-icon icon="vscode-icons:file-type-java" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'kotlin'" data-attr:aria-selected="`${$lang === 'kotlin'}`" title="Kotlin"><iconify-icon icon="vscode-icons:file-type-kotlin" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'php'" data-attr:aria-selected="`${$lang === 'php'}`" title="PHP"><iconify-icon icon="vscode-icons:file-type-php3" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'python'" data-attr:aria-selected="`${$lang === 'python'}`" title="Python"><iconify-icon icon="vscode-icons:file-type-python" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'ruby'" data-attr:aria-selected="`${$lang === 'ruby'}`" title="Ruby"><iconify-icon icon="vscode-icons:file-type-ruby" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'rust'" data-attr:aria-selected="`${$lang === 'rust'}`" title="Rust"><iconify-icon icon="vscode-icons:file-type-rust" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'typescript'" data-attr:aria-selected="`${$lang === 'typescript'}`" title="TypeScript"><iconify-icon icon="vscode-icons:file-type-typescript-official" noobserver=""></iconify-icon></button><button data-on:click="$lang = 'zig'" data-attr:aria-selected="`${$lang === 'zig'}`" title="Zig"><iconify-icon icon="vscode-icons:file-type-zig" noobserver=""></iconify-icon></button></div><div class="snippets"><div data-show="$lang === 'clojure'"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code=";; Import the SDK's api and your adapter 48(require 49 '[starfederation.datastar.clojure.api :as d*] 50 '[starfederation.datastar.clojure.adapter.http-kit :refer [->sse-response on-open]]) 51 52;; in a ring handler 53(defn handler [request] 54 ;; Create an SSE response 55 (->sse-response request 56 {on-open 57 (fn [sse] 58 ;; Patches elements into the DOM 59 (d*/patch-elements! sse 60 "<div id=\"hal\">Iâm sorry, Dave. Iâm afraid I canât do that.</div>") 61 (Thread/sleep 1000) 62 (d*/patch-elements! sse 63 "<div id=\"hal\">Waiting for an order...</div>"))}))"></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'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">'</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">'</span>[<span style="color:#79c0ff">starfederation.datastar.clojure.adapter.http-kit</span> <span style="color:#a5d6ff">:refer</span> [<span style="color:#79c0ff">->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">->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">"<div id=\"hal\">Iâm sorry, Dave. Iâm afraid I canât do that.</div>"</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">"<div id=\"hal\">Waiting for an order...</div>"</span>))}))</span></span></code></pre></div></div></div><div data-show="$lang === 'csharp'"><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("/", async (IDatastarService datastarService) => 85{ 86 // Patches elements into the DOM. 87 await datastarService.PatchElementsAsync(@"<div id=""hal"">Iâm sorry, Dave. Iâm afraid I canât do that.</div>"); 88 89 await Task.Delay(TimeSpan.FromSeconds(1)); 90 91 await datastarService.PatchElementsAsync(@"<div id=""hal"">Waiting for an order...</div>"); 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">"/"</span>, <span style="color:#ff7b72">async</span> (IDatastarService datastarService) => 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">@"<div id=""hal"">Iâm sorry, Dave. Iâm afraid I canât do that.</div>"</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">@"<div id=""hal"">Waiting for an order...</div>"</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 === 'go'"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="import ( 106 "github.com/starfederation/datastar-go/datastar" 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 `<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>` 116) 117 118time.Sleep(1 * time.Second) 119 120sse.PatchElements( 121 `<div id="hal">Waiting for an order...</div>` 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">"github.com/starfederation/datastar-go/datastar"</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">`<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>`</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">`<div id="hal">Waiting for an order...</div>`</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 === 'java'"><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("<div id=\"hal\">Iâm sorry, Dave. Iâm afraid I canât do that.</div>") 148 .build() 149); 150 151Thread.sleep(1000); 152 153generator.send(PatchElements.builder() 154 .data("<div id=\"hal\">Waiting for an order...</div>") 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">"<div id=\"hal\">Iâm sorry, Dave. Iâm afraid I canât do that.</div>"</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">"<div id=\"hal\">Waiting for an order...</div>"</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 === 'kotlin'"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="val generator = ServerSentEventGenerator(response) 174 175generator.patchElements( 176 elements = """<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>""", 177) 178 179Thread.sleep(ONE_SECOND) 180 181generator.patchElements( 182 elements = """<div id="hal">Waiting for an order...</div>""", 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">"""<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>"""</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">"""<div id="hal">Waiting for an order...</div>"""</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 === 'php'"><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->patchElements( 200 '<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>' 201); 202 203sleep(1); 204 205$sse->patchElements( 206 '<div id="hal">Waiting for an order...</div>' 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">-></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">'<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>'</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">-></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">'<div id="hal">Waiting for an order...</div>'</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 === 'python'"><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('/open-the-bay-doors') 225@datastar_response 226async def open_doors(request): 227 yield SSE.patch_elements('<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>') 228 await asyncio.sleep(1) 229 yield SSE.patch_elements('<div id="hal">Waiting for an order...</div>')"></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">'/open-the-bay-doors'</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">'<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>'</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">'<div id="hal">Waiting for an order...</div>'</span>)</span></span></code></pre></div></div></div><div data-show="$lang === 'ruby'"><div class="code-highlight-wrapper"><div class="copy-button-wrapper"><copy-button code="require 'datastar' 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 %(<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>) 250 251 sleep 1 252 253 sse.patch_elements %(<div id="hal">Waiting for an order...</div>) 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">'datastar'</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">%(<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>)</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">%(<div id="hal">Waiting for an order...</div>)</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 === 'rust'"><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("<div id='hal'>Iâm sorry, Dave. Iâm afraid I canât do that.</div>").into(); 279 280 thread::sleep(Duration::from_secs(1)); 281 282 yield PatchElements::new("<div id='hal'>Waiting for an order...</div>").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">"<div id='hal'>Iâm sorry, Dave. Iâm afraid I canât do that.</div>"</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">"<div id='hal'>Waiting for an order...</div>"</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 === 'typescript'"><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) => { 297 // Patches elements into the DOM. 298 stream.patchElements(`<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>`); 299 300 setTimeout(() => { 301 stream.patchElements(`<div id="hal">Waiting for an order...</div>`); 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">=></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">`<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div>`</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">=></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">`<div id="hal">Waiting for an order...</div>`</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 === 'zig'"><div class="code-highlight-wrapper"><div class="copy-button-wrapper">
311<copy-button code="const datastar = @import("datastar"); 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 \\<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div> 321 , .{}); 322 323 http.io.sleep(.fromSeconds(1), .real) catch {}; 324 325 try sse.patchElements( 326 \\<div id="hal">Waiting for an order...</div> 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">"datastar"</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">\\<div id="hal">Iâm sorry, Dave. Iâm afraid I canât do that.</div></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">\\<div id="hal">Waiting for an order...</div></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>© <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.