Mesh locations

Locations in the Mesh framework define the areas of the Uniform dashboard that can be extended by a Mesh integration by rendering custom UI in an iframe.

At a glance#

The following table provides a quick overview of all available Mesh locations:

Location	Category	Description
Install	Basic	Installation dialog with integration description and documentation link
Settings	Basic	Configure integration-specific settings after installation
Data Source	Data Connectors	Configure API connections and securely manage authentication credentials
Data Type	Data Connectors	Define API endpoints, query parameters, and request structure for content types
Data Resource	Data Connectors	Author interface for selecting or querying data from external systems
Parameter Type	Canvas	Custom input controls for component parameters or entry fields
Parameter Type Configuration	Canvas	Configuration UI for custom parameter types in component definitions
Editor tools	Canvas	Extend the visual editor with custom tools in the side rail
Personalization selection algorithms	Canvas	Custom algorithms for selecting personalization variations
Asset Library	Assets	Browse and manage assets from external DAM systems
Asset Parameter	Assets	Custom asset selection interface for component parameters
Project Tools	Project	Embed full custom pages accessible from the Tools section
Dashboard tools	Project	Add custom tabs to the project dashboard

How locations work#

Locations are defined in the integration manifest that tells Uniform:

Which locations your integration implements
Which URLs to use for each location
Configuration options for each location

Each location is served by a URL, which can be unique to that location or shared across several locations.

When a location URL is invoked, it loads in an iframe. This iframe then performs communication through message events to the Uniform dashboard.

Uniform provides the @uniformdev/mesh-sdk-react npm package to help you build the UIs for your locations.

Each location receives two types of data:

Value - The main data object that your location can view and modify

Contains the primary information your location is responsible for editing
Example: For a Data Source location, the value contains the Data Source definition (name, configuration, settings)
Your location can request changes to this data through the Mesh SDK

Metadata - Supporting information provided for context (read-only)

Contains related data to help your location function properly
Example: For a Data Type editor, metadata includes the current project ID and a copy of the parent Data Source
This data cannot be modified by your location

Location categories#

Locations are grouped into the following categories:

Basic locations#

These are locations that define how the integration appears in the Integration settings page and how it can be configured when installing it in a project.

Data connectors#

The data connectors in a Mesh integration enables you to define and configure data sources in Uniform. For each data source you can specify archetypes, such as Query or Single item, which determine how data is fetched from external systems using data resources that are instances of data types.

Canvas locations#

In the Mesh manifest, the canvas group contains several individual locations that you can implement to customize the authoring experience of Uniform.

Asset locations#

You can extend Uniform's asset management with custom asset libraries that connect to external DAM systems or asset sources.

Project locations#

Project locations allow you to extend the Uniform project with custom applications and tools.

Routing in Mesh locations#

Since Mesh locations are rendered inside iframes, standard browser navigation doesn't work for moving between different sections of the Uniform dashboard. The Mesh SDK provides routing helpers that allow your integration to programmatically navigate users to other areas of the platform.

This is particularly useful when your integration needs to direct users to related content, such as opening a composition in the Canvas editor, navigating to settings pages, or linking to content in other projects.

Using the router#

The router is available through the useMeshLocation hook:

import { useMeshLocation } from '@uniformdev/mesh-sdk-react'; // adjust the type to the location you are using const { router } = useMeshLocation<'projectTool'>();

Navigate within the current project:

router.navigatePlatform(path);

The router automatically handles the project context, so you don't need to include the project ID in the path. For example, if you want to navigate to the entries of a project the path would be /dashboards/canvas/entries.

Open in a new tab:

router.navigatePlatform(path, { target: '_blank' });

Navigate to a different project:

router.navigatePlatform(path, { projectId: 'target-project-id', target: '_blank' });

On this page