<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>loom – BLOG</title>
    <link>https://loomui.dev/blog/</link>
    <description>Recent content in BLOG on loom</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Mon, 16 Mar 2026 00:00:00 +0100</lastBuildDate>
    
	  <atom:link href="https://loomui.dev/blog/index.xml" rel="self" type="application/rss+xml" />
    
    
      
        
      
    
    
    <item>
      <title>INTRODUCING LOOM</title>
      <link>https://loomui.dev/blog/introducing-loom/</link>
      <pubDate>Mon, 16 Mar 2026 00:00:00 +0100</pubDate>
      
      <guid>https://loomui.dev/blog/introducing-loom/</guid>
      <description>
        
        
        &lt;p&gt;After four months in the making, I&amp;rsquo;m really excited to announce loom.
&lt;br/&gt;
The first signal-based component framework in Go, that can be used for the Web, the Terminal, and more.&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Counter&lt;/span&gt;() Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	count, setCount &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;go&lt;/span&gt; &lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#c099ff&#34;&gt;for&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            time.&lt;span style=&#34;color:#82aaff&#34;&gt;Sleep&lt;/span&gt;(time.Second &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;/&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;30&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            &lt;span style=&#34;color:#82aaff&#34;&gt;setCount&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;count&lt;/span&gt;() &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;1&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    }()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Count: &amp;#34;&lt;/span&gt;), &lt;span style=&#34;color:#82aaff&#34;&gt;BindText&lt;/span&gt;(count))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;h3&gt;What is loom?&lt;span class=&#34;hx:absolute hx:-mt-20&#34; id=&#34;what-is-loom&#34;&gt;&lt;/span&gt;
    &lt;a href=&#34;#what-is-loom&#34; class=&#34;subheading-anchor&#34; aria-label=&#34;Permalink for this section&#34;&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Loom is a component framework.&lt;br/&gt;
