tea

The Elm Architecture (TEA) framework for Kit - functional GUI programming

Files

Backends

Kit TEA supports multiple rendering backends:

Desktop (Raylib) - Default

The default backend uses Raylib for GPU-accelerated rendering:

import Kit.Tea as TEA

TEA.run init update view 800 600 "My App"

Web (Browser)

For web deployment, Kit TEA applications can be run in the browser using the kit-tea-web JavaScript runtime. The architecture works by:

1. Element Serialization - The Kit view function produces Element trees that are serialized to JSON
2. JavaScript Runtime - kit-tea-web runs the frame loop and captures DOM events
3. Canvas Rendering - Elements are rendered to HTML5 Canvas

# In your Kit app, use the WASM helpers:
import TEA.WASM.{tea-init, tea-step}

# Initialize app
result = tea-init init view
# result.view-json contains the JSON to render

# Process events
result = tea-step event-json model update view
# result.view-json contains updated view

See the kit-tea-web package for the JavaScript runtime and examples.

Generic Backend API

For custom backends, use run-with-backend:

import Kit.Tea as TEA
import Kit.Tea.{raylib}  # or your custom backend

TEA.run-with-backend raylib init update view 800 600 "My App"

If you need to own the frame loop yourself, the pure interaction helpers exposed from Kit.Tea are collect-interaction-messages and apply-tooltip-visibility.

Architecture

The Elm Architecture (TEA) is a pattern for building interactive applications with unidirectional data flow:

Module Structure

Dependencies

• logging
• raylib

Installation

kit add gitlab.com/kit-lang/packages/kit-tea.git

Usage

import Kit.Tea

Widget State Helpers

For stateful widgets, kit-tea exposes pure helpers that keep update logic out of your renderer-facing code:

name = TEA.text-input-state-update msg x y w h model.name model.cursor model.is-focused?
editor = TEA.text-editor-state-update msg x y w h model.text model.line model.col model.scroll-y model.is-focused? line-height
pick = TEA.pick-list-update-with-events msg x y w h options model.selected model.is-open?
menu = TEA.menu-update msg trigger-x trigger-y trigger-w trigger-h menu-x menu-y menu-w options model.hovered model.selected model.is-open? TEA.menu-item-height
combo = TEA.combo-box-update-with-events msg x y w h options model.text model.cursor model.selected model.highlighted model.is-open? model.is-focused?
table = TEA.table-update msg x y w h columns model.rows row-height model.sort-column model.sort-descending? model.selected-row
viewer = TEA.image-viewer-state-update msg x y w h path mouse-x mouse-y model.scale model.offset-x model.offset-y model.min-scale model.max-scale model.is-dragging? model.drag-start-x model.drag-start-y model.drag-origin-x model.drag-origin-y
pairs = TEA.pane-grid-update msg x y w h model.layout spacing min-size model.active-divider

See examples/text-input-demo.kit, examples/text-editor-demo.kit, examples/pick-list-demo.kit, examples/tooltip-menu-demo.kit, and examples/combo-box-demo.kit for complete flows.

For PickList, pick-list-update-with-events adds canonical opened?, closed?, and hovered-option callbacks on top of the existing state update. pick-list-update stays as the compatibility wrapper when you only need the next selected/open state.

For ComboBox, combo-box-update-with-events adds canonical opened?, closed?, and hovered-option callbacks on top of the existing state update, with hovered-option tracking the current open option whether it changed by pointer hover or keyboard navigation. combo-box-update stays as the compatibility wrapper when you only need the next state.

For Menu, menu-update-with-events adds canonical opened?, closed?, and hovered-item callbacks on top of the existing hover/selection state update. menu-update stays as the compatibility wrapper when you only need the next menu state.

For sliders, slider-keyboard-value and vertical-slider-keyboard-value provide canonical arrow-key stepping, with shift-step support for larger keyboard jumps. See examples/slider-demo.kit and examples/vertical-slider-demo.kit.

For tables, table-stateful and table-styled-stateful render the current sort and selected-row state directly, so the same state you manage with table-update is reflected without extra overlay elements.

For image viewers, image-viewer-full-state lets the rendered element reflect active drag state for runtime-owned cursor and visual feedback. For image viewers with known dimensions, image-viewer-state-update-sized, image-viewer-fit-scale, image-viewer-fit-state, and image-viewer-clamp-offsets provide the fully pure path. See examples/image-viewer-demo.kit for the full pan/zoom flow.

For viewport-observer style flows, sensor-visible-ratio, sensor-visible-ratio-anticipated, sensor-visible-enough?, sensor-visible-enough-anticipated?, sensor-state-update, sensor-state-update-anticipated, sensor-state-update-delayed, sensor-state-update-anticipated-delayed, and sensor-viewport-with-anticipation provide the pure geometry path. On the widget side, sensor-anticipating, sensor-threshold-anticipating, sensor-anticipating-with-events, sensor-with-events-delayed, and sensor-full-threshold-anticipating-with-events-delayed let the runtime-backed Sensor anticipate entry before the content crosses the visible threshold, debounce on-show / on-hide, expose on-resize on window resize while visible, and still behave as an observer around its child instead of a render gate.

For KeyedColumn, keyed-value-at and keyed-reorder-values give you the canonical pure path for app-owned per-child state that must follow stable keys across reorder, insert, and removal.

For Lazy, lazy-visible-ratio, lazy-visible-enough?, lazy-viewport-with-overscan, lazy-activated?, and lazy-state-update expose the same pure geometry path used by the renderer's overscanned viewport culling. lazy-state-update also gives you a sticky "activate once visible" helper for app-owned lazy state.

See examples/lazy-demo.kit for a complete sticky-activation flow.

Shaders now support typed uniforms through shader-uniform, shader-uniform-int, shader-uniform-vec2, shader-uniform-vec3, and shader-uniform-vec4. For custom fragment programs, use shader-fragment or shader-fragment-with-uniforms; otherwise shader and shader-with-uniforms continue to use the built-in named presets.

License

MIT License - see LICENSE for details.

Exported Functions & Types

sub-none

No subscription

() -> Sub

sub-timer

Timer subscription - fires every interval-ms milliseconds

NonNegativeInt -> Sub

sub-window-resize

Window resize subscription - fires when window is resized

() -> Sub

sub-window-focus

Window focus subscription - fires when window gains or loses focus

() -> Sub

sub-batch

Batch multiple subscriptions together

List Sub -> Sub

sub-timer-tick?

Match a timer tick message Returns Some time if this is a timer tick, None otherwise

Msg -> Option Float

sub-window-resized?

Match a window resize message Returns Some {width, height} if window was resized

Msg -> Option {width: Int, height: Int}

sub-window-focused?

Match a window focus message Returns Some is-focused? (true if window gained focus, false if lost)

Msg -> Option Bool

check-subscriptions

Check all subscriptions and return messages with updated state

Sub -> SubState -> Float -> {messages: List Msg, state: SubState}

button-clicked?

Check if a button was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

is-button-hovered?

Check if mouse is hovering over button bounds

Msg -> Int -> Int -> Int -> Int -> Bool

measure-text

Measure text width (useful for auto-sizing buttons)

String -> Int -> Int

checkbox-clicked?

Check if a checkbox was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Option Int

is-checkbox-hovered?

Check if mouse is hovering over checkbox bounds

Msg -> Int -> Int -> Int -> Bool

compute-status

Compute widget status from hover state and enabled state is-hovered?: whether mouse is over the widget is-enabled?: whether the widget is interactive

Bool -> Bool -> WidgetStatus

checkbox-status

Compute checkbox status from message and widget bounds msg: current message (for mouse position) x, y, size: checkbox bounds is-enabled?: whether the checkbox is interactive

Msg -> Int -> Int -> Int -> Bool -> WidgetStatus

default-checkbox-style

Default checkbox style (dark theme)

() -> CheckboxStyle

light-checkbox-style

Light theme checkbox style

() -> CheckboxStyle

checkbox-colors

Get checkbox colors based on status and style Returns {bg, border, icon, text} colors

CheckboxStyle -> WidgetStatus -> Bool -> {bg: Int, border: Int, icon: Int, text: Int}

radio-clicked?

Check if a radio button was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Option Int

is-radio-hovered?

Check if mouse is hovering over radio button bounds

Msg -> Int -> Int -> Int -> Bool

slider-value

Check if slider is being dragged and return new value Returns Some new-value if mouse is down within slider bounds, None otherwise

Msg -> Int -> Int -> Int -> Int -> Float -> Float -> Option Float

is-slider-hovered?

Check if mouse is hovering over slider bounds

Msg -> Int -> Int -> Int -> Int -> Bool

slider-keyboard-value

Return a keyboard-adjusted horizontal slider value. ArrowRight and ArrowUp increase; ArrowLeft and ArrowDown decrease. Holding Shift uses shift-step instead of step.

Msg -> Float -> Float -> Float -> Float -> Float -> Option Float

vertical-slider-keyboard-value

Return a keyboard-adjusted vertical slider value. ArrowUp increases; ArrowDown decreases. Holding Shift uses shift-step instead of step.

Msg -> Float -> Float -> Float -> Float -> Float -> Option Float

toggler-clicked?

Check if a toggler was clicked this frame Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

is-toggler-hovered?

Check if mouse is hovering over toggler bounds

Msg -> Int -> Int -> Int -> Int -> Bool

text-input-clicked?

Check if a text input was clicked this frame Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

text-input-update

Process a message for a focused text input Returns Some {text, cursor} if the input was modified, None otherwise

Msg -> String -> Int -> Bool -> Option {text: String, cursor: Int}

text-input-state-update

Update text input text, cursor, and focus state from a message

