Interface Components

A collection of draggable panel UI components and sparkline charts built as Lit web components. Based on the magx project by mlalma — I liked the components enough to build them into a library I could use for my own webapps. 1.1.0.25037

16 Components
TypeScript
Lightweight
Web Components
Panel component showing all element types
Panel with all element types
Sparkline chart variations
Sparkline chart variations

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, serialization of all child values to/from JSON, and native haptic feedback on mobile (iOS Safari 18+ via switch checkbox, Android via navigator.vibrate).

PROPERTIES

NameTypeDefaultDescription
idStringauto-generatedUnique identifier for the panel
titleString""Title displayed in the title bar
xNumber0Initial X position (attribute only)
yNumber0Initial Y position (attribute only)
outofboundsBooleantrueRestrict panel to parent bounds
closebuttonBooleantrueShow close button in title bar
LIVE DEMO
Haptic Feedback — Panel components provide native haptic feedback on mobile devices. iOS (Safari 18+): uses transparent <input switch> overlays — tapping buttons, checkboxes, inputs, color pickers, date/time pickers, and dropdowns triggers the Taptic Engine via real touch on a switch checkbox wrapped in a label. Android: uses navigator.vibrate() with PWM intensity modulation. Known limitation: range slider drag haptics are not yet supported on iOS — the switch checkbox approach requires discrete taps and cannot fire during continuous drag gestures.
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

NameTypeDefaultDescription
titleString""Button label text
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
checkedBooleanfalseInitial checked state (attribute)
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
valueString"#000000"Initial hex color value
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
idStringauto-generatedUnique identifier
LIVE DEMO
html
<magx-panel-date title="Start Date" id="date1"></magx-panel-date>

FileChooser

<magx-panel-filechooser>
CONTROL

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

PROPERTIES

NameTypeDefaultDescription
titleString""Label text
placeholderLabelString""Text shown when no file selected
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
srcString""Image URL (attribute)
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
currentValueNumber0Current progress value
maxValueNumber100Maximum value
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
minNumber0Minimum value
maxNumber10Maximum value
stepNumber1Step increment
valueNumber0Current value
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
placeholderString""Placeholder text
valueString""Initial text content (attribute)
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
typeString"text""text", "number", or "password"
placeholderString""Placeholder text
valueString""Initial value (attribute)
maxlengthNumber524288Maximum character length
minNumberMIN_VALUEMin value (number type only)
maxNumberMAX_VALUEMax value (number type only)
idStringauto-generatedUnique 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

NameTypeDefaultDescription
titleString""Label text
idStringauto-generatedUnique 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

NameTypeDefaultDescription
widthNumber200Canvas width in pixels
heightNumber50Canvas height in pixels
LIVE DEMO
Line / Gradient Fill
Bar / Bordered
Line / Above-Below
Line / Endpoint Dot
Bar / No Border
Line / Thin + Median
Bar / Gradient Fill
Line / Thick + Solid
Line / First Point Ref
Bar / Above-Below
Line / Hairline
Bar / Outline Only
Line / Capped Values
Line / Dual + Endpoint
Bar / Avg Reference
Line / Dense Data
Bar / Wide Gradient
Line / Custom Ref
Bar / Dual + Median
Line / Uptrend
Line / Downtrend
Bar / Heavy Border
Line / Volatile
Bar / Teal Solid
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();

Font Awesome Pro

6.5.1
3547 ICONS

Font Awesome Pro 6.5.1 with thin, light, regular, solid, sharp, and duotone families. Browse the full catalog at the Font Awesome Explorer.