All Blogs / Other

ModernUI Library for MT5: Build Professional EA Panels in MetaTrader 5

11 May 2026, 21:08

ModernUI Library for MT5: Build Professional EA Panels in MetaTrader 5

This guide explains how to download, install and start using the ModernUI Library in MetaTrader 5.

Product Page: ModernUI Library

Full Documentation

Example Demo EA's attached at the bottom.

ModernUI is a chart-hosted user interface library for MQL5 developers. It helps you build cleaner EA panels, dashboards, settings windows, forms, tables, dialogs, drawers, tabs and compact trade-style interfaces inside the MT5 chart environment.

This is a user interface library only. It does not place trades, modify trades, close positions or provide trading strategy logic. You add your own EA logic where needed.

1. What you receive

The MQL5 Market product includes the ModernUI Launcher Expert Advisor.

The launcher has two purposes:

It acts as a live ModernUI showcase inside MetaTrader 5.
It gives you access to the ModernUI library package.

The ModernUI package includes:

Include/ModernUI/ - the ModernUI library source files.
Experts/ModernUI/Examples/ - example Expert Advisors and showcase demos.
Documentation files - quick-start notes, wrapper guides, examples and troubleshooting information.

2. Download the ModernUI package

Install the ModernUI product from MQL5 Market.
Open MetaTrader 5.
Attach ModernUI_Launcher to any chart.
Click the Download Library button in the launcher.
Follow the instructions shown by the launcher to download ModernUI.zip.

The launcher is the official place to access the current ModernUI package for your purchased version.

3. Open your MetaTrader 5 data folder

In MetaTrader 5:

Click File.
Click Open Data Folder.
Open the MQL5 folder.

This is where the ModernUI files need to be copied.

4. Install the include files

Extract ModernUI.zip.

Copy the ModernUI include folder into your MT5 data folder so the final path looks like this:

MQL5\Include\ModernUI\ModernUI.mqh

This path is important. Your projects will include ModernUI using:

#include <ModernUI\ModernUI.mqh>

If MetaEditor cannot find ModernUI, the include folder is usually in the wrong place.

5. Install the examples

The package also includes example Expert Advisors.

Copy the included examples into your MT5 data folder so they are available under:

MQL5\Experts\ModernUI\Examples\

After copying the files, restart MetaEditor or refresh the Navigator panel.

6. ModernUI package folder structure

After downloading and extracting ModernUI.zip, copy the included folders into the matching locations inside your MetaTrader 5 data folder.

You can open the correct MT5 data folder from MetaTrader 5 by clicking File → Open Data Folder, then opening the MQL5 folder.

The package is split into three main areas:

Include - the ModernUI library source files.
Files - bitmap icon atlas files used by the library and demos.
Experts - showcase demo Expert Advisors.

Include folder

Copy the ModernUI include folder so this file exists:

MQL5\Include\ModernUI\ModernUI.mqh

The current ModernUI include structure is:

Most projects only need this include line:

#include <ModernUI\ModernUI.mqh>

You normally do not need to include the individual internal files directly. The umbrella header loads the library structure for you.

Files folder

Copy the ModernUI files folder so the bitmap icon atlas files exist here:

These bitmap files are used by the ModernUI icon atlas system. Keep them in MQL5\Files\ModernUI so the included demos and icon-based controls can load the correct assets.

Experts folder

Copy the ModernUI examples into your MetaTrader 5 MQL5\Experts folder.

After installation, the experts structure should look like this:

The .mq5 files are the source examples you can open and study in MetaEditor. The .ex5 files are compiled versions of the same examples.

The recommended first demo to compile and run is:

MQL5\Experts\ModernUI\Examples\Demos\ModernUI_Showcase_Demo.mq5

7. Compile a showcase demo

Open MetaEditor and compile one of the supplied demos first. This confirms that the library is installed correctly.

Recommended first demo:

Experts\ModernUI\Examples\Demos\ModernUI_Showcase_Demo.mq5

You can also try:

Experts\ModernUI\Examples\Demos\TradePanel_Showcase.mq5

If the include path is correct, the demo should compile normally.

8. Core classes and what they do

Class or helper	Purpose
MuiRoot	The main UI root. It connects ModernUI to the MT5 chart, owns the active UI tree and receives timer/chart events.
MuiElement	The base type for UI elements. It handles common geometry, visibility, enabled state, painting and event behaviour.
MuiContainer	A parent element that owns child controls and arranges them using layout rules.
MuiPage	A simple page-style root container, useful for basic panels and quick examples.
MuiWindow	A chart-hosted window or panel with a title bar, content area and movable window-style behaviour.
MuiPanel	A grouped visual container used for sections, cards and structured blocks of controls.
MuiLabel	Displays text, captions, headings and small interface labels.
MuiButtonAction	A clickable button control used for actions such as save, reset, open, close or custom commands.
MuiTextBoxHost	A text input host for editable text fields inside chart-hosted UI layouts.
MuiSpinEditHost	A numeric input control for values such as lots, risk, percentages, limits and settings.
MuiComboBoxHost	A combo box/dropdown input for selecting from a list of options.
MuiSlider	A slider control for selecting a value across a range.
MuiTabs	A tab control for splitting an interface into multiple pages or sections.
MuiDrawer	A side drawer container, useful for settings, filters, preferences and secondary controls.
MuiDialog	A modal dialog pattern for confirmations, warnings and focused user decisions.
MuiTableView	A data table control for rows, columns, activity logs, status lists and structured information.
MuiListView	A list control for displaying rows of selectable or scrollable data.
MuiTheme	Controls the visual theme, colours, spacing, radii, typography and component defaults.
Mui::AppWindow	A fast wrapper that creates a standard ModernUI app-style window with a content area.
Mui::Section	A fast wrapper for creating grouped titled sections inside a panel.
Mui::LabeledSpinEdit	A fast wrapper for creating a labelled numeric input row.
Mui::LabeledCombo	A fast wrapper for creating a labelled combo box row.
Mui::ButtonRow	A fast wrapper for creating a horizontal row of action buttons.
Mui::StatusRow	A fast wrapper for displaying a label and status badge in one row.