Msg -> Int -> Int -> Int -> Int -> String -> Int -> Bool -> {text: String, cursor: Int, is-focused?: Bool}

pick-list-clicked?

Check if the pick list header was clicked (to toggle open/close) Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

pick-list-selection

Check if an option was selected from an open pick list Returns Some index if an option was clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> List String -> Bool -> Option Int

pick-list-hovered-option

Return the option currently hovered by the pointer in an open pick list. Returns Some {index, option} using the original option index.

Msg -> Int -> Int -> Int -> Int -> List String -> Bool -> Option {index: Int, option: String}

pick-list-update

Update pick list selection and open state from a message

Msg -> Int -> Int -> Int -> Int -> List String -> Int -> Bool -> {selected: Int, is-open?: Bool}

pick-list-update-with-events

Update pick list state and emit canonical lifecycle callbacks for open/close and hovered option changes. hovered-option emits whenever the pointer enters a different open option row.

Msg -> Int -> Int -> Int -> Int -> List String -> Int -> Bool -> {selected: Int, is-open?: Bool, opened?: Bool, closed?: Bool, hovered-option: Option {index: Int, option: String}}

pick-list-item-height

Height of each option in the dropdown

menu-hovered-item

Check which menu item is hovered in an open menu Returns Some index if the pointer is over an item, None otherwise

Msg -> Int -> Int -> Int -> List String -> Bool -> Int -> Option Int

menu-selection

Check if an item was selected from an open menu Returns Some index if an item was clicked, None otherwise

Msg -> Int -> Int -> Int -> List String -> Bool -> Int -> Option Int

menu-update

Update menu open, hovered, and selected state from a message trigger-* describe the toggle button, menu-* describe the dropdown itself

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> List String -> Int -> Int -> Bool -> Int -> {hovered: Int, selected: Int, is-open?: Bool}

menu-update-with-events

Update menu state and emit canonical lifecycle callbacks for open/close and hovered item changes. hovered-item emits whenever the active open menu item changes by pointer movement.

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> List String -> Int -> Int -> Bool -> Int -> {hovered: Int, selected: Int, is-open?: Bool, opened?: Bool, closed?: Bool, hovered-item: Option {index: Int, option: String}}

menu-item-height

Default height of each menu item in the dropdown

combo-box-clicked?

Check if the combo box input was clicked Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

combo-box-cursor-at

Return the expected cursor for a combo box at a given pointer position. The input area uses an I-beam; open dropdown rows use a pointing hand.

Int -> Int -> Int -> Int -> List String -> String -> Bool -> Int -> Int -> Int

combo-box-selection

Check if a filtered option was selected from an open combo box Returns Some {index, option} using the original option index

Msg -> Int -> Int -> Int -> Int -> List String -> String -> Bool -> Option {index: Int, option: String}

combo-box-hovered-option

Return the filtered option currently hovered by the pointer in an open combo box. Returns Some {index, option} using the original option index.

Msg -> Int -> Int -> Int -> Int -> List String -> String -> Bool -> Option {index: Int, option: String}

combo-box-update-with-events

Update combo box state and emit canonical lifecycle callbacks for open/close and highlighted option changes. hovered-option emits whenever the active open dropdown option changes, whether by pointer hover or keyboard navigation.

Msg -> Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Int -> Bool -> Bool -> {text: String, cursor: Int, selected: Int, highlighted: Int, is-open?: Bool, is-focused?: Bool, opened?: Bool, closed?: Bool, hovered-option: Option {index: Int, option: String}}

combo-box-update

Update combo box input, focus, open state, selection, and keyboard highlight from a message.

Msg -> Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Int -> Bool -> Bool -> {text: String, cursor: Int, selected: Int, highlighted: Int, is-open?: Bool, is-focused?: Bool}

combo-box-item-height

Height of each combo box option in the dropdown

rich-text-link-at-point

Return the link under the given point in a single-line rich text element.

Int -> Int -> Int -> Int -> List {content: String, style: {link: Option String}} -> Int -> Int -> Option String

rich-text-link-clicked?

Return the clicked link url from a single-line rich text element, if any.

Msg -> Int -> Int -> List {content: String, style: {link: Option String}} -> Int -> Int -> Option String

markdown-link-clicked?

Return the clicked markdown link url, if any. This follows the current markdown renderer's single-line layout rules.

Msg -> Int -> Int -> Int -> String -> Int -> Int -> Option String

markdown-link-at-point

Return the markdown link url under the given point, if any. This follows the current markdown renderer's line layout rules.

Int -> Int -> Int -> Int -> Int -> String -> Int -> Int -> Option String

table-header-clicked?

Return the clicked header column index, if any.

Msg -> Int -> Int -> List {header: String, width: Int, align-x: a} -> Int -> Option Int

table-row-clicked?

Return the clicked data row index, if any.

Msg -> Int -> Int -> Int -> Int -> List (List String) -> Int -> Option Int

table-sort-rows

Sort table rows by the given column index.

List (List String) -> Int -> Bool -> List (List String)

table-update

Update table sort and selection state from a message.

Msg -> Int -> Int -> Int -> Int -> List {header: String, width: Int, align-x: a} -> List (List String) -> Int -> Int -> Bool -> Int -> {rows: List (List String), sort-column: Int, sort-descending?: Bool, selected-row: Int}

image-viewer-clamp-scale

Clamp image-viewer scale to the declared bounds.

Float -> Float -> Float -> Float

image-viewer-fit-scale

Compute a fit-to-view scale from known content dimensions.

Int -> Int -> Int -> Int -> Float -> Float -> Float

image-viewer-clamp-offsets

Clamp image-viewer pan offsets so content stays within the viewport.

Int -> Int -> Int -> Int -> Float -> Int -> Int -> {offset-x: Int, offset-y: Int}

image-viewer-zoom-around-point

Zoom around a pointer anchor relative to the viewer center.

Int -> Int -> Float -> Float -> Int -> Int -> {offset-x: Int, offset-y: Int}

image-viewer-fit-state

Produce a fit-to-view image-viewer state from known content dimensions.

Int -> Int -> Int -> Int -> Float -> Float -> {scale: Float, offset-x: Int, offset-y: Int}

image-viewer-state-update-sized

Update image-viewer zoom, pan, and drag state from a message and known image dimensions. pointer-x / pointer-y should be the current mouse position, which is used for wheel zoom anchoring.

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float -> Int -> Int -> Float -> Float -> Bool -> Int -> Int -> Int -> Int -> {scale: Float, offset-x: Int, offset-y: Int, is-dragging?: Bool, drag-start-x: Int, drag-start-y: Int, drag-origin-x: Int, drag-origin-y: Int}

image-viewer-state-update

Update image-viewer zoom, pan, and drag state by loading the current image dimensions from path.

Msg -> Int -> Int -> Int -> Int -> String -> Int -> Int -> Float -> Int -> Int -> Float -> Float -> Bool -> Int -> Int -> Int -> Int -> {scale: Float, offset-x: Int, offset-y: Int, is-dragging?: Bool, drag-start-x: Int, drag-start-y: Int, drag-origin-x: Int, drag-origin-y: Int}

sensor-viewport-with-anticipation

Expand a viewport rectangle by a sensor anticipation margin.

Int -> Int -> Int -> Int -> Int -> {x: Int, y: Int, w: Int, h: Int}

sensor-visible-ratio

Compute how much of a sensor is visible within a viewport, from 0.0 to 1.0.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float

sensor-visible-ratio-anticipated

Compute how much of a sensor is visible within an anticipated viewport, from 0.0 to 1.0.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float

sensor-visible-enough?

Check whether a sensor is visible enough for its threshold.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Bool

sensor-visible-enough-anticipated?

Check whether a sensor is visible enough for its threshold within an anticipated viewport.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Int -> Bool

sensor-state-update

Update sensor visibility state from viewport geometry.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> {is-visible?: Bool, became-visible?: Bool, became-hidden?: Bool, visible-ratio: Float}

sensor-state-update-anticipated

Update sensor visibility state from an anticipated viewport geometry.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Int -> {is-visible?: Bool, became-visible?: Bool, became-hidden?: Bool, visible-ratio: Float}

sensor-state-update-delayed

Update delayed sensor visibility state from viewport geometry. transition-since should be the previously returned transition start time, if any.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Float -> Option Float -> Int -> {is-visible?: Bool, became-visible?: Bool, became-hidden?: Bool, visible-ratio: Float, transition-since: Option Float, pending?: Bool}

sensor-state-update-anticipated-delayed

Update delayed sensor visibility state from anticipated viewport geometry. transition-since should be the previously returned transition start time, if any.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Int -> Float -> Option Float -> Int -> {is-visible?: Bool, became-visible?: Bool, became-hidden?: Bool, visible-ratio: Float, transition-since: Option Float, pending?: Bool}

keyed-value-at

Look up the value currently associated with a key. Keys and values are matched positionally.

String -> List String -> List a -> Option a

keyed-reorder-values

Reorder app-owned values to match a new key order. Existing values follow their keys, and missing keys receive default-value.

List String -> List a -> List String -> a -> List a

lazy-viewport-with-overscan

Expand a viewport rectangle by a symmetric overscan margin.

Int -> Int -> Int -> Int -> Int -> {x: Int, y: Int, w: Int, h: Int}

lazy-visible-ratio

Compute how much of a lazy region intersects a viewport, from 0.0 to 1.0.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float

lazy-visible-enough?

Check whether a lazy region is visible enough within a viewport.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float -> Bool

lazy-activated?

Check whether a lazy region should activate within an overscanned viewport.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Float -> Int -> Bool

lazy-state-update

