Getting Started

A guide to starting with Anvil2 in the ServiceTitan product. The steps to start developing using Anvil2 change depending on if you are working in a fully standalone project, the ServiceTitan main project, or the ServiceTitan Startup package.

First Steps

Prerequisites

Before starting, you will need Node installed with version 20 or later. Additionally, a package manager such as npm or pnpm is required. In our examples, we use npm.
Anvil2 has react and react-dom as peer dependencies. To use Anvil2, your project must use React 18. If these dependencies are missing, install them using your preferred package manager before continuing:

npm install react@18 react-dom@18

Installation

With Node and a package manager installed, go to the root of your project. Install Anvil2 using your package manager.

npm install --save @servicetitan/anvil2

Installation within the ServiceTitan App

The ServiceTitan app already has Anvil2 installed. Verify the current version by checking the list of dependencies in the package.json.

Installation within a Microfrontend (MFE)

The @servicetitan/web-components package has Anvil2 installed starting in version 27.0.0. If your MFE project has this installed, we recommend staying up-to-date with the latest version to be consistent with other MFEs.

Adding the AnvilProvider

Many Anvil2 components require that the AnvilProvider component exists somewhere higher in the component tree. This is usually done at the highest level component, such as App.tsx.

import { AnvilProvider } from "@servicetitan/anvil2";

export const App = ({ children }) => (
  <AnvilProvider>
    {/* ...other providers */}
    {children}
  </AnvilProvider>
);

AnvilProvider in the ServiceTitan App and MFE

The ServiceTitan monolith app already has the AnvilProvider wrapping all React code, and most MFEs that are up-to-date with platform infrastructure do as well. If you are working in these contexts, only worry about adding it if a component breaks and logs a warning that it is missing a provider.

Usage

With the design system installed, Anvil2 is available for use in your React applications.

import { Button, TextField } from "@servicetitan/anvil2";

export const MyComponent = () => {
  return (
    <>
      <TextField name="textInput" label="Label" required />
      <Button>Click me!</Button>
    </>
  );
};

Further Documentation

There are a number of available resources to continue learning to use Anvil2 effectively:

For assistance using specific components in the design system, check the component documentation.
For a deeper understanding of how to use Anvil2, use the foundations documentation.
For established patterns in Anvil2, use the patterns documentation.

Additional Resources

With Anvil2 installed in your project, there are a number of additional resources available:

The Github repository for Anvil2 provides further information on getting started.
To submit a feature request, use our Slack feature board. We check this as a team every week.
For questions and immediate assistance, reach out in the #ask-designsystem Slack channel.

Anvil2 Web

Resources

​First Steps

​Prerequisites

​Installation

​Installation within the ServiceTitan App

​Installation within a Microfrontend (MFE)

​Adding the AnvilProvider

​AnvilProvider in the ServiceTitan App and MFE

​Usage

​Further Documentation

​Additional Resources