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.

Every DevToys extension tool that exposes a GUI returns a UIToolView from its View property. That view contains a tree of IUIElement objects that DevToys renders natively on each supported platform. The entire component library is accessible through the static GUI class in the DevToys.Api namespace — a fluent API of factory methods and chainable extension methods that compose a fully-declarative, reactive UI without any XAML or markup files.

​
How the component model works

A UIToolView is the root container for a tool’s UI. It wraps a single IUIElement as its RootElement and optionally controls whether the view is scrollable. All layout, input, and display components implement IUIElement, so they can be nested arbitrarily.
The UI is reactive by default. Every property on every component raises a *Changed event when updated. DevToys listens to these events and synchronises the live UI automatically. There is no explicit “notify the view” step — just update the property and the screen follows.

​
The base interface: IUIElement

All components share a common base interface:
PropertyTypeDefaultDescription
Idstring?nullOptional identifier; useful for finding an element with UIToolView.GetChildElementById.
IsVisiblebooltrueHides or shows the element.
IsEnabledbooltrueDisables the element and all of its children.
HorizontalAlignmentUIHorizontalAlignmentStretchHow the element aligns horizontally within its parent.
VerticalAlignmentUIVerticalAlignmentStretchHow the element aligns vertically within its parent.
The corresponding fluent methods are available on every IUIElement: .Hide(), .Show(), .Disable(), .Enable(), .AlignHorizontally(...), and .AlignVertically(...).

​
Minimal UIToolView example

The snippet below shows the smallest meaningful tool UI: a vertical stack containing a subtitle label and an accent button. 
using DevToys.Api;
using static DevToys.Api.GUI;

public UIToolView View
    => new UIToolView(
        isScrollable: true,
        Stack()
            .Vertical()
            .MediumSpacing()
            .WithChildren(
                Label()
                    .Text("Enter a value to convert:")
                    .Style(UILabelStyle.Subtitle),
                Button()
                    .Text("Convert")
                    .AccentAppearance()
                    .OnClick(OnConvertClicked)));
Import using static DevToys.Api.GUI; to call factory methods like Stack(), Label(), and Button() without a class prefix.

​
Component categories

DevToys components are organised into four groups:

Layout

Arrange elements using Stack, Grid, SplitGrid, Wrap, and Card. Control orientation, row/column definitions, spacing, and resizable panes.

Text Inputs

Capture text with Monaco-powered MultiLineTextInput and DiffTextInput, plus SingleLineTextInput, PasswordInput, and NumberInput.

Controls

Drive user actions with Button, DropDownButton, Switch, SelectDropDownList, FileSelector, and the Setting / SettingGroup pattern.

Display

Present output and feedback with Label, InfoBar, ImageViewer, DataGrid, List, ProgressBar, ProgressRing, and Icon.

Build docs developers (and LLMs) love

Get started for freeTalk to us