Tooling

Core design system

The core Gestalt Design System consists of:

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.

Visit the release log or check the codemod directory.

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.

Create a sandbox snippet

Visual Studio Code tooling

Props documentation on hover in Visual Studio Code

Alpha

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

Beta

Get Gestalt component snippets right on your VSCode editor!

Visual Studio Code extension for Gestalt animated demo: how to add Gestalt component snippets to your code

Install the extension

Measurement tools

Gestalt Usage Visualizer

Visualize and easily identify the Gestalt usage on a page.

How to install

Drag this link: Gestalt Usage Visualiser 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
Gestalt Components	# total Gestalt components / (# native DOM elements + # total Gestalt component); % per site
Gestalt Components: component level	# total Gestalt components; # per component
Gestalt Components: prop level	# total Gestalt components; # per prop & component
Gestalt Components: prop value level	# total Gestalt components; # per prop value & prop & component
Gestalt Extension Components: component level	# total Gestalt extension components; # per component
Gestalt Extension Components: prop level	# total Gestalt extension components; # per prop & component
Gestalt Extension Components: prop value level	# total Gestalt extension components; # per prop value & prop & component
Native DOM Elements: tag level	# total native DOM elements; # per tag
Native DOM Elements: attribute level	# total native DOM elements; # per attribute & tag
Native DOM Elements: attribute value level	# total native DOM elements; # per attribute value & attribute & tag
Deprecated Components	# total deprecated components; # per component
Deprecated Components	# total deprecated components; # per site
Boxes with dangerouslySetInlineStyle	# Gestalt Box with dangerouslySetInlineStyle prop / (# total Gestalt Box); % per site
Top dangerouslySetInlineStyle style attribute keys	# most used CSS attributes passed to dangerouslySetInlineStyle; # per site