Nextion Editor Tutorial: Create Smart GUI for Arduino and Embedded Projects

How to Design Touchscreen Interface Using Nextion Editor and Arduino

Learn how to use Nextion Editor to design smart GUI interfaces for Arduino and other microcontrollers. Step-by-step guide with examples and tips.

Introduction

In this tutorial, you’ll learn everything you need to know about creating a Nextion display project. We’ll show you how to design an interface using the Nextion Editor and make use of its built-in programming functions.

The Nextion Display is a Human-Machine Interface (HMI) designed for microcontroller-based projects. Each display features a touch panel, an onboard processor (MCU), and built-in memory, making it far more powerful than standard LCD screens.

Thanks to its UART communication interface, the Nextion display can easily connect with a wide range of microcontrollers such as Arduino, ESP8266, ESP32, or single-board computers like the Raspberry Pi.

Nextion displays are available in three series — Basic, Enhanced, and Intelligent — each offering various screen sizes and advanced features to match different project requirements.

💻 What is Nextion Editor?

The Nextion Editor is a Windows-based software developed by ITEAD Studio for creating graphical interfaces on Nextion displays.

It lets you design and simulate your GUI before uploading it to your actual display.

With this tool, you can:

• Create HMI projects with buttons, text, gauges, progress bars, and more.
• Upload images, fonts, and backgrounds.
• Write simple event-driven code (using Touch Events).
• Simulate your project without needing the physical display.

⚙️ How to Download and Install Nextion Editor

1. Go to the official Nextion Editor Download Page.
Download
2. Choose the version for your operating system (Windows recommended).
3. Install it following the on-screen setup wizard.
4. Launch the application – you’ll see a blank workspace ready for your first project.

🧩 Nextion Project Explain

1🧩 Creating a New Nextion Project

Follwo below step to create New Project:

1. Choose your display model (for example, NX3224T024 for a 2.4” display).
2. Set your orientation and resolution.
3. Click OK – your workspace will now show a blank screen.

Next, generate a font for your application. Go to the Tools menu and select Font Generator. A new window will appear, as shown below. Choose the desired font type, size, and other settings according to your requirements, then click OK to save the font file to your preferred location.

The first screen appears as shown below, displaying information about the different sections and windows of the Nextion Editor interface.

2🖼️ Adding GUI Components

The Toolbox on the left has all your UI elements:

1. Button (b0) – Add interactive buttons for touch input.
2. Text (t0) – Display static or dynamic text.
3. Slider (h0) – Control analog values.
4. Gauge or Progress Bar – Show real-time sensor or status feedback.
5. Picture Box (p0) – Display images or icons.

Simply drag and drop any element onto your design area.

You can find the example code in the provided link, or you can write your own. In this project, I need to read the slider value on the MCU side, so I simply send it using the print function.

Compile it and you can check output using debug button.as showin figure 2. Debug window you can check output and also putting input value as simulator works.

3🎨 Customizing Properties

When you select an element, the Attribute panel (right side) lets you edit:

1. objname – Unique object name (e.g., b0, t0)
2. txt –Text to display
3. bco – Background color
4. pco – Text color
5. font – Font style and size
6. x, y, w, h – Position and size

💡 Tip: Use meaningful names like btnStart or txtTemp for better readability when coding later.

🪄 Adding Touch Events (Code)

Each component can respond to touch events such as:

1. Touch Press Event
2. Touch Release Event

5interface

Last step is uploading in nextion display have two way , first you can connect it by TTL to USB convertor as shown in figure below.

click on nextion editor upload button you get upload dialog box , click on go button, it automatically upload your file. or you can save it in .HMI file format.

Another method is to use a microSD card for uploading your project. First, format the SD card and save your project file in .tft format. Then, copy this file to the SD card and insert it into the Nextion display.

Next, connect +5V and GND from your Arduino (or any other power source). The Nextion display will automatically detect and install the .tft file. Once the installation is complete, simply remove the SD card — your project is now successfully loaded onto the display.

Note:This project is created for nextion Display type Basic and Model NX4832T035_011 have display size 3.5 inch. download created file from following link