Skip to main content
Back to LearnTuyaOpen IDE ยท Practice 3

Mini-app panel

Build a device control panel that runs in the phone app and cooperates with the firmware over DP (Data Points) โ€” create, bind, preview, and publish.

Intermediate20 minIDE

This practice turns to the interface โ€” you use Tuya mini-app technology to build a device control panel that runs inside the phone app and talks to the firmware through DP (Data Points).

How firmware and panel cooperate over DP

Firmware and panel are two independent programs that communicate through DP:

  • Firmware side: define DPs in TuyaOpen IDE (for example switch_led) and report them.
  • Panel side: use the mini-app API โ€” publishDps to send, onDpDataChange to listen โ€” to control the device.

Prerequisite: at least one device that can reach the Tuya Cloud. Build one first in Practice 2.

Step 1: Account and product

  1. Enter mini-app panel development and follow the three steps on the right.

    Mini-app panel development โ€” three steps

  2. After Practice 2 you are already logged in and have a bound product. Now go to the developer platform to create a mini-app for binding.

    Create a mini-app on the developer platform

  3. Create a new mini-app panel.

    Create a mini-app panel

  4. Select the panel mini-app type.

    Select the panel mini-app type

  5. After creating it, return to the IDE and log in to your Tuya developer account again.

    Relogin to the developer account in the IDE

  6. After login, return to mini-app panel development and click Update. You see the panel mini-app you just created on the developer site โ€” click Bind.

    Bind the panel mini-app

Step 2: Debug and preview

  1. Click Debug & Preview on the right to build the mini-app and render the panel. The panel appears below on a virtual device.

    Mini-app debug and preview

  2. Click the virtual panel on the left to interact; the right side shows the DP data for the virtual device interaction.

    Virtual panel and DP interaction

  3. Now you can personalize the mini-app code. After editing, rebuild and re-render to preview. Installing the IDE-provided skills speeds this up โ€” see Vibe Coding skills.

Step 3: Upload and publish

  1. Click Upload & Publish on the right to upload to the cloud first.

    Upload the mini-app to the cloud

  2. After upload succeeds, go to the Tuya Developer Platform to submit for review.

    Submit for review on the platform

  3. Open Basic settings, fill in the mini-app description, English display name, and upload a preview image.

    Panel basic settings โ€” intro and preview image

  4. Open Version management and do Step 1 โ€” Submit for review.

    Version management โ€” submit for review

  5. Open the review version and wait. After a few minutes, refresh to see it approved, then click Publish.

    Review approved โ€” publish

  6. Back in the IDE, do Step 2 โ€” click Reselect panel, choose the custom panel, and you can see the latest panel in the SmartLife app.

    Reselect the custom panel in the IDE

    Custom panel in the SmartLife app

Where to go deeper

Want toGo here
Speed up development with AIVibe Coding skills
Build your own cloud AgentAgent Development Guide
Build device control panelsPanel Mini-App portal
Learn the mini-app technology / APITuya Mini-App docs
Build a panel with no codePanel Studio