Update sticky lazy activation state from viewport geometry.

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Float -> Bool -> Int -> Bool

pane-grid-divider-hovered

Return the divider under the current pointer, if any.

Msg -> Int -> Int -> Int -> Int -> PaneLayout -> Int -> Int -> Option {id: String, axis: String, x: Int, y: Int, w: Int, h: Int}

pane-grid-divider-cursor-at

Return the recommended cursor constant for a pane-grid pointer position.

Int -> Int -> Int -> Int -> Int -> Int -> PaneLayout -> Int -> Int -> Int

pane-grid-update

Update pane-grid drag state and resize the targeted split if a divider is active.

Msg -> Int -> Int -> Int -> Int -> PaneLayout -> Int -> Int -> Option String -> {layout: PaneLayout, active-divider: Option String}

pane-grid-collapse

Collapse a specific split toward one side. side should be "first" or "second".

PaneLayout -> String -> String -> PaneLayout

pane-grid-restore

Restore a previously collapsed split to its saved ratio.

PaneLayout -> String -> PaneLayout

pane-grid-toggle-collapse

Toggle collapse for a split, restoring if it is already collapsed to the requested side.

PaneLayout -> String -> String -> PaneLayout

default-config

Default configuration

run

Run a TEA application with default configuration

(() -> a) -> (Msg -> a -> a) -> (a -> Element) -> PositiveInt -> PositiveInt -> NonEmptyString -> ()

run-with-config

Run a TEA application with custom configuration

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> Element) -> Config -> ()

run-with-cmd

Run a TEA application with command support

(() -> {model: a, cmd: Cmd}) -> (Msg -> a -> {model: a, cmd: Cmd}) -> (a -> Element) -> PositiveInt -> PositiveInt -> NonEmptyString -> ()

run-with-cmd-config

Run a TEA application with commands and custom configuration

(() -> {model: Model, cmd: Cmd}) -> (Msg -> Model -> {model: Model, cmd: Cmd}) -> (Model -> Element) -> Config -> ()

run-with-sub

Run a TEA application with subscription support

(() -> a) -> (Msg -> a -> a) -> (a -> Sub) -> (a -> Element) -> PositiveInt -> PositiveInt -> NonEmptyString -> ()

theme-dark

Dark theme - default dark color scheme

theme-light

Light theme - light color scheme

theme-with

Create a custom theme by modifying an existing theme

Theme -> Record -> Theme

themed-button

Themed button - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> String -> Theme -> Element

themed-progress-bar

Themed progress bar - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> Float -> Theme -> Element

themed-checkbox

Themed checkbox - uses theme colors

Int -> Int -> Int -> Bool -> String -> Theme -> Element

themed-slider

Themed slider - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Theme -> Element

themed-toggler

Themed toggler - uses theme colors with pill shape

Int -> Int -> Int -> Int -> Bool -> String -> Theme -> Element

themed-radio

Themed radio - uses theme colors

Int -> Int -> Int -> Bool -> String -> Theme -> Element

themed-text-input

Themed text input - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Theme -> Element

themed-pick-list

Themed pick list - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Theme -> Element

themed-text

Themed text - uses theme text color

Int -> Int -> Int -> String -> Theme -> Element

themed-text-secondary

Themed secondary text - uses theme secondary text color

Int -> Int -> Int -> String -> Theme -> Element

themed-button-with-font

Themed button with custom font

Int -> Int -> Int -> Int -> String -> Theme -> Ptr -> Element

themed-checkbox-with-font

Themed checkbox with custom font

Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

themed-toggler-with-font

Themed toggler with custom font

Int -> Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

themed-radio-with-font

Themed radio with custom font

Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

themed-text-with-font

Themed text with custom font

Int -> Int -> Int -> String -> Theme -> Ptr -> Element

themed-text-secondary-with-font

Themed secondary text with custom font

Int -> Int -> Int -> String -> Theme -> Ptr -> Element

encode-matrix

Encode QR content into a square matrix of "0"/"1" cells.

String -> Int -> Result {width: Int, cells: String} String

make-key-msg

String -> Int -> Bool -> Bool -> Bool -> Bool -> Msg

make-mouse-msg

String -> Int -> Int -> Int -> Msg

make-link-msg

Int -> Int -> Int -> String -> Msg

make-tick-msg

Float -> Msg

make-frame-msg

() -> Msg

key-pressed?

Check if a key was pressed this frame Returns Some key-code if pressed, None otherwise

Msg -> Option Int

key-down?

Check if a key is currently held down Returns Some key-code if held, None otherwise

Msg -> Option Int

key-released?

Check if a key was released this frame Returns Some key-code if released, None otherwise

Msg -> Option Int

shift-held?

Check whether shift was held when the message was created

Msg -> Bool

ctrl-held?

Check whether Control was held when the message was created

Msg -> Bool

alt-held?

Check whether Alt was held when the message was created

Msg -> Bool

super-held?

Check whether Super/Command was held when the message was created

Msg -> Bool

char-typed?

Check if a character was typed (for text input) Returns Some char-string if a character was typed, None otherwise

Msg -> Option String

char-pressed?

Check if a character was typed this frame Returns Some char-code if typed, None otherwise

Msg -> Option Int

mouse-clicked?

Check if a mouse button was clicked this frame Returns Some {x, y, button} if clicked, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

mouse-down?

Check if a mouse button is currently held down Returns Some {x, y, button} if held, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

mouse-released?

Check if a mouse button was released this frame Returns Some {x, y, button} if released, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

mouse-moved?

Check if the mouse moved this frame Returns Some {x, y} if moved, None otherwise

Msg -> Option {x: Int, y: Int}

mouse-wheel?

Check if the mouse wheel was scrolled Returns Some delta if scrolled, None otherwise

Msg -> Option Float

link-clicked?

Check if a link was clicked this frame. Returns Some URL if the runtime emitted a link-clicked message.

Msg -> Option String

is-tick?

Check if this is a tick message (timing update)

Msg -> Bool

get-tick-dt

Get the delta time from a tick message

Msg -> Float

is-frame-tick?

Check if this is a frame tick message

Msg -> Bool

collect-interaction-messages

Collect callback messages from interactive widgets in an Element tree.

Element -> List Msg -> Int -> Int -> Float -> {hovered-ids: List String, visible-ids: List String, tooltip-hover-starts: List {id: String, since: Float}, tooltip-visible-ids: List String, mouse-x: Int, mouse-y: Int} -> {messages: List Msg, state: {hovered-ids: List String, visible-ids: List String, tooltip-hover-starts: List {id: String, since: Float}, tooltip-visible-ids: List String, mouse-x: Int, mouse-y: Int}}

apply-tooltip-visibility

Apply interaction-derived visual state onto an Element tree. Tooltip visibility is applied from the snapshot, and pane grids auto-fill their hovered divider when they have not set one explicitly.

Element -> {tooltip-visible-ids: List String, mouse-x: Int, mouse-y: Int} -> Element

recommended-mouse-cursor

Return the runtime-recommended mouse cursor for a decorated element tree. Pane grids contribute resize cursors from their hovered or active divider.

Element -> Int

recommended-mouse-cursor-at

Return the runtime-recommended mouse cursor at the current pointer position. This adds offset-aware link and text-field cursors on top of the decorated-tree pane-grid cursor handling.

Element -> Int -> Int -> Int -> Int -> Int

text-editor-lines

Split text into lines

String -> List String

text-editor-line-count

Count number of lines in text

String -> Int

text-editor-get-line

Get a specific line (0-indexed), returns empty string if out of bounds

String -> Int -> String

text-editor-line-length

Get line length

String -> Int -> Int

text-editor-insert-char

Insert character at cursor position

String -> Int -> Int -> String -> String

text-editor-insert-newline

Insert newline at cursor position

String -> Int -> Int -> String

text-editor-delete-before

Delete character before cursor (backspace)

String -> Int -> Int -> String

text-editor-delete-at

Delete character at cursor (delete key)

String -> Int -> Int -> String

text-editor-cursor-left

Move cursor left, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

text-editor-cursor-right

Move cursor right, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

text-editor-cursor-up

Move cursor up, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

text-editor-cursor-down

Move cursor down, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

text-editor-cursor-home

Move cursor to start of line (Home key)

Int -> {line: Int, col: Int}

text-editor-cursor-end

Move cursor to end of line (End key)

String -> Int -> {line: Int, col: Int}

text-editor-clicked?

Check if text editor was clicked

Msg -> Int -> Int -> Int -> Int -> Option {x: Int, y: Int}

text-editor-click-to-cursor

Calculate cursor position from click Returns {line, col} based on click position

String -> Int -> Int -> Int -> Int -> Int -> Int -> {line: Int, col: Int}

text-editor-state-update

Update text editor text, cursor, scroll, and focus state from a message

Msg -> Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Int -> {text: String, line: Int, col: Int, scroll-y: Int, is-focused?: Bool}

text-editor-handle-key

Handle keyboard input for text editor Returns Some {text, line, col} if input was handled, None otherwise

Msg -> String -> Int -> Int -> Bool -> Int -> Int -> Option {text: String, line: Int, col: Int}

text-editor-scroll-to-cursor

Calculate scroll needed to keep cursor visible

Int -> Int -> Int -> Int -> Int

text-editor-cursor-page-up

Move the cursor upward by one editor viewport while preserving column when possible.

String -> Int -> Int -> Int -> Int -> {line: Int, col: Int}

text-editor-cursor-page-down

Move the cursor upward by one editor viewport while preserving column when possible.

String -> Int -> Int -> Int -> Int -> {line: Int, col: Int}

cmd-none

No-op command - use when no side effect is needed

() -> Cmd

cmd-batch

