Communication API between Project Griffon and plugins.
Last updated a month ago by dgrossen .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @adobe/griffon-plugin-bridge 
SYNC missed versions from official npm registry.

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-child.min.js): This is the portion of the communication layer that plugin views use, though plugin views don't load it directly (see Loader). This file is hosted by the Project Griffon UI which means it may be different based on the environment. This is important since it needs to be compatible with the Parent that is being used by the Project Griffon UI in the same environment.

  • Loader (dist/pluginBridge.min.js): This loads Child. Loader will be loaded by plugins via a script tag. Plugins will always load the same Loader regardless of the environment they are running in. Loader then loads the environment-specific Child.


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 delete a validation or view plugin that is owned by the user's organization.


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.

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: (settings) => {
    // do something
  navigateTo: (path) => {
    // do something based on the current path
  receiveEvents: (events) => {
    // array of session events
  receiveSelectedEvents: (events) => {
    // subset of session events
  receiveSession: (session) => {
    // session information including session annotations
  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.


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.


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 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 the following payload:

  "message": "All your base are belong to us",
  "errors": ["uuid1", "uuid2"], // list of event uuids where a problem was discovered


To run tests, run the following command:

npm run test

To run a ci test:

npm run test:ci

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.

Current Tags

  • 0.1.1                                ...           latest (a month ago)

2 Versions

  • 0.1.1                                ...           a month ago
  • 0.1.0                                ...           a month ago

Copyright 2014 - 2016 © taobao.org |