Web 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. 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.

Create a sandbox snippet

; Opens a new tab

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.

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

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 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 over HTML	# total Gestalt components / (# native DOM elements + # total Gestalt component); % per site
% HTML coverage	# total Gestalt components with HTML equivalent/ (# native DOM elements with Gestalt equivalent + # total Gestalt components with HTML equivalent);
% HTML coverage	# total Gestalt components with HTML equivalent/ (# native DOM elements with Gestalt equivalent + # total Gestalt components with HTML equivalent); per HTML tag
HTML detailed coverage	# total Gestalt components with HTML equivalent, # total HTML components with Gestalt equivalent
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
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
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
Usage by import source (direct import, subcomponent, Pinboard extension)	# total Gestalt components; # per source
Usage by component category (Html equivalent, industry standard, Pinterest specific)	# total Gestalt components; # per category
Usage by component type (utility, building block, UI)	# total Gestalt components; # per type
Component impressions	# component impressions; # per component