IC Framework Reference
API reference for the IC MATLAB-Svelte component framework. Generated 2026-04-01T10:29:56
# Core
# ic.Frame
Root of the IC component tree. Every IC application starts with a single Frame. The Frame owns the ic.core.View bridge and the component registry. Components are added via ic.core.Container.addChild, which serializes their definition and sends it over the frontend. Frames also handle theming via their Theme and ic.FrameColorScheme properties, and styling for all components of a given type via the globalStyle method
Bridge that wraps uihtml and handles MATLAB↔JS communication
Id to component dictionary for O(1) event dispatch from the frontend
Dictionary mapping component type to style rules applied to all the children of that type
Collects frontend log entries
Theme tokens synced to the frontend
Active color scheme
When true, the frontend forwards log entries to MATLAB and prints them in the command window
Minimum severity that the ic.core.Logger accepts (used when Debug is true)
Position of the underlying uihtml container, in current Units
Whether the frame is visible
Coordinate units for Position
Grid layout options when placed inside a uigridlayout
Parent uicontainer or uifigure
Set one or more ic.style.Theme properties by name.
- If a scalar value is applied, it will impact the active ColorScheme only
- If a two-element array is set, it sets both [light, dark]
f.theme("primary", "#ff6600")
f.theme("primary-foreground", ["#000", "#fff"])
f.theme("Muted", "#eee", "border", "#ccc")Apply CSS styles to every instance of a component type. Setting a property to "" removes it.
f.globalStyle("ic.Button", ".ic-btn", "backgroundColor", "#000")
f.globalStyle("ic.Button", ".ic-btn__label", struct("color", "red"))Remove styles for a specific selector on a component type.
Remove all styles for every selector on a component type.
Remove every global style rule across all component types.
Return the logger instance for log inspection.
The ic.core.Logger that collects frontend log entriesHandle incoming log events from the frontend.
Forward events to the ic.core.View for transmission via uihtml.
Add a component and its descendants to the registry.
Remove a component and its descendants from the registry.
Publish the current value of a reactive property to the frontend.
Add a component to the id→component registry for O(1) event routing.
Remove a component from the registry.
# ic.core.ComponentBase
Abstract root of the IC class hierarchy; shared by all components and the ic.Frame. Defines the common ID property and the publish() method for sending events to the frontend.
Unique identifier; used as the HTMLElement id in the DOM and as the Registry key on the frontend to enable event routing and state management for the component.
Serialize this component's schema for the JS Factory. the returned struct is sent as the payload of every @insert event and tells the frontend which Svelte component to mount, which props/events/methods to wire, and which mixin capabilities are active.
Struct with fields: id, type, mixins, props, events, methods# ic.core.Component
Concrete base for all IC UI components. The constructor accepts a property struct from the subclass arguments block so every subclass gets a name-value constructor for free Components are inserted into the view into ic.core.Containers by setting their Parent and Target properties.
Owning container; empty until the component is inserted into a container. Set in ic.core.Container.insertChild and ic.core.Container.addStaticChild to establish the parent-child relationship.
Slot name within the parent container ("default" or a named target). Set in ic.core.Container.insertChild and ic.core.Container.addStaticChild to specify the target slot for this child component
Delegate an event up the parent chain towards the view. If not yet attached, the event is buffered in ic.core.ComponentBase.Queue and delivered automatically by ic.core.Container.insertChild when the component is added.
Publish a @prop/<Name> event to push a reactive property value to the frontend. This method is called automatically by the PostSet listener wired by ic.mixin.Reactive.setupReactivity(). Since the @insert event triggers the initial sync of all reactive properties when a component is added to a container, this method does nothing if the component is not yet attached to a container.
# ic.core.ComponentContainer
Base class for components that are themselves containers. Combines ic.core.Component (can be inserted into a parent) with ic.core.Container (can hold child components of its own)
ic.mixin.Publishable.flush queued events for this component, then cascade into all children. Ensures the entire component subtree is delivered in the correct order (parent before children) when ic.core.Container.insertChild flushes the events upstream.
Extend the base component definition with static children. static children are registered via ic.core.Container.addStaticChild in the MATLAB constructor and pre-rendered in the Svelte template.
# ic.core.Container
Abstract base for objects that hold ic.core.Component children. Manages a Children array and one or more target slots.Target slots are named insertion points that correspond to named Svelte slot positions in its template
Array of all components currently held by this container (all slots combined)
Validate and insert child into the given target slot.
Remove child from this container.
Return the subset of Children assigned to the given target slot.
An ic.core.Component array with the children in the specified slotMove child to a new position within its target slot.
panel.moveChild(btn, 1); % move to first position
panel.moveChild(btn, "end"); % move to last positionMove child to the position immediately before referenceChild. Both children must be in the same target slot.
Move child to the position immediately after referenceChild. Both children must be in the same target slot.
Swap the positions of two children within their shared target slot.Both children must be in the same target slot.
Raw child insertion without validation. Handles both fresh inserts and reparenting.
Declare a child that is pre-rendered in the Svelte template. Static children are "pre-known" subelements of their container, and have their definitions already included in the parent's insertion payload via ic.core.ComponentBase.getComponentDefinition
Removes children in slots that were removed.
Guards against cascading deletes where the container is also being destroyed.
# ic.core.View
Uihtml bridge between the MATLAB component tree and the Svelte frontend. Created and owned by ic.Frame, users never instantiate View directly.
Wraps a uihtml element that serves front/dist/index.html over a local HTTPS server, and opens it in an <iframe> inside a uifigure. Communication uses two named event channels:
- MATLAB → JS: components propagate their ic.event.JsEvent up the tree until the view, responsible for calling sendEventToHTMLSource(h, "ic", payload)
- JS → MATLAB: uihtmls HTMLEventReceivedFcn captures frontend events and routes them to the appropriate component handler via ic.Frame.Registry lookup.
Before each send, ic.AssetRegistry.activate is called so that asset deduplication (hash-only stubs for repeated assets) is tracked for each view instance
Create the uigridlayout and uihtml elements and wire the event callback.
Required by matlab.ui.componentcontainer.ComponentContainer. Intentionally empty.
Send one or more events to the Svelte frontend. Before the frontend signals readiness, events are queued locally and flushed once the @ready handshake completes. After that, events are sent directly.
Route raw HTMLEventReceivedFcn events to the appropriate handler.
Called when the frontend signals that it is fully initialized and ready to receive events. Flushes all pending events.
Parse and dispatch incoming events from the Svelte frontend to their respective MATLAB component handlers
# ic.core.Logger
Circular log buffer for frontend log entries. Owned by ic.Frame and populated by @log events sent by the Svelte logger. Logging is opt-in: entries are only collected when ic.Frame.Debug is true. when ic.Frame.Debug is false, the Svelte logger discards entries immediately Log levels in ascending priority: debug < info < warn < error.
Priority weights for the four log levels; used for threshold comparison
Circular buffer of log entry structs
Maximum number of entries to retain. Oldest is dropped when this limit is hit
Minimum log level. Entries with a lower priority are discarded and not stored in the buffer
Set the minimum level. Entries below this level are ignored and not stored in the buffer.
Add a log entry received from the Svelte frontend. The entry is silently dropped if its level is below the set LogLevel.
A logical value of true if the entry was stored, or false if it was filtered outReturn all stored log entries as a MATLAB table.
Table with columns: level, source, message, context, timestampReturn log entries matching the specified criteria (all criteria are ANDed).
Table subset matching all specified filtersframe.Logger.filter(Level="warn");
frame.Logger.filter(Source="Bridge", Since=minutes(5));
frame.Logger.filter(Contains="failed", Limit=10);Print the n most recent log entries to the command window. Each entry is formatted as: HH:mm:ss.SSS [LEVEL] [source] message. Structured context fields are printed indented below the message.
Empty the log buffer
Format and print a single log entry to the command window. format: HH:mm:ss.SSS [LEVEL] [source] message structured context fields are printed indented below the message.
# Reactivity & Events
# ic.mixin.Reactive
Automatic bidirectional synchronization of properties and events with the frontend. Properties marked with Description = "Reactive" and SetObservable publish changes via events to the view, and subscribe to changes from the view. The view debounces property changes at 50ms to avoid flooding the communication channel, so rapid changes in the frontend only trigger one update. Events marked with Description="Reactive" are forwarded from the frontend, and reach the component as a ic.event.MEvent. One important property of events is that the view only starts publishing them once a MATLAB listener is attached, and they stop being published when the last listener is removed.
PostSet listeners for reactive properties, keyed by property name
Reference count of MATLAB listeners per reactive event, used for lazy activation
Overrides MATALBs addlistener to track reactive event listeners.
Introspects the class metadata and wires up all reactive properties and events
Publishes the property with the current value to the view.
Subscribes to property events from the view and sets the property silently (without echoing back).
Returns whether the specified method is marked as reactive (Description="Reactive").
Collects reactive properties, events, and methods into struct arrays for serialization in the component definition payload.
Decrements the listener count and publishes an event when the last MATLAB listener for a reactive event is removed.
Returns whether the specified event is marked as reactive (Description="Reactive").
# ic.mixin.Publishable
Base class establishing the communication layer for exchanging events with the frontend. Components can publish events to the view, subscribe to events from the view, and queue events until the component is attached
Queued ic.event.JsEvent objects awaiting attachment to a view
Map of event names to their callback handlers
Sends a named event with data to the frontend view.
The name of the event is converted to camelCase before dispatch
Registers a callback for events with the given name
Stops listening to events with the specified name.
Sends all queued events to the parent component and clears the queue. If and when the component is linked to a ic.core.View, the events will reach the frontend
The flushed ic.event.JsEvent arrayResolves a publish promise and removes the @resp subscription.
# ic.event.MEvent
Event data wrapper for frontend-originated component events. When a reactive event fires on the Svelte side, ic.mixin.Reactive re-notifies it as a MATLAB event via notify().
Payload delivered by the frontend event
# ic.event.JsEvent
Wire-format event for all MATLAB-to-Svelte communication. Carries information about the component publishing the event, the event name, payload data.
Target component ic.core.ComponentBase.ID
Event name
Event payload
Unique event identifier (uuid), used for request/response correlation when the frontend responds to this event.
Encode as JSON string; arrays produce a JSON array. Data is assigned after the struct to avoid field-name restrictions when Data differs across elements.
# ic.event.TransportData
Protocol superclass for objects that cross the MATLAB → JS bridge. subclasses implement toStruct() to produce a plain struct, cell, or scalar that ic.utils.toTransport can convert to a bridge-ready payload without calling jsonencode
Transport data
# ic.utils.toTransport
Recursively convert MATLAB data to bridge-ready form. Walks any MATLAB value and produces structs/cells with char/double/logical leaves that sendEventToHTMLSource can transmit directly as JS objects.
Conversion rules:
- ic.event.TransportData → call toStruct(), recurse result
- Struct → recurse each field
- Cell → recurse each element
- String scalar → char
- String array → cell of char
- String.empty → [] (JS null)
- Inf scalar → [] (JS null)
- Containers.Map→ struct (hyphens → underscores in keys)
- Table → cell array of row structs (recurse cell values)
- Datetime → char
- Categorical → char
- Everything else (double, logical, char, uint8, …) → pass through
# Async
# ic.async.Promise
Represents a pending value from a client-side method call or request. Users can check if the promise has fulfilled withisResolved and get the value with get. The promise fulfills when the client responds to the request, and the resolved value is passed to any callbacks registered with then. Users can also block execution until fulfillment with wait, which polls the promise's status until it fulfills or a timeout elapses
Resolved value; empty until the promise fulfills
Whether the promise has fulfilled (resolved to a value)
Return the resolved value, or empty if not yet fulfilled.
Resolved value, or [] if still pendingCheck isResolved before calling get to distinguish a fulfilled empty value from a still pending promise.
Fulfill the promise with the given value. if value is another promise, waits for that promise to resolve first.
Register a callback to run when the promise fulfills If the promise was already fulfilled, the callback runs immediately.
A new ic.async.Promise that resolves to the callback's return valuep = comp.focus();
p.then(@(res) disp(res.Data));
result = p.then(@(x) x * 2).then(@(x) x + 1);Block execution until the promise fulfills or the timeout elapses.
p = comp.focus().wait(2);
if p.isResolved(), disp(p.get()); endReturn a new promise that fulfills when all input promises have fulfilled.
ic.async.Promise resolving to a cell array of each promise's valuep1 = comp1.focus();
p2 = comp2.focus();
ic.async.Promise.all(p1, p2).wait();Fires when the promise fulfills
# ic.async.Resolution
Result of a client-side request. The MATLAB mirror of the TypeScript type Resolution = {success: boolean, data: unknown}.
# Mixins
# ic.mixin.Stylable
Dynamic CSS styling capabilities for components. Styles are scoped to the component wrapper DOM element (tagged with its ic.core.ComponentBase.ID). Internally, it uses constructable stylesheets (CSSStyleSheet) for performant rule injection. Note that styles shouldn't be applied to the wrapper element itself. Instead, children or descendants should be targeted via selectors All style operations are accessed through the css property, which returns a ic.mixin.StyleBuilder instance.
Util ic.mixin.StyleBuilder class that simplifies common style update patterns with a fluent syntax
Styles
# ic.mixin.StyleBuilder
Fluent builder for applying CSS styles and keyframes to components. All style operations (set, get, clear) and keyframe definitions are accessed through this class via the ic.mixin.Stylable.css property.
The ic.mixin.Stylable component this builder operates on
Applies CSS styles to elements matching the CSS selector. Styles are merged with any existing styles for the selector, and properties set to "" are removed. The complete style object for the selector is published to the view on each update, so it's recommended to batch multiple style changes together by passing an object or using the fluent helpers. The selector should target children or descendants of the component wrapper, not the wrapper itself. For example, to set styles on all direct children, use "> *". See the CSS selector reference for more details and examples
The builder itself, for chainingcomp.css.style("> *", "width", "100%")
comp.css.style(".label", "color", "red")
comp.css.style("> *", struct("flex", "1", "margin", "5px"))Sets CSS custom properties (variables) on the given selector. unlike style(), this method accepts property names with -- prefixes that are not valid MATLAB struct field names. Names are used as-is with no camelCase conversion. The -- prefix is added automatically if not already present.
The builder itself, for chainingcomp.css.vars("> *", "--ic-font-size", "14px")
comp.css.vars("", "--my-color", "red", "--my-gap", "8px")Returns the current styles for a selector.
The style struct, or an empty struct if none setRemoves all styles for a specific selector.
Removes all dynamic styles for the component
Returns all dynamic styles as an object mapping selectors to their style structs.
A containers.Map mapping selectors to style structsDefines a CSS @keyframes animation. The keyframe is not scoped, (global), so in theory any component can reuse it
Frames can be specified as a struct-of-structs or as alternating stop-name / properties-struct pairs:
comp.css.keyframes("fadeIn", struct( ...
"from", struct("opacity", "0"), ...
"to", struct("opacity", "1")))
comp.css.keyframes("slide", ...
"0%", struct("transform", "translateX(0)"), ...
"100%", struct("transform", "translateX(100px)"))
comp.css.style("> *", "animationName", "fadeIn", "animationDuration", "1s")Removes a previously defined @keyframes animation.
Sets width to 100%.
Sets height to 100%.
Sets both width and height to 100%.
Sets the component width, in pixels or as a CSS size string.
Sets the component height, in pixels or as a CSS size string.
Sets the minimum width, in pixels or as a CSS size string.
Sets the minimum height, in pixels or as a CSS size string.
Sets the maximum width, in pixels or as a CSS size string.
Sets the maximum height, in pixels or as a CSS size string.
Sets the flex shorthand (grow, shrink, basis).
Sets how much the item grows relative to siblings.
Sets how much the item shrinks relative to siblings.
Sets the initial main size before growing/shrinking.
Overrides the parent's align-items for this component.
Sets the component margin, in pixels or as a CSS spacing string.
Sets the component padding, in pixels or as a CSS spacing string.
Hides the component (display: none).
Shows the component with the specified display type.
Makes the component invisible but preserves its layout space.
Makes the component visible.
Sets the component opacity (0 = transparent, 1 = opaque).
Sets the CSS positioning type.
Sets the z-index (stacking order).
Sets overflow behavior for both axes.
Sets horizontal overflow behavior.
Sets vertical overflow behavior.
# ic.check.CssValidators
Static validation functions for CSS-related properties.
Validate grid-template-columns/rows values. Accepts a numeric array (pixel values) or a string (CSS syntax).
Validate gap values (row-gap, column-gap). Accepts a number (pixels), a 1–2 element numeric array, or a string.
Validate spacing values (padding, margin). Accepts a number (pixels), a 1–4 element numeric array (CSS shorthand), or a string.
Validate size values (width, height, icon size). Accepts a non-negative scalar (pixels) or a string (CSS value).
# ic.mixin.Effectable
Cross-component reactive expressions that run on the frontend.
Effects track property reads and re-run automatically when dependencies change. the frontend counterpart compiles expressions into Svelte 5 $effect() runes with reactive component proxies exposing properties, methods, the component's root DOM element, and other metadata
Creates a reactive expression that runs on the frontend and evaluates with all the components passed as arguments. The expression is the last argument and must be an arrow function whose parameters correspond positionally to the component arguments, and whose body contains the reactive code to run on the frontend. The effect automatically tracks property reads on the component proxies and re-runs whenever those properties change. In Javascript, each component proxy in the expression provides: .props - reactive properties .methods - callable methods .el - root DOM element .id - component unique ID .type - MATLAB class type
A ic.effect.JsEffect handle whose remove() method destroys the effecte = slider.jsEffect(progress, ...
"(s, p) => { p.props.value = s.props.value }");
e.remove();Effect utils
# ic.effect.JsEffect
Handle to a frontend reactive effect created via ic.core.ComponentBase.jsEffect()
Unique identifier for this effect
The component that owns this effect
Boolean flag that indicates whether this effect has been removed from the frontend effect manager.
Stop and remove this effect from the frontend effect manager.
# ic.utils.bind
Create a one-way property binding between two components. wraps ic.mixin.Effectable.jsEffect with a concise source→target expression.
effect = ic.utils.bind(slider, "value", progress, "value")
effect = ic.utils.bind(slider, "value", label, "text", "x + '%'")# ic.mixin.Keyable
Keyboard shortcut registration for components. allows registering keyboard shortcuts via onKey and receiving callbacks when the shortcut is pressed while the component has focus. each registration returns a ic.key.KeyBinding handle for independent removal
Register a keyboard shortcut with a callback. multiple callbacks can be registered for the same shortcut; each is invoked independently when the shortcut matches.
A ic.key.KeyBinding handle whose remove() method unregisters this specific callbackk = comp.onKey("Ctrl+S", @(src, data) disp(data));
k = comp.onKey("Ctrl+Enter", @(src, data) compile(), ...
"PreventDefault", true);
k.remove();Remove all keyboard shortcut bindings
Remove a specific binding by ID. called by ic.key.KeyBinding.remove
Route incoming @keyPressed to all callbacks matching the shortcut
Key utils
# ic.key.KeyBinding
Handle to a registered keyboard shortcut created via ic.mixin.Keyable.onKey
The shortcut string this binding listens for
The component that owns this binding
Unique identifier for this binding
Whether this binding has been removed
Unregister this keyboard shortcut binding. if this was the last callback for the shortcut, the frontend listener is also removed
# ic.mixin.Requestable
Frontend-initiated request/response communication. Enables the Svelte frontend to send named requests to MATLAB and receive responses asynchronously. Used for load-on-demand patterns where the frontend pulls data (e.g., lazy loading of ic.VirtualTree). Internally subscribes to a request event with a unique name, and on receiving, publishes a response event with the same unique ID
# ic.mixin.Registrable
Tree-walking registration and deregistration of components in the ic.Frame registry. When a component is inserted into or removed from a container, this mixin recursively registers or deregisters the subtree for O(1) event dispatch.
# ic.mixin.AllowsOverlay
Grants a container the ability to host overlay components in the "overlay" target.
Inserts a child into the implicit "overlay" target. Only components inheriting ic.mixin.Overlay are accepted.
# ic.mixin.Overlay
Mixin identifying components that can be added via ic.mixin.AllowsOverlay.addOverlay.
# Assets
# ic.Asset
Universal source type for icons, images, and files. Accepts a:
- Lucide icon name
- A local file path
- A HTTP/HTTPS URL
Any of these types are automatically detected when constructing from a string, so components that type a property as ic.Asset get implicit string conversion. Assets from urls or files are hashed and cached in the ic.AssetRegistry to avoid redundant uploads to the frontend. If an asset has been sent before (hash match), only the hash is sent to the frontend; otherwise, the raw bytes are sent along with the hash and MIME type.
Download a URL and return its bytes; caches by URL to skip repeated HTTP requests.
Read a local file into raw bytes.
Download a URL to a temp file and return raw bytes.
Compute a pure-MATLAB fingerprint for deduplication (no Java dependency).
Map a file extension to a MIME type string; falls back to "application/octet-stream".
# ic.AssetRegistry
Per-view (uihtml) asset deduplication tracker. tracks which ic.Asset hashes have been sent to each ic.core.View so that repeated references only transmit a {hash} stub instead of the full base64 payload. The ic.core.View is responsible for activating the registry before encoding assets and for ensuring that view references in the registry are properly cleaned up on destruction.
Singleton instance
Map from double(view) → containers.Map of sent hashes for that view
Handle ref to the currently active view's sent-hash map
Shared URL download cache: URL string → struct(raw, ext, hash)
Remove a destroyed view's sent-hash map.
Return the singleton instance.
Set the active view for the current encoding pass. creates the view's sent-hash map on first call and registers a cleanup listener for when the view is destroyed.
Return the shared URL download cache (handle ref, safe to write to).
Return true if this hash has already been sent to the active view.
Record that this hash has been sent to the active view.
Asset validation
# ic.assets.mustBeIcon
Validate that an asset is a valid icon source. Accepts empty (no icon), name (Lucide), or file/url with .svg extension.
# ic.assets.mustBeIconOrImage
Validate that an asset is a valid icon or image. Accepts anything that passes ic.assets.mustBeIcon or ic.assets.mustBeImage
# ic.assets.mustBeImage
Validate that an asset is a valid image source. Accepts empty (no image), file (must have image extension), or url
# ic.assets.mustBePdf
Validate that an asset is a valid PDF source. Accepts empty (no document), file (must be .pdf), or url
# Theming
# ic.style.Theme
CSS custom property values with light/dark scheme support. Changes to Theme properties trigger a event on the owning ic.Frame, which sends the updated theme to the frontend to update the CSS variables. The frontend applies the appropriate value from each [light, dark] pair based on the current color scheme.
Page and component background color
Default text color
Main brand/action color
Text on primary backgrounds
Alternative action color
Text on secondary backgrounds
Subtle background for less prominent elements
Text on muted backgrounds
Highlight/emphasis color
Text on accent backgrounds
Error/danger color
Text on destructive backgrounds
Positive/success color
Text on success backgrounds
Caution/warning color
Text on warning backgrounds
Informational color
Text on info backgrounds
Default border color
Input field border color
Focus ring color
Default border radius
Current color scheme
Serialize as CSS custom properties in JSON form. color properties are sent as [light, dark] arrays; the frontend selects the value based on the active color scheme.
# Utilities
# ic.utils.toCamelCase
Convert a string to camelCase.
# ic.utils.toKebabCase
Convert camelCase or PascalCase strings to kebab-case.
# ic.utils.toPascalCase
Convert a string to PascalCase.
# ic.utils.toSnakeCase
Convert a string to snake_case.
# Form Components
# ic.Button
Interactive button component that can be clicked to trigger actions
Text label of the button
Visual style variant
Fill style of the button
Shape style of the button
Dimension of the button, as a function of the text font size
Whether the button is disabled and cannot be interacted with
Position of the icon relative to the label (see Icon)
Programmatically focus the button
# ic.SplitButton
Button with a dropdown for additional actions. Displays a main button with a chevron trigger that opens a dropdown listing all items with optional icons/images and descriptions.
List of labels for each action. The first item is considered the "main" action and is triggered when the main button (not the chevron) is clicked
Optional descriptions shown below each item label in the dropdown
Visual style variant
Fill style of the button
Dimensions of the button relative to the component font size
Whether the control is disabled and cannot be interacted with
Layout of the split button and dropdown chevron
Set, replace or remove the icon for a dropdown item
btn = ic.SplitButton("Items", ["New", "Edit", "Delete"]);
btn.setIcon("Edit", "star");Get the icon for a dropdown item
The ic.Icon object for the item, or empty if there is no iconProgrammatically focus the main button
# ic.InputText
Single-line text input field with optional prefix/suffix, validation, and character counter
Current text content
Ghost text when displayed on an empty input
Visual style variant
Dimension of the input relative to the text font size
Whether the input is disabled and cannot be interacted with
Whether the input is read-only
Whether the input is in an invalid state. When true, the input box will be styled with error colors and the ErrorMessage will be displayed if set.
Error message displayed below the input when invalid
Helper text displayed below the input
Text or symbol displayed before the input
Text or symbol displayed after the input
Whether to show a clear button on the input box to remove the contents
Maximum number of characters allowed (0 = unlimited)
Programmatically focus the input
Programmatically blur (unfocus) the input
Select all text the in the input
Remove all text from the input
# ic.Password
Masked text input with visibility toggle.
Current text value of the password input
Visual style variant
Dimension of the input relative to the text font size
Whether the input is disabled and cannot be interacted with
Whether the input is read-only
Whether the input is in an invalid state. When true, the input will be styled with error colors and the ErrorMessage will be displayed below the input.
Error message displayed below the input when invalid
Helper text displayed below the input
Whether to show the visibility toggle button that allows the user to switch between masked and unmasked input
Programmatically focus the input
Programmatically blur (unfocus) the input
Select all text in the input
Clear the input value
# ic.TextArea
Multi-line text input field. Supports validation states, character counting, and auto-resize to fit content
Current text value of the textarea
Ghost placeholder text when textarea is empty
Visual style variant
Dimension of the textarea relative to the component font size
Whether the textarea is disabled and cannot be interacted with
Whether the textarea is read-only and cannot be edited
Whether the textarea is in an invalid state, which will trigger error styling and display the ErrorMessage
Additional text displayed below the textarea
Number of visible text rows
Resize behavior of the textarea
Whether the textarea auto-grows to fit content, increasing the number of rows as it needs
Maximum number of characters allowed (0 for unlimited)
Programmatically focus the textarea
Programmatically blur (unfocus) the textarea
Select all text in the textarea
Clear the textarea value
# ic.Select
Single-value dropdown selector. Displays a trigger field that opens a scrollable dropdown list. Supports search filtering, clearable selection, and keyboard navigation.
List of selectable options
Ghost text shown when no value is selected
Whether the control is disabled and cannot be interacted with
Whether the control is in an invalid state, in which case it is highlighted with an error color and the ErrorMessage text is shown
Text shown below the field
Whether a "x" clear button is shown in the trigger field to clear the selection
Whether the search input can be used to filter the dropdown options
Size of the control relative to the component font size
Visual style variant
Maximum height of the popup dropdown list, in pixels. If the content exceeds this height, the dropdown becomes scrollable.
Programmatically focus the trigger field
Programmatically clear the selected value
Programmatically open the dropdown
Programmatically close the dropdown
# ic.MultiSelect
Multi-value dropdown selector with tags. Provides a searchable dropdown with checkboxes for item selection. Selected items are then displayed as closable tags inside the input field.
List of selectable options that will appear in the dropdown. They should be unique
List of currently selected items
Ghost text shown when no items are selected
Whether the control is disabled and cannot be interacted with
Whether a closing "x" button should appear on the input field to clear all selected values at once
Dimension of the input field and tags relative to the text font size
Visual style variant
Maximum height of the dropdown popup, in pixels. Content that exceeds this height will be scrollable
Maximum number of selectable items (Inf = unlimited)
Programmatically focus the input field
Programmatically clear all selected values
Programmatically open the dropdown
Programmatically close the dropdown
# ic.TreeSelect
Hierarchical multi-value selector with cascading menus. Opens cascading sub-menus for hierarchical item selection; and displays selected items as closable tags inside the input field.
Text shown when no items are selected
Whether an "x" icon appears on the input field, allowing the user to clear all selected items with one click
Dimension of the component relative to the font size
Visual style variant
Maximum height of the dropdown, in pixels or as a CSS string. Content that exceeds this height will cause the dropdown to scroll.
Maximum width of each cascade panel, in pixels or as a CSS string. Panels that exceed this width will truncate content with an ellipsis.
Whether hovering a folder row auto-opens its sub-panel
Programmatically focus the input field
Programmatically open the dropdown
Programmatically close the dropdown
# ic.SearchBar
Tag-based search input. Displays a search field where typing the separator character converts the typed text into a tag. Tags can have icons assigned via prefix triggers: if the text starts with a trigger string, it is stripped and the corresponding icon is shown.
Current tags as a string array
Character that triggers closing a tag and starting a new one
Ghost text shown when there are no tags and the input is empty
Whether the control is disabled and cannot be interacted with
Whether to display a "x" close button in the input field to remove all tags at once
Dimensions of the control relative to the component font size
Visual style variant
Map of prefix strings to Lucide icon names. If the user types a tag that starts with one of the prefix strings, that prefix is stripped and the corresponding icon is shown in the tag
Programmatically focus the search input
Programmatically clear all tags
# ic.Checkbox
Simple toggle checkbox
Checkbox state (on or off)
Text label displayed next to the checkbox
Visual style variant
Dimension of the checkbox relative to the text font size
Whether the checkbox is disabled and cannot be interacted with
When true, the checkbox is in an indeterminate state (neither on nor off) and displays a dash instead of a checkmark
Position of the label relative to the checkbox
Programmatically focus the checkbox
Triggered when the user toggles the checkbox
# ic.Switch
Switch slider that maintains on/off state
Switch state
Visual style variant
Shape of the switch track and thumb
Dimension of the switch relative to the component font size
Whether to display the on/off state label next to the switch
Whether the switch is disabled and cannot be interacted with
Programmatically focus the switch
Triggered when the user toggles the switch
# ic.ToggleButton
Latching button that maintains on/off state
Text label of the button
Toggle state
Visual style variant
Dimension of the button relative to the component font size
Whether the button is disabled and cannot be interacted with
Programmatically focus the button
Triggered when the user toggles the button
# ic.RadioButton
Single-select radio group
Labels for each radio option
Currently selected item
Optional group label displayed above the options
Visual style variant
Dimension of the radio buttons relative to the text font size
Whether the control is disabled and cannot be interacted with
Position of each row label relative to its button
Layout direction of the radio group
Set or replace the icon for a radio item
rb = ic.RadioButton("Items", ["A", "B", "C"]);
icon = ic.Icon("Source", "star");
rb.setIcon("B", icon);Get the icon for a radio item
The ic.Icon currently set for the item, or an empty value if no icon is setProgrammatically focus the radio group
Triggered when the user selects a different option
# ic.SegmentedButton
Group of connected toggle segments, from which one or more can be selected
Text labels for each segment
Whether multiple segments can be selected at the same time
Whether to display text labels. If disabled, only the icons will be shown
Visual style variant
Size of the segments relative to the component font size
Whether the control is disabled and cannot be interacted with
Position of the icon relative to the text label of each toggle segment
Set, replace or remove the icon for a segment
sb = ic.SegmentedButton("Items", ["Bold", "Italic", "Underline"]);
sb.setIcon("Bold", ic.Icon("bold"));Get the icon for a segment
The ic.Icon object in the segment, or empty if there is no iconProgrammatically focus the segmented button
Triggered when the user selects or deselects a segment
# ic.Slider
Numeric slider input control
Current value of the slider
Minimum value achieved when the thumb is at the leftmost (or bottommost) position
Maximum value achieved when the thumb is at the rightmost (or topmost) position
Step increment for snapping the thumb
Whether the slider is disabled and cannot be interacted with
Layout direction of the slider
Whether to display a text label with the current value of the slider thumb
Position of the value label relative to the slider (if ShowValue is true)
Dimension of the slider track and thumb relative to the component font size
Color variant of the slider
Style of the slider thumb
Whether to display graduation tick marks along the slider track
Spacing between tick marks. If the interval is 0, tick marks automatically align with the step increments.
Programmatically focus the slider thumb
Triggered continuously while the user interacts with the slider (drag or keyboard)
# ic.RangeSlider
Dual-thumb slider for selecting a numeric range (see also: ic.Slider)
Current lower value of the selected range
Current upper value of the selected range
Minimum value of the track
Maximum value of the track
Step increment for snapping the thumbs
Whether the range slider is disabled and cannot be interacted with
Layout direction of the slider
Whether to display a label with the current value(s) of the slider thumbs
Position of the value labels relative to the slider
Dimensions of the slider track and thumbs relative to the component font size
Color variant of the slider
Style of the slider thumb
Whether to display graduation tick marks along the slider track
Spacing between tick marks (if 0, they automatically align with the step increments)
Programmatically focus the low thumb
# ic.Knob
Rotary knob input control.
Current value of the knob
Minimum value
Maximum value
Step increment
Whether the knob is disabled and cannot be interacted with
Dimension of the knob relative to the text font size
Color variant of the knob
Whether to display the current value in text form
Whether to display an arc ring along the knob from the Min position to the current value
Whether to display graduation tick marks. Ticks are evenly spaced between the Min and Max values, with a total count specified by TickCount
Sprintf-style format string for the value label
Position of the value label relative to the knob
Programmatically focus the knob
Triggers continuously while the user interacts with the knob (drag or keyboard)
# ic.ColorPicker
Color selection control. Displays a colored swatch that opens a popup editor with a hue slider, an alpha slider, and optional preset color swatches.
Current color value as a string
Display format for the color value
Whether to display the color value in text form next to the swatch
Whether the control is disabled and cannot be interacted with
Size of the swatch trigger, relative to its font size
List of preset colors to show as additional swatches in the popup editor. Each color should be a valid CSS color string
Position where the popup opens relative to the swatch. If "best", the position will be automatically chosen to fit within the viewport.
Programmatically focus the swatch trigger
Triggered while the color value is being changed (this differs from Value in that it is not debounced, so it fires on every change as the user drags the sliders in the editor)
Fires when the color editor popup opens
Fires when the color editor popup closes
# Display Components
# ic.Label
Displays text with configurable typography and styling options
The text content to display
Semantic variant that determines the default styling of the label
Text size, scaling the base font size of the label (i.e "xs" applies a 0.625 scaling factor to the base font size, "lg" applies a 1 scaling factor, etc.)
Font weight
Text alignment within the label
Text color specified as a semantic color name
Whether to truncate overflowing text with ellipsis
Whether the text can be selected and copied
# ic.Icon
Display an SVG icon read from an ic.Asset.
Size of the icon, in pixels or CSS string. The size is applied to both the width and height of the icon
Color of the icon, used for the stroke of line icons and the fill of solid icons. Can be any CSS color string. An empty string means to inherit the color from the parent container
Stroke width for line icons, in pixels
Returns all available Lucide icon names.
names = ic.Icon.list() % all ~1900 icons
names(contains(names, "arrow")) % filter by keywordLocates the lucide-static icons directory relative to this file
# ic.Image
Displays a raster or vector image in any of the following formats: PNG, JPG, GIF, WebP, SVG, BMP.
Width of the image, in pixels or as a CSS string
Height of the image, in pixels or as a CSS string
Way in which the image fills its container. See the Mozilla Developer documentation for details
Corner rounding radius, in pixels or as a CSS string
Image opacity, between 0 (fully transparent) and 1 (fully opaque)
# ic.ProgressBar
Linear progress indicator to indicate the completion
Current value of the progress, clipped to the range defined by Min and Max
Minimum value of the range, representing 0% fill of the progress bar
Maximum value of the range, representing 100% fill of the progress bar
Whether progress is indeterminate (unknown value). If true, shows an infinite loading animation instead of a finite progress
Whether to show diagonal stripes pattern in the progress bar
Whether stripes should animate (only applies when Striped is set to true)
Height size of the progress bar, relative to the font size
Color scheme of the progress bar
Color gradient stops for progressbar, specified as a struct array with fields: color (CSS color string) and stop (numeric percentage). Only applies when Variant is set to "gradient"
Whether to display a label with the progress.
Label formatting and position can be customized with the LabelFormat and LabelPosition properties
Sprintf-style format for the label.
Supports %d (integer), %f (float), %.Nf (N decimals), %% (literal %)
Position of the label relative to the progress bar.
When the Orientation is set to "vertical", the value of the position will be mapped such that "left" is "top" and "right" is "bottom"
Layout direction of the progress bar
Convenience method to apply CSS styles directly to the progress track (background portion). See ic.mixin.Styleable for more details on how to specify styles.
pb.styleTrack("backgroundColor", "#e5e7eb");Convenience method to apply CSS styles directly to the progress bar (filled portion). See ic.mixin.Styleable for more details on how to specify styles.
pb.styleBar("backgroundColor", "linear-gradient(to right, #ef4444, #f59e0b, #22c55e)");# ic.CircularProgressBar
Circular progress indicator to indicate progress
Current value of the progress, clipped to the range defined by Min and Max
Minimum value of the range, representing 0% fill of the progress bar
Maximum value of the range, representing 100% fill of the progress bar
Whether progress is indeterminate (unknown value). If true, shows an infinite spinning animation instead of a finite progress
Overall diameter of the circular progress bar, relative to the font size of the component
Color variant of the progress arc
Color gradient stops for progress arc, specified as a struct array with fields: color (CSS color string) and stop (numeric percentage). Only applies when Variant is set to "gradient"
Whether to display the progress value as a label in the center of the circle
Label formatting can be customized with the LabelFormat property
Sprintf-style format for the label
Supports %d (integer), %f (float), %.Nf (N decimals), %% (literal %)
Thickness of the progress arc, in SVG units (the viewBox of the circular progress is 100x100, so a StrokeWidth of 10 means the arc thickness is 10% of the diameter)
Shape of the arc endpoints
Whether to show graduation tick marks around the ring
Tick marks will be evenly spaced along the circumference of the circle, and the number of ticks can be configured with the TickCount property
Number of tick marks around the ring
Angle at which the arc begins, in degrees. The angle is measured clockwise from top (i.e. 0 degrees means the arc starts at 12 o'clock)
How many degrees the arc spans, in degrees. For example, a SweepAngle of 180 means the arc will span half the circle (e.g. from 12 o'clock to 6 o'clock if StartAngle is 0)
Convenience method to apply CSS styles directly to the progress track (background portion). See ic.mixin.Styleable for more details on how to specify styles.
Convenience method to apply CSS styles directly to the progress bar (arc portion). See ic.mixin.Styleable for more details on how to specify styles.
Convenience method to apply CSS styles directly to the label. See ic.mixin.Styleable for more details on how to specify styles.
# ic.Spinner
Animated loading indicator with multiple style variants.
Animation style of the spinner
Overall size of the spinner, relative to the font size of the component
Color scheme used for the spinner
Animation speed
# Layout Components
# ic.FlexContainer
Flexbox layout container for arranging child components in a single axis
Main axis direction for laying out children
Whether children wrap to new lines when they overflow the main axis
Alignment of children along the main axis
Alignment of children along the cross axis
Spacing between child elements, in pixels or as a CSS string
Internal padding, in pixels or as a CSS string
# ic.GridContainer
Css grid layout container for arranging child components in a two-dimensional grid
Column track sizes as a CSS grid-template-columns string
Row track sizes as a CSS grid-template-rows string
Spacing between grid cells, in pixels or as a CSS string
Vertical alignment of items within their grid cells
Horizontal alignment of items within their grid cells
Auto-placement algorithm used when items are not explicitly positioned
Internal padding, in pixels or as a CSS string
# ic.Splitter
Resizable split pane container. Divides space into resizable panes separated by draggable gutters. Use addPane to create panes, then configure the panes properties individually
Split orientation
Size of the draggable gutter between panes, in pixels
Whether resizing is disabled
Current percentage sizes of all panes
Array of ic.SplitterPane children
Add a new pane to the splitter.
The created ic.SplitterPanep = splitter.addPane(Size=40, MinSize=10);
p.addChild(ic.Label(Text="Content"));Collapse the pane at the given index
Fires after pane sizes change
# ic.SplitterPane
Single pane within an ic.Splitter container. Holds sizing constraints and user content for one pane. Create panes via ic.Splitter.addPane, not directly.
Percentage size of this pane (0-100). NaN means the size is auto-distributed among remaining panes
Minimum percentage size that this pane can be resized to
Maximum percentage size that this pane can be resized to
Collapse this pane to its minimum size.
# ic.TabContainer
Tabbed container with closable, renamable, and reorderable tabs.
How tabs behave when they overflow the tab bar. When "scroll", tab headers remain in a single line and can be scrolled; when "wrap", the tab header bar is wrapped to multiple lines; "menu" makes overflowed tabs are collapsed into a dropdown menu.
Whether all tab interactions are disabled
Whether tabs can be reordered via drag-and-drop
Dimension of the tab headers relative to the component font size
Target string of the currently selected tab (e.g. "tab-0"). Set by the framework when the user clicks a tab
Array of ic.tab.Tab children (read-only)
Array of ic.tab.TabPanel children (read-only)
The currently selected Tab handle, or empty if none. Use selectTab() to programmatically select a tab.
Monotonic counter
Guard flag: prevents handleTabDestroyed from duplicating cleanup that removeTab already handles.
Add a new tab to the container.
The ic.tab.TabPanel (content area) and ic.tab.Tab (header)tc = ic.TabContainer();
[panel, tab] = tc.addTab("Home", Icon="home", Closable=true);
panel.addChild(ic.Button(Label="Click me"));Remove and delete a tab from the container. Accepts a ic.tab.Tab handle or a target string
tc.removeTab(tab);
tc.removeTab("tab-2");Fires when the selected tab changes
Fires when a tab's close button is clicked. The tab is automatically deleted after this event
Fires when tabs are reordered via drag-and-drop
Fires when a tab label is edited via double-click
# ic.tab.Tab
Header configuration for a tab within an ic.TabContainer or ic.TileLayout. Tab is not a container, it simply holds the reactive properties for its tab header (label, icon, closable, disabled) and a reference to its paired ic.tab.TabPanel. Create tabs via ic.TabContainer.addTab or ic.TileLayout.addTab, not directly.
Text displayed in the tab header
Whether the tab shows a close button
Whether the tab is disabled and cannot be selected
Whether the tab label can be renamed by double-clicking on it
Reference to the paired ic.tab.TabPanel
# ic.tab.TabPanel
Content container for a tab within an ic.TabContainer or ic.TileLayout. Add child components to the panel returned by ic.TabContainer.addTab or ic.TileLayout.addTab.
# ic.TileLayout
Tiling tab layout with draggable split areas. A VSCode-style layout where tabs can be dragged to edges to create new split areas. Each area is a tab group with its own selection.
Size of the resize gutter between groups, in pixels
Dimension of the tab headers relative to the component font size
Whether all interactions are disabled
Whether tabs can be dragged between groups
Array of ic.tab.Tab children
Array of ic.tab.TabPanel children
Monotonic counter
Guard flag: prevents handleTabDestroyed from duplicating cleanup that removeTab already handles.
Add a new tab to the layout.
The ic.tab.TabPanel (content area) and ic.tab.Tab (header)tl = ic.TileLayout();
[panel, tab] = tl.addTab("Home", Icon="home", Closable=true);
panel.addChild(ic.Button(Label="Click me"));Remove and delete a tab from the layout. Accepts a Tab handle or a target string (e.g. "tab-0").
Fires when a tab's close button is clicked. The tab is automatically deleted after this event
Fires when a tab is moved between groups via drag-and-drop
Fires on any layout change (split, merge, resize, or move)
# ic.Accordion
Collapsible panel container with expandable sections. Each section is an AccordionPanel with its own Label, Icon, and Open state. Panels are added via addPanel and hold child components in their content area.
Whether multiple panels can be open at the same time. When false, opening a panel closes any other open panel
Dimension of the panel headers relative to the component font size
Whether all panel interactions are disabled
Array of ic.accordion.AccordionPanel children
Monotonic counter
Guard flag: prevents handlePanelDestroyed from duplicating cleanup that removePanel already handles.
Add a new panel to the accordion.
The created ic.accordion.AccordionPanelacc = ic.Accordion();
p = acc.addPanel("General", Icon="settings", Open=true);
p.addChild(ic.InputText(Placeholder="Name"));Open all panels
Close all panels
Fires when a panel is opened or closed by the user
# ic.accordion.AccordionPanel
Collapsible content panel within an ic.Accordion. Holds the header configuration (label, icon and open state) and acts as a container for child components. Create panels via ic.Accordion.addPanel, not directly.
# Overlay Components
# ic.Dialog
Modal overlay with a title, content body, and action buttons. The dialog auto-deletes after submit or close when DestroyOnClose is true.
Heading text displayed in the dialog header
Whether the dialog is visible
Maximum width of the dialog, relative to the component font size
Whether the close button and Escape key are enabled to close and delete the dialog
Whether clicking the backdrop closes the dialog
Text for the submit button. Set to "" to hide the button
Text for the cancel button. Set to "" to hide the button
Whether the dialog is automatically deleted after the Submitted or Closed event fires
Programmatically open the dialog
Programmatically close the dialog
Utility function to wire a DOM event on a component to open the dialog
Utility function to wire a DOM event on a component to trigger the submit action
Utility function to wire a DOM event on a component to close the dialog
# ic.Drawer
ic.mixin.Overlay slide-in panel with a title bar, content body, and optional backdrop.
Heading text displayed in the drawer header
Whether the drawer is visible
Edge from which the drawer slides in
Panel dimension (width or height, depending on Side) relative to the font size of the component. "full" makes the drawer take the entire width/height of the viewport.
Whether the close button and Escape key to close the panel are enabled
Whether to show a backdrop behind the panel
Whether clicking the backdrop closes the drawer
Programmatically open the drawer
Programmatically close the drawer without firing the Closed event
Utility function to wire a DOM event on a component to open the drawer
Uses ic.mixin.Effectable.jsEffect under the hood to inject a JavaScript event listener on the specified component that sets the drawer's open prop to true when triggered
Fires when the user dismisses the drawer (close button, Escape, or backdrop click)
# ic.Popover
Floating panel anchored to a trigger component. The popover opens when the user clicks the trigger and closes on click-outside or presses Escape. Add children to the panel via the ic.popover.Panel returned by the Popover's Panel property.
Whether the panel is visible
Edge of the trigger where the panel appears
Alignment of the panel along the side axis
Gap in pixels between trigger and panel
Whether to reposition the panel to stay within the viewport
The trigger component that anchors the popover
The content panel container
Internal flag used during deletion
Programmatically open the popover
Programmatically close the popover without firing the Closed event
Utility function to wire a DOM event on a component to close the popover and fire the Closed event.
# ic.popover.Panel
Content container for an ic.Popover. Add child components here via ic.core.ComponentContainer.addChild. Created automatically by the Popover constructor.
# ic.Toast
Ephemeral notification message. Displays a brief message that auto-dismisses after Duration seconds. The toast auto-deletes when closed (either by timeout, close button, or dismiss).
Message text displayed in the toast
Visual style variant
Seconds until auto-dismiss (use 0 for a persistent toast that must be dismissed manually)
Vertical position on screen
Whether to show the close button
Custom icon displayed before the message. When empty, a default icon is shown based on the variant
Programmatically dismiss and remove the toast
t = ic.Toast("Value", "Data saved successfully!", "Variant", "success");
frame.addChild(t);
pause(2);
t.dismiss();Fires when the toast is dismissed (timeout, close button, or programmatic dismiss). The toast is automatically deleted after this event
# Menu
# ic.mixin.HasContextMenu
Mixin that adds a ContextMenuAction event to a component. Any component inheriting this mixin gets the event bridged automatically by the IC framework. The event payload varies by consumer
Fires when the user clicks a context menu item.
# Panel
# Renderers
# ic.Markdown
Renders Markdown text as formatted HTML using markdown-it v14.
Markdown source text
Height of the container, in pixels or as a CSS size string
Whether to soft-wrap long lines (false = horizontal scroll)
Whether to strip raw HTML tags from the rendered output
Syntax highlighting in fenced code blocks (uses highlight.js v11)
KaTeX v0.16 math rendering: $inline$ and $$block$$
GitHub-style task lists: - [x] done (uses markdown-it-task-lists internally)
Footnote syntax: [^1] (uses markdown-it-footnote internally)
Subscript H~2~O and superscript x^2^ (uses markdown-it-sub and markdown-it-sup internally)
Emoji shortcodes: :smile: → (uses markdown-it-emoji internally)
Admonition blocks: :::warning (uses markdown-it-container internally)
Highlighted text: ==marked== (uses markdown-it-mark internally)
Definition list syntax: Term\n: Definition (uses markdown-it-deflist internally)
Abbreviation tooltips: *[HTML]: Hyper Text Markup Language (uses markdown-it-abbr)
Underlined/inserted text: ++inserted++ (uses markdown-it-ins internally)
Auto-generate id anchors on headings (uses markdown-it-anchor internally)
Custom classes/attributes: {.class #id attr=val} (uses markdown-it-attrs internally)
Render a table of contents via [[toc]] (uses markdown-it-table-of-contents internally)
Render ```mermaid code blocks as diagrams (uses Mermaid.js v10 internally)
# ic.Latex
Renders LaTeX markup as formatted PDF pages. Compilation happens client-side via SwiftLaTeX's PdfTeX WASM engine (no internet required). Images referenced in the source are resolved by MATLAB and embedded as a binary ic.Asset
Bundled packages:
- Math: amsmath, amssymb, mathtools, bm, xfrac, eucal, eufrak
- Structure: geometry, fancyhdr, enumitem, booktabs, multicol, tabularx, caption, subcaption, longtable, lscape
- Graphics: tikz (+pgf, shapes, positioning, arrows), graphicx, xcolor
- Listings: listings (+lstlang1/2/3)
- Refs: hyperref, nameref, url, backref
- Utils: etoolbox, calc, xparse, expl3, verbatim, makeidx
- Classes: article, report, book, letter, proc, slides
Packages not in this list are not available and compilation will fail with "File 'xxx.sty' not found"
Source text that will be compiled as LaTeX
Height of the container, in pixels or as a CSS size string
Whether to show the zoom/export toolbar on mouse hover
Vertical gap between rendered pages, in pixels
Whether to automatically re-render when Value changes
Total number of rendered pages (set by the view after compilation)
Increase zoom level by one step
A ic.async.Promise with the fulfillment status from the viewDecrease zoom level by one step
A ic.async.Promise with the fulfillment status from the viewReset to initial zoom level
A ic.async.Promise with the fulfillment status from the viewScroll to a specific page number
A ic.async.Promise with the fulfillment status from the viewSave the compiled PDF to a file, or open a save dialog if no path is given
A ic.async.Promise with the fulfillment status from the viewl.exportPdf("output.pdf") % save to path
l.exportPdf() % open save dialogTrigger a render of the current Value
A ic.async.Promise with the fulfillment status from the viewResolve image files requested by the LaTeX WASM compiler. returns ic.Asset objects
# ic.Typst
Renders Typst markup as formatted SVG pages. Compilation happens client-side via typst.ts v0.7 WASM. Typst Universe packages are downloaded by MATLAB on demand as they appear in the value. Images referenced in the source are resolved by MATLAB and embedded as binary ic.Asset.
Typst source text
Height of the container, in pixels or as a CSS size string
Whether to show the zoom/export toolbar on mouse hover
Typst page width override (e.g. "210mm", "8.5in"); empty = Typst default
Typst page height override (e.g. "297mm", "11in"); empty = Typst default
Typst page margin override (e.g. "1cm", "(x: 1cm, y: 2cm)")
Base font size override (e.g. "11pt", "14pt")
Font family name override (must be available in the WASM renderer)
Vertical gap between rendered pages, in pixels
Typst Universe packages to pre-load, as version-pinned spec strings (e.g. "@preview/cetz:0.3.4").
Packages referenced via #import in the source are detected automatically; use this property for transitive dependencies or pre-warming.
Whether to automatically re-render when Value changes
Total number of rendered pages (set by the view after compilation)
Containers.Map: "ns/name/ver" → base64 tar.gz string
Increase zoom level by one step
A ic.async.Promise with the fulfillment status from the viewDecrease zoom level by one step
A ic.async.Promise with the fulfillment status from the viewReset to initial zoom level
A ic.async.Promise with the fulfillment status from the viewScroll to a specific page number
A ic.async.Promise with the fulfillment status from the viewCompile to PDF and save to a file, or open a save dialog if no path is given
A ic.async.Promise with the fulfillment status from the viewt.exportPdf("output.pdf") % save to path
t.exportPdf() % open save dialogTrigger a render of the current Value
A ic.async.Promise with the fulfillment status from the viewExtract a tar.gz and scan .typ files for #import "@ns/pkg:ver". Returns a cell array of structs with namespace, name, version.
Resolve image files requested by the Typst WASM compiler. returns ic.Asset objects
Resolve Typst universe packages including transitive deps. Downloads tar.gz from the CDN, scans .typ files for #import statements, and recursively resolves dependencies.
BFS resolution of packages and their transitive dependencies.
# ic.Mermaid
Interactive diagram renderer using Mermaid.js v10. Renders diagram definitions as interactive SVGs with pan/zoom. Supports all Mermaid diagram types: flowcharts, sequence, class, state, ER, Gantt, pie, and more. Colors derive from IC theme variables automatically. All rendering is client-side.
Mermaid diagram definition text
Height of the container, in pixels or as a CSS size string
Whether to show the zoom/reset toolbar on mouse hover
Whether to use HTML labels in nodes for richer text wrapping
Whether to auto-wrap long text in nodes and messages
Whether to use Mermaid's dark color scheme
Diagram-specific Mermaid configuration.
Use typed config classes for validation: ic.mermaid.FlowchartConfig, ic.mermaid.SequenceConfig, ic.mermaid.GanttConfig.
Whether to automatically re-render when Value changes
Increase zoom level by one step
A ic.async.Promise with the fulfillment status from the viewDecrease zoom level by one step
A ic.async.Promise with the fulfillment status from the viewReset pan and zoom to the initial state
A ic.async.Promise with the fulfillment status from the viewProgrammatically trigger a render of the current Value
A ic.async.Promise with the fulfillment status from the viewMermaid Configs
# ic.mermaid.FlowchartConfig
Configuration for Mermaid flowchart diagrams. Pass an instance to ic.Mermaid.Config to customize layout and appearance.
Horizontal gap between nodes on the same level, in pixels
Vertical gap between nodes on different levels, in pixels
Edge drawing style
Space between label text and node border, in pixels
Padding around the entire diagram, in pixels
Maximum text width before wrapping inside nodes, in pixels
# ic.mermaid.GanttConfig
Configuration for Mermaid Gantt chart diagrams. Pass an instance to ic.Mermaid.Config to customize layout and appearance.
Height of task bars, in pixels
Gap between task bars, in pixels
Space above the chart area, in pixels
Space reserved for section labels on the left, in pixels
Space reserved for section labels on the right, in pixels
Font size for text in the chart, in pixels
Font size for section labels, in pixels
D3 time format string for the x-axis labels
Whether to show date labels on the top axis instead of the bottom
Row packing mode: "" for default, "compact" to pack tasks on fewer rows
Which day starts the week for week-based intervals
# ic.mermaid.SequenceConfig
Configuration for Mermaid sequence diagrams. Pass an instance to ic.Mermaid.Config to customize layout and appearance.
Horizontal gap between actor boxes, in pixels
Vertical gap between messages, in pixels
Whether to repeat actor boxes at the bottom of the diagram
Whether to number each message arrow
Whether to use square corners instead of curved arrows
Whether to auto-wrap long message text
Whether to hide actors with no messages
Width of activation rectangles, in pixels
Margin around note boxes, in pixels
Text alignment for multiline messages
Text alignment for notes
Width of actor boxes, in pixels
Height of actor boxes, in pixels
# ic.PDFViewer
PDF viewer with zoom and page navigation controls, powered by pdf.js v4. Accepts a local file path or URL as Value. The toolbar can be fixed or shown only on hover.
Toolbar display mode: "toolbar" (always visible) or "hover" (appears on mouse hover)
Whether to show zoom in/out buttons and zoom percentage
Whether to show page navigation buttons and page indicator
Whether to show the fit-to-width button
Whether to show the rotate button
Current page number
Zoom level as a percentage (100 = actual size)
Height of the viewer, in pixels or as a CSS size string
Total number of pages in the document (set by the view after loading)
Navigate to the next page
A ic.async.Promise with the fulfillment status from the viewNavigate to the previous page
A ic.async.Promise with the fulfillment status from the viewIncrease zoom level by 25%
A ic.async.Promise with the fulfillment status from the viewDecrease zoom level by 25%
A ic.async.Promise with the fulfillment status from the viewFit the page width to the viewer width
A ic.async.Promise with the fulfillment status from the viewFit the entire page within the viewer
A ic.async.Promise with the fulfillment status from the viewFires when the user changes the zoom level
Fires when the PDF document finishes loading
# Editors
# ic.CodeEditor
Code editor with syntax highlighting. Powered by CodeMirror 6 Supports Matlab, JavaScript, Markdown, CSS, Typst, LaTeX, and plain (no highlighting) text languages. The editor can be configured with features like line numbers, line wrapping, bracket matching, code folding, multiple selections, and more,
Editor text content
Syntax language for highlighting
Editor heigh, as a pixel value or a CSS string
Display alternating line backgrounds. The amount of lines between stripes can be configured with ZebraStripeStep
Whether to show line numbers in the gutter
Enable wrapping long lines onto multiple visual lines
Whether to highlight the line with the cursor
Whether the user is blocked from interacting with the editor
Number of white spaces per tab stop
Ghost text shown when the editor is empty
Editor font size in pixels (0 for default)
Whether to highlight the matching bracket of the one next to the cursor
Display code folds in the gutter and enable fold commands
Open the search panel. Can also be triggered by Ctrl+F / Cmd+F when the editor is focused
Highlight other occurrences of selected text
Automatically close brackets and quotes after typing the opening character
Whether to allow multiple cursors for editing multiple selections at once
Amount of lines between stripes
Line numbers locked from editing. Adding new lines above or below will adjust the line numbers accordingly, so the user will not be able to directly edit these lines
Line numbers with a highlighted background
Column positions for vertical ruler lines
Whether to show vertical indent guide lines on code blocks
Allow scrolling beyond the last line
Display a custom status bar at the bottom of the editor showing the current cursor position and the editor language
Total number of lines in the document
Current cursor line
Current cursor column
Number of active selections
Give keyboard focus to the editor
Remove keyboard focus from the editor
Move the cursor to the beginning of the specified line
Set the cursorselection range (square like - fromLine:fromCol to toLine:toCol)
Get the text in the current selection
Replace the contents of the current selection with text
Undo the last edit. Can be triggered by Ctrl+Z / Cmd+Z when the editor is focused
Redo the last undone edit. Can be triggered by Ctrl+Y / Cmd+Shift+Z when the editor is focused
Fold all collapsible blocks of code
Unfold all collapsed blocks of code
Scroll the viewport the specified line
# ic.RichEditor
Rich wysiwyg text editor powered by TipTap. Use the toolbar or markdown syntax for formatting. Type a slash (/) to see the list of available content blocks, including headings, lists, tables, callouts, and more. Equations (inside $...$ or $$...$$) are rendered using KaTeX. Code blocks support syntax highlighting for many programming languages. Links will be automatically detected and can be opened in the system web browser. Images can be inserted from the local file system or by pasting a URL, and will be fetched by MatLab and embedded as base64-encoded data URIs.
Content of the editor as an HTML string
> container height, in pixels or as a CSS string
Whether the user is blocked from editing the content
Ghost text displayed when editor is empty
Disable interaction and impede focus
Show/hide the fixed top toolbar with the most common formatting options
Show/hide the table of contents on the sidebar
When enabled, the editor will dim all but the current line or block to help focus
Content character limit (Inf = unlimited)
Total word count
Total character count
Whether the editor has keyboard focus
Give keyboard focus to the editor
Remove keyboard focus from the editor
Clear all editor content
Insert HTML at the current cursor position
Convert current content to Markdown
An ic.Promise that resolves to the Markdown stringExport the editor content as a PDF file. If a filepath is provided, the PDF will be saved to that location. If no filepath is provided, a save dialog will prompt the user to choose a location.
Open a link in the system web browser
Open a file dialog to select an image and return as ic.Asset.
Save the provided base64-encoded PDF content to a file. Will open a save dialog if no filepath is provided.
Resolve an image URL or local file path as an ic.Asset.
# Tree
# ic.TreeBase
Abstract base for tree-backed components. Provides shared tree node management, incremental node operations, and expand/collapse control
Root tree node(s) that define the hierarchical structure
Whether the whole tree view is disabled
Maximum number of nodes that can be selected simultaneously (Inf = unlimited)
Currently selected nodes as an array of ic.tree.Node handles
Add a child node to the tree incrementally.
The new child ic.tree.Node and a ic.async.Promise with the fulfillment status from the view[root, ~] = t.addNode(ic.tree.Node.empty, "Root");
[child, ~] = t.addNode(root, "Child", Icon="file");Remove a node from the tree incrementally
A ic.async.Promise with the fulfillment status from the viewUpdate a node's label, icon, or data incrementally
A ic.async.Promise with the fulfillment status from the viewClear all selected items
A ic.async.Promise with the fulfillment status from the viewProgrammatically expand a folder node
A ic.async.Promise with the fulfillment status from the viewProgrammatically collapse a folder node
A ic.async.Promise with the fulfillment status from the viewExpand all folder nodes
A ic.async.Promise with the fulfillment status from the viewCollapse all folder nodes
A ic.async.Promise with the fulfillment status from the viewFires when the user changes the selection
Fires when the user changes the selection. This method is a non-reactive convenience event dispatched that listens to ValueChanged and dispatches the resolved Node handles of the current selection.
# ic.tree.Node
Tree node for hierarchical data structures. Nodes form a tree via the Children property. Children nodes can be added, searched, and removed. These methods use Positional keys, that are strings that represent the path to a node in the tree with indices separated by dashes. For example, "1-2-3" for the third child of the second child of the first root node)
Display text for this node
Child nodes
Arbitrary payload struct
Create and attach a child node, returning it
The newly created child ic.tree.Nodefruits = ic.tree.Node("Fruits");
citrus = fruits.add("Citrus", Icon="citrus");
citrus.add("Orange");
citrus.add("Lemon");Recursive search by label
The first ic.tree.Node with a matching label, or empty if not found. Note that labels are not guaranteed to be unique.node = tree.find("Target Label");Remove a node by positional key, returning it
The removed ic.tree.NoderemovedNode = tree.remove("1-2-3");Find the positional key of a node
The positional key of the first occurrence of the target nodetree = ic.tree.Node("Root");
child = tree.add("Child");
key = tree.keyOf(child);# ic.Tree
Vertical tree view for displaying hierarchical data. Renders items as an indented tree with expand/collapse. Optionally supports multi-selection with checkboxes. Items are ic.tree.Node objects, and they are classified as folders if they have non-empty ic.tree.Node.Children arrays; and leafs otherwise
Size of the control, relative to its font size
Whether checkboxes are shown for selection
Height of the tree, in pixels or a CSS size string
Whether to display tree connector lines between nodes
When true, child nodes are only rendered when their parent is expanded; when false, all nodes are pre-rendered in the DOM
Context menu entries for leaf nodes
Context menu entries for folder nodes
Programmatically focus the tree container
A ic.async.Promise with the fulfillment status from the view# ic.FilterTree
Tree with client-side tag-based filtering. Displays a ic.SearchBar above a ic.Tree view. Typing filter tags narrows the visible tree using prefix-based operators: (none)=contains, |=OR, ~=NOT, :=folder-only, @=leaf-only, ==exact, /=ancestor path, ^=starts-with. {/superclass}
Ghost text shown in the search bar when empty
Whether to display an "x" button to clear the search input when pressed
Whether tree items can be selected
Size of the control relative to its font size
Height of the tree panel, in pixels or a CSS size string
Whether to display tree connector lines
When true, child nodes rendered on demand
Whether filtering is case-sensitive
Auto-expand ancestors of matching nodes during filter
Context menu entries for leaf nodes
Context menu entries for folder nodes
Active filter tags as a string array. Each tag is an optional operator prefix followed by a search term. See ic.FilterTree for supported operators.
Programmatically focus the search input
A ic.async.Promise with the fulfillment status from the viewProgrammatically clear all filter tags
A ic.async.Promise with the fulfillment status from the viewFires when the filter tags change
# ic.VirtualTree
Virtual-scrolling tree for massive datasets. Renders only the visible rows in the DOM using fixed-height virtual scrolling. MATLAB owns the full tree; the frontend fetches data on demand via the request/response protocol, requesting root stubs and child chunks as folders are expanded or the user scrolls.
Whether the tree is disabled and cannot be interacted with
Whether items can be selected
Size of the tree relative to its font size
Height of the tree, in pixels or as a CSS size string
Whether to display tree connector lines
Maximum number of selectable items (Inf = unlimited)
Ghost text shown while loading
Context menu entries for leaf nodes
Context menu entries for folder nodes
Root tree nodes that form the basis of the tree structure
Currently selected nodes as an array of ic.tree.Node handles
Programmatically focus the tree container
A ic.async.Promise with the fulfillment status from the viewClear all selected items
A ic.async.Promise with the fulfillment status from the viewProgrammatically expand a folder node
Programmatically collapse a folder node
A ic.async.Promise with the fulfillment status from the viewExpand all folder nodes
A ic.async.Promise with the fulfillment status from the viewCollapse all folder nodes
A ic.async.Promise with the fulfillment status from the viewFires when the user changes the selection
Fires when the user changes the selection. This event is a non-reactive convenience event dispatched with the resolved selection from ValueChanged
# ic.VirtualFilterTree
Virtual-scrolling tree with MATLAB-side tag-based filtering. See ic.FilterTree for the same component with client-side filtering. VirtualFilterTree adds support for larger trees by rendering only visible nodes and serving tree data on demand via request handlers
Whether the control is disabled and cannot be interacted with
Whether items can be selected
Size of the control relative to its font size
Height of the tree, in pixels or a CSS size string
Whether to display tree connector lines
Maximum number of selectable items (Inf = unlimited)
Text shown while loading new rows
Ghost text shown in the search bar when empty
Whether to display an "x" button to clear the search input when pressed
Whether filtering is case-sensitive
Auto-expand ancestors of matches in filtered view
Context menu entries for leaf nodes
Context menu entries for folder nodes
Active filter tags as a string array. Each tag is an optional operator prefix followed by a search term. See ic.FilterTree for supported operators.
Tree nodes. These are not reactive
Struct array of VirtualNode stubs
Containers.Map: parentKey → struct array of child stubs
Currently selected nodes (user-facing API)
Programmatically focus the search input
A ic.async.Promise with the fulfillment status from the viewClear all selected items
A ic.async.Promise with the fulfillment status from the viewProgrammatically clear all filter tags
A ic.async.Promise with the fulfillment status from the viewProgrammatically expand a folder node
A ic.async.Promise with the fulfillment status from the viewProgrammatically collapse a folder node
A ic.async.Promise with the fulfillment status from the viewExpand all folder nodes
A ic.async.Promise with the fulfillment status from the viewCollapse all folder nodes
A ic.async.Promise with the fulfillment status from the viewWalk the full tree applying filter logic, cache results, and return a summary (not the full tree).
Clear the filter cache, reverting to full Items tree.
Flatten nested filter struct into VirtualNode stubs. Populates FilterChildMap and FilterExpandKeys as side effects.
Return a paginated slice of a stub array.
Recursively filter nodes, preserving positional keys. Returns struct array in TreeNode format (key, name, icon, children).
MATLAB-side implementation of filter matching logic.
Fires when the user changes the selection
Fires when the user changes the selection (non-reactive). dispatches the resolved Node handles from ValueChanged
# ic.TreeTable
Hierarchical tree with aligned table columns. Folder nodes render as full-width expand/collapse rows; leaf nodes render per-column cells
Column definitions that control how each data field is displayed, sorted, and filtered
Field name of the column with tree indentation ("" = first)
Whether nodes can be selected
Size of the tree table relative to its font size
Height of the container, in pixels or as a CSS size string
Whether to display tree connector lines
Whether to show alternating row colors
When true, children only render when their parent is expanded
Currently sorted column field ("" = no sort)
Sort direction
Active column filters
Context menu entries for leaf nodes
Context menu entries for folder nodes
Auto-infer columns from first leaf's Data when Columns is empty.
Update Node.Data or Node.Label and fire CellEdited event.
Programmatically focus the tree table container
A ic.async.Promise with the fulfillment status from the viewProgrammatically edit a leaf cell
A ic.async.Promise with the fulfillment status from the viewFires when the user clicks a sortable column header
Fires when the user changes a column filter
Fires when the user clicks a leaf cell
Fires when the user edits a cell value inline (non-reactive, dispatched from MATLAB)
Fires when the user finishes resizing a column (non-reactive, dispatched from MATLAB)
# ic.VirtualTreeTable
Virtual-scrolling tree table for large datasets. Combines a tree with table columns, virtual scrolling, and on-demand data fetching. Only visible rows exist in the DOM. MATLAB owns the full tree; the frontend fetches data on demand via the request/response protocol, requesting root stubs and child chunks as folders are expanded or the user scrolls
Column definitions
Context menu entries for leaf nodes
Context menu entries for folder nodes
Field name of the column with tree indentation ("" = first)
Whether the control is disabled and cannot be interacted with
Whether nodes can be selected
Size of the control relative to its font size
Height of the container, in pixels or as a CSS size string
Whether to display tree connector lines
Whether to show alternating row colors
Maximum number of selectable items (Inf = unlimited)
Text shown while loading new nodes
Currently sorted column field ("" = no sort)
Sort direction
Active column filters
Tree nodes, pulled into the view on demand
Currently selected ic.tree.Node handles
Sorted + filtered tree: struct array {node, children} node = ic.tree.Node handle, children = same struct (recursive)
Map: view positional key (char) -> ic.tree.Node handle
Guard flag: when true, recomputeView skips selection clear
PostSet listener handles
Programmatically focus the tree table container
A ic.async.Promise with the fulfillment status from the viewClear all selected items
A ic.async.Promise with the fulfillment status from the viewProgrammatically expand a folder node
A ic.async.Promise with the fulfillment status from the viewProgrammatically collapse a folder node
A ic.async.Promise with the fulfillment status from the viewExpand all folder nodes
A ic.async.Promise with the fulfillment status from the viewCollapse all folder nodes
A ic.async.Promise with the fulfillment status from the viewProgrammatically edit a leaf cell. Prefer this method to directly editing the Items, as it triggers a view recompute if the cell is in the viewport
A ic.async.Promise with the fulfillment status from the viewManually force a recompute of the view
A ic.async.Promise with the fulfillment status from the viewBuild sorted + filtered tree projection.
Recursively build sorted + filtered view tree.
Sort a single level of view nodes by the current sort field.
Test a leaf node against all active column filters.
Serialize view nodes to lightweight stubs for the frontend. Leaf stubs include a .data field with column values.
Navigate ViewTree by positional key (e.g. "1-2-3").
Get the effective expander column field name.
Get the list of fields with active (non-empty) filters.
Find the view tree positional key for a node handle.
Count total nodes in the view tree (recursive).
Populate ViewKeyMap by walking the view tree.
Collect all folder positional keys from the view tree.
Fires when the user changes the selection
Fires when the user clicks a sortable column header
Fires when the user changes a column filter
Fires when the user clicks a leaf cell
Fires when the user changes the selection (non-reactive). dispatches the resolved Node handles from ValueChanged
Fires when the user edits a cell value inline (non-reactive, dispatched from MATLAB)
Fires when the user finishes resizing a column (non-reactive, dispatched from MATLAB)
# Table
# ic.TableBase
Abstract base for table components. Provides shared column configuration, sorting, filtering, row selection, and cell interaction for ic.Table and ic.VirtualTable
Column definitions that control how each data field is displayed, sorted, and filtered
Whether all table interactions are disabled
Dimension of the table rows and text relative to the component font size
Height of the table, in pixels or as a CSS string
Whether rows, columns, and cells can be selected by clicking on them (rows can only be selected if ShowRowNumbers is true)
Whether to show a row number column on the left edge
Whether to alternate row background colors for readability
Field name of the currently sorted column ("" means no sort active)
Direction of the current sort
Current selection state as a struct with fields 'type' ("none", "row", "column", or "cell") and 'value'
Active column filters as a struct mapping field names to filter values
Route a cell action to the column's OnCellAction callback
Update column Width and fire ColumnResized event
Update Data silently and fire CellEdited event
Programmatically focus the table container
Clear the current selection
Scroll to a specific row by key.
Scroll to and focus a specific cell
Fires when the user changes the selection (row, column, or cell click)
Fires when the user clicks a sortable column header
Fires when the user changes a column filter
Fires when the user clicks any cell
Fires when the user clicks any row
Fires when the user clicks a column header
Fires when the user finishes resizing a column
Fires when the user edits a cell value inline (non-reactive, dispatched from MATLAB)
# ic.Table
Flat data table with rich column types. Suitable for small-to-medium datasets (up to ~5000 rows). For larger datasets, use ic.VirtualTable which virtualizes scrolling and performs server-side sort/filter.
Avoid modifying the Data property directly for large tables, as it triggers a full re-render. Instead, use the editCell, removeRow, and removeColumn methods which update the data more efficiently and preserve selection state.
The table data as a MATLAB table. Columns are auto-inferred on first assignment if ic.TableBase.Columns is empty
Remove one or more rows by index. Multiple indices can be passed to batch removals into a single message to the view.
tbl.removeRow(3)
tbl.removeRow(1, 4, 7)Remove one or more columns by field name. Multiple field names can be passed to batch removals into a single message to the view.
tbl.removeColumn("Price")
tbl.removeColumn("Price", "Volume", "Sector")Update one or more cell values programmatically. Multiple edits can be batched into a single message to the view by passing repeating (rowIndex, field, value) triplets.
tbl.editCell(1, "Price", 42.5)
tbl.editCell(1, "Price", 42.5, 2, "Price", 99.0, 3, "Name", "Foo")# ic.VirtualTable
Virtual-scrolling table for large datasets. Only visible rows exist in the DOM (~30-40 elements). The frontend fetches rows on demand via the request/response protocol. Sorting and filtering are performed server-side in MATLAB via the column's filterColumn and sortKey methods.
The full dataset as a MATLAB table. Its not reactive and never published to the frontend. The view fetches slices on demand as the user scrolls and interacts with the table
Sorted + filtered row indices into Data
Guard flag: when true, set.Data skips selection clear + recompute
PostSet listener handles
Update Data when a cell is edited in the view, then conditionally recompute
Remove a row by its index
Remove a column by field name
Update a single cell value programmatically
Manually force to recompute the view
Check if a single scalar value passes a filter
Rebuild sorted + filtered index array
Return a chunk of rows from the current view
Columns
# ic.table.Column
Definition of a single table column. Specifies how a data field is displayed, including its header text, cell renderer, width, sort/filter behavior, alignment, and type-specific configuration
Data field name (table variable name or struct field name) that this column reads from
Cell renderer type that determines how values are displayed
Column width, in pixels or as a CSS string. If empty, width is automatic based on content.
Minimum column width in pixels (0 = no minimum)
Whether clicking the header sorts the table by this column
Whether the header shows a filter button
Whether the column can be resized by dragging one of its header edges
Cell text alignment. "auto" infers from the column Type (e.g. numbers align right)
Pin the column to the left or right edge of the table, so that it remains visible when horizontally scrolling
Whether this column is visible
Whether cells in this column can be edited inline by double-clicking
Type-specific configuration struct. Prefer using typed subclasses instead of setting this directly
Callback invoked when a cell action is triggered. The callback signature should be @(column, rowIndex, data) callback(column, rowIndex, data)
Context menu entries shown on right-click in this column's cells
Set common + type-specific properties, lock Type. Used by typed subclass constructors
Return type-specific config struct for JSON. Subclasses override to construct config from named properties
Convert a raw JSON edit value to the column's MATLAB type. Subclasses override for type-specific conversions (e.g. datetime)
Server-side filter: return logical mask over the column data. Base returns all-true (unsupported column type). Subclasses override for type-specific logic
Server-side sort key extraction. Returns a vector suitable for MATLAB's sort(). Subclasses override when sort order differs from natural order
Auto-infer typed columns from a MATLAB table.
An array of ic.table.Column objects with Field set to the table variable names, and Type inferred from the variable data typecols = ic.table.Column.fromTable(myTable);Auto-infer text columns from a struct's field names.
cols = ic.table.Column.fromStruct(struct('name', "A", 'age', 30));# ic.table.TextColumn
Text column that displays cell values as plain or rich text.
Enable bold and _italic_ inline Markdown formatting
Ghost fallback text shown when the cell value is empty
CSS text-transform applied to the displayed text
# ic.table.NumberColumn
Numeric column with formatting, prefix/suffix, and conditional coloring.
Number of decimal places to display (-1 = auto, no rounding)
String prepended to the formatted number
String appended to the formatted number
Whether to add comma separators for thousands
Conditional background color rules evaluated against the cell value
# ic.table.BooleanColumn
Boolean column that displays logical values as checkboxes, text, or numeric indicators.
Visual representation of the boolean value
Conditional background color rules. Evaluates true=1, false=0 against the rules
# ic.table.EnumColumn
Categorical column with a fixed set of values displayed as colored tag pills.
Ordered set of allowed values. Item order defines sorting priority
Hex color per item, parallel to Items. An empty value or missing color means "default text color
# ic.table.ButtonColumn
Interactive button column that renders one or more clickable buttons per cell. Button clicks are routed to the column's OnCellAction callback.
Array of ic.table.CellButton definitions rendered in each cell
# ic.table.CellButton
Definition of a single button inside a ic.table.ButtonColumn cell. When clicked, the button's Key is passed to the column's ic.TableBase.OnCellAction callback via the data.action field.
Unique action identifier passed in the ic.TableBase.OnCellAction callback
Button text
Text displayed on hover
Visual style variant
Whether the button is disabled
# ic.table.ColorColumn
Color swatch column with inline color-picker editing. Displays cell values as colored swatches. When Editable, double-clicking opens a color picker popup.
Output color string format
Whether to show the alpha slider in the inline editor
Optional preset color swatches shown below the picker
# ic.table.ColorRule
Conditional color rule for table columns. Defines a comparison condition that is evaluated for all the cells in the column. When the condition is met, the specified color is applied. When multiple rules are defined on a column (as an array of ic.table.ColorRule), the first successful rule for a specific cell wins (early return)
# ic.table.DateColumn
Date/datetime column with format presets and chronological sorting.
Display format preset
Conditional background color rules evaluated against the date value
# ic.table.ImageColumn
Image column that displays cell values as thumbnails with a hover preview popup. Cell data must be an ic.Asset (file or URL) per row.
Width of the hover preview popup, in pixels
Height of the hover preview popup, in pixels
CSS object-fit for the preview image
# ic.table.ProgressBarColumn
Inline progress bar column for numeric values within a range.
Minimum value of the range (maps to 0% fill)
Maximum value of the range (maps to 100% fill)
Whether to display the formatted value next to the bar
Sprintf-style format for the label (supports %d, %f, %.Nf, %% for literal %)
Bar fill color variant
Conditional bar color rules evaluated against the cell value. First matching rule wins
# ic.table.RatingColumn
Star-rating column for bounded numeric values.
Maximum number of stars
Whether to display half-star increments
Hex color for filled stars
Conditional background color rules evaluated against the numeric rating
# ic.table.SparklineColumn
Inline sparkline (mini line chart) column for numeric array data. Cell data must be a numeric vector per row.
Stroke width of the line, in pixels
Whether to fill the area under the line
Whether to show a dot at the last data point
Whether to show the metric value beside the sparkline
Metric that the rest of the properties operate on. "total" uses the last value; "relative" uses the percentage change from first to last
Line color variant
Conditional color rules evaluated against the metric value
# Tweakpane
# ic.TweakPane
Compact parameter control panel powered by Tweakpane v4. add blades to build a live inspector: sliders, checkboxes, color pickers, folders, tabs, and more. all blade types are in the ic.tp.* namespace.
Optional title displayed at the top of the pane
Whether the pane is expanded
Assigns index, target, and registers child
# ic.tp.ContainerBlade
Abstract base for TweakPane structural containers
Display label for this container blade
Whether this container is disabled
Whether this container is hidden
Assigns index, target, and registers child
# ic.tp.Folder
Collapsible folder container for TweakPane. Can hold any blade type, including nested folders.
Whether the folder is open
# ic.tp.TabGroup
Tab container blade for TweakPane. add pages via addTabPage. each page can hold its own set of blades.
Monotonic counter for tab page indices
Add a tab page to this group
The new ic.tp.TabPagetabs = pane.addTabGroup();
general = tabs.addTabPage(Label="General");
general.addSlider(Label="Speed", Min=0, Max=100);
advanced = tabs.addTabPage(Label="Advanced");# ic.tp.ButtonGrid
Grid of buttons blade for TweakPane. Uses @tweakpane/plugin-essentials
# ic.tp.Color
Color picker blade for TweakPane
Hex color string
Whether to show the alpha channel slider
# ic.tp.CubicBezier
Cubic bezier curve editor blade for TweakPane. uses @tweakpane/plugin-essentials.
Bezier control points as a struct with fields x1, y1, x2, y2
Fires when the curve changes
# ic.tp.FpsGraph
Auto-updating FPS graph blade for TweakPane. Measures and plots the uihtml iframe frame rate. uses @tweakpane/plugin-essentials.
# ic.tp.Image
Read-only image display blade for TweakPane.
Display height in pixels
CSS object-fit mode controlling how the image fills the display area
Fires when the image is clicked
# ic.tp.IntervalSlider
Dual-handle range slider blade for TweakPane. uses @tweakpane/plugin-essentials.
Selected range as a struct with fields min and max
Absolute minimum of the range
Absolute maximum of the range
Fires when the range changes
# ic.tp.List
Dropdown select blade for TweakPane.
Currently selected item
List of selectable options
# ic.tp.Monitor
Read-only value display blade for TweakPane. Push updates to the Value property to update the display
# ic.tp.Point
2D/3D/4D point input blade for TweakPane. dimensionality is auto-detected from the struct fields in Value.
Point coordinates: {x,y} for 2D, {x,y,z} for 3D, {x,y,z,w} for 4D
Fires when any coordinate changes
# ic.tp.RadioGrid
Grid of radio buttons blade for TweakPane. uses @tweakpane/plugin-essentials.
Currently selected item
List of options displayed as radio buttons
Number of grid columns
# ic.tp.Ring
Radial dial blade for TweakPane, ideal for angles and headings. uses @tweakpane/plugin-camerakit.
Current numeric value
Minimum value
Maximum value
Step increment
Hide the text input and widen the ring display
Visual style variant (0, 1, or 2)
# ic.tp.Rotation
3D rotation input blade for TweakPane. supports Euler angles (Value has fields x, y, z) and quaternions (x, y, z, w). uses @0b5vr/tweakpane-plugin-rotation.
Rotation as a struct: {x,y,z} for Euler mode, {x,y,z,w} for Quaternion mode
Rotation representation: Euler or Quaternion
Euler axis order (only applies when Mode = "euler")
Angular unit (only applies when Mode = "euler")
Display style for the 3D gizmo
Fires when the rotation changes
# ic.tp.Slider
Numeric slider blade for TweakPane.
Current numeric value
Minimum value
Maximum value
Step increment
# ic.tp.Textarea
Multi-line text input blade for TweakPane. uses @pangenerator/tweakpane-textarea-plugin.
Current text value (may contain newlines)
Number of visible text rows
Ghost text shown when the field is empty
# ic.tp.Wheel
Jog wheel blade for TweakPane, for fine-grained unbounded adjustment. uses @tweakpane/plugin-camerakit.
Current numeric value
Value change per pixel of wheel movement