9. Basic ModernUI project structure

A normal ModernUI Expert Advisor uses one MuiRoot instance and forwards standard MT5 events into the UI system.

The basic lifecycle is:

OnInit initializes ModernUI and builds the interface.
OnTimer allows the UI to update and repaint.
OnChartEvent forwards mouse, keyboard and chart events.
OnDeinit shuts ModernUI down cleanly.

10. Minimal ModernUI EA skeleton

This is the basic structure of a ModernUI Expert Advisor:

#property strict

#include <ModernUI\ModernUI.mqh>

MuiRoot g_ui;

int OnInit()

{

if(!g_ui.Init(ChartID(), 0, "MyModernUI_", 512, 16))

return INIT_FAILED;

MuiPage *page = new MuiPage();

page.Title("My First ModernUI Panel");

g_ui.SetRoot(page);

EventSetMillisecondTimer(16);

return INIT_SUCCEEDED;

}

void OnDeinit(const int reason)

{

g_ui.Shutdown();

EventKillTimer();

}

void OnTimer()

{

g_ui.OnTimer();

}

void OnChartEvent(

const int id,

const long &lparam,

const double &dparam,

const string &sparam

)

{

g_ui.OnChartEvent(id, lparam, dparam, sparam);

}

This creates the ModernUI root, attaches it to the chart and forwards the required MT5 events.

11. Building a simple panel with fast wrappers

ModernUI includes optional fast wrappers. These help you create common interface patterns with less code.

Example:

#property strict

#include <ModernUI\ModernUI.mqh>

MuiRoot g_ui;

int OnInit()

{

if(!g_ui.Init(ChartID(), 0, "ModernUI_Demo_", 512, 16))

return INIT_FAILED;

MuiAppWindow app = Mui::AppWindow(

g_ui,

"Example Panel",

20,

40,

360,

420,

true

);

MuiSection settings = Mui::Section(

app.content,

"Settings",

"Example controls"

);

Mui::LabeledSpinEdit(

settings.body,

"Risk %",

0.1,

10.0,

0.1,

1.0,

);

string modes[];

ArrayResize(modes, 3);

modes[0] = "Low";

modes[1] = "Medium";

modes[2] = "High";

Mui::LabeledCombo(

settings.body,

"Mode",

modes,

);

Mui::LabeledCheckbox(

settings.body,

"Enable alerts",

true

);

Mui::StatusRow(

app.content,

"Status",

"Ready",

"success"

);

EventSetMillisecondTimer(16);

return INIT_SUCCEEDED;

}

void OnDeinit(const int reason)

{

g_ui.Shutdown();

EventKillTimer();

}

void OnTimer()

{

g_ui.OnTimer();

}

void OnChartEvent(

const int id,

const long &lparam,

const double &dparam,

const string &sparam

)

{

g_ui.OnChartEvent(id, lparam, dparam, sparam);

}This creates a chart-hosted window with a settings section, a spin edit, a combo box, a checkbox and a status row.

12. Fast wrappers vs lower-level controls

ModernUI gives you two ways to build interfaces:

Fast wrappers for common layouts and controls.
Lower-level controls when you need full control over layout, handlers, styling or custom data sources.

For example, you can quickly create labelled inputs using:

Mui::LabeledSpinEdit(...) Mui::LabeledCombo(...) Mui::LabeledCheckbox(...) Mui::ButtonRow(...) Mui::StatusRow(...)

Or you can use the underlying controls directly when your interface needs custom behaviour.

13. Common include or compile errors

Cannot open include file

If you see an error similar to:

cannot open include file 'ModernUI\ModernUI.mqh'

Check that the file exists here:

MQL5\Include\ModernUI\ModernUI.mqh

If the ModernUI folder is nested too deeply, MetaEditor will not find it.

Examples do not appear in Navigator

Restart MetaEditor or right-click the Navigator panel and refresh it.

Panel appears but does not respond

Make sure your EA forwards events through OnChartEvent:

g_ui.OnChartEvent(id, lparam, dparam, sparam);

Panel does not repaint correctly

Make sure OnTimer is set up and forwarded:

EventSetMillisecondTimer(16); void OnTimer() { g_ui.OnTimer(); }

14. Important notes

ModernUI is for MetaTrader 5.
ModernUI is a UI library, not a trading system.
The trade-style examples are interface demos only.
You are responsible for your own EA logic, validation, risk handling and broker execution code.
Install the library under MQL5\Include\ModernUI.
Compile the supplied demos first before building your own panel.

15. Where to go next

After installing ModernUI, start with the showcase demos and quick-start examples. They show how the controls are structured and how real chart-hosted panels can be built.

Recommended learning order:

Compile ModernUI_Showcase_Demo.mq5.
Compile TradePanel_Showcase.mq5.
Read the quick-start documentation.
Build a small panel using Mui::AppWindow, Mui::Section and labelled inputs.
Use the control demos as references when adding buttons, tables, dialogs, drawers, tabs and charts.