App Builder (Interface Editor)
Design a control panel for your project, then press its buttons to drive your board live. Free on every plan.
Overview
Every project has three stages, shown in the stage bar at the top of the editor: 1 Logic (what the hardware does), 2 Wiring (how it’s connected, see the Wiring guide) and 3 App (how people control it). This page is about stage 3. Older versions of these docs called it the Interface editor.
Open it
Click 3 App in the stage bar. The canvas switches to your control panel. To see one before you build one, the live demo opens an ESP32 smart room whose App stage is a phone remote: its buttons run the Logic sequences in the preview, and its status lights follow the pins.
Watch how (2 min): Make an App: buttons, sliders, indicators
What you can add
| Element | What it’s for |
|---|---|
| Button | Runs sequences when pressed, or switches a pin on and off |
| Slider | Sets a PWM (~) pin, for example an LED’s brightness |
| Indicator | Lights up from a pin, so you can see what the board is doing |
| Text | Labels and instructions |
| Shapes | Rectangle, circle, triangle, polygon and star, to group and decorate |
| Emojis, images and GIFs | Make it yours. Images can also be the panel background |
Any element, not only buttons, can be made interactive.
Make it do something
Select an element to see its settings on the right.
- Run on interaction (on the settings panel’s function tab): tick which sequences from Logic run On click, On double-click or On hold (press and hold for half a second). Tick as many as you like; they run side by side.
- Pin (buttons, indicators and sliders): a button switches the pin, an indicator lights from it, and a slider sets it. Sliders only offer PWM (~) pins.
Each element also has Size, Position, Rotation, Fill and Border Radius settings, and text elements have a font and label.
Try it live
- Use the Desktop / Phone switch to see the panel at phone size.
- Press Play to make the controls live, then press them. With no board connected, the simulator runs; with a board connected, the board responds.
- Press Stop to go back to editing.
Let the AI start it
The AI Builder can add buttons, sliders, indicators and text for you as part of a plan, linked to the sequences it builds. You review them before they’re added.
Sharing your panel
Make your project public and share the link. People who open it get the live panel, not an editor: they can press your controls and run the project in the simulator, or on their own board if they connect one. To change it, they clone it into their own portfolio. Open standalone app opens the panel on its own page, the one to use on a phone; its Use on my phone button has the steps.
Watch how (2 min): Use your App on your phoneWatch (1 min): Share your phone app
Tips
- Name each button after what it does, such as “Open gate”, not “Button 1”.
- Group related controls with a shape behind them.
- Check the Phone preview before you share: many people will open your link on a phone.
Build a smart room on an ESP32 in the live demo, in the preview with no board, account or install: open the demo