Batch multiple commands together

List Cmd -> Cmd

cmd-random

Generate a random integer between min and max (inclusive)

Int -> Int -> Cmd

cmd-get-time

Get current time in seconds since program start

() -> Cmd

no-cmd

Wrap a model with no command

Model -> {model: Model, cmd: Cmd}

with-cmd

Wrap a model with a command

Model -> Cmd -> {model: Model, cmd: Cmd}

cmd-random-result?

Match a random command result Returns Some value if this is a random result, None otherwise

Msg -> Option Int

cmd-time-result?

Match a time command result Returns Some time if this is a time result, None otherwise

Msg -> Option Float

make-cmd-msg

Create a command result message

String -> Int -> Float -> Msg

execute-cmd

Execute a command and return any resulting messages

Cmd -> List Msg

execute-cmd-batch

Execute a batch of commands

List Cmd -> List Msg

is-cmd-none?

Check if a command is CmdNone

Cmd -> Bool

combine-cmds

Combine two commands into one

Cmd -> Cmd -> Cmd

make-cmd-batch

Create a batch from two commands

Cmd -> Cmd -> Cmd

rasterize

Rasterize an SVG file to a PNG cache path.

String -> Int -> Int -> String -> Result String String

scrollbar-width

Scrollbar width in pixels

scrollable-scroll?

Check if mouse wheel was used within scrollable bounds Returns Some {dx, dy} if scrolling occurred within bounds, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option {dx: Float, dy: Float}

scroll-clamp

Calculate new scroll offset, clamping to valid range

Int -> Float -> Int -> Int -> Int

scrollable-update-scroll-y

Update vertical scroll based on mouse wheel within bounds Returns Some new-scroll-y if scroll changed, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

scrollable-update-scroll-x

Update horizontal scroll based on mouse wheel within bounds Returns Some new-scroll-x if scroll changed, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

scrollable-in-bounds?

Check if a point is within a scrollable's viewport

Int -> Int -> Int -> Int -> Int -> Int -> Bool

scrollable-arrow-key-scroll?

Check for arrow/page key scrolling Returns Some scroll-delta if scroll key pressed, None otherwise

Msg -> Option Int

scrollable-arrow-scroll

Update scroll based on arrow keys Returns Some new-scroll if changed, None otherwise

Msg -> Int -> Int -> Int -> Option Int

scrollbar-track-clicked?

Check if mouse is clicking on the vertical scrollbar track Returns Some scroll-y if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

scrollbar-drag?

Check if mouse is dragging the scrollbar (mouse button held) Returns Some new-scroll if dragging within scrollbar area, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Option Int

scrollbar-drag-ended?

Check if scrollbar drag should end (mouse released)

Msg -> Bool

tea-step

Run a single TEA iteration: given an event, update the model and return view JSON. This is designed to be called from JavaScript on each event.

JSONValue -> a -> (Msg -> a -> a) -> (a -> Element) -> {model: a, view-json: String}

tea-init

Initialize a TEA app and return the initial view JSON.

(() -> a) -> (a -> Element) -> {model: a, view-json: String}

tea-batch

Process multiple events and return final view JSON. Useful for batching events between frames.

List JSONValue -> a -> (Msg -> a -> a) -> (a -> Element) -> {model: a, view-json: String}

frame-tick-event

Create a frame tick event JSON (sent each animation frame)

Float -> JSONValue

key-pressed-event-with-modifiers

Create a key pressed event JSON

Int -> Bool -> Bool -> Bool -> Bool -> JSONValue

key-pressed-event

Create a key pressed event JSON with no modifiers.

Int -> JSONValue

key-down-event-with-modifiers

Create a key down (held) event JSON

Int -> Bool -> Bool -> Bool -> Bool -> JSONValue

key-down-event

Create a key down (held) event JSON with no modifiers.

Int -> JSONValue

mouse-clicked-event

Create a mouse clicked event JSON

Int -> Int -> Int -> JSONValue

mouse-moved-event

Create a mouse moved event JSON

Int -> Int -> JSONValue

mouse-wheel-event

Create a mouse wheel event JSON

Float -> JSONValue

print-view

Print element JSON to stdout (for WASM output capture)

Element -> ()

print-tea-result

Print a TEA result as JSON with both model indicator and view

Element -> ()

element-to-json

Convert an Element to its JSON representation. This enables rendering Element trees in external runtimes like JavaScript.

Element -> JSONValue

pane-layout-state-to-json

Convert pane-layout state to JSON without serializing pane content. This is intended for persisted split ratios/collapse state.

PaneLayout -> JSONValue

pane-layout-state-to-json-string

Convert pane-layout state to a JSON string.

PaneLayout -> String

apply-pane-layout-state

Apply persisted pane-layout state to an existing layout tree. Split ids are used as stable identity. Pane content stays untouched.

PaneLayout -> JSONValue -> Result PaneLayout String

apply-pane-layout-state-from-json-string

Apply persisted pane-layout state from a JSON string to an existing layout tree.

PaneLayout -> String -> Result PaneLayout String

msg-from-json

Parse a Msg from JSON (from JavaScript events) Returns a Msg record with default values for missing fields.

JSONValue -> Msg

element-to-json-string

Convert an Element to a JSON string

Element -> String

msg-from-json-string

Parse a Msg from a JSON string

String -> Result Msg String

render

Render an Element tree to the screen

Element -> ()

render-list

List Element -> ()

mouse-left

Left mouse button (button 0)

mouse-right

Right mouse button (button 1)

mouse-middle

Middle mouse button (button 2)

key-up

Up arrow key

key-down

Down arrow key

key-left

Left arrow key

key-right

Right arrow key

key-space

Space bar key

key-enter

Enter/Return key

key-escape

Escape key

key-backspace

Backspace key

key-delete

Delete key

key-tab

Tab key

key-page-up

Page Up key

key-page-down

Page Down key

key-shift

Shift modifier key

key-ctrl

Control modifier key

key-alt

Alt modifier key

get-platform

Get the current platform identifier Returns "desktop", "web", or "unknown"

() -> String

LogFormat

Log output formats for Raylib trace logging

Cmd

Commands represent side effects that can be triggered from update functions.

Sub

Subscriptions represent declarative event streams.

WidgetStatus

Widget interaction status for hover/disabled states Used by widgets to render differently based on user interaction

GradientDir

Gradient direction for linear gradients

Gradient

Gradient fill for backgrounds

Length

Length specifies how an element should be sized

Alignment

Alignment specifies how children are positioned within a container

TooltipPosition

Position for tooltip display relative to content

ContentFit

How an image should be scaled to fit its container

CanvasOp

Operations for custom 2D drawing in a Canvas element

MouseButton

Mouse button identifiers for MouseArea events

PaneLayout

Layout structure for pane grid - supports recursive splits

QrErrorCorrection

Error correction level for QR codes

Element

Elements are declarative descriptions of what to render. Widgets with 'radius' field support rounded corners (0.0 = sharp, 1.0 = fully rounded). Widgets with shadow fields (shadow-x, shadow-y, shadow-blur, shadow-color) support drop shadows. Shadow fields: shadow-x/y = offset in pixels, shadow-blur = blur amount (0 = hard shadow), shadow-color = shadow color with alpha (use rgba for semi-transparent shadows).

Styleable

Styleable - Compute a style from a theme and widget status

Widgets that implement Styleable can derive their visual appearance from a Theme and their current interaction status.

extend MyButton with Styleable
  style = fn(theme, status) =>
    match status
      | StatusActive -> {bg: theme.primary, fg: theme.primary-text}
      | StatusHovered -> {bg: theme.primary-hover, fg: theme.primary-text}
      | StatusDisabled -> {bg: theme.surface, fg: theme.text-disabled}

Statusable

Statusable - Compute widget status from interaction state

Widgets that implement Statusable can determine their current interaction status (active, hovered, disabled) from input state.

extend MyWidget with Statusable
  compute-status = fn(is-enabled?, is-hovered?) =>
    if not is-enabled? then StatusDisabled
    else if is-hovered? then StatusHovered
    else StatusActive

Measurable

Measurable - Calculate the size of an element

Types that implement Measurable can report their dimensions. This is useful for layout calculations and hit testing.

extend MyWidget with Measurable
  measure = fn(widget) => {w: widget.width, h: widget.height}

Renderable

Renderable - Convert a value to a renderable Element

Types that implement Renderable can be converted to Element for display. This is the core trait for the view layer of TEA.

extend MyWidget with Renderable
  render = fn(widget) =>
    Button{
      x: widget.x, y: widget.y, w: widget.w, h: widget.h,
      label: widget.label, bg: widget.bg, fg: widget.fg,
      border-color: widget.border, radius: widget.radius,
      shadow-x: 0, shadow-y: 0, shadow-blur: 0, shadow-color: 0,
      font: None
    }

LogJson

Export constructor LogJson.

LogPretty

Export constructor LogPretty.

LogFile

Export constructor LogFile.

LogNone

Export constructor LogNone.

CmdNone

Export constructor CmdNone.

CmdBatch

Export constructor CmdBatch.

CmdRandomInt

Export constructor CmdRandomInt.

CmdGetTime

Export constructor CmdGetTime.

SubNone

Export constructor SubNone.

SubTimer

Export constructor SubTimer.

SubWindowResize

Export constructor SubWindowResize.

SubWindowFocus

Export constructor SubWindowFocus.

SubBatch

Export constructor SubBatch.

StatusActive

Export constructor StatusActive.

StatusHovered

Export constructor StatusHovered.

StatusDisabled

Export constructor StatusDisabled.

Horizontal

Export constructor Horizontal.

Vertical

Export constructor Vertical.

