ml::docs | Installation Your First App Manifests Events Messaging Plugins Scenes Resources
← Home

Malena Tutorials

Step-by-step guides covering everything from your first window to advanced plugin systems and rich UI components. Start with the beginner path or jump to the topic you need.

Beginner

Buttons

RectangleButton, CircleButton, and ConvexButton — shape backgrounds with centered labels and the full trait set.

~15 minControls
Beginner

Toggle controls

ButtonToggle, PillToggle, and SegmentToggle with animated state transitions.

~15 minControls
Beginner

Selection controls

Checkboxes, radio buttons, checkbox/radio groups, and the dropdown Select.

~20 minControls
Intermediate

Panel controls

TabbedPanel, SplitPanel, and ScrollPane — containers that own and manage their children.

~20 minControls
Intermediate

Navigation controls

List, MenuBar, Toolbar, and SideMenu — the building blocks for app-level navigation.

~25 minControls
Beginner

Text components

ml::Text for display, TextInput for single-line editing, and TextArea for multi-line editing.

~20 minText
Intermediate

Carousel

Smooth animated scrolling, navigation arrows, and GLSL shader effects on a collection of components.

~20 minControls
Intermediate

Grid layout

Arrange components in rows and columns with flexible spacing and alignment.

~15 minLayout
Beginner

Alignment & anchors

Place things relative to the window or each other — and have it survive a resize.

~10 minLayout
Intermediate

Animation & easing

Move, fade and drive any interpolatable property — no update loop, nothing to own.

~12 minMotion
Beginner

Paths & installed apps

Why an app that runs from your build folder breaks once installed, and the fix.

~8 minShipping
Advanced

Screen sharing

Capture a display, stream it, and show someone else's — four separable pieces.

~12 minMedia
Beginner

Dialogs & transient UI

Modals, toasts, context menus and info popovers, ordered by how much they demand of the user.

~10 minControls
Intermediate

Rich text & code editing

The layered text stack — from a single-line field to a syntax-highlighting code view.

~11 minText
Beginner

Colour pickers

Palettes, gradients, and the difference between previewing a colour and committing to one.

~9 minControls
Intermediate

Lists & data display

Tables, editable lists, drag-to-reorder, thumbnail grids and data-driven panels.

~13 minData
Beginner

Chat

A scrolling transcript with an input row, and the message struct that travels between machines.

~8 minControls
Beginner

Disclosure & grouping

Accordions, toggle groups and the native OS menu bar.

~8 minControls
Beginner

Utilities

File dialogs, JSON, clipped drawing, shaders and sprite-sheet slicing.

~9 minUtilities