Web tooling

A tooling ecosystem

Gestalt is supported by an ecosystem of tools with the main goal of simplifying processes and automating tasks.

Gestalt's tooling ecosystem has several customers: the Gestalt development team, Pinterest engineers and designers, and non-Pinterest users of Gestalt.

The Gestalt team can highly benefit from measurement tools that support the communication of Gestalt's impact as well as inform Gestalt development decisions, generic codemods to modify Gestalt components after API changes, and generic scripts to locate Gestalt components in a codebase to simplify component usage analysis.

Any other engineers will highly benefit from reducing the amount of steps to adopt Gestalt by automating fixes and increasing Gestalt discoverability, bringing documentation closer to the code editor, and improving and speeding up Gestalt’s onboarding experience

Developer velocity tools

ESLint plugin

Visit the ESLint plugin guidance page to see all the available ESLint rules.

Most rules come with out-of-the-box autofixes, automating the adoption of Gestalt best practices.

Release codemods

Every major breaking change on our library comes with a codemod to facilitate the upgrade of the Gestalt dependency. Some codemods are custom built for each upgrade while some upgrades take advantage of generic codemods that only require running a codemod command with options.

Visit the Releases guidance page to see all the available release codemods.

Playground sandbox

Use Gestalt's playground sandbox to save code snippets. For instance, share code snippets to reproduce bugs or build small-size prototypes to share with peers.

Visual Studio Code tooling

Props documentation on hover in Visual Studio Code

You can now see component and props documentation on hover in VSCode for certain Gestalt components. Quickly see what a component looks like, its sizes and other props documentation.

Props documentation on hover in Visual Studio Code animated demo: hover on each component or prop name to display the associated documentation right on your code editor

Visual Studio Code extension for Gestalt

Alpha

Access Gestalt component snippets and documentation right on your VSCode editor. Right at your fingertips!

Quick access to Gestalt
Quick access to Gestalt components and documentation on the VSCode sidebar. Check for the Gestalt logo on the sidebar.
List Gestalt components by typing "<"
List Gestalt components by pressing Alt+G/Option+G
Snippets
Using Gestalt snippets has the following benefits:
- Auto-import
- Required props are included
- Quick select boolean & enum props
Visual Studio Code extension for Gestalt animated demo: how to add Gestalt component snippets to your code
Install the extension
; Opens a new tab

Measurement tools

Gestalt Usage Visualizer

Visualize and easily identify the Gestalt usage on a page.

How to install
Drag this link: Gestalt Usage Visualiser
; Opens a new tab
into your bookmarks toolbar. If you don't see the bookmarks toolbar, go to View and select 'Show Bookmarks Bar'
How to use it
Click the link in the bookmark bar. Red-bordered areas point to all places that aren't using Gestalt.
Gestalt extension demo: the areas highlighted in red are not using Gestalt components

Metric dashboards

Monitor Gestalt usage metrics with a full suite of dashboards.

To effectively communicate the impact of Gestalt, we measure and track adoption. The quantitative measurement of adoption is an important metric to determine if we're making forward progress towards system usage.

The following table lists the currently available metrics to track Gestalt adoption. Most metrics are in absolute (#) units, while a few are expressed in relative units (%)

Gestalt usage metrics
Metric
Description
# total Gestalt components / (# native DOM elements + # total Gestalt component); % per site
# total Gestalt components with HTML equivalent/ (# native DOM elements with Gestalt equivalent + # total Gestalt components with HTML equivalent);
# total Gestalt components with HTML equivalent/ (# native DOM elements with Gestalt equivalent + # total Gestalt components with HTML equivalent); per HTML tag
# total Gestalt components with HTML equivalent, # total HTML components with Gestalt equivalent
# total Gestalt components; # per component
# total Gestalt components; # per prop & component
# total Gestalt components; # per prop value & prop & component
# total native DOM elements; # per tag
# total native DOM elements; # per attribute & tag
# total native DOM elements; # per attribute value & attribute & tag
# Gestalt Box with dangerouslySetInlineStyle prop / (# total Gestalt Box); % per site
# most used CSS attributes passed to dangerouslySetInlineStyle; # per site
# total Gestalt components; # per source
# total Gestalt components; # per category
# total Gestalt components; # per type
# component impressions; # per component