Diagonal

Export constructor Diagonal.

DiagonalReverse

Export constructor DiagonalReverse.

GradientNone

Export constructor GradientNone.

LinearGradient

Export constructor LinearGradient.

RadialGradient

Export constructor RadialGradient.

Fill

Export constructor Fill.

Shrink

Export constructor Shrink.

Fixed

Export constructor Fixed.

FillPortion

Export constructor FillPortion.

Start

Export constructor Start.

Center

Export constructor Center.

End

Export constructor End.

TooltipTop

Export constructor TooltipTop.

TooltipBottom

Export constructor TooltipBottom.

TooltipLeft

Export constructor TooltipLeft.

TooltipRight

Export constructor TooltipRight.

TooltipFollowCursor

Export constructor TooltipFollowCursor.

FitContain

Export constructor FitContain.

FitCover

Export constructor FitCover.

FitFill

Export constructor FitFill.

FitNone

Export constructor FitNone.

FitScaleDown

Export constructor FitScaleDown.

CanvasLine

Export constructor CanvasLine.

CanvasRect

Export constructor CanvasRect.

CanvasRectRounded

Export constructor CanvasRectRounded.

CanvasCircle

Export constructor CanvasCircle.

CanvasArc

Export constructor CanvasArc.

CanvasTriangle

Export constructor CanvasTriangle.

CanvasPolygon

Export constructor CanvasPolygon.

CanvasText

Export constructor CanvasText.

CanvasPath

Export constructor CanvasPath.

CanvasTranslate

Export constructor CanvasTranslate.

CanvasRotate

Export constructor CanvasRotate.

CanvasScale

Export constructor CanvasScale.

MouseLeft

Export constructor MouseLeft.

MouseRight

Export constructor MouseRight.

MouseMiddle

Export constructor MouseMiddle.

PaneLayout

Export constructor PaneLayout.

PaneSingle

Export constructor PaneSingle.

PaneSplitH

Export constructor PaneSplitH.

PaneSplitV

Export constructor PaneSplitV.

QrLow

Export constructor QrLow.

QrMedium

Export constructor QrMedium.

QrQuartile

Export constructor QrQuartile.

QrHigh

Export constructor QrHigh.

Rect-Fill

Export constructor Rect-Fill.

Rect-Outline

Export constructor Rect-Outline.

Rect-Rounded

Export constructor Rect-Rounded.

Rect-Rounded-Outline

Export constructor Rect-Rounded-Outline.

Rect-Gradient

Export constructor Rect-Gradient.

Rect-Gradient-Rounded

Export constructor Rect-Gradient-Rounded.

Circle-Fill

Export constructor Circle-Fill.

Circle-Outline

Export constructor Circle-Outline.

Line

Export constructor Line.

Text

Export constructor Text.

Triangle

Export constructor Triangle.

Polygon

Export constructor Polygon.

Group

Export constructor Group.

Empty

Export constructor Empty.

Row

Export constructor Row.

Column

Export constructor Column.

Container

Export constructor Container.

Spacer

Export constructor Spacer.

RuleH

Export constructor RuleH.

RuleV

Export constructor RuleV.

Button

Export constructor Button.

ProgressBar

Export constructor ProgressBar.

Checkbox

Export constructor Checkbox.

CheckboxStyled

Export constructor CheckboxStyled.

Slider

Export constructor Slider.

Toggler

Export constructor Toggler.

Radio

Export constructor Radio.

TextInput

Export constructor TextInput.

PickList

Export constructor PickList.

TextEditor

Export constructor TextEditor.

Sized

Export constructor Sized.

Scrollable

Export constructor Scrollable.

ButtonGradient

Export constructor ButtonGradient.

ProgressBarGradient

Export constructor ProgressBarGradient.

SliderGradient

Export constructor SliderGradient.

Grid

Export constructor Grid.

Stack

Export constructor Stack.

Tooltip

Export constructor Tooltip.

Canvas

Export constructor Canvas.

Image

Export constructor Image.

MouseArea

Export constructor MouseArea.

Menu

Export constructor Menu.

Float

Export constructor Float.

Pin

Export constructor Pin.

RichText

Export constructor RichText.

ComboBox

Export constructor ComboBox.

Svg

Export constructor Svg.

KeyedColumn

Export constructor KeyedColumn.

Lazy

Export constructor Lazy.

Sensor

Export constructor Sensor.

Table

Export constructor Table.

Responsive

Export constructor Responsive.

VerticalSlider

Export constructor VerticalSlider.

ImageViewer

Export constructor ImageViewer.

PaneGrid

Export constructor PaneGrid.

Markdown

Export constructor Markdown.

Shader

Export constructor Shader.

QrCode

Export constructor QrCode.

point-in-rect?

Check if a point is inside a rectangle

Int -> Int -> Int -> Int -> Int -> Int -> Bool

rects-overlap?

Check if two rectangles overlap

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool

clamp

Clamp a value between min and max

a -> a -> a -> a

lerp

Linear interpolation

Float -> Float -> Float -> Float

screen-width

Get screen dimensions (must be called after run starts)

() -> Int

screen-height

() -> Int

white

White color (0xFFFFFFFF)

black

Black color (0x000000FF)

red

Red color (0xFF0000FF)

green

Green color (0x00FF00FF)

blue

Blue color (0x0000FFFF)

yellow

Yellow color (0xFFFF00FF)

orange

Orange color

pink

Pink color

purple

Purple color

gray

Gray color

lightgray

Light gray color

darkgray

Dark gray color

gold

Gold color

skyblue

Sky blue color

rgb

Create a custom color from RGB values

Int -> Int -> Int -> Int

rgba

Create a custom color from RGBA values

Int -> Int -> Int -> Int -> Int

key-up

Up arrow key code

key-down

Down arrow key code

key-left

Left arrow key code

key-right

Right arrow key code

key-space

Space bar key code

key-enter

Enter/Return key code

key-escape

Escape key code

key-w

W key code

key-a

A key code

key-s

S key code

key-d

D key code

key-q

Q key code

key-e

E key code

key-r

R key code

key-f

F key code

key-p

P key code

key-c

C key code

key-x

X key code

key-z

Z key code

key-v

V key code

mouse-left

Left mouse button

mouse-right

Right mouse button

mouse-middle

Middle mouse button

rect

Create a filled rectangle

Int -> Int -> Int -> Int -> Int -> Element

rect-outline

Create a rectangle outline

Int -> Int -> Int -> Int -> Int -> Element

rect-rounded

Create a filled rounded rectangle radius is a value from 0.0 (sharp corners) to 1.0 (fully rounded)

Int -> Int -> Int -> Int -> Float -> Int -> Element

rect-rounded-outline

Create a rounded rectangle outline radius is a value from 0.0 (sharp corners) to 1.0 (fully rounded)

Int -> Int -> Int -> Int -> Float -> Int -> Element

rect-gradient

Create a gradient-filled rectangle

Int -> Int -> Int -> Int -> Gradient -> Element

rect-gradient-rounded

Create a rounded gradient-filled rectangle

Int -> Int -> Int -> Int -> Float -> Gradient -> Element

gradient-horizontal

Create a horizontal linear gradient

Int -> Int -> Gradient

gradient-vertical

Create a vertical linear gradient

Int -> Int -> Gradient

gradient-diagonal

Create a diagonal linear gradient (top-left to bottom-right)

Int -> Int -> Gradient

gradient-diagonal-reverse

Create a reverse diagonal linear gradient (top-right to bottom-left)

Int -> Int -> Gradient

gradient-radial

Create a radial gradient (center uses default center of element)

Int -> Int -> Gradient

gradient-radial-at

Create a radial gradient with custom center

Int -> Int -> Int -> Int -> Gradient

gradient-none

No gradient (solid color fallback)

() -> Gradient

circle

Create a filled circle

Int -> Int -> Float -> Int -> Element

circle-outline

Create a circle outline

Int -> Int -> Float -> Int -> Element

line

Create a line

Int -> Int -> Int -> Int -> Int -> Element

text

Create text (uses default font)

Int -> Int -> Int -> Int -> String -> Element

text-with-font

Create text with custom font font should be a font record from Raylib.load-font-ex (with ptr field)

Int -> Int -> Int -> Int -> String -> {ptr: Ptr} -> Element

text-styled

Create text with custom font and spacing font-ptr-opt should be Option Ptr (raw font pointer)

Int -> Int -> Int -> Int -> String -> Option Ptr -> Float -> Element

triangle

Create a triangle

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Element

polygon

Create a regular polygon

Int -> Int -> Int -> Float -> Float -> Int -> Element

group

Group multiple elements together

List Element -> Element

empty

Empty element (renders nothing)

() -> Element

row

Create a horizontal row of elements

Int -> Int -> Int -> Int -> List Element -> Element

row-spaced

Create a horizontal row with custom spacing

Int -> Int -> Int -> Int -> Int -> List Element -> Element

row-aligned

Create a horizontal row with alignment (cross-axis: Start=top, Center=middle, End=bottom)

Int -> Int -> Int -> Int -> Int -> Alignment -> List Element -> Element

column

Create a vertical column of elements

Int -> Int -> Int -> Int -> List Element -> Element

column-spaced

Create a vertical column with custom spacing

Int -> Int -> Int -> Int -> Int -> List Element -> Element

column-aligned

Create a vertical column with alignment (cross-axis: Start=left, Center=middle, End=right)

Int -> Int -> Int -> Int -> Int -> Alignment -> List Element -> Element

container

Create a container wrapping a single element

Int -> Int -> Int -> Int -> Element -> Element

container-padded

Create a container with padding

Int -> Int -> Int -> Int -> Int -> Element -> Element

