Interface Components

A collection of draggable panel UI components and sparkline charts built as Lit web components. Originally from the magx project.

16 Components

TypeScript

Lightweight

Web Components

Panel

<magx-panel>

CONTAINER

The main container component. A draggable, collapsible floating panel that groups child elements into a unified HUD-style interface. Supports positioning, z-index management, and serialization of all child values to/from JSON.

PROPERTIES

Name	Type	Default	Description
`id`	`String`	`auto-generated`	Unique identifier for the panel
`title`	`String`	`""`	Title displayed in the title bar
`x`	`Number`	`0`	Initial X position (attribute only)
`y`	`Number`	`0`	Initial Y position (attribute only)
`outofbounds`	`Boolean`	`true`	Restrict panel to parent bounds
`closebutton`	`Boolean`	`true`	Show close button in title bar

LIVE DEMO

html

<magx-panel id="my-panel" title="Settings" x="50" y="50">
  <magx-panel-textinput title="Name" placeholder="Enter name..."></magx-panel-textinput>
  <magx-panel-range title="Volume" min="0" max="100" step="1" value="50"></magx-panel-range>
  <magx-panel-button title="Apply"></magx-panel-button>
</magx-panel>

typescript

const panel = new MagxPanel();
panel.title = "My Panel";
const input = new MagxPanelTextInput();
input.title = "Name";
panel.appendChild(input);
document.body.appendChild(panel);
panel.setPosition(50, 50);

Button

<magx-panel-button>

CONTROL

A simple clickable button element for panels. Fires a value change event when clicked.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Button label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-button title="Submit" id="btn1"></magx-panel-button>

Checkbox

<magx-panel-checkbox>

CONTROL

A toggle checkbox element. Returns a boolean value indicating checked state.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`checked`	`Boolean`	`false`	Initial checked state (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-checkbox title="Enable Feature" id="chk1" checked></magx-panel-checkbox>

ColorPicker

<magx-panel-colorpicker>

CONTROL

A color selection element. Displays a color preview swatch and allows picking a new color via the native color input.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`value`	`String`	`"#000000"`	Initial hex color value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-colorpicker title="Background" id="cp1" value="#7c3aed"></magx-panel-colorpicker>

Date

<magx-panel-date>

INPUT

A date picker element that uses the native HTML date input. Returns the selected date as a string.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-date title="Start Date" id="date1"></magx-panel-date>

DropDown

<magx-panel-dropdown>

CONTROL

A dropdown select element. Options can be defined via HTML option elements or set programmatically. Returns the selected index and label.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`index`	`Number`	`0`	Initially selected option index
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-dropdown title="Mode" id="dd1" index="0">
  <option label="Easy">Easy</option>
  <option label="Normal">Normal</option>
  <option label="Hard">Hard</option>
</magx-panel-dropdown>

typescript

const dropdown = document.getElementById('dd1');
dropdown.setOptions(['Red', 'Green', 'Blue'], 1);

FileChooser

<magx-panel-filechooser>

CONTROL

A file selection element. Displays the chosen filename and provides access to the File object.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`placeholderLabel`	`String`	`""`	Text shown when no file selected
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-filechooser title="Upload" id="fc1" placeholderLabel="Choose a file..."></magx-panel-filechooser>

HTML

<magx-panel-html>

DISPLAY

Allows embedding arbitrary HTML content inside a panel. Content is provided via slotted children.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

Bold, italic, and underlined text

html

<magx-panel-html title="Custom Content" id="html1">
  <p style="color: red;">Any <b>HTML</b> here</p>
</magx-panel-html>

Image

<magx-panel-image>

DISPLAY

Displays an image inside the panel. The image URL can be set via attribute or programmatically.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`src`	`String`	`""`	Image URL (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-image title="Preview" id="img1" src="./photo.jpg"></magx-panel-image>

ProgressBar

<magx-panel-progressbar>

DISPLAY

A visual progress bar. Set current and max values to display progress percentage.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`currentValue`	`Number`	`0`	Current progress value
`maxValue`	`Number`	`100`	Maximum value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-progressbar title="Loading" id="pb1" currentValue="65" maxValue="100"></magx-panel-progressbar>

typescript

const bar = document.getElementById('pb1');
bar.currentValue = 75; // Updates visually

Range

<magx-panel-range>

INPUT

A slider input element. Displays the current numeric value and allows dragging to change it within min/max bounds.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`min`	`Number`	`0`	Minimum value
`max`	`Number`	`10`	Maximum value
`step`	`Number`	`1`	Step increment
`value`	`Number`	`0`	Current value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-range title="Volume" id="rng1" min="0" max="100" step="5" value="50"></magx-panel-range>

Panel Sparkline

<magx-panel-sparkline>

DISPLAY

A sparkline chart embedded inside a panel element. Wraps the standalone Sparkline component for use within the Panel system.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-sparkline title="CPU Usage" id="spark1"></magx-panel-sparkline>

TextArea

<magx-panel-textarea>

INPUT

A multi-line text input area. Supports placeholder text and returns the current content.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`placeholder`	`String`	`""`	Placeholder text
`value`	`String`	`""`	Initial text content (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-textarea title="Notes" id="ta1" placeholder="Type here..."></magx-panel-textarea>

TextInput

<magx-panel-textinput>

INPUT

A single-line text input. Supports text, number, and password modes with optional min/max validation for numbers.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`type`	`String`	`"text"`	"text", "number", or "password"
`placeholder`	`String`	`""`	Placeholder text
`value`	`String`	`""`	Initial value (attribute)
`maxlength`	`Number`	`524288`	Maximum character length
`min`	`Number`	`MIN_VALUE`	Min value (number type only)
`max`	`Number`	`MAX_VALUE`	Max value (number type only)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-textinput title="Username" id="ti1" placeholder="Enter name..." type="text"></magx-panel-textinput>

Time

<magx-panel-time>

INPUT

A time picker element using the native HTML time input. Returns the selected time string.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-time title="Alarm" id="time1"></magx-panel-time>

Sparkline (Standalone)

<magx-sparkline>

CANVAS

A standalone canvas-based sparkline component. Supports line charts, bar charts, area fills, reference lines, endpoints, and gradient coloring. Highly configurable with 30+ options for rendering style, bounds, and data management.

PROPERTIES

Name	Type	Default	Description
`width`	`Number`	`200`	Canvas width in pixels
`height`	`Number`	`50`	Canvas height in pixels

LIVE DEMO

Line Chart

Bar Chart

html

<magx-sparkline id="chart1" style="width: 200px; height: 60px;"></magx-sparkline>

typescript

const spark = document.getElementById('chart1');
spark.setDataPointNum(30);
spark.setSparklineType(SparklineType.Line);
spark.setLine(Linetype.Straight, 2, { r: 50, g: 50, b: 50, a: 1.0 });
for (let i = 0; i < 30; i++) {
  spark.addDataPoint(Math.random() * 100);
}
spark.renderCanvas();