Communication API between Project Griffon and plugins.

Usage no npm install needed!

<script type="module">
  import adobeGriffonPluginBridge from 'https://cdn.skypack.dev/@adobe/griffon-plugin-bridge';


Griffon Plugin Bridge


The Project Griffon UI consumes the bridge via the @adobe/griffon-plugin-bridge npm package while plugin views consume the bridge by loading a CDN-hosted script

The communication layer consists three different pieces:

  • Parent (lib/parent.js): This is the portion of the communication layer that Project Griffon UI uses by importing it directly:

    import { loadIframe } from '@adobe/griffon-plugin-bridge';

    The arguments, return value, and behavior of loadIframe can be found within the code documentation in parent.js.

  • Child (dist/pluginBridge.min.js): This is the portion of the communication layer that plugin views use by including the script:

<script src="https://ui.griffon.adobe.com/pluginBridge/pluginBridge.min.js"></script>


Griffon UI Methods

The bridge provides a plugin (child) to call methods into the Griffon UI (parent).


Allows a plugin to annotate an event. Annotations are additional data to events that need to be persisted - like third-party API results. The annotation is stored as an object with two properties: type and payload. The plugin UUID is used as the type and the data provided in the annotateEvent call is stored in the payload property. An event will have an array of annotations.


Allows a plugin to annotate a session.


Allows a plugin to rerun a connector. Flush connection takes a namespace and context parameter. The exact connection that fully matches both the namespace and context will be cleared, causing the downstream Connector to reload the data.


Allows a plugin to delete a validation or view plugin that is owned by the user's organization. The payload needs to be the uuid of a plugin. This operation is currently restricted to Adobe first-party plugins only.


Allows a plugin to navigate to another view for deep linking.


Allows a plugin to toggle selected events to pass to other plugins via receiveSelectedEvents. The payload needs to be an array of event uuids.


Sends a command to the SDK via the Griffon server. The format should be:

  type: 'command to trigger',
  payload: { ... }

where the payload is an object containing data for the SDK to process when running the command.


Allows a plugin to upload a validation or view plugin. The payload to upload a plugin needs to look like the following:

  uuid: '1234567890', // optional
  file: Blob

If a uuid is not provided, then a new plugin is created. Otherwise, the plugin is updated.

Plugin Methods

The bridge provides a plugin (child) the ability to implement the following APIs by calling window.pluginBridge.register and passing in an object

  init: (configuration) => {
    // do something
  navigateTo: (path) => {
    // do something based on the current path
  receiveEvents: (events) => {
    // array of session events
  receivePlugins: (events) => {
    // array of view plugins
  receiveSelectedEvents: (events) => {
    // subset of session events
  receiveSession: (session) => {
    // session information including session annotations
  receiveSettings: (settings) => {
    // new settings
  receiveValidation: (results) => {
    // validation results from the validation plugins

The parent (Project Griffon UI) calls init once the plugin is registered. Here, Project Griffon UI will pass in any applicable configuration settings.

Example Payload

  imsAccessToken: 'LongEncodedTokenGoesHere',
  imsOrg: 'testOrg@AdobeOrg',
  environment: 'prod',
  settings: {
    global: {
      theme: 'light',
      locale: 'en-US'

Configiration Values

  • imsAccessToken: token string used to make calls to Adobe services
  • imsOrg: string that identifies the user's active org id
  • environment: environment that the plugin is running against. Possible values are local/dev/qa/stage/prod
  • settings: object contain the following settings. Settings can be updated using receiveSettings.


Settings determine how the plugin should look and feel. These settings are scoped to a namespace. The global namespace contains the following:

  • theme: (light/dark) specifies the theme the parent's UI is using
  • locale: (en-US, etc) specifies which localization to use in the UI

You may also provide plugin specific settings using your plugins specific namespace.


Passes a new set of settings data. The structure matches the settings field from the init command above.

Example Payload

{ global: { theme: 'light', locale: 'en-US' }, 'aep-places': { defaultZoom: 7 } }

Supported Values

  • theme: (light/dark) specifies the theme the parent's UI is using
  • locale: (en-US, etc) specifies which localization to use in the UI
  • showTimeline: (true/false) many Griffon Plugins show a timeline at the bottom by default. Setting this to false will hide that timeline.

The parent (Project Griffon UI) calls navigateTo whenever the URL is updated. The intent here is to provide deep linking capabilities as well as an opportunity for plugins to be good citizens and limit resources when not visible.


Project Griffon UI sends an array of connections. A connection will look like:

  namespace, // the namespace of the connector
  context, // object containing parameters needed to run the connector
  loaded, // has the connection data finished loading
  loading, // is the connection currently loading
  error, // error object resulting from the query (if applicable)
  data // the resulting data from the api call

Currently, Project Griffon UI will send all events via this method on all registered plugins in the following scenarios:

  • Upon initial load of the plugin
  • Any time a new event is received while the session with the client (Mobile SDK) is active
  • Any time an event is annotated by a plugin

Project Griffon UI calls receivePlugins when the visibility of a view is changed or when a view is uploaded or deleted. The payload will contain an array of plugin object metadata.


Project Griffon UI sends an array of event uuids selected from the result of a plugin calling selectEvents on the bridge.


The parent (Project Griffon UI) calls receiveValidation when the validation plugins have been executed. The payload will contain an object of results each keyed by the namespace of the plugin. Each result will have a payload similar to the following:

  "category": "Adobe Analytics"
  "description": "Validates each analytics event has post-processed data."
  "displayName": "Adobe Analytics Post-Processed Data"
  "level": "off"
  "namespace": "adobe-analytics-post-processed"
  "results": {
    "message": "Valid! All Analytics events have post-processed data!",
    "events": [],
    "result": "matched"


To run tests, run the following command:

npm run test:browsers

To run a ci test:

npm run test

To create a build, run the following command:

npm run build


Contributions are welcomed! Read the Contributing Guide for more information.


This project is licensed under the Apache V2 License. See LICENSE for more information.