container-aligned

Create a container with alignment (Start=top-left, Center=center, End=bottom-right)

Int -> Int -> Int -> Int -> Int -> Alignment -> Element -> Element

spacer

Create a spacer element

Int -> Int -> Element

sized

Wrap an element with explicit dimensions (useful in layouts)

Int -> Int -> Element -> Element

rule-horizontal

Create a horizontal rule (divider line) x, y: position, length: width of the line, thickness: height of the line

Int -> Int -> Int -> Int -> Int -> Element

rule-vertical

Create a vertical rule (divider line) x, y: position, length: height of the line, thickness: width of the line

Int -> Int -> Int -> Int -> Int -> Element

rule-h

Create a horizontal rule with default thickness (1 pixel)

Int -> Int -> Int -> Int -> Element

rule-v

Create a vertical rule with default thickness (1 pixel)

Int -> Int -> Int -> Int -> Element

button

Create a button with default style (gray background, white text, rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Element

button-with-font

Create a button with custom font

Int -> Int -> Int -> Int -> String -> Option Ptr -> Element

button-styled

Create a button with custom colors and radius (no shadow) radius: 0.0 = sharp corners, 0.5 = moderate rounding, 1.0 = pill shape

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Element

button-styled-with-font

Create a button with custom colors, radius, and font (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Option Ptr -> Element

button-with-shadow

Create a button with custom colors, radius, and shadow shadow-x/y: offset in pixels, shadow-blur: blur amount (0 = hard), shadow-color: color with alpha

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

progress-bar

Create a progress bar with default style (dark gray background, green fill, rounded, no shadow)

Int -> Int -> Int -> Int -> Float -> Element

progress-bar-styled

Create a progress bar with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Float -> Int -> Int -> Float -> Element

progress-bar-with-shadow

Create a progress bar with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Float -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

slider

Create a slider with default style (gray background, white handle, rounded track, no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Element

slider-styled

Create a slider with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Element

slider-with-shadow

Create a slider with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

toggler

Create a toggler (on/off switch) with default style (pill-shaped track, no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Element

toggler-with-font

Create a toggler with custom font

Int -> Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

toggler-styled

Create a toggler with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

toggler-styled-with-font

Create a toggler with custom colors, radius, and font (no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Option Ptr -> Element

toggler-with-shadow

Create a toggler with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

checkbox

Create a checkbox with default style (white foreground)

Int -> Int -> Int -> Bool -> String -> Element

checkbox-with-font

Create a checkbox with custom font

Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

checkbox-styled

Create a checkbox with custom color

Int -> Int -> Int -> Bool -> String -> Int -> Element

checkbox-styled-with-font

Create a checkbox with custom color and font

Int -> Int -> Int -> Bool -> String -> Int -> Option Ptr -> Element

checkbox-enhanced

Create an enhanced checkbox with full styling and status status: StatusActive, StatusHovered, or StatusDisabled style: CheckboxStyle record with all color/border settings

Int -> Int -> Int -> Bool -> String -> WidgetStatus -> CheckboxStyle -> Option Ptr -> Element

checkbox-with-status

Create an enhanced checkbox with default style Useful when you only need status handling without custom colors

Int -> Int -> Int -> Bool -> String -> WidgetStatus -> Option Ptr -> Element

radio

Create a radio button with default style (white foreground)

Int -> Int -> Int -> Bool -> String -> Element

radio-with-font

Create a radio button with custom font

Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

radio-styled

Create a radio button with custom color

Int -> Int -> Int -> Bool -> String -> Int -> Element

radio-styled-with-font

Create a radio button with custom color and font

Int -> Int -> Int -> Bool -> String -> Int -> Option Ptr -> Element

text-input

Create a text input with default style (rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Element

text-input-with-font

Create a text input with custom font

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Option Ptr -> Element

text-input-styled

Create a text input with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

text-input-with-shadow

Create a text input with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

pick-list

Create a pick list with default style (rounded corners, no shadow)

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Element

pick-list-styled

Create a pick list with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

pick-list-with-shadow

Create a pick list with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

text-editor

Create a multi-line text editor (rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Element

text-editor-with-font

Create a multi-line text editor with custom font

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Option Ptr -> Element

text-editor-styled

Create a text editor with custom styling and radius (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Int -> Int -> Int -> Int -> Float -> Element

text-editor-with-shadow

Create a text editor with custom styling, radius, and shadow

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Int -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

scrollable

Create a scrollable area

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

scrollable-vertical

Create a vertical scrollable area (only scrolls vertically)

Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

scrollable-horizontal

Create a horizontal scrollable area (only scrolls horizontally)

Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

button-gradient

Create a button with gradient background (no shadow)

Int -> Int -> Int -> Int -> String -> Gradient -> Element

button-gradient-styled

Create a button with gradient background and custom styling (no shadow)

Int -> Int -> Int -> Int -> String -> Gradient -> Int -> Int -> Float -> Element

button-gradient-with-shadow

Create a button with gradient background, custom styling, and shadow

Int -> Int -> Int -> Int -> String -> Gradient -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

progress-bar-gradient

Create a progress bar with gradient fill (no shadow)

Int -> Int -> Int -> Int -> Float -> Gradient -> Element

progress-bar-gradient-styled

Create a progress bar with gradient fill and custom styling (no shadow)

Int -> Int -> Int -> Int -> Float -> Int -> Gradient -> Float -> Element

progress-bar-gradient-with-shadow

Create a progress bar with gradient fill, custom styling, and shadow

Int -> Int -> Int -> Int -> Float -> Int -> Gradient -> Float -> Int -> Int -> Int -> Int -> Element

slider-gradient

Create a slider with gradient handle (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Gradient -> Element

slider-gradient-styled

Create a slider with gradient handle and custom styling (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Gradient -> Float -> Element

slider-gradient-with-shadow

Create a slider with gradient handle, custom styling, and shadow

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Gradient -> Float -> Int -> Int -> Int -> Int -> Element

grid

Create a grid layout with default settings columns: number of columns, spacing: gap between cells cell-aspect: aspect ratio of cells (1.0 = square, 2.0 = twice as wide as tall)

Int -> Int -> Int -> Int -> Int -> List Element -> Element

grid-spaced

Create a grid layout with custom spacing

Int -> Int -> Int -> Int -> Int -> Int -> List Element -> Element

grid-styled

Create a grid layout with custom spacing and cell aspect ratio

Int -> Int -> Int -> Int -> Int -> Int -> Float -> List Element -> Element

stack

Create a stack layout (layers children on top of each other) First child is bottom layer, last child is top layer

Int -> Int -> Int -> Int -> List Element -> Element

stack-clipped

Create a stack layout with clipping enabled Content extending beyond bounds will be clipped

Int -> Int -> Int -> Int -> List Element -> Element

tooltip

Create a tooltip that appears on hover (positioned above content)

Int -> Int -> Element -> Element -> Element

tooltip-positioned

Create a tooltip with custom position

Int -> Int -> Element -> Element -> TooltipPosition -> Element

tooltip-styled

Create a tooltip with custom position, gap, and delay

Int -> Int -> Element -> Element -> TooltipPosition -> Int -> Int -> Element

tooltip-full

Create a tooltip with full customization

Int -> Int -> Element -> Element -> TooltipPosition -> Int -> Int -> Bool -> Int -> Int -> Float -> Element

canvas

Create a canvas for custom 2D drawing

Int -> Int -> Int -> Int -> List CanvasOp -> Element

canvas-with-bg

Create a canvas with a background color

Int -> Int -> Int -> Int -> Int -> List CanvasOp -> Element

canvas-line

Draw a line in a canvas

Int -> Int -> Int -> Int -> Int -> Int -> CanvasOp

canvas-rect

Draw a filled rectangle in a canvas

Int -> Int -> Int -> Int -> Int -> CanvasOp

canvas-rect-outline

Draw a rectangle outline in a canvas

Int -> Int -> Int -> Int -> Int -> CanvasOp

canvas-rect-rounded

Draw a filled rounded rectangle in a canvas

Int -> Int -> Int -> Int -> Int -> Float -> CanvasOp

canvas-rect-rounded-outline

Draw a rounded rectangle outline in a canvas

Int -> Int -> Int -> Int -> Int -> Float -> CanvasOp

canvas-circle

Draw a filled circle in a canvas

Int -> Int -> Float -> Int -> CanvasOp

canvas-circle-outline

Draw a circle outline in a canvas

Int -> Int -> Float -> Int -> CanvasOp

canvas-arc

Draw an arc in a canvas

Int -> Int -> Float -> Float -> Float -> Int -> Int -> CanvasOp

canvas-triangle

Draw a filled triangle in a canvas

Int -> Int -> Int -> Int -> Int -> Int -> Int -> CanvasOp

canvas-triangle-outline

Draw a triangle outline in a canvas

Int -> Int -> Int -> Int -> Int -> Int -> Int -> CanvasOp

canvas-polygon

Draw a filled regular polygon in a canvas

Int -> Int -> Int -> Float -> Float -> Int -> CanvasOp

canvas-polygon-outline

Draw a regular polygon outline in a canvas

Int -> Int -> Int -> Float -> Float -> Int -> CanvasOp

canvas-text

Draw text in a canvas

Int -> Int -> String -> Int -> Int -> CanvasOp

canvas-path

Draw a path (series of connected lines) in a canvas

List Point -> Int -> Int -> Bool -> CanvasOp

point

Create a point for canvas paths

Int -> Int -> Point

canvas-translate

Apply translation transform to canvas operations

Int -> Int -> List CanvasOp -> CanvasOp

canvas-rotate

Apply rotation transform to canvas operations angle is in radians, rotates around (cx, cy)

Float -> Int -> Int -> List CanvasOp -> CanvasOp

canvas-scale

Apply scale transform to canvas operations scales around (cx, cy)

Float -> Float -> Int -> Int -> List CanvasOp -> CanvasOp

image

Create an image element with default settings (contain fit)

Int -> Int -> Int -> Int -> NonEmptyString -> Element

image-fit

Create an image element with custom content fit

Int -> Int -> Int -> Int -> NonEmptyString -> ContentFit -> Element

image-styled

Create an image element with full customization

Int -> Int -> Int -> Int -> NonEmptyString -> ContentFit -> UnitFloat -> Float -> Float -> Element

mouse-area

Create a mouse area that captures click events on-press and on-release are message identifiers (strings)

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Element

mouse-area-hover

Create a mouse area with hover events

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Option String -> Option String -> Element

mouse-area-full

Create a mouse area with all events including move

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Option String -> Option String -> Option String -> Element

menu

Create a dropdown menu

Int -> Int -> Int -> List String -> Element

menu-with-state

Create a dropdown menu with initial selection

Int -> Int -> Int -> List String -> Int -> Bool -> Element

menu-styled

Create a dropdown menu with custom styling

Int -> Int -> Int -> List String -> Int -> Bool -> Int -> Int -> Int -> Int -> Int -> Float -> Int -> Element

menu-full

Create a dropdown menu with explicit hovered and selected state

Int -> Int -> Int -> List String -> Int -> Int -> Bool -> Int -> Int -> Int -> Int -> Int -> Float -> Int -> Element

float

Create a float container with offset

Int -> Int -> Int -> Int -> Element -> Int -> Int -> Element

float-scaled

Create a float container with offset and scale

Int -> Int -> Int -> Int -> Element -> Int -> Int -> Float -> Element

pin

Create a pin container that positions child at fixed coordinates

Int -> Int -> Int -> Int -> Element -> Int -> Int -> Element

pin-origin

Create a pin container at the origin

Int -> Int -> Int -> Int -> Element -> Element

text-style-plain

Create a plain text style (no formatting)

() -> TextStyle

text-style-bold

Create a bold text style

() -> TextStyle

text-style-italic

Create an italic text style

() -> TextStyle

text-style-colored

Create a colored text style

Int -> TextStyle

text-style-link

Create a link text style

String -> TextStyle

text-style

Create a custom text style

Bool -> Bool -> Bool -> Option Int -> Option String -> TextStyle

span

Create a text span with plain style

String -> TextSpan

span-styled

Create a text span with custom style

String -> TextStyle -> TextSpan

span-bold

Create a bold text span

String -> TextSpan

span-italic

Create an italic text span

String -> TextSpan

span-colored

Create a colored text span

String -> Int -> TextSpan

span-link

Create a link text span

String -> NonEmptyString -> TextSpan

rich-text

Create rich text from spans

Int -> Int -> List TextSpan -> Int -> Element

rich-text-styled

Create rich text with custom line height

Int -> Int -> List TextSpan -> Int -> Int -> Element

rich-text-full

Create rich text with custom line height and default color

Int -> Int -> List TextSpan -> Int -> Int -> Int -> Element

combo-box

Create a combo box (searchable dropdown)

Int -> Int -> Int -> Int -> List String -> String -> Element

combo-box-with-state

Create a combo box with initial text and selection

Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Bool -> Bool -> Element

combo-box-with-full-state

Create a combo box with full state including keyboard highlight.

Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Int -> Bool -> Bool -> Element

combo-box-styled

Create a combo box with full styling

Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Bool -> Bool -> String -> Int -> Int -> Int -> Float -> Element

combo-box-styled-full

Create a fully styled combo box with explicit keyboard highlight state.

Int -> Int -> Int -> Int -> List String -> String -> Int -> Int -> Int -> Bool -> Bool -> String -> Int -> Int -> Int -> Float -> Element

svg

Create an SVG element from a file path

Int -> Int -> Int -> Int -> NonEmptyString -> Element

svg-colored

Create an SVG element with a color override

Int -> Int -> Int -> Int -> NonEmptyString -> Int -> Element

svg-styled

Create an SVG element with full styling

Int -> Int -> Int -> Int -> NonEmptyString -> Option Int -> UnitFloat -> Float -> Element

keyed-column

Create a keyed column with stable child keys Keys are preserved for backend-specific identity handling.

Int -> Int -> Int -> Int -> List String -> List Element -> Element

keyed-column-spaced

Create a keyed column with spacing

Int -> Int -> Int -> Int -> List String -> List Element -> Int -> Element

keyed-column-styled

Create a keyed column with spacing and alignment

Int -> Int -> Int -> Int -> List String -> List Element -> Int -> Alignment -> Element

lazy

Create a lazy container (deferred rendering)

Int -> Int -> Int -> Int -> Element -> Element

sensor

Create a sensor for visibility detection

Int -> Int -> Int -> Int -> Element -> Element

sensor-anticipating

Create a sensor with an anticipation distance

Int -> Int -> Int -> Int -> Element -> NonNegativeInt -> Element

sensor-threshold

Create a sensor with a minimum visible ratio

Int -> Int -> Int -> Int -> Element -> UnitFloat -> Element

sensor-threshold-anticipating

Create a sensor with a minimum visible ratio and anticipation distance

Int -> Int -> Int -> Int -> Element -> UnitFloat -> NonNegativeInt -> Element

sensor-with-callbacks

Create a sensor with visibility callbacks

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Element

sensor-with-events

Create a sensor with visibility and resize callbacks

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Option String -> Element

sensor-with-events-delayed

Create a sensor with visibility and resize callbacks delayed by a fixed time

Int -> Int -> Int -> Int -> Element -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-anticipating-with-callbacks

Create a sensor with visibility callbacks and anticipation distance

Int -> Int -> Int -> Int -> Element -> NonNegativeInt -> Option String -> Option String -> Element

sensor-anticipating-with-events

Create a sensor with visibility, resize callbacks, and anticipation distance

Int -> Int -> Int -> Int -> Element -> NonNegativeInt -> Option String -> Option String -> Option String -> Element

sensor-anticipating-with-events-delayed

Create a sensor with visibility, resize callbacks, anticipation distance, and delay

Int -> Int -> Int -> Int -> Element -> NonNegativeInt -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-threshold-with-callbacks

Create a sensor with a minimum visible ratio and callbacks

Int -> Int -> Int -> Int -> Element -> UnitFloat -> Option String -> Option String -> Element

sensor-threshold-with-events

Create a sensor with thresholded visibility and resize callbacks

Int -> Int -> Int -> Int -> Element -> UnitFloat -> Option String -> Option String -> Option String -> Element

sensor-threshold-with-events-delayed

Create a sensor with thresholded visibility, resize callbacks, and delay

Int -> Int -> Int -> Int -> Element -> UnitFloat -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-threshold-anticipating-with-callbacks

Create a sensor with a minimum visible ratio, callbacks, and anticipation distance

Int -> Int -> Int -> Int -> Element -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Element

sensor-threshold-anticipating-with-events

Create a sensor with thresholded visibility, resize callbacks, and anticipation distance

Int -> Int -> Int -> Int -> Element -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Option String -> Element

sensor-threshold-anticipating-with-events-delayed

Create a sensor with thresholded visibility, resize callbacks, anticipation distance, and delay

Int -> Int -> Int -> Int -> Element -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-full

Create a sensor with full state

Int -> Int -> Int -> Int -> Element -> Bool -> Option String -> Option String -> Element

sensor-full-events

Create a sensor with full state and all callbacks

Int -> Int -> Int -> Int -> Element -> Bool -> Option String -> Option String -> Option String -> Element

sensor-full-events-delayed

Create a sensor with full state, all callbacks, and delay

Int -> Int -> Int -> Int -> Element -> Bool -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-full-threshold

Create a sensor with full state and a minimum visible ratio

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> Option String -> Option String -> Element

sensor-full-threshold-events

Create a sensor with full state, threshold, and all callbacks

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> Option String -> Option String -> Option String -> Element

sensor-full-threshold-events-delayed

Create a sensor with full state, threshold, all callbacks, and delay

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

sensor-full-threshold-anticipating

Create a sensor with full state, a minimum visible ratio, and anticipation distance

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Element

sensor-full-threshold-anticipating-with-events

Create a sensor with full state, threshold, anticipation, and all callbacks

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Option String -> Element

sensor-full-threshold-anticipating-with-events-delayed

Create a sensor with full state, threshold, anticipation, all callbacks, and delay

Int -> Int -> Int -> Int -> Element -> Bool -> UnitFloat -> NonNegativeInt -> Option String -> Option String -> Option String -> NonNegativeInt -> Element

table-column

Create a table column definition

String -> PositiveInt -> TableColumn

table-column-aligned

Create a table column with alignment

String -> PositiveInt -> Alignment -> TableColumn

table

Create a data table

Int -> Int -> Int -> Int -> List TableColumn -> List (List String) -> Element

table-with-height

Create a data table with custom row height

Int -> Int -> Int -> Int -> List TableColumn -> List (List String) -> Int -> Element

table-styled

Create a data table with full styling

Int -> Int -> Int -> Int -> List TableColumn -> List (List String) -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Element

table-stateful

Create a data table with sort and selection state

Int -> Int -> Int -> Int -> List TableColumn -> List (List String) -> Int -> Bool -> Int -> Element

table-styled-stateful

Create a fully styled data table with sort and selection state

Int -> Int -> Int -> Int -> List TableColumn -> List (List String) -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Int -> Element

breakpoint

Create a breakpoint (minimum width -> content)

PositiveInt -> Element -> Breakpoint

responsive

Create a responsive container with breakpoints Breakpoints should be ordered from largest to smallest min-width

Int -> Int -> Int -> Int -> List Breakpoint -> Element -> Element

responsive-two

Create a responsive container with two layouts (mobile/desktop)

Int -> Int -> Int -> Int -> PositiveInt -> Element -> Element -> Element

vertical-slider

Create a vertical slider with default style

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Element

vertical-slider-styled

Create a vertical slider with custom colors and radius

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Element

vertical-slider-with-shadow

Create a vertical slider with shadow

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

image-viewer

Create an image viewer with default settings

Int -> Int -> Int -> Int -> NonEmptyString -> Element

image-viewer-with-state

Create an image viewer with initial scale and offset

Int -> Int -> Int -> Int -> NonEmptyString -> PositiveFloat -> Int -> Int -> Element

image-viewer-styled

Create an image viewer with full customization

Int -> Int -> Int -> Int -> NonEmptyString -> PositiveFloat -> Int -> Int -> PositiveFloat -> PositiveFloat -> Element

image-viewer-full-state

Create an image viewer with explicit interaction state

Int -> Int -> Int -> Int -> NonEmptyString -> PositiveFloat -> Int -> Int -> PositiveFloat -> PositiveFloat -> Bool -> Element

pane-single

Create a single pane layout

Element -> PaneLayout

pane-single-id

Create a single pane layout with an explicit stable id

String -> Element -> PaneLayout

pane-split-h

Create a horizontal split (left/right) ratio is 0.0 to 1.0, representing the left pane's proportion

UnitFloat -> PaneLayout -> PaneLayout -> PaneLayout

pane-split-h-id

Create a horizontal split with an explicit stable id

String -> UnitFloat -> PaneLayout -> PaneLayout -> PaneLayout

pane-split-v

Create a vertical split (top/bottom) ratio is 0.0 to 1.0, representing the top pane's proportion

UnitFloat -> PaneLayout -> PaneLayout -> PaneLayout

pane-split-v-id

Create a vertical split with an explicit stable id

String -> UnitFloat -> PaneLayout -> PaneLayout -> PaneLayout

pane-grid

Create a pane grid with default styling

Int -> Int -> Int -> Int -> PaneLayout -> Element

pane-grid-spaced

Create a pane grid with custom spacing

Int -> Int -> Int -> Int -> PaneLayout -> Int -> Element

pane-grid-styled

Create a pane grid with full customization

Int -> Int -> Int -> Int -> PaneLayout -> Int -> Int -> Int -> Element

pane-grid-with-state

Create a pane grid with explicit hover/active feedback state

Int -> Int -> Int -> Int -> PaneLayout -> Int -> Int -> Int -> Option String -> Option String -> Int -> Element

markdown

Create a markdown renderer with default styling

Int -> Int -> Int -> String -> Element

markdown-sized

Create a markdown renderer with custom font size

Int -> Int -> Int -> String -> Int -> Element

markdown-styled

Create a markdown renderer with full styling

Int -> Int -> Int -> String -> Int -> Int -> Int -> Int -> Int -> Element

shader-uniform

Create a shader uniform

NonEmptyString -> Float -> ShaderUniform

shader-uniform-int

Create an integer shader uniform

NonEmptyString -> Int -> ShaderUniform

shader-uniform-vec2

Create a vec2 shader uniform

NonEmptyString -> Float -> Float -> ShaderUniform

shader-uniform-vec3

Create a vec3 shader uniform

NonEmptyString -> Float -> Float -> Float -> ShaderUniform

shader-uniform-vec4

Create a vec4 shader uniform

NonEmptyString -> Float -> Float -> Float -> Float -> ShaderUniform

shader

Create a shader element

Int -> Int -> Int -> Int -> NonEmptyString -> Element

shader-with-uniforms

Create a shader element with uniforms

Int -> Int -> Int -> Int -> NonEmptyString -> List ShaderUniform -> Element

shader-fragment

Create a shader element from raw fragment source

Int -> Int -> Int -> Int -> NonEmptyString -> Element

shader-fragment-with-uniforms

Create a shader element from raw fragment source with uniforms

Int -> Int -> Int -> Int -> NonEmptyString -> List ShaderUniform -> Element

qr-code

Create a QR code with default styling

Int -> Int -> PositiveInt -> NonEmptyString -> Element

qr-code-colored

Create a QR code with custom colors

Int -> Int -> PositiveInt -> NonEmptyString -> Int -> Int -> Element

qr-code-styled

Create a QR code with full customization

Int -> Int -> PositiveInt -> NonEmptyString -> Int -> Int -> QrErrorCorrection -> Element

run-with-backend

Run a TEA application with a specific backend

Backend -> (() -> a) -> (Msg -> a -> a) -> (a -> Element) -> PositiveInt -> PositiveInt -> NonEmptyString -> ()

PaneLayout

Re-export PaneLayout from types.kit.

LogJson

Re-export LogJson from types.kit.

LogPretty

Re-export LogPretty from types.kit.

LogFile

Re-export LogFile from types.kit.

LogNone

Re-export LogNone from types.kit.

CmdNone

Re-export CmdNone from types.kit.

CmdBatch

Re-export CmdBatch from types.kit.

CmdRandomInt

Re-export CmdRandomInt from types.kit.

CmdGetTime

Re-export CmdGetTime from types.kit.

SubNone

Re-export SubNone from types.kit.

SubTimer

Re-export SubTimer from types.kit.

SubWindowResize

Re-export SubWindowResize from types.kit.

SubWindowFocus

Re-export SubWindowFocus from types.kit.

SubBatch

Re-export SubBatch from types.kit.

Fill

Re-export Fill from types.kit.

Shrink

Re-export Shrink from types.kit.

Fixed

Re-export Fixed from types.kit.

FillPortion

Re-export FillPortion from types.kit.

Start

Re-export Start from types.kit.

Center

Re-export Center from types.kit.

End

Re-export End from types.kit.

GradientNone

Re-export GradientNone from types.kit.

LinearGradient

Re-export LinearGradient from types.kit.

RadialGradient

Re-export RadialGradient from types.kit.

Horizontal

Re-export Horizontal from types.kit.

Vertical

Re-export Vertical from types.kit.

Diagonal

Re-export Diagonal from types.kit.

DiagonalReverse

Re-export DiagonalReverse from types.kit.

StatusActive

Re-export StatusActive from types.kit.

StatusHovered

Re-export StatusHovered from types.kit.

StatusDisabled

Re-export StatusDisabled from types.kit.

configure-logging

Configure Raylib trace logging format.

LogFormat -> ()

reset-logging

Reset Raylib logging to defaults

() -> ()

flag-window-resizable

Allow window to be resized by the user

flag-window-undecorated

Remove window decorations (title bar, borders)

flag-window-transparent

Enable transparent window background

flag-fullscreen-mode

Run in fullscreen mode

flag-vsync-hint

Enable vertical sync (match monitor refresh rate)

flag-window-hidden

Start with window hidden

flag-window-always-run

Keep running when window loses focus

flag-window-minimized

Start window minimized

flag-window-maximized

Start window maximized

flag-window-unfocused

Start window without focus

flag-window-topmost

Keep window always on top

flag-window-highdpi

Enable high DPI mode for retina displays

flag-msaa-4x-hint

Enable 4x multi-sample anti-aliasing

configure-window

Configure window with flags.

Int -> ()

enable-window-resize

Enable window resizing.

() -> ()

fira-font-path

Get the path to the bundled Fira Sans font Prefer KIT_HOME when available, otherwise fall back to the default ~/.kit path.

load-fira-font

Load the default Fira Sans font at specified size Returns Option Font (None if loading failed)

PositiveInt -> Option {ptr: Ptr, base-size: Int}

load-font

Load a custom font from path

NonEmptyString -> Ptr

load-font-ex

Load a custom font with specific size

NonEmptyString -> PositiveInt -> Int -> Option {ptr: Ptr, base-size: Int}

unload-font

Unload a font

Ptr -> ()

draw-text-ex

Draw text with a custom font

Ptr -> String -> Float -> Float -> Float -> Float -> Int -> ()

measure-text-ex

Measure text width with a custom font

Ptr -> String -> Float -> Float -> {width: Float, height: Float}

font-base-size

Get the base size a font was loaded at

Ptr -> Int

filter-point

Point filtering (no anti-aliasing, pixelated)

filter-bilinear

Bilinear filtering (smooth, good for most cases)

filter-trilinear

Trilinear filtering (smooth with mipmaps)

set-font-antialiased

Enable anti-aliasing for a font (applies bilinear filtering) Call this after loading a font for smooth text rendering

{ptr: Ptr, base-size: Int} -> ()

set-font-filter

Set custom filter for a font

Ptr -> Int -> ()

cursor-default

Mouse cursor constants Default cursor selected by the backend.

cursor-arrow

Standard arrow cursor.

cursor-ibeam

Text insertion cursor.

cursor-crosshair

Crosshair cursor.

cursor-pointing-hand

Pointing hand cursor for interactive targets.

cursor-resize-ew

Horizontal resize cursor.

cursor-resize-ns

Vertical resize cursor.

cursor-resize-nwse

Diagonal resize cursor from northwest to southeast.

cursor-resize-nesw

Diagonal resize cursor from northeast to southwest.

cursor-resize-all

All-direction move/resize cursor.

cursor-not-allowed

Forbidden action cursor.

get-mouse-x

Mouse cursor helpers Return the current mouse x position.

() -> Int

get-mouse-y

Return the current mouse y position.

() -> Int

set-mouse-cursor

Set the active mouse cursor.

Int -> ()