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"

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

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

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}

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-item-height

Height of each option in the dropdown

default-config

Default configuration

run

Run a TEA application with default configuration

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> 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: Model, cmd: Cmd}) -> (Msg -> Model -> {model: Model, cmd: Cmd}) -> (Model -> 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

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> Sub) -> (Model -> 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

make-key-msg

String -> Int -> Msg

make-mouse-msg

String -> Int -> Int -> Int -> 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

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

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

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-handle-key

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

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

text-editor-scroll-to-cursor

Calculate scroll needed to keep cursor visible

Int -> Int -> Int -> Int -> 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

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

Create a key pressed event JSON

Int -> JSONValue

key-down-event

Create a key down (held) event JSON

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

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 -> ()

Backend interface for kit-tea rendering targets. To create a new backend, implement all these functions and pass the record to run-with-backend.

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-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

Messages represent events that can occur in your application. The runtime automatically generates Key and Mouse messages from input.

Cmd

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

Sub

Subscriptions represent declarative event streams.

Theme defines colors for the entire application.

WidgetStatus

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

Style configuration for Checkbox widget Allows full customization of checkbox appearance

Style configuration for Button widget Allows full customization of button appearance

Style configuration for Slider widget Allows full customization of slider appearance

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

A 2D point for canvas paths

CanvasOp

Operations for custom 2D drawing in a Canvas element

MouseButton

Mouse button identifiers for MouseArea events

Style for a text span in RichText

A span of styled text

Column definition for Table widget

A responsive breakpoint with minimum width and content to display

PaneLayout

Layout structure for pane grid - supports recursive splits

QrErrorCorrection

Error correction level for QR codes

A shader uniform parameter

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).

Configuration for the TEA runtime

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
    }

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

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-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

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 (for efficient list diffing)

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-with-callbacks

Create a sensor with visibility callbacks

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

sensor-full

Create a sensor with full state

Int -> Int -> Int -> Int -> Element -> Bool -> Option String -> Option String -> 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

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

pane-single

Create a single pane layout

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-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-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

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

Create a shader element (placeholder - requires wgpu backend)

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

shader-with-uniforms

Create a shader element 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 -> ()

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 Uses HOME environment variable to construct the absolute path

() -> String

load-fira-font

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

PositiveInt -> Option Ptr

load-font

Load a custom font from path

NonEmptyString -> Ptr

load-font-ex

Load a custom font with specific size

NonEmptyString -> PositiveInt -> Int -> Ptr

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 -> ()

set-font-filter

Set custom filter for a font

Ptr -> Int -> ()