FlexLöve Documentation

✨ Features

🎨 Flexbox & Grid Layouts

Modern CSS-like layout system with full flexbox and grid support for building responsive UIs.

🎭 Theme System

9-patch NinePatch theming with state support (normal, hover, pressed, disabled).

✨ State Management

Interactive components with state tracking, counters, toggles, and dynamic updates.

📜 Scrollable Content

Smooth scrolling containers with backdrop blur effects and overflow handling for long content lists.

🎚️ Sliders & Controls

Draggable sliders with value tracking, perfect for settings menus and adjustable parameters.

⌨️ Input & Events

Rich event handling with mouse, keyboard, and touch support. Focus management and input fields.

Quick Start

local FlexLove = require("FlexLove")

-- (Optional) Initialize with a theme and immediate mode
FlexLove.init({
  theme = "space",
  immediateMode = true
})

function love.update(dt)
  FlexLove.update(dt)
end

function love.draw()
    FlexLove.draw(function()
        -- Game content (will be blurred by backdrop blur)
        local button = FlexLove.new({
        width = "20vw",
        height = "10vh",
        backgroundColor = Color.new(0.2, 0.2, 0.8, 1),
        text = "Click Me",
        textSize = "md",
        themeComponent = "button",
        onEvent = function(element, event)
            print("Button clicked!")
    end
    })
    end, function()
        -- This is drawn AFTER all GUI elements - no backdrop blur
        SomeMetaComponent:draw()
    end)
end

Installation

Visit the Releases page on GitHub for the latest version(preferred), or clone the repo and copy the files:

git clone https://github.com/mikefreno/FlexLove.git
cp -r FlexLove/modules your-project/
cp FlexLove/FlexLove.lua your-project/