Community Visualization Manifest Reference

  • The manifest file (manifest.json) provides essential information about your visualization package, including its name, description, resources, and components.

  • Located at the top level of your component's folder, the manifest defines metadata such as the visualization's name, organization, logo, and support links.

  • It also specifies the locations of key resources like JavaScript, configuration, and CSS files for each component within the package.

  • Each visualization within the package is defined as a component with a unique ID, name, description, and resource locations in the manifest.

  • By structuring your manifest correctly, you ensure that your visualization package can be easily discovered, understood, and integrated into Looker Studio.

The manifest provides information about your visualization and identifies the location of your visualization resources. It should be named manifest.json and located at the top level of the folder used as your Component ID.

The following fields must be defined (unless indicated otherwise):

Field name Type Description
name string Name of the visualization package.
organization string Name of the organization or developer.
description string Description of the visualization package.
logoUrl string A logo for the visualization package.
packageUrl string A link users can follow to learn more about the package
organizationUrl string (Optional) A link users can follow to learn more about the organization or developer.
supportUrl string Link to the support page or email for supporting this visualization.
privacyPolicyUrl string (Optional) Link to privacy policy.
termsOfServiceUrl string (Optional) Link to terms of service.
devMode boolean (Optional) If true, skips caching. This value defaults to false. For more details, see about caching.
components Array(object) The visualizations that are included in the package. Currently only a single visualization is supported.
components[].id string The ID of the component. This must be a non-empty string with no spaces.
components[].name string The name of the visualization.
components[].description string A description of the visualization.
components[].iconUrl string An icon for the visualization.
components[].infoUrl string (Optional) An link users can follow to learn more about the component.
components[].resource object The visualization resources.
components[].resource.js string The location of the visualization JavaScript file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_VISUALIZATION.js.
components[].resource.config string The location of the visualization config file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_CONFIG.json.
components[].resource.css string (Optional) The location of the visualization CSS file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_CSS.css.

Example manifest.json manifest file

{
  "name": "ABC Visualizations Package",
  "organization": "ABC Inc.",
  "description": "A package of cool visualizations.",
  "logoUrl": "https://url",
  "organizationUrl": "https://url",
  "supportUrl": "https://url",
  "privacyPolicyUrl": "https://url",
  "termsOfServiceUrl": "https://url",
  "packageUrl": "https://url",
  "devMode": false,
  "components": [
    {
      "id": "treemap",
      "name": "Treemap",
      "description": "Zoomable treemap with filter interactions",
      "iconUrl": "https://url.png",
      "infoUrl": "https://url",
      "resource": {
        "js": "gs://myViz-bucket-treemap/viz.js",
        "config": "gs://myViz-bucket-treemap/viz-config.json",
        "css": "gs://myViz-bucket-treemap/viz.css"
      }
    },
    {
      "id": "histogram",
      "name": "Histogram",
      "description": "Histogram with filter interactions",
      "iconUrl": "https://url.png",
      "resource": {
        "js": "gs://myViz-bucket-histogram/viz.js",
        "config": "gs://myViz-bucket-histogram/viz-config.json",
        "css": "gs://myViz-bucket-histogram/viz.css"
      }
    }
  ]
}