Create Hats App will get you building in the Hats ecosystem quickly.
Running pnpm create hats-app (or via npx create-hats-app) initializes a new app for builders who can choose an app name, a supported framework to use for their template.
See the templates live:
Before you begin, ensure you have Node.js version 18 or later installed on your machine. Note that the Vite template may work best with 20+.
Quickly bootstrap a Hats app with the following command:
npx create-hats-appYou'll be prompted to enter the name of your app, select a framework and then the app will be created in a new directory with that name.
Once the process finishes, navigate into your app directory and get started.
The templates (and generated starter apps) focus on enabling core functionality and are designed to be forked and extended. The templates handle the scaffolding for each of the supported frameworks, and the data reads and writes are implemented by following the commonly accepted approaches specific to each framework. Each template leverages learnings and solves pain points of spinning up onchain projects. The Vite template includes minimal, lightweight polyfills that are required for building onchain apps using Vite whereas the Next.js template is structured to fully utilize React Server Components and the associated data loading strategies used in the Next.js app router paradigm.
The README in each template contains more details and information.
Each template includes the same functionality and leverages the Hats Modules SDK, v1 Core SDK, and v1 Subgraph SDK to provide a “playground” for exploring commonly used Hats Protocol reads and writes.
Our goal is for each template to be as similar as possible, with complete feature parity while preserving the nuances of each framework. The templates strike a balance by being opinionated in their initial configuration setup while also remaining flexible and extendable, allowing them to grow into fully fledged independent apps within the Hats ecosystem.
- Hats Core SDK
- Hats Subgraph SDK
- Hats Modules SDK
- RainbowKit
- Wagmi
- Viem
- Tanstack Query
- React Hook Form
- Zod
- Shadcn/UI
- Tailwind
- RadixUI
- Sonner
The Next and Remix templates optimize for loading data on the server and passing to the client, whereas the Vite template is entirely client-side and can be deployed without a server. These options represent the extreme sides of a spectrum, allowing builders to decide which entry point aligns with their project goals.