> ## Documentation Index > Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Build Domo Apps with the Pro-code Editor export const InlineImage = ({src, alt = '', height = '1.6em'}) => { return {alt}

; }; ### Intro The Pro-code Editor helps you build high-value applications from within the Domo platform. This article describes how to create apps and control versions in the Pro-code Editor. *** ### Access the Pro-code Editor You can access and create new apps in the Pro-code Editor through the Asset Library in your Domo instance. Follow the steps below to access the Pro-code Editor: 1. Open the **Asset Library**. 2. Select **Pro-code Editor** to open the **Templates** modal. Screenshot 2024-07-17 at 9.40.54 AM.png

3. Choose a template to open the editor and set up your workspace. Screenshot 2024-07-17 at 9.49.35 AM.png

### Set Up Your Workspace **Dark Mode:** The Pro-code Editor's dark mode is on by default. Select the **Domo logo dropdown** > **Disable dark mode** to turn it off. disable dark more.jpg

# Hide/Show File Explorer and Preview the App By default, the file explorer, editor, and preview all display on the screen. However, you can customize your work area using the **Hide file explorer** and **Hide preview** controls. custom screen gif.gif

**Note:** If you can't see the app preview, use the **Show/Hide preview** control in the top navigation. You can resize the preview by dragging the inside border left and right.

You can take the following actions when previewing your app:

Action	Image
Select Refresh to see your latest saved changes.
Toggle the Custom Size switch to change the width and height of your app preview. You can choose to display it in pixels or as a Domo card. Select Update to apply your changes.
Select Open in new window to interact with the preview in a new browser window. After interacting with the preview in a new window, you'll need to select Show preview before it displays again within the editor.

Action

Image

Select refresh icon.jpg Refresh to see your latest saved changes.

refresh preview.jpg

Toggle the Custom Size switch to change the width and height of your app preview. You can choose to display it in pixels or as a Domo card.

Select Update to apply your changes.

Screenshot 2024-08-08 at 10.51.53 AM.png

Select open new.jpg Open in new window to interact with the preview in a new browser window.

After interacting with the preview in a new window, you'll need to select Screenshot 2024-07-16 at 12.28.17 PM.png Show preview before it displays again within the editor.

# View Keyboard Shortcuts Select **Domo logo dropdown** > **Help** > **Keyboard shortcuts** to view the Pro-code Editor's available keyboard shortcuts. Screenshot 2024-08-07 at 11.13.17 AM.png

Screenshot 2024-08-07 at 11.13.17 AM.png

### Upload Files to Your Project To add files from your machine to your app, select the **Domo logo dropdown** > **Upload files**.

Choose the destination folder for your file and select **Upload**. Screenshot 2024-08-08 at 11.07.31 AM.png

### Create an App 1. [Access](#access_the_pro-code_editor) the Pro-code Editor and choose a template. After you choose a template, the new app displays in the Asset Library. 2. [Set up your workspace](#set_up_your_workspace) and [upload](#upload_files) any files from your machine. 3. Add and edit code in the editor. code editor.jpg

4. (Optional) In the file explorer, select **New File** to add a supported file to your project. The Pro-code Editor supports many file types. Usually, you'll use CSS, JS, and HTML files.

5. After creating a new file, select it in the file explorer to open it in the editor. Double-click it to open it in a new tab and pin it. In the editor, unpinned tabs show in italics, while pinned tabs are unitalicized. pinned tabs.jpg

6. (Optional) Select **New folder** to add a folder to the file explorer. Drag files to place them in the folder. Hover over a file/folder to view and select options. new folder.jpg

7. (Conditional) You can close tabs individually using the **Close** (x icon) option at the top of the tab. There are two options for closing multiple tabs at the same time: **Close all tabs** or **Close all saved** tabs. Open the **Action menu** (horizontal triple dot icon) in the editor to use either option. close all tabs.jpg

8. Use one of the available options to [save your app](#save_an_app). **View connected cards —** To see all the cards connected to your app, select **Domo logo dropdown** > **Connected** **cards**. # Save an App Save your app using the following save options in the editor's top navigation: * **Save All** **—** This is the default save option and saves all your changes to the app in the Asset Library. * **Create new version —** This saves all your changes to a new app version. You can add release notes when saving. * **Save to existing version —** If you have at least one saved version of the app, this saves your changes to an existing version. Saving changes to live versions immediately replaces the old app version and any associated cards. * **Save and create new card** **—** This saves all your changes and creates a new app card. You are redirected to the app card on your system **Overview** page. Screenshot 2024-11-18 at 2.16.55 PM.png

# Move Between App Versions The editor's top navigation includes a version dropdown where you can move between available app versions. When opening the editor, the most recent version displays by default.

### Download an App Select the **Domo logo dropdown** > **Download design** to download the app code in a ZIP file. ### Edit an App To edit your app, find it in the Asset Library and select it to view the Details page. If there is more than one version of the app, you can change versions to see that version's information: choose version.jpg

Select **App options** > **Edit Design** to open the app in the Pro-code Editor. If there are multiple app versions, the most recent version opens automatically.