What is Uniform Mesh?

Mesh is a framework that enables extending the Uniform user interface with custom extensions. A Mesh integration can inject its own interfaces in locations that are defined in the Uniform UI. A location. Each location represents an area of the Uniform dashboard that will be rendered by a Mesh integration app.

A Mesh integration app is a web application that is hosted on URLs that the app author defines. You may run Mesh integrations on public or private domains, including localhost, as long as the browser accessing the app can access both the app’s URL and https://uniform.app. Mesh integration apps do not require server-side rendering. The simplest way to start a new Mesh app is with a Next.js application.

Why build an integration?

Mesh integrations are a way to provide your authors with improved usability when connecting to data sources which Uniform does not provide an out of the box integration for, or when you have custom requirements that a standard integration will not meet. Uniform uses the same mesh framework to build its own integrations with other composable platforms. Examples of mesh apps might include:

• Adding a custom rich text parameter to a Canvas Component that uses a specific editor library
• Providing a way to select media items from a DAM system using a list
• Creating a new interface for authors to find data in an internal API to connect their content to

What can be extended with Uniform Mesh?

Mesh apps are allowed to define the locations that are implemented. Each location is served by a URL, which can be unique to that location or shared across several locations.

• Integration installation experience (description, name)
• Integration settings page
• Define Next Gen Mesh Data Connectors, which can include interfaces to edit the Data Connector’s…
  • Data Sources
  • Data Types
  • Data Resources
• Define Component Parameter types, which can include interfaces to edit…
  • The configuration of the parameter when it is defined on a component
  • The editing interface of the parameter when it is edited on a composition

What can a location do?

Locations each have a value and metadata. The value is an object that the location is provided and may request to change. For example with a Data Source location, the value is the definition of the Data Source. The metadata is supporting data that is collected and provided to the location to provide related data. For example the Data Type editor is provided with metadata such as the current project ID and a copy of its parent Data Source. Metadata is read-only.

Each location’s URL is loaded into an iframe when it is invoked. This iframe then performs communication via message events to the Uniform dashboard. Uniform provides the @uniformdev/mesh-sdk-react npm package which provides a simple and TypeScript-typed way to interact with mesh locations from React apps. This SDK enables you to access the location type, metadata, value, set values and validation results, and manage dialogs the app may open. It is possible to use Mesh without React, but it is much simpler with the React SDK.

How are integrations managed?

Integrations are registered with Uniform on the team level, making your integration installable on projects within the team. An integration is defined by a JSON-based manifest which defines each location the integration implements along with metadata. The manifest may be registered in the Uniform team settings on the web, or via the Uniform CLI.

Once the app is registered, it can be installed onto a project and its locations will become available to use.