It&amp;rsquo;s similar to modern versions of SolidJS or SvelteJS, but in Go and with a few twists:&lt;/p&gt;
&lt;br/&gt;
&lt;p&gt;&lt;strong&gt;1) Markup is just Go functions.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Markup is not written in HTML, using templating, or in a separate JSX-like syntax that would require extra tooling.
Instead, it&amp;rsquo;s just plain Go.&lt;/p&gt;
&lt;p&gt;A component is simply a function that returns a &lt;code&gt;loom.Node&lt;/code&gt;, optionally taking children as arguments.&lt;br/&gt;&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;MyComponent&lt;/span&gt;(children &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;...&lt;/span&gt;loom.Node) loom.Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// ...&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Since markup is &lt;em&gt;just&lt;/em&gt; Go functions, it can be used and written however it fits you best to construct a complete UI.&lt;/p&gt;
&lt;p&gt;For instance creating a &lt;code&gt;Card()&lt;/code&gt; component with a title and a body:&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Card&lt;/span&gt;(title &lt;span style=&#34;color:#4fd6be&#34;&gt;string&lt;/span&gt;, body loom.Node) loom.Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Div&lt;/span&gt;(
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#82aaff&#34;&gt;H2&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(title)),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        body,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    )
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;App&lt;/span&gt;() loom.Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Div&lt;/span&gt;(
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#82aaff&#34;&gt;Article&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Card&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;A blog post&amp;#34;&lt;/span&gt;, &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;A description.&amp;#34;&lt;/span&gt;))),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#82aaff&#34;&gt;Article&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Card&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Another blog post&amp;#34;&lt;/span&gt;, &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Another description.&amp;#34;&lt;/span&gt;))),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    )
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;p&gt;&lt;strong&gt;2) Concurrency is a first class citizen.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Signal-based reactive models have been relying on global state and predictible tasks scheduling to capture signal reads. Making it impossible to work with signals across multiple threads or concurrent code execution.&lt;/p&gt;
&lt;p&gt;Loom&amp;rsquo;s &lt;a href=&#34;https://github.com/loom-go/loom/tree/main/signals#signals&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;reactive model&lt;/a&gt; solves this issue while still keeping
the &lt;a href=&#34;https://github.com/AnatoleLucet/sig?tab=readme-ov-file#features&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;consistency and reliability&lt;/a&gt; of modern signal-based reactive models.&lt;br/&gt;
With this model you can update signals from hundreds of concurrent tasks, or create and destroy effects/memos across any number of goroutines and threads without any risk of pollution.&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;get, set &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#82aaff&#34;&gt;Effect&lt;/span&gt;(&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    fmt.&lt;span style=&#34;color:#82aaff&#34;&gt;Println&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Changed:&amp;#34;&lt;/span&gt;, &lt;span style=&#34;color:#82aaff&#34;&gt;get&lt;/span&gt;())
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;go&lt;/span&gt; &lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// triggers the effect as it should.&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// no risk of another signal sneaking in and polluting the effect.&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#82aaff&#34;&gt;set&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;10&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}()&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;p&gt;&lt;strong&gt;3) It&amp;rsquo;s not tied to any platform.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Loom is not tied to the web, or the terminal, or native.&lt;br/&gt;
Because by itself, it doesn&amp;rsquo;t have any UI concept like elements, styling and positioning.
Loom only provides the reactive model and basic &amp;ndash; arithmetic &amp;ndash; components like &lt;a href=&#34;https://loomui.dev/docs/components/for/&#34;&gt;&lt;code&gt;For()&lt;/code&gt;&lt;/a&gt;, &lt;a href=&#34;https://loomui.dev/docs/components/show/&#34;&gt;&lt;code&gt;Show()&lt;/code&gt;&lt;/a&gt; and &lt;a href=&#34;https://loomui.dev/docs/components/fragment/&#34;&gt;&lt;code&gt;Fragment()&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The rest is provided by platform-specific &lt;a href=&#34;https://loomui.dev/docs/get-started/concepts/#renderer&#34;&gt;renderers&lt;/a&gt; which comes with components and tools for &lt;em&gt;that&lt;/em&gt; platform.&lt;br/&gt;&lt;/p&gt;
&lt;p&gt;But on its own, loom has no understanding of what a renderer is either.
Because a renderer does not integrate with loom. Instead you use it &lt;strong&gt;alongside&lt;/strong&gt; loom&amp;rsquo;s reactive model and base components.&lt;/p&gt;
&lt;p&gt;There&amp;rsquo;s two official renderers:&lt;br/&gt;
[*] &lt;a href=&#34;https://loomui.dev/term/intro&#34;&gt;LOOM-TERM -&amp;gt;&lt;/a&gt; | For building Terminal UIs.&lt;br/&gt;
[*] &lt;a href=&#34;https://loomui.dev/web/intro&#34;&gt;LOOM-WEB -&amp;gt;&lt;/a&gt; | For building Web SPAs.&lt;/p&gt;
&lt;div class=&#34;hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain&#34;&gt;
  &lt;div class=&#34;hx:mt-4 hx:flex hx:w-max hx:min-w-full&#34;&gt;&lt;button
        class=&#34;tabs-toggle hextra-tabs-toggle hx:md:inline-flex hx:gap-2 hx:cursor-default hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:select-none hx:text-sm hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200&#34;
        role=&#34;tab&#34;
        type=&#34;button&#34;
        aria-controls=&#34;tabs-panel-0&#34; aria-selected=&#34;true&#34;  tabindex=&#34;0&#34;  data-state=&#34;selected&#34;&gt;TERM&lt;/button&gt;&lt;button
        class=&#34;tabs-toggle hextra-tabs-toggle hx:md:inline-flex hx:gap-2 hx:cursor-default hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:select-none hx:text-sm hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200&#34;
        role=&#34;tab&#34;
        type=&#34;button&#34;
        aria-controls=&#34;tabs-panel-1&#34;&gt;WEB&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div
  class=&#34;hextra-tabs-panel hx:rounded-sm hx:hidden hx:data-[state=selected]:block&#34;
  id=&#34;tabs-panel-0&#34;
  role=&#34;tabpanel&#34; tabindex=&#34;0&#34;  data-state=&#34;selected&#34; &gt;&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#86e1fc&#34;&gt;import&lt;/span&gt; (
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/loom&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/term&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// importing every components from the term renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    . &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/term/components&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;App&lt;/span&gt;() loom.Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// using the Box() and Text() components from the term renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Box&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Hello World!&amp;#34;&lt;/span&gt;))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;main&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    app &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; term.&lt;span style=&#34;color:#82aaff&#34;&gt;NewApp&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    app.&lt;span style=&#34;color:#82aaff&#34;&gt;Run&lt;/span&gt;(term.RenderFullscreen, App)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div
  class=&#34;hextra-tabs-panel hx:rounded-sm hx:hidden hx:data-[state=selected]:block&#34;
  id=&#34;tabs-panel-1&#34;
  role=&#34;tabpanel&#34;&gt;&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#86e1fc&#34;&gt;import&lt;/span&gt; (
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/loom&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/web&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// importing every components from the web renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    . &lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;github.com/loom-go/web/components&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;App&lt;/span&gt;() loom.Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// using the P() and Text() components from the web renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Hello World!&amp;#34;&lt;/span&gt;))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;main&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    app &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; web.&lt;span style=&#34;color:#82aaff&#34;&gt;NewApp&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    app.&lt;span style=&#34;color:#82aaff&#34;&gt;Run&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;#root&amp;#34;&lt;/span&gt;, App)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;p&gt;&lt;strong&gt;4) Reactivity is explicit.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Most modern reactive framework have implicit reactivity.&lt;br/&gt;
When you use a signal in your markup, changes to that signal are automatically reflected to the proper element.&lt;/p&gt;
&lt;p&gt;Loom takes a different approach. Reactive changes to the tree must be explicitly defined by the user.&lt;br/&gt;&lt;/p&gt;
&lt;p&gt;It might seem extra tedious at first, but I promise it&amp;rsquo;s not.&lt;br/&gt;
Explicit reactivity (or &lt;a href=&#34;https://loomui.dev/docs/guides/binding/&#34;&gt;binding&lt;/a&gt;) gives you more control over the tree and how it reacts to changes.&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;count, setCount &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Reactive count: &amp;#34;&lt;/span&gt;),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#82aaff&#34;&gt;BindText&lt;/span&gt;(count), &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// text updates each time the signal changes&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Unreactive count: &amp;#34;&lt;/span&gt;),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;count&lt;/span&gt;()), &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// text does not update and only shows initial value&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;h3&gt;Showcase&lt;span class=&#34;hx:absolute hx:-mt-20&#34; id=&#34;showcase&#34;&gt;&lt;/span&gt;
    &lt;a href=&#34;#showcase&#34; class=&#34;subheading-anchor&#34; aria-label=&#34;Permalink for this section&#34;&gt;&lt;/a&gt;&lt;/h3&gt;&lt;br/&gt;
&lt;details&gt;
&lt;summary&gt;counter&lt;/summary&gt;
&lt;div class=&#34;hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain&#34;&gt;
  &lt;div class=&#34;hx:mt-4 hx:flex hx:w-max hx:min-w-full&#34;&gt;&lt;button
        class=&#34;tabs-toggle hextra-tabs-toggle hx:md:inline-flex hx:gap-2 hx:cursor-default hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:select-none hx:text-sm hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200&#34;
        role=&#34;tab&#34;
        type=&#34;button&#34;
        aria-controls=&#34;tabs-panel-0&#34; aria-selected=&#34;true&#34;  tabindex=&#34;0&#34;  data-state=&#34;selected&#34;&gt;TERM&lt;/button&gt;&lt;button
        class=&#34;tabs-toggle hextra-tabs-toggle hx:md:inline-flex hx:gap-2 hx:cursor-default hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:select-none hx:text-sm hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200&#34;
        role=&#34;tab&#34;
        type=&#34;button&#34;
        aria-controls=&#34;tabs-panel-1&#34;&gt;WEB&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;

&lt;div
  class=&#34;hextra-tabs-panel hx:rounded-sm hx:hidden hx:data-[state=selected]:block&#34;
  id=&#34;tabs-panel-0&#34;
  role=&#34;tabpanel&#34; tabindex=&#34;0&#34;  data-state=&#34;selected&#34; &gt;&lt;p&gt;A very simple counter built with &lt;strong&gt;LOOM-TERM&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;&lt;video src=&#34;https://loomui.dev/medias/counter-term.mp4&#34; autoplay loop muted playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// define your component&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Counter&lt;/span&gt;() Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	count, setCount &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// start a new goroutine when the component is mounted&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;go&lt;/span&gt; &lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#c099ff&#34;&gt;for&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            time.&lt;span style=&#34;color:#82aaff&#34;&gt;Sleep&lt;/span&gt;(time.Second &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;/&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;30&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            &lt;span style=&#34;color:#82aaff&#34;&gt;setCount&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;count&lt;/span&gt;() &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;1&lt;/span&gt;) &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// update the signal inside the goroutine&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    }()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// return some markup&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Count: &amp;#34;&lt;/span&gt;), &lt;span style=&#34;color:#82aaff&#34;&gt;BindText&lt;/span&gt;(count))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;main&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	app &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; term.&lt;span style=&#34;color:#82aaff&#34;&gt;NewApp&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// render the component using the terminal renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    errs &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; app.&lt;span style=&#34;color:#82aaff&#34;&gt;Run&lt;/span&gt;(term.RenderInline, Counter)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div
  class=&#34;hextra-tabs-panel hx:rounded-sm hx:hidden hx:data-[state=selected]:block&#34;
  id=&#34;tabs-panel-1&#34;
  role=&#34;tabpanel&#34;&gt;&lt;p&gt;A very simple counter built with &lt;strong&gt;LOOM-WEB&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;&lt;video src=&#34;https://loomui.dev/medias/counter-web.mp4&#34; autoplay loop muted playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// define your component&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Counter&lt;/span&gt;() Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	count, setCount &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;) &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// define a signal with a getter and setter&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// start a new goroutine when the component is mounted&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;go&lt;/span&gt; &lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#c099ff&#34;&gt;for&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            time.&lt;span style=&#34;color:#82aaff&#34;&gt;Sleep&lt;/span&gt;(time.Second &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;/&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;30&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            &lt;span style=&#34;color:#82aaff&#34;&gt;setCount&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;count&lt;/span&gt;() &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;1&lt;/span&gt;) &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// update the signal inside the goroutine&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    }()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// returns some markup&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// (here using the web renderer&amp;#39;s P() and Text() components)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Count: &amp;#34;&lt;/span&gt;),
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#82aaff&#34;&gt;BindText&lt;/span&gt;(count), &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// render the count signal as text. reactivity is explicit&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    )
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;main&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	app &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; web.&lt;span style=&#34;color:#82aaff&#34;&gt;NewApp&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// render the component using the web renderer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    errs &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; app.&lt;span style=&#34;color:#82aaff&#34;&gt;Run&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;#root&amp;#34;&lt;/span&gt;, Counter)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;details&gt;
&lt;summary&gt;&lt;i&gt;With goroutine cancellation&lt;/i&gt;&lt;/summary&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Counter&lt;/span&gt;() Node {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	count, setCount &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;go&lt;/span&gt; &lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;(self Component) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// stop the loop when the component is diposed&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#c099ff&#34;&gt;for&lt;/span&gt; !self.&lt;span style=&#34;color:#82aaff&#34;&gt;IsDisposed&lt;/span&gt;() {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            time.&lt;span style=&#34;color:#82aaff&#34;&gt;Sleep&lt;/span&gt;(time.Second &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;/&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;30&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            &lt;span style=&#34;color:#82aaff&#34;&gt;setCount&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;count&lt;/span&gt;() &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#ffc777&#34;&gt;1&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    }(&lt;span style=&#34;color:#82aaff&#34;&gt;Self&lt;/span&gt;())
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;P&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;Text&lt;/span&gt;(&lt;span style=&#34;color:#c3e88d&#34;&gt;&amp;#34;Count: &amp;#34;&lt;/span&gt;), &lt;span style=&#34;color:#82aaff&#34;&gt;BindText&lt;/span&gt;(count))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;See &lt;a href=&#34;https://loomui.dev/docs/reactivity/self/&#34;&gt;&lt;code&gt;Self()&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;/details&gt;
&lt;/details&gt;
&lt;p&gt;&lt;b&gt;---&lt;/b&gt;&lt;br/&gt;&lt;br/&gt;&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;todolist&lt;/summary&gt;
&lt;p&gt;A todolist app built with &lt;strong&gt;LOOM-TERM&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;&lt;video src=&#34;todolist.mp4&#34; autoplay loop muted playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Full source code at &lt;a href=&#34;https://github.com/loom-go/term/tree/main/examples/todolist&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;term/examples/todolist&lt;/a&gt;.&lt;/p&gt;
&lt;/details&gt;
&lt;p&gt;&lt;b&gt;---&lt;/b&gt;&lt;br/&gt;&lt;br/&gt;&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;console&lt;/summary&gt;
&lt;p&gt;An example of using the built-in &lt;a href=&#34;https://loomui.dev/term/components/console/&#34;&gt;&lt;code&gt;Console()&lt;/code&gt;&lt;/a&gt; component from &lt;strong&gt;LOOM-TERM&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;&lt;video src=&#34;console.mp4&#34; autoplay loop muted playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Full source code at &lt;a href=&#34;https://github.com/loom-go/term/tree/main/examples/console&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;term/examples/console&lt;/a&gt;.&lt;/p&gt;
&lt;/details&gt;
&lt;p&gt;&lt;b&gt;---&lt;/b&gt;&lt;br/&gt;&lt;br/&gt;&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;styling&lt;/summary&gt;
&lt;p&gt;An example of reactive styling and hover state with &lt;strong&gt;LOOM-TERM&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;&lt;video src=&#34;styling.mp4&#34; autoplay loop muted playsinline&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Full source code at &lt;a href=&#34;https://github.com/loom-go/term/tree/main/examples/styling&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;term/examples/styling&lt;/a&gt;.&lt;/p&gt;
&lt;/details&gt;
&lt;br/&gt;
&lt;h3&gt;What next?&lt;span class=&#34;hx:absolute hx:-mt-20&#34; id=&#34;what-next&#34;&gt;&lt;/span&gt;
    &lt;a href=&#34;#what-next&#34; class=&#34;subheading-anchor&#34; aria-label=&#34;Permalink for this section&#34;&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;loom is still in very &lt;em&gt;very&lt;/em&gt; early development.&lt;br/&gt;
Expect bugs, but also expect more stability and more features to come!&lt;/p&gt;
&lt;p&gt;This initial release sets the stage for what&amp;rsquo;s to come.&lt;br/&gt;
It proves the idea works and is actually worth pursuing.&lt;/p&gt;
&lt;p&gt;The coming weeks/months of development are going to be targeted towards higher stability of the framework,
and better documentation to make loom more accessible for a broader audience.&lt;/p&gt;
&lt;br/&gt;
&lt;p&gt;The next core features you should expect to land are going to gravitate around reactive asynchronicity &amp;ndash;
a very important step towards proper: fetching, computations, or anything blocking.&lt;br/&gt;
Async tasks are completely possible in the current version of loom, but they could be &lt;em&gt;better&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;One of the first building blocks in that direction is &lt;strong&gt;async memos&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Put simply, an async memo is just a reactive computation that&amp;rsquo;s executed in a goroutine.&lt;/p&gt;
&lt;div class=&#34;hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code&#34;&gt;

&lt;div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c8d3f5;background-color:#222436;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;userID, setUserID &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;Signal&lt;/span&gt;(&lt;span style=&#34;color:#ffc777&#34;&gt;0&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;user &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;AsyncMemo&lt;/span&gt;(&lt;span style=&#34;color:#c099ff&#34;&gt;func&lt;/span&gt;() (User, &lt;span style=&#34;color:#4fd6be&#34;&gt;error&lt;/span&gt;) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// runs in a goroutine each time the userID signal changes&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#c099ff&#34;&gt;return&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;getUser&lt;/span&gt;(&lt;span style=&#34;color:#82aaff&#34;&gt;userID&lt;/span&gt;())
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#444a73;font-style:italic&#34;&gt;// use it like a regular signal, but with a possible error&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;u, err &lt;span style=&#34;color:#c3e88d;font-weight:bold&#34;&gt;:=&lt;/span&gt; &lt;span style=&#34;color:#82aaff&#34;&gt;user&lt;/span&gt;()&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0&#34;&gt;
  &lt;button
    class=&#34;hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50&#34;
    title=&#34;Copy code&#34;
    aria-label=&#34;Copy code&#34;
    data-copied-label=&#34;Copied!&#34;
  &gt;
    &lt;div class=&#34;hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
&lt;div class=&#34;hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4&#34;&gt;&lt;/div&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Async memos will open the door for more advanced features like suspense, panic boundaries, and async stores similar to &lt;a href=&#34;https://tanstack.com/query/latest&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;TanStack Query&lt;/a&gt;.&lt;/p&gt;
&lt;br/&gt;
&lt;p&gt;If you&amp;rsquo;d like to help, head over at &lt;a href=&#34;https://github.com/loom-go/&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;github.com/loom-go&lt;/a&gt;!&lt;/p&gt;
&lt;hr&gt;
&lt;details&gt;
&lt;summary&gt;CREDITS&lt;/summary&gt;
&lt;p&gt;The fundamentals behind loom&amp;rsquo;s reactive model rest on the hard work done by &lt;a href=&#34;https://github.com/ryansolid&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Ryan Carniato&lt;/a&gt;, &lt;a href=&#34;https://github.com/milomg&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Milo Mighdoll&lt;/a&gt; and others pushing the limits of signal-based reactive systems.&lt;br/&gt;
Loom&amp;rsquo;s reactive model started off with a heavily inspired version of what&amp;rsquo;s been done for the upcoming &lt;a href=&#34;https://github.com/solidjs/signals&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;SolidJS V2 model&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;LOOM-TERM&lt;/strong&gt; renderer also rests on the hard work done by &lt;a href=&#34;https://github.com/kommander&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;Kommander&lt;/a&gt; and the OpenCode team on their very cool &lt;a href=&#34;https://github.com/anomalyco/opentui/tree/24cc57e7c7023e8be2809fee9bd76149aa8d41a7/packages/core/src/zig&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;native renderer&lt;/a&gt;.
Many of the ideas behind &lt;strong&gt;LOOM-TERM&lt;/strong&gt; where inspired by what&amp;rsquo;s been done on OpenTUI.&lt;/p&gt;
&lt;hr&gt;
&lt;/details&gt;
&lt;p&gt;If you made it here you&amp;rsquo;re probably interested in how to get started with loom! Head over to the -&amp;gt; &lt;a href=&#34;https://loomui.dev/docs/&#34;&gt;DOCS&lt;/a&gt; to learn more.&lt;/p&gt;
&lt;p&gt;If you have a question or want to discuss something about loom:
come and &lt;a href=&#34;https://discord.gg/DfDCFCHp92&#34;target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;join the Discord&lt;/a&gt;. There&amp;rsquo;s no such thing as a bad question!&lt;/p&gt;

      </description>
    </item>
    
  </channel>
</rss>
