--- title: "App Editor" slug: "app-editor" status: "new" updated: 2025-05-28T21:32:10Z published: 2025-05-28T21:32:10Z canonical: "support.tulip.co/app-editor" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # App Editor **In this article, you will learn:** * **The different parts of the Tulip App Editor** * **Basic visual elements that you can add to an app (also called {{glossary.Widgets}})** * **How to add basic logic using Buttons** * **How to complete an app to log data** :::(Info) () This topic is featured in the [**Introduction to app building**](https://university.tulip.co/how-to-build-your-first-app) course in {{glossary.Tulip University}}. ::: If you are still getting familiar with the Tulip {{glossary.App Editor}}, this article is for you. We’ll use an example of a work instructions app to walk through all the major tools in the App Editor.  The App Editor allows you to build apps for operators without writing any code.  Here's what it looks like: ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_550110661.png) In the app editor, you can create a series of **{{glossary.Steps}}** that digital visual elements of a process. ## Introduction video
:::(Info) (Note) We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different. ::: ## Breakdown of the app editor The {{glossary.App Editor}} is where you build and edit your app. The following diagram shows the different parts that make up the app editor: ![App Editor.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/App%20Editor%281%29.png){height="" width=""} 1. Add Step/Step Group - Add a new {{glossary.Step}} or {{glossary.Step Group}} 2. Step/Records Panel - View your steps via the step tab or switch to the records tab to view the {{glossary.Tables}} used 3. Workspace - The space to create your app interface 4. Add an Asset Widget - Add a shape, icon, or logo to your app 5. Add a Button Widget - Add a button to your app 6. Add an Input Widget - Add an input field to your app 7. Add a Text Widget - Add a text box to your app 8. Embed a Widget- Embed a variety of widgets, such as images, analyses, machine attributes, and more 9. Add Camera Widget - Add a regular camera or barcode camera snapshot 10. Translate - The {{glossary.Tulip Player}} will automatically translate the app into your selected language via your Tulip profile 11. Create Snapshot - Save a current version of your app, creating a duplicate 12. Test - Test your app via {{glossary.Developer Mode}} 13. Run - Run your app in the {{glossary.Tulip Player}} 14. Publish - Publish your app 15. Forward/Back - Move an element within the workspace forward or behind other elements 16. Side Pane - Set {{glossary.Triggers}} and stylistic components in the {{glossary.Widget Tab}}, {{glossary.Step Tab}}, and {{glossary.App Tab}}. Using the **pan and zoom tool** you can: * Move the editing surface of your application * Zoom in or Zoom out ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_550113816.png) The **Steps List** on the left shows the list of steps including the {{glossary.Base Layout}}. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511472804.png){height="" width="300"} ### Base layout Any formatting or layout edits you make to the **Base Layout** will automatically apply to each individual step in the app. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511473104.png){height="" width="300"} You can alter the base layout on a single step by "unlocking" individual elements in the {{glossary.Context Pane}} on the right. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511438045.png){height="" width="500"} Learn more about base layouts [here](/r230/docs/base-layout). ### Steps You can click on a step to view the elements that it contains. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_539529912.png){height="" width="300"} Right-click on a step to duplicate it, group steps together , or delete it. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_539531627.png){height="" width="300"} Learn more about steps [here](/r230/docs/steps). ### Toolbar The **Toolbar** at the top of the screen includes visual elements that can be added to the app. These are elements like shapes, photos, text, videos and buttons.  To add a new visual element to the app, simply click and drag it to the desired location. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511439004.png) On the right side of the **Toolbar** there are additional tools you can use to layer the objects in the Tulip App Editor. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511439312.png) ### Context pane The **{{glossary.Context Pane}}** on the right side of the screen is where you handle all of the formatting and logic in the app. [Read more about Widget configuration here.](/r230/docs/how-to-configure-widgets) ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_550110859.png) There are three tabs: * **{{glossary.Step Tab}}** * **{{glossary.App Tab}}** * **{{glossary.Widget Tab}}** #### Step tab The **{{glossary.Step Tab}}** shows you: * Formatting options for the whole {{glossary.Step}} * Allows you specify the target cycle time for this step * Allows you to reset to the layout specified on the {{glossary.Base Layout}} * Allows you to delete the current step * Gives you the ability to build logic that will be executed whenever this step is opened or closed - we’ll talk more about {{glossary.Triggers}} a bit later. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511440680.png){height="" width="300"} #### App tab The **{{glossary.App Tab}}**:  * Allows you to print out the steps in the app * Allows you to adjust the cycle timer for the entire app * Shows you a list of all {{glossary.Variables}} associated with this app * Allows you to specify the app resolution to fit your intended interface. * Allows you to add comments if multiple administrators are reviewing changes * Gives you the ability to build logic that will be executed whenever this app is started, completed or cancelled ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511440949.png){height="" width="300"} #### Widget tab Clicking an element in the app will expose another tab in the side pane called **{{glossary.Widget Tab}}**. This is where you go to adjust the format of the various visual elements of the app, along with its behavior when interacted with. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511441349.png){height="" width="300"} ## Add logic to an app Logic determines what happens in the app when the operator interacts with it. To start, let’s use a simple button with a {{glossary.Trigger}} to navigate from step to step.  1. Click **Buttons** from the Toolbar and select **Button**. 2. Drag the button to your desired location. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511448451.png) 3. Add a **label** to the button and adjust the format/coloring options using the {{glossary.Context Pane}} along the right. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511448842.png){height="" width="300"} 4. To add logic to the button, click **+** next to **Triggers** in the side pane. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511448988.png){height="" width="300"} **{{glossary.Triggers}}** let you add logic to your applications without having to use any code. Trigger use a *when, if, then, else* sequence. The trigger we'll build here has the following logic: **When:**  Button is pressed **Then:** The current time is saved to a {{glossary.Variable}} **Transition:**   Go to Step → Next. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_550111273.png){height="" width="1000"} 5. Click **Save**. This button moves the user to the next {{glossary.Step}}. You would typically want to add a button allowing users to navigate to the previous step as well. Once you’ve built out the basic logic of the application, you can click **Test** in the top right. This will launch your application in {{glossary.Developer Mode}}, so you can test the app. ## Complete an app and log data A **Complete button** so that Tulip will log all the app data associated with each operator.  In this example, we are going to add another button on the last step of the app. 1. Select the last step of your app. 2. Click **Buttons**, and select **Complete**. 2. Drag the new button to your desired position. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511456280.png){height="" width="450"} ## Further Reading Use these step-by-step guides to build a full app using these concepts: * [Walkthrough: Build your first app](/r230/docs/walkthrough-build-your-first-app) * [Walkthrough: Build a data entry form](/r230/docs/walkthrough-build-a-data-entry-form) --- Did you find what you were looking for? You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!