Component Gallery

A curated collection of Golit's reactive primitives. Built with the reverence of a premium architectural journal, these components leverage Alpine.js and HTMX for seamless engineering.

Reactive Slider

gl-slider.v1

linear_scale

SCALE_VALUE 74%

0.00 1.00


<input type="range"

                              gl-input="scale"

                              x-model="value"

                              class="gl-slider-thumb" />

Error Boundary

gl-error-guard

report

sync_problem

State Decoupling Error

Error trace captured at node: 0x4F2A


<div gl-error-boundary>

                              <template #fallback>

                                ...Recovery UI

                              </template>

</div>

Data Table

hx-target="#table-body"

hx-post gl-pagination

Node ID	Status	Latency	Throughput
worker_node_01	Healthy	24ms	12.4 GB/s
worker_node_02	Healthy	31ms	8.2 GB/s
worker_node_03	Throttled	142ms	1.1 GB/s

Showing 1-3 of 42 nodes

ECharts Snippet

gl-chart="echarts"

insights

LIVE_TELEMETRY


<div gl-chart>

                              <script type="application/json">

                                { "series": [{ "type": "bar" }] }

                              </script>

</div>

Text Input

gl-output="query"

edit_note

Node Search

Reactive Output

Query: "Fetching worker_01..."


<input gl-input="query" />

<p gl-output="query">

                              Live content here...

</p>