Widgets Display

Display Widgets

Display widgets render read-only content. They have no edit state; output depends only on the data passed in each frame.

---

Text

gui.Text(gui.TextCfg{...}) is the primary text widget. It supports wrapping, multiple text styles, and advanced rendering via the go-glyph engine: gradients, outlines, rotation, and arbitrary affine transforms.

Basic usage

gui.Text(gui.TextCfg{
    Text:      "Hello, world!",
    TextStyle: gui.CurrentTheme().B1,
})

Wrapping

gui.Text(gui.TextCfg{
    Text:      longParagraph,
    Mode:      gui.TextModeWrap,
    TextStyle: gui.CurrentTheme().N3,
})

Gradient text

gui.Text(gui.TextCfg{
    Text: "Rainbow",
    TextStyle: gui.TextStyle{
        Size: 28,
        Gradient: &glyph.GradientConfig{
            Kind:   glyph.GradientHorizontal,
            Colors: []glyph.GradientStop{
                {Color: gui.RGBA(255, 0, 0, 255), Position: 0},
                {Color: gui.RGBA(0, 0, 255, 255), Position: 1},
            },
        },
    },
})

Rotated text

gui.Text(gui.TextCfg{
    Text: "Rotated",
    TextStyle: gui.TextStyle{
        Size:            18,
        RotationRadians: 0.35,
    },
})

Typography tokens

Themes expose two sets of text styles:

• N1–N5 — neutral/UI text (labels, captions, helper text)
• B1–B5 — body text (readable content, descriptions)

Access them via gui.CurrentTheme().N3 or gui.CurrentTheme().B1. Lower numbers are larger.

---

Image

gui.Image(gui.ImageCfg{...}) renders a raster image loaded from a file or byte slice.

gui.Image(gui.ImageCfg{
    Path:   "assets/logo.png",
    Width:  120,
    Height: 120,
    Sizing: gui.FixedFixed,
})

---

Svg

gui.Svg(gui.SvgCfg{...}) renders an SVG file using go-gui's full SVG pipeline: CSS cascade, path tessellation, and GPU rendering. The pipeline is security-hardened (external entity loading and recursive <use> loops are disabled).

gui.Svg(gui.SvgCfg{
    Path:   "assets/icon.svg",
    Width:  48,
    Height: 48,
    Sizing: gui.FixedFixed,
})

For drawing SVG-like shapes procedurally at runtime, see DrawCanvas in Graphics.

---

Markdown

w.Markdown(gui.MarkdownCfg{...}) renders a Markdown string using the current theme's typography. Headings, emphasis, code spans, and lists are all supported.

w.Markdown(gui.MarkdownCfg{
    Text:   readmeContent,
    Sizing: gui.FillFit,
})

Note the method is on *gui.Window (w.Markdown) rather than a package-level function. This gives the widget access to the theme and text measurement services.

---

RTF

gui.RTF(gui.RtfCfg{...}) renders Rich Text Format content, useful when displaying content from external sources that produce RTF.

gui.RTF(gui.RtfCfg{
    Text:   rtfString,
    Sizing: gui.FillFit,
})

---

Badge

gui.Badge(gui.BadgeCfg{...}) renders a small count indicator typically overlaid on another widget (an icon or avatar).

gui.Badge(gui.BadgeCfg{
    Count: app.UnreadCount,
    Content: []gui.View{
        gui.Svg(gui.SvgCfg{Path: "assets/bell.svg", Width: 24, Height: 24}),
    },
})

The badge floats in the top-right corner of its Content children.

---

DrawCanvas

gui.DrawCanvas(gui.DrawCanvasCfg{...}) gives you a surface for custom procedural drawing: polylines, filled polygons, arcs, circles, and text. The canvas is rendered via the same GPU pipeline as the rest of the framework and can receive keyboard focus.

gui.DrawCanvas(gui.DrawCanvasCfg{
    ID:      "chart",
    IDFocus: 10,
    Width:   400,
    Height:  300,
    Sizing:  gui.FixedFixed,
    Draw: func(dc *gui.DrawContext) {
        dc.Polyline(gui.DrawPolylineCfg{
            Points:    []gui.Pt{{10, 10}, {100, 80}, {200, 30}},
            Color:     gui.RGBA(100, 180, 255, 255),
            Thickness: 2,
        })
    },
})

For a deeper treatment of canvas drawing, gradients, shaders, and visual effects see Graphics.

---

Rectangle

gui.Rectangle(gui.RectangleCfg{...}) draws a solid or outlined decorative shape. Supports gradients, box shadows, and custom shaders. Useful for color swatches, separator bars, and background panels.

// Filled rectangle
gui.Rectangle(gui.RectangleCfg{
    Width:  200,
    Height: 4,
    Color:  gui.RGBA(100, 180, 255, 255),
})

// Rectangle with gradient and shadow
gui.Rectangle(gui.RectangleCfg{
    Width:    200,
    Height:   80,
    Radius:   8,
    Gradient: &gui.GradientDef{
        Kind:   gui.GradientHorizontal,
        Colors: []gui.GradientStop{
            {Color: gui.RGBA(100, 100, 255, 255), Position: 0},
            {Color: gui.RGBA(255, 100, 100, 255), Position: 1},
        },
    },
    Shadow:   &gui.BoxShadow{Blur: 8, Color: gui.RGBA(0, 0, 0, 40)},
})

---

TextSelect

gui.TextSelect(gui.TextSelectCfg{...}) renders read-only text with mouse-selectable text ranges. Supports cursor placement (single click), word selection (double click), and drag-to-select. The selected range is exposed via OnSelectChanged callback.

gui.TextSelect(gui.TextSelectCfg{
    Text:           "Click and drag to select text.",
    TextStyle:      gui.CurrentTheme().N3,
    OnSelectChanged: func(start, end int) {
        app.Selection = text[start:end]
    },
})

---

Image helpers

gui.ValidateImagePath(fileName string) error checks that an image path is safe (no parent traversal) and has a supported extension (.png, .jpg, .jpeg). Use it before loading user-supplied image paths.

gui.ValidateImageExtension(fileName string) error checks only the extension — useful after already sanitizing the path separately.

if err := gui.ValidateImagePath(userFile); err != nil {
    w.Notify("Invalid image", err.Error())
    return
}
img := gui.Image(gui.ImageCfg{Path: userFile, Width: 128, Height: 128})