UI tools

Grow's development server comes with the ability to add tools that expand the development experience.

Tools

Many tools can be found and installed using NPM by looking for the grow-tool- prefix.

Some examples include:

• grow-tool-analytics-highlight Highlights automatically tracked analytics that use data attributes (ex: autotrack).
• grow-tool-grid Overlays a responsive css grid for checking content alignment.
• grow-tool-image-swap Allows dragging new image files to temporarily replace images to preview without changing the source.

Installing

For basic installations:

Add the tool to the project's package.json dev dependencies:

"devDependencies": {
  "grow-tool-analytics-highlight": "^0.0.5"
}

Run grow install to install the new dependency.

Update the podspec.yaml to enable the new tool:

# Setting for specific deployments.
deployments:
  staging:
    # Other settings...
    ui:
      tools:
      - kind: image-swap

# Settings for dev server.
ui:
  tools:
  - kind: analytics-highlight
    options:
      prefix: event

CDNs and Local Sources

Tools can also be hosted on third party systems such as CDNs or within the project:

ui:
  tools:
  - kind: analytics-highlight
    paths:
      script: https://some.cdn.com/grow/ui/tool.js
      style: https://some.cdn.com/grow/ui/tool.css

Custom Tools

There is an basic example project for creating custom tools: grow-tool-template.