Build interactive web applications using HTML/JavaScript interfaces with MATLAB computational backends via the uihtml component. Use when creating HTML-based MATLAB apps, JavaScript MATLAB interfaces, web UIs with MATLAB, interactive MATLAB GUIs, or when user mentions uihtml, HTML, JavaScript, web apps, or web interfaces.
View on GitHubskills/matlab-uihtml-app-builder/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/matlab/skills/blob/main/skills/matlab-uihtml-app-builder/SKILL.md -a claude-code --skill matlab-uihtml-app-builderInstallation paths:
.claude/skills/matlab-uihtml-app-builder/# MATLAB uihtml App Builder
This skill provides comprehensive guidelines for building interactive web applications that combine HTML/JavaScript interfaces with MATLAB computational backends using the uihtml component. This architecture leverages modern web UI capabilities while harnessing MATLAB's powerful calculation engine.
## When to Use This Skill
- Building interactive MATLAB apps with HTML/JavaScript interfaces
- Creating web-based UIs for MATLAB applications
- Developing modern, responsive MATLAB GUIs using web technologies
- When user mentions: uihtml, HTML, JavaScript, web app, web interface, interactive GUI
- Combining web UI design with MATLAB computational power
- Creating calculator apps, data visualizers, or form-based MATLAB tools
## Core Architecture
### The Four Components
1. **HTML Interface** - User interface with buttons, forms, displays
2. **JavaScript Logic** - Event handling and UI interactions
3. **MATLAB Backend** - Computational engine and data processing
4. **uihtml Component** - Bridge between HTML and MATLAB
### Communication Patterns
The uihtml component enables bidirectional communication between JavaScript and MATLAB through several mechanisms:
#### Pattern 1: MATLAB → JavaScript (Data Property)
**Use Case**: Sending data from MATLAB to update the HTML interface
```matlab
% MATLAB side
h.Data = "Hello World!";
```
```javascript
// JavaScript side
htmlComponent.addEventListener("DataChanged", function(event) {
document.getElementById("display").innerHTML = htmlComponent.Data;
});
```
#### Pattern 2: JavaScript → MATLAB (Events)
**Use Case**: Triggering MATLAB functions from user interactions
```javascript
// JavaScript side - send event to MATLAB
htmlComponent.sendEventToMATLAB("Calculate", expression);
```
```matlab
% MATLAB side - receive and handle event
h.HTMLEventReceivedFcn = @handleEvent;
function handleEvent(src, event)
eventName = event.HTMLEventName;
eventData = event.HTMLEventData;
% Process