---
title: User Guide
---

## User Guide

Tuya MiniApp IDE include a simulator and debugger to assist in developing and debugging a miniapp. More features will be available as plugins to elevate the development efficiency.

Tuya MiniApp IDE does not come with a code editor, working more like a 'miniapp browser'. We recommend combining the Tuya MiniApp IDE with your favorite code editor, like Visual Studio Code, for a seamless development experience similar to creating a web application.

Besides enhancing Tuya MiniApp features, the Tuya MiniApp team will explore ways to improve the compatibility of the Tuya MiniApp IDE with third-party editors.

## Login page

- Log in with the [Tuya Developer Platform](https://auth.tuya.com/register?from=https%3A%2F%2Fiot.tuya.com%2Fminiapp%2F) account.
- You can change the language by tapping the icon in the top right corner.

   <Image 
   src="/images/ide/new/1.png" 
   style={{
         borderRadius: '10px',
         width: '300px',
         boxShadow: '0 0 5px rgba(0,0,0,0.3)',
      }}
   />

## Project management page

The project management page looks like this:

<Image 
  src="/images/ide/new/2.png?333" 
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

### Change Data Center

You can switch the data center in the top left corner. Changing the data center will affect the following features:

- Remote debugger
- The authorized app login on the simulator
- Various whitelists on the developer platform

### Change space

You can switch to another [space](https://developer.tuya.com/en/docs/iot/sub-account?id=K914jj4h334gx) with the dropdown list next to the name in the top left corner, allowing you to link a miniapp from a different space and present all the associated miniapp projects in the current space.

### Create project

1. Click **Create** and complete the required information.

   - **Project Path**: By default, it is a fixed path and the project folder name increases by 1 with each new project created.
   - **Project Name**: Used to identify your miniapp.
   - **Link MiniApp**: Link a local project with a miniapp created on the **Developer Platform**.
      - You need to create a miniapp on the **Developer Platform** first.
   - (Optional) **Debug Product**: If the **miniapp you are linking** is a panel miniapp, it must be linked with a product. The associated product will be used for debugging.

      <Image 
      src="/images/ide/new/3.png?333" 
      style={{
         borderRadius: '10px',
         boxShadow: '0 0 5px rgba(0,0,0,0.3)',
      }}
      />

2. Select an initial template.

   <Image 
   src="/images/ide/new/4.png?33" 
   style={{
      borderRadius: '10px',
      boxShadow: '0 0 5px rgba(0,0,0,0.3)',
   }}
   />

### Additional features

- After you create and import a project, a quick access will be generated. You can click it to open the workspace. The most recent project will be displayed at the top.

- Hover over the project to see a delete button on the right. If you choose **Delete Local Project**, the local folder will be deleted.

## Workspace page

When you open the workspace, the project will be initialized. The duration varies depending on the complexity of the project.

1. Ensure that you have [node](https://nodejs.org/en) and [yarn](https://yarnpkg.com/) installed on your computer.
2. Check if the project has installed the dependency (`node_modules`). `yarn` will be used first, followed by `npm install --legacy-peer-deps`.
3. When you build the project, you can review the process and errors from the log.



   <Image 
   src="/images/ide/new/5.png" 
   style={{
      borderRadius: '10px',
      boxShadow: '0 0 5px rgba(0,0,0,0.3)',
   }}
   />

## Next step

- [Workplace](/en/miniapp/devtools/tools/workspace)
- [Remote Debugger](/en/miniapp/devtools/tools/debug)