Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DevToys-app/DevToys/llms.txt

Use this file to discover all available pages before exploring further.

Layout components are the structural backbone of every DevToys tool UI. They do not display any content of their own — they arrange child IUIElement objects in rows, columns, wrapping flows, or resizable panes. All layout components are created through GUI.* factory methods and composed with fluent extension methods.

​
Stack

IUIStack stacks child elements into a single horizontal or vertical line. It is the most common layout primitive and the right starting point for most tools.

​
Key properties

PropertyTypeDefaultDescription
OrientationUIOrientationHorizontalDirection in which children are stacked.
SpacingUISpacingSmallGap between adjacent children.
UseMaxHeightboolfalseStretch the stack to the full available height.
ChildrenIUIElement[]?nullThe child elements to render.

​
UISpacing values

ValueFluent methodIntended use
None.NoSpacing()Elements that must sit flush against each other.
Small.SmallSpacing()Items within the same logical group (default).
Medium.MediumSpacing()Separation between distinct groups.
Large.LargeSpacing()Separation between major sections.

​
Example

using static DevToys.Api.GUI;

IUIStack toolbar =
    Stack()
        .Horizontal()
        .SmallSpacing()
        .WithChildren(
            Button().Text("Encode").AccentAppearance().OnClick(OnEncodeClicked),
            Button().Text("Decode").OnClick(OnDecodeClicked),
            Button().Text("Clear").HyperlinkAppearance().OnClick(OnClearClicked));

IUIStack root =
    Stack()
        .Vertical()
        .MediumSpacing()
        .UseMaxHeight()
        .WithChildren(
            Label().Text("Base64 Encoder / Decoder").Style(UILabelStyle.Subtitle),
            toolbar,
            MultiLineTextInput("input").Title("Input"),
            MultiLineTextInput("output").Title("Output").ReadOnly());

​
Grid

IUIGrid provides a multi-row, multi-column layout, analogous to CSS Grid or WPF’s Grid panel. Each child is placed in an IUIGridCell that declares its row and column position.

​
Key properties

PropertyTypeDefaultDescription
RowsUIGridLength[]?nullHeight definition for each row.
ColumnsUIGridLength[]?nullWidth definition for each column.
CellsIUIGridCell[]?nullCells that populate the grid.
RowSpacingUISpacingSmallVertical gap between rows.
ColumnSpacingUISpacingSmallHorizontal gap between columns.

​
UIGridLength and UIGridUnitType

A UIGridLength describes the size of a row or column using one of three unit types:
UnitFactory / constantExampleMeaning
AutoGUI.AutoAutoSize to fit content.
FractionGUI.Fraction(n)Fraction(2)Weighted share of remaining space — like 2* in WPF.
Pixelnew UIGridLength(300)300pxFixed number of device-independent pixels.
UIGridLength.Auto is not supported in SplitGrid. Use Fraction or Pixel there instead.

​
Named enum pattern

The Rows<TEnum> and Columns<TEnum> overloads let you reference rows and columns by name via an enum, which also works with the typed Cell<TRow, TColumn> factory: 
using static DevToys.Api.GUI;

// Define row and column names
private enum Row  { Input, Output }
private enum Col  { Left, Right }

IUIGrid layout =
    Grid()
        .Rows(
            (Row.Input,  Auto),
            (Row.Output, Fraction(1)))
        .Columns(
            (Col.Left,  Fraction(1)),
            (Col.Right, Fraction(1)))
        .ColumnSmallSpacing()
        .RowSmallSpacing()
        .Cells(
            Cell(Row.Input,  Col.Left,
                Label().Text("Input")),
            Cell(Row.Input,  Col.Right,
                Label().Text("Output")),
            Cell(Row.Output, Col.Left,
                MultiLineTextInput("input").Language("json")),
            Cell(Row.Output, Col.Right,
                MultiLineTextInput("output").Language("json").ReadOnly()));

​
Spanning multiple rows or columns

Use the four-argument Cell overload to span across rows or columns: 
// A header that spans both columns
Cell(0, 0, rowSpan: 1, columnSpan: 2,
    Label().Text("Comparison").Style(UILabelStyle.Subtitle))

​
SplitGrid

IUISplitGrid divides an area into exactly two panes separated by a user-draggable divider. It is the standard layout for tools that show input on one side and output on the other.

​
Key properties

PropertyTypeDefaultDescription
OrientationUIOrientationVerticalVertical = left/right panes; Horizontal = top/bottom panes.
LeftOrTopCellLengthUIGridLengthFraction(1)Size of the first pane.
RightOrBottomCellLengthUIGridLengthFraction(1)Size of the second pane.
MinimumCellLengthint50Minimum pixel size for either pane.
LeftOrTopCellContentIUIElement?nullElement rendered in the left or top pane.
RightOrBottomCellContentIUIElement?nullElement rendered in the right or bottom pane.

​
Example

using static DevToys.Api.GUI;

IUISplitGrid splitView =
    SplitGrid()
        .Vertical()
        .LeftPaneLength(Fraction(1))
        .RightPaneLength(Fraction(1))
        .MinimumLength(200)
        .WithLeftPaneChild(
            MultiLineTextInput("json-input")
                .Title("JSON Input")
                .Language("json")
                .Extendable()
                .OnTextChanged(OnInputChanged))
        .WithRightPaneChild(
            MultiLineTextInput("yaml-output")
                .Title("YAML Output")
                .Language("yaml")
                .ReadOnly()
                .Extendable());
Use .Horizontal() on a SplitGrid when you need a top/bottom split — for example to show a code editor above a diagnostic panel.

​
Wrap

IUIWrap lays children out horizontally and wraps them onto the next line when horizontal space runs out — much like CSS flex-wrap. Use it for badge/tag-style elements or any collection of variable-width items.

​
Key properties

PropertyTypeDefaultDescription
SpacingUISpacingSmallGap between items in both axes.
ChildrenIUIElement[]?nullThe child elements.

​
Example

using static DevToys.Api.GUI;

// Render a row of format selector buttons that wrap if the window is narrow
IUIWrap formatSelector =
    Wrap()
        .SmallSpacing()
        .WithChildren(
            Button().Text("JSON").OnClick(() => SelectFormat("json")),
            Button().Text("XML").OnClick(() => SelectFormat("xml")),
            Button().Text("YAML").OnClick(() => SelectFormat("yaml")),
            Button().Text("TOML").OnClick(() => SelectFormat("toml")),
            Button().Text("CSV").OnClick(() => SelectFormat("csv")));

​
Card

IUICard wraps a single IUIElement in a card-style visual container, adding a border, background, and padding to group content visually.

​
Key properties

PropertyTypeDescription
UIElementIUIElementThe content element displayed inside the card.

​
Example

using static DevToys.Api.GUI;

// Wrap a settings stack inside a card to visually separate it from the rest of the UI
IUICard settingsCard =
    Card(
        Stack()
            .Vertical()
            .SmallSpacing()
            .WithChildren(
                Label().Text("Options").Style(UILabelStyle.BodyStrong),
                Setting()
                    .Title("Indent output")
                    .Description("Add newlines and indentation to the generated JSON.")
                    .InteractiveElement(
                        Switch().On().OnToggle(OnIndentToggled)),
                Setting()
                    .Title("Sort keys")
                    .Description("Sort JSON object keys alphabetically.")
                    .InteractiveElement(
                        Switch().Off().OnToggle(OnSortKeysToggled))));
Card takes exactly one child element. Wrap multiple items in a Stack or Grid before passing them to Card.

Build docs developers (and LLMs) love

Get started for freeTalk to us