--- title: "How to: Use Cross-Runtime Support" slug: "how-to-use-cross-runtime-support" updated: 2025-09-26T01:17:36Z published: 2025-09-26T01:17:36Z canonical: "docs.unqork.io/how-to-use-cross-runtime-support" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # How to: Use Cross-Runtime Support UDesignerClassic Designer ## Overview **Cross-Runtime Support** enables Creators to easily adopt Unqork's new Vega runtime into their existing and future [applications](/v1/docs/introduction-to-unqork-applications). With Cross-Runtime Support, Creators can create mixed applications that seamlessly switch between Centauri and Vega [modules](/v1/docs/what-is-a-module), or use a [Panel](/v1/docs/panel-component) component to drag and drop, import, or [dynamically-refresh](/v1/docs/dynamic-refresh) Vega components into Centauri modules. > [!TIP] > Learn how to trigger, or send values between runtimes, view our [How to: Configure Triggers and Values Using Cross-Runtime Support](/v1/docs/how-to-configure-triggers-and-values-using-cross-runtime-support) article. ## How to Use Cross-Runtime Support There are several methods available for using Cross-Runtime Support. The first method is to build new modules in Vega. Cross-Runtime Support automatically switches between Centauri and Vega runtimes as needed. Other methods use the [Panel](/v1/docs/panel-component) component to add, import, or dynamically refresh the Vega runtime and components into a Centauri application. > [!NOTE] > You cannot import Centauri modules and components into Vega modules. ### Switch Between Runtimes by Module [![A static image displaying the Cross-Runtime Support switching between Centauri and Vega Modules.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_1_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%201.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) Each module can run on a separate runtime. Cross-Runtime Support automatically switches between Centauri and Vega modules when using the following module-to-module navigation methods: - Using a Workflow [Task](/v1/docs/task-node) node to switch between modules. - Using the **Output** Type of `page` to update the URL with a new module ID. - Manually updating the URL with a new module ID. > [!NOTE] > The [Navigation](/v1/docs/navigation-component) component does not use Cross-Runtime Support as it switches between Panel components instead of modules. ### Configure a Panel Component to Use Vega Components In a Centauri module, enabling the Vega runtime in a [Panel](/v1/docs/panel-component) component lets you drag and drop Vega components into it. Use this method when you want to build new Vega-First configurations in your existing modules. In the image below, enabling the Vega runtime in a Panel component lets Creators add Vega components to their Centauri module. [![A static image displaying a Centauri Module with a Vega-Enabled Panel and Drag-And-Drop Vega componnts.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_2_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%202.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) To enable the Vega runtime in a Panel component: 1. In the Module Builder, drag and drop a **P****anel** component onto the canvas. 2. Under **Runtime**, set **Render Components with** to `Vega 2.0`. [![A stati image displaying the Panel component Display settings, the Runtime is set to Vega.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_PanelCentauri2Vega_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS%20PanelCentauri2Vega.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) 3. Click **Save Component**. The Panel component on the canvas displays the **VEGA** badge. 4. From the **Components** tray, drag and drop Vega components into the **P****anel** component on the canvas. 5. **Save** your module. ### Configure a Panel Component to Dynamically Refresh in Vega Components If you already have Centauri and Vega configurations, you can add Vega components to your Centauri module by dynamically refreshing them into a Vega-enabled [Panel](/v1/docs/panel-component) component. > [!TIP] > To learn more about Dynamic Refresh, view our [Dynamic Refresh](/v1/docs/dynamic-refresh) article. [![A static image displaying a Centauri Module with a Vega-Enabled Panel using Dynamic Refresh.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_3_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%203.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) #### What You Need To begin, you need a Centauri module and a Vega module containing components. To configure the Centauri module, you need the following components: - 1 [Initializer component](/v1/docs/data-workflow-component) - 1 [Plug-In component](/v1/docs/plug-in-component) - 1 [Panel component](/v1/docs/panel-component) #### Configure the Initializer Component 1. In the Module Builder, drag and drop an **I****nitializer** component onto the canvas. 2. In the Property ID field, enter **initPanel**. 3. In the Label Text field, enter `initPanel`. 4. Navigate to the **Actions** settings. 5. Set the **Trigger Type** to `New Submission`. 6. Next to **Inputs & Outputs**, click Edit. 7. In the **Outputs** table, enter the following: | | Source | Type | Value | | --- | --- | --- | --- | | 1 | plugRefreshPanel | trigger | GO | > [!NOTE] > You'll configure the **plugRefreshPanel** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **Plug-In** component in the following steps. 8. Click **Save Component** #### Configure the Plug-In Component 1. Drag and drop a ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **Plug-In** component onto your canvas, placing it below the **initPanel** **I****nitializer** component. 2. In the Property ID field, enter **plugRefreshPanel**. 3. In the Label Text field, enter `plugRefreshPanel`. 4. Under the Data panel, from the **Internal Services** drop-down, enter or select `Get Module Components`. 5. From the Module drop-down, enter or select the name of a Vega Module containing the components to import. 6. Navigate to the **Actions** settings. 7. Next to **Inputs & Outputs**, click Edit. 8. In the **Outputs** table, enter the following: | Property ID | Mapping | Option | Header | | --- | --- | --- | --- | | panelDynamicRefresh | trigger | GO | ☐ (**unchecked**) | > [!NOTE] > You'll configure the **panelDynamicRefresh** **Panel** component in the following steps. 9. Click **Save Component** #### Configure the Panel Component 1. Drag and drop a **P****anel** component onto the canvas. 2. In the Property ID field, enter **panelDynamicRefresh**. 3. In the Label Text field, enter `panelDynamicRefresh`. 4. Set **Enable** **Dynamic Refresh** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) (ON). 5. Under **Runtime**, set **Render Components with** to `Vega 2.0`. 6. Click **Save Component**. The Panel component on the canvas displays the **VEG****A** badge. Your Panel component now dynamically refreshes in Vega components from another module. ### Configure a Panel Component to Import a Vega Module Import a Vega module into your Centauri configuration using a Vega-enabled [Panel](/v1/docs/panel-component) component and the **Module** **Import** function. [![A static image displaying a Centauri Module with a Vega-Enabled Panel using Module Import.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_4_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%204.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) To import a Vega module into a Panel component: 1. In the Module Builder, drag and drop a **P****anel** component onto the canvas. 2. Set **Import Existing Module** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **(ON)**. The Import Module pane displays. 3. Under **Imported and Dynamic Content**, from the **Module** drop-down, enter or select a module name or value. 4. Under **Runtime**, set the **Render Components with** drop-down to `Vega (2.0)`. 5. Click **Save Component**. The Panel component on the canvas displays the **VEG****A** badge. [![A static image displaying the module canvas, a Panel component displays the vega badge and a module ID for import.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_UD_ImportModule_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS%20UD%20ImportModule.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) The **panelDynamicRefresh** **P****anel** component now imports a Vega module into your Centauri module. ## Overview **Cross-Runtime Support** enables Creators to easily adopt Unqork's new Vega runtime into their existing and future [applications](/v1/docs/introduction-to-unqork-applications). With Cross-Runtime Support, Creators can create mixed applications that seamlessly switch between Centauri and Vega [modules](/v1/docs/what-is-a-module), or use a [Panel](/v1/docs/panel-component) component to drag and drop, import, or [dynamically-refresh](/v1/docs/dynamic-refresh) Vega components into Centauri modules. > [!TIP] > Learn how to trigger, or send values between runtimes, view our [How to: Configure Triggers and Values Using Cross-Runtime Support](/v1/docs/how-to-configure-triggers-and-values-using-cross-runtime-support) article. ## How to Use Cross-Runtime Support There are several methods available for using Cross-Runtime Support. The first method is to build new modules in Vega. Cross-Runtime Support automatically switches between Centauri and Vega runtimes as needed. Other methods use the [Panel](/v1/docs/panel-component) component to add, import, or dynamically refresh the Vega runtime and components into a Centauri application. > [!NOTE] > You cannot import Centauri modules and components into Vega modules. The following methods are available to optimize your Centauri application with Vega: ### Switch Between Runtimes by Module [![A static image displaying the Cross-Runtime Support switching between Centauri and Vega Modules.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_1_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%201.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) Each module can run on a separate runtime. Cross-Runtime Support automatically switches between Centauri and Vega modules when using the following module-to-module navigation methods: - Using a Workflow [Task](/v1/docs/task-node) node to switch between modules. - Using the **Output** Type of `page` to update the URL with a new module ID. - Manually updating the URL with a new module ID. > [!NOTE] > The [Navigation](/v1/docs/navigation-component) component does not use Cross-Runtime Support as it switches between Panel components instead of modules. ### Configure a Panel Component to Use Vega Components In a Centauri module, enabling the Vega runtime in a [Panel](/v1/docs/panel-component) component lets you drag and drop Vega components into it. Use this method when you want to build new Vega-First configurations in your existing modules. In the image below, enabling the Vega runtime in a Panel component lets Creators add Vega components to their Centauri module. [![A static image displaying a Centauri Module with a Vega-Enabled Panel and Drag-And-Drop Vega componnts.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_2_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%202.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) To enable the Vega runtime in a Panel component: 1. In the Module Builder, drag and drop a **P****anel** component onto the canvas. 2. Under **Imported and Dynamic Content**, set **Runtime** to **Vega**. [![A stati image displaying the Panel component Display settings, the Runtime is set to Vega.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_PanelVega_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20PanelVega.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) 3. Click **Save & Close**. The Panel component on the canvas displays the **VEGA** badge. 4. From the **Component Tray**, add components that do not display the **CENTAURI** badge to the Panel component. 5. **Save** your module. ### Configure a Panel Component to Dynamically Refresh in Vega Components If you already have Centauri and Vega configurations, you can add Vega components to your Centauri module by dynamically refreshing them into a Vega-enabled [Panel](/v1/docs/panel-component) component. > [!TIP] > To learn more about Dynamic Refresh, view our [Dynamic Refresh](/v1/docs/dynamic-refresh) article. [![A static image displaying a Centauri Module with a Vega-Enabled Panel using Dynamic Refresh.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_3_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%203.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) ##### What You Need To begin, you need a Centauri module and a Vega module containing components. To configure the Centauri module, you need the following components: - 1 [Initializer component](/v1/docs/data-workflow-component) - 1 [Plug-In component](/v1/docs/plug-in-component) - 1 [Panel component](/v1/docs/panel-component) ##### Configure the Initializer Component 1. In the Module Builder, drag and drop an **I****nitializer** component onto the canvas. 2. In the Property ID field, enter **initPanel**. 3. In the Label Text field, enter `initPanel`. 4. In the **OUTPUTS** table, enter the following: | | Property ID | Type | Value | | --- | --- | --- | --- | | 1 | plugDynamicRefresh | trigger | GO | > [!NOTE] > You'll configure the **plugDynamicRefresh** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **Plug-In** component in the following steps. 5. Click **Save & Close** ##### Configure the Plug-In Component 1. Drag and drop a ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **Plug-In** component onto your canvas, placing it below the **initPanel** **I****nitializer** component. 2. In the Property ID field, enter **plugRefreshPanel**. 3. In the Label Text field, enter `plugRefreshPanel`. 4. Under the Data panel, from the **Internal Services** drop-down, enter or select `Get Module Components`. 5. From the Module drop-down, enter or select the name of a Vega module containing the components to import. 6. In the **OUTPUTS** table, enter the following | Property ID | Mapping | Option | Header | | --- | --- | --- | --- | | panelDynamicRefresh | trigger | GO | ☐ (**unchecked**) | > [!NOTE] > You'll configure the **panelDynamicRefresh** **Panel** component in the following steps. 7. Click **Save & Close** ##### Configure the Panel Component 1. Drag and drop a **P****anel** component onto the canvas. 2. In the Property ID field, enter **panelDynamicRefresh**. 3. In the Label Text field, enter `panelDynamicRefresh`. 4. Under **Imported and Dynamic Content**, set **Runtime** to **Vega**. 5. Set **Enable** **Dynamic Refresh** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) **(ON)**. [![A static image displaying a Panel component with the Runtime set to Vega, and Dynamic Refresh enabled.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_PanelDynRef_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20PanelDynRef.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) 6. Click **Save & Close**. The Panel component on the canvas displays the **VEGA** badge. Your Panel component now dynamically refreshes in Vega components from another module. ### Configure a Panel Component to Import a Vega Module Import a Vega module into your Centauri configuration using a Vega-enabled [Panel](/v1/docs/panel-component) component and the **Module** **Import** function. [![A static image displaying a Centauri Module with a Vega-Enabled Panel using Module Import.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_Concept_4_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20Concept%204.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) To import a Vega module into a Panel component: 1. In the Module Builder, drag and drop a **P****anel** component onto the canvas. 2. Under **Imported and Dynamic Content**, set **Runtime** to **Vega**. 3. Set **Import Existing Module** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) (ON). The Import Module pane displays. 4. Under **Module*******, enter or select a module name or value. 5. Click **Save & Close**. The Panel component on the canvas displays the **VEGA** badge. [![A static image displaying the module canvas, a Panel component displays the vega badge and a module ID for import.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime_Support_PanelImp_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Cross-Runtime%20Support%20PanelImp.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A52Z&se=2026-11-07T18%3A57%3A52Z&sr=c&sp=r&sig=NfoLlye5tycZmJbDIhfVoCpKuhxS57UuSTpzpB67Brs%3D) The Panel component now imports a Vega module into your Centauri module. ## Best Practices - When possible, separate logic between runtimes to reduce configuration debugging and maintenance. - When you need to perform logic on component data from both runtimes, perform the logic in Centauri. Vega runtime data continously syncs with the Centauri runtime. - For existing applications, consider how much of the Vega runtime you want to implement. You can keep as much of your Centauri configuration as needed, or update your application to be Vega-First. ## Resources - [Introduction to Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support). - [How to: Configure Triggers and Values Using Cross-Runtime Support](/v1/docs/how-to-configure-triggers-and-values-using-cross-runtime-support). - [Configuring the Panel component](/v1/docs/panel-component). - [Debug Vega applications with Console Tools](/v1/docs/vega-console-tools). Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. A Property ID is the unique field ID used by Unqork to track and link components in your module. Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.