API Reference
A technical breakdown of Golit core primitives. Our architecture prioritizes directed flow and declarative state management through four foundational nodes.
Defines a reactive numerical input within the DAG. It serves as an entry point for user interaction, broadcasting value updates to connected derived nodes.
| Name | Type | Description | Default |
|---|---|---|---|
| label | string | The UI text display for the slider. | "" |
| min | number | Minimum range value. | 0 |
| max | number | Maximum range value. | 100 |
// Initialize input
const intensity = gl.slider({
label: "Node Intensity",
min: 10,
max: 500,
initial: 100
});
Computes a value based on upstream dependencies. It automatically recalculates only when its dependent inputs or other derived nodes change.
| Name | Type | Description | Default |
|---|---|---|---|
| deps | Node[] | Array of upstream dependencies. | [] |
| fn | Function | Transformation logic. | null |
// Computed state
const scaled = gl.derived({
deps: [intensity],
fn: (v) => v * Math.PI
});
Defines the structural grid for rendering. It uses a 12-column asymmetric system by default, allowing for complex dashboard-to-document transformations.
| Name | Type | Description | Default |
|---|---|---|---|
| columns | number | Grid column count. | 12 |
| gap | spacing | Spacing between elements. | 24px |
// Structure
const shell = gl.layout({
type: "bento",
gap: 16
});
The catalyst that mounts the architectural graph to the DOM. It initializes all listeners and triggers the first paint.
| Name | Type | Description | Default |
|---|---|---|---|
| target | string | CSS selector for mount. | "#app" |
// Execution
gl.run({
target: "main",
nodes: [shell]
});