Skip to content

update quickstart guide #399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nikgraf merged 1 commit into from
Jul 29, 2025
Merged

update quickstart guide #399

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 23 additions & 68 deletions docs/docs/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,33 @@ tags: [quickstart, typesync]

# 🚀 Quickstart

If you just want to get started and get a feel for how Hypergraph works, we have created an example app that you can clone and use as a starting point.
The quickest way to create a new Hypergraph application you can use the `create-hypergraph` CLI command. Make sure you have Node.js >= 22 installed.

## Explore the Example app
```bash
npx create-hypergraph@latest
# or
pnpm create hypergraph@latest
bunx create-hypergraph@latest
yarn create hypergraph@latest
```

During installation, you'll see the following prompts to choose your app name, template, and package manager.


1. What is your app named? …
2. Choose your template …
3. What package manager do you want to use? …

In order to get started as fast as possible we have created an example app that you can clone and use as a starting point.

After the prompts, you'll have a new Hypergraph application ready to use and can start exploring the app. To run it use the following command:

```bash
git clone https://github.com/geobrowser/hypergraph-app-template.git
cd hypergraph-app-template
pnpm install
pnpm dev
cd my-hypergraph-app
npm run dev
# or depending on your package manager
yarn run dev
pnpm run dev
bun run dev
```

Open the browser, navigate to `http://localhost:5173` and you should see the app running.
Expand All @@ -31,67 +47,6 @@ A few example datasets to use when building your apps are available here:
- [Web3 DAPPs](https://testnet.geobrowser.io/space/b2565802-3118-47be-91f2-e59170735bac/09d3188c-8e20-4083-a6ad-e696cc493c7a)
- [Token Values](https://testnet.geobrowser.io/space/2df11968-9d1c-489f-91b7-bdc88b472161/f8780a80-c238-4a2a-96cb-567d88b1aa63)

## Create a new app using TypeSync

In case you want build an app with your own data types you can follow the guide below.

It will walk you through creating a new, fully-functional React application powered by Hypergraph using our scaffolding tool, **TypeSync**. In just a few minutes, you'll have a local development environment up and running.

### Prerequisites

- Node.js >= 22
- pnpm >= 10 (install with `npm install -g pnpm`)

### 1. Install the Hypergraph CLI

First install the Hypergraph CLI.

```bash
npm install -g @graphprotocol/hypergraph-cli@latest
```

When using `pnpm` you need to v10 or higher

```bash
pnpm install -g @graphprotocol/hypergraph-cli@latest
pnpm approve-builds -g
# select @tailwindcss/oxide, better-sqlite3, and esbuild
```

### 2. Launch TypeSync

TypeSync is a visual tool that helps you define your data schema and then generates a complete starter application based on your design. Launch it with

```bash
hg typesync --open
```

This will start the TypeSync server. You can now access the **TypeSync** app in your browser at `http://localhost:3000`.

### 3. Scaffold Your Application

In the TypeSync Studio:

1. Give your new application a name and a short description.
2. Use the visual editor to define your data models (we call them "types"). Pick the type "Academic Field".
3. Then click "Generate App".

TypeSync will create a new directory for your application (e.g., `./my-awesome-app`) containing all the files and dependencies you need.

### 4. Run Your New App

Once your app is generated, open a **new terminal tab**. Navigate into the newly created app directory, install its dependencies, and start the local development server.

```bash
cd ./my-awesome-app # Adjust the path to match your app's name
pnpm install
pnpm dev
```

Your new Hypergraph-powered React application will now be running, typically at `http://localhost:5173`.

You're all set! You can now start building your application by editing the files in the `src` directory. The generated `src/schema.ts` file contains the Hypergraph schema you defined in TypeSync.

---

## Edit on GitHub :bust_in_silhouette:
Expand Down
Loading