component Module API

The component module provides functions for creating HTML elements, handling attributes, and composing user interfaces.

create_element()

Creates a generic HTML element with tag name, attributes, and children.

Nixi.create_element(tag, attrs?, ...)

Parameters:

• tag - The HTML tag name (string)
• attrs - Table of attribute key-value pairs (optional)
• ... - Child elements or strings

Returns: string - Rendered HTML

local el = Nixi.create_element("div", { class = "container", id = "main" }, "Hello")
-- <div class="container" id="main">Hello</div>

Element Shorthand Functions

div(attrs?, ...)

Creates a <div> element.

Nixi.div(attrs?, ...)

Nixi.div("Content")
Nixi.div({ class = "wrapper" }, "Content")
Nixi.div({ class = "card" }, Nixi.p(nil, "Text"))

span(attrs?, ...)

Creates a <span> element.

Nixi.span(attrs?, ...)

Nixi.span("Text")
Nixi.span({ class = "highlight" }, "Bold text")

button(attrs?, ...)

Creates a <button> element.

Nixi.button(attrs?, ...)

Nixi.button("Click me", { onclick = "handleClick()" })
Nixi.button({ type = "submit", class = "btn-primary" }, "Submit")

input(attrs)

Creates an <input> element.

Nixi.input(attrs)

Nixi.input({ type = "text", placeholder = "Enter name", name = "username" })
Nixi.input({ type = "checkbox", checked = true })

a(attrs?, ...)

Creates an <a> (anchor) element.

Nixi.a(attrs?, ...)

Nixi.a("Click here", { href = "/page", target = "_blank" })

p(attrs?, ...)

Creates a <p> (paragraph) element.

Nixi.p(attrs?, ...)

Nixi.p("This is a paragraph")
Nixi.p("Styled text", { class = "lead" })

Heading Elements

Nixi.h1(attrs?, ...)  -- <h1>
Nixi.h2(attrs?, ...)  -- <h2>
Nixi.h3(attrs?, ...)  -- <h3>
Nixi.h4(attrs?, ...)  -- <h4>
Nixi.h5(attrs?, ...)  -- <h5>
Nixi.h6(attrs?, ...)  -- <h6>

Nixi.h1("Welcome")
Nixi.h2("Section Title", { class = "section-header" })

ul(attrs, items)

Creates a <ul> (unordered list) element with items.

Nixi.ul(attrs, items)

Nixi.ul(nil, { "Item 1", "Item 2", "Item 3" })

Attributes Guide

Attributes are passed as a table to the second parameter. Boolean attributes can be set to true.

Boolean attributes (present when true) Nixi.input({ type = "checkbox", checked = true }) -- <input type="checkbox" checked> -- Class merging Nixi.div(nil, { class = "foo" }) Nixi.div(nil, { class = { "bar", "baz" } }) -- Data attributes with bracket syntax Nixi.span("Text", { ["data-value"] = "42" }) -- <span data-value="42">Text</span>

Common HTML Attributes

Nesting Examples

Basic Nesting

local layout = Nixi.div({ class = "page-wrapper" },
    Nixi.h1("Welcome"),
    Nixi.p("This is the main content area.")
)

Component Reuse

local function Card(title, content)
    return Nixi.div({ class = "card" },
        Nixi.h3(title),
        Nixi.p(content)
    )
end

local card1 = Card("First Card", "Content for first card")
local card2 = Card("Second Card", "Content for second card")

local cards = Nixi.div({ class = "card-grid" },
    card1,
    card2
)

Conditional Rendering

local function renderUser(user)
    if user.loggedIn then
        return Nixi.div({ class = "user-info" },
            Nixi.span("Welcome, " .. user.name)
        )
    else
        return Nixi.div({ class = "auth-links" },
            Nixi.a("Login", { href = "/login" })
        )
    end
end

List Rendering

local items = { "Apple", "Banana", "Orange", "Mango" }

local function renderList(items)
    local listItems = {}
    for _, item in ipairs(items) do
        table.insert(listItems, Nixi.create_element("li", nil, item))
    end
    return Nixi.ul(nil, items)
end

local list = renderList(items)

Type Definitions

---@class Nixi
---@field create_element fun(tag: string, attrs?: table, ...: any): string
---@field div fun(attrs?: table, ...: any): string
---@field span fun(attrs?: table, ...: any): string
---@field p fun(attrs?: table, ...: any): string
---@field h1 fun(attrs?: table, ...: any): string
---@field h2 fun(attrs?: table, ...: any): string
---@field h3 fun(attrs?: table, ...: any): string
---@field h4 fun(attrs?: table, ...: any): string
---@field h5 fun(attrs?: table, ...: any): string
---@field h6 fun(attrs?: table, ...: any): string
---@field button fun(attrs?: table, ...: any): string
---@field input fun(attrs?: table): string
---@field a fun(attrs?: table, ...: any): string
---@field ul fun(attrs: table?, items: string[]): string
---@field component fun(name: string, props: table, content: string): string