Web tooling
Core design system
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.
Visual Studio Code extension for Gestalt
Access Gestalt component snippets and documentation right on your VSCode editor. Right at your fingertips!
Measurement tools
Gestalt Usage Visualizer
Visualize and easily identify the Gestalt usage on a page.
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 (%)
Metric | Description |
|---|---|
# total Gestalt components / (# native DOM elements + # total Gestalt component); % per site | |
# total Gestalt components; # per component | |
# total Gestalt components; # per prop & component | |
# total Gestalt components; # per prop value & prop & component | |
# total Gestalt extension components; # per component | |
# total Gestalt extension components; # per prop & component | |
# total Gestalt extension 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 | |
# total deprecated components; # per component | |
# total deprecated components; # per site | |
# Gestalt Box with dangerouslySetInlineStyle prop / (# total Gestalt Box); % per site | |
# most used CSS attributes passed to dangerouslySetInlineStyle; # per site |