# Connect your Hygraph project to Plasmic

Learn how to connect your Hygraph project to Plasmic.

**Plasmic** is visual no-code page builder and CMS for any website or codebase, which you can use your existing code components with.

## What you can do with the Hygraph-Plasmic integration

Integrate Hygraph with Plasmic to create websites using a no-code visual page builder where the content is populated by Hygraph.

This allows non-technical, non-developer users to build pages, without the need to rely on developer teams.

## Prerequisites to use this integration

- You must have a **Hygraph** account. If you don't have one, you can create one [here](https://app.hygraph.com/signup).
- You must have a [Hygraph project](https://hygraph.com/docs/getting-started/fundamentals/quickstart#create-a-project) with at least one [model](https://hygraph.com/docs/getting-started/fundamentals/quickstart#create-a-model).
- You must have a **Plasmic** account. If you don't have one yet, you can get one [here](https://studio.plasmic.app/signup).
- You must have a **Plasmic** project with a workspace set up. The [Plasmic no-code quickstart](https://docs.plasmic.app/learn/no-code-quickstart/) contains detailed information on how to do this.

## Connect your projects

### Step 1: Add a PAT to your Hygraph project

![Add a PAT to your Hygraph project](https://hygraph.com/images/docs/integrations/plasmic/add-pat.png)

1. In your Hygraph project, go to `Settings > Access > API access > Permanent Auth Token`.
2. In the Permanent Auth Token section, click on `+Add token` to add a new token. Type in a `Token name` for it and, optionally, add a `Description`. Use the radio buttons to select a `Default stage for content delivery`.
3. Click on `Add & configure permissions`.
4. Look for the token you've just added in the **Permanent Auth Tokens** list. Click on the three dots context menu, and select the `Edit` option.
5. Initialize the default permissions for the **Content API** and the **Management API** by clicking on the purple `Initialize default permissions` button in each of the two sections.

**Pro Tip:**

[Check out our document on permanent auth tokens](https://hygraph.com/docs/api-reference/basics/authorization#permanent-auth-tokens) to learn more about this.

### Step 2: Install Hygraph in your Plasmic project

[Video: Install Hygraph in Plasmic](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/mXMo7LkdTMuaR98NNtmZ)

1. Click on the blue `+` button located at the top left corner of your Plasmic project.
2. Look for `Hygraph` using the search field.
3. Click on the Hygraph package to install it.
4. Click on `Go to settings` on the `Project Settings` popup that displays on the upper right corner of the screen to access the installed package, which contains the `API URL` and the `Auth token`.

**Pro Tip:**

If you miss the popup, you can find your Project Settings in the left side menu of your Plasmic project dashboard. You can see exactly where at the end of the previous video.

### Step 3: Connect your projects

![Add your Hygraph PAT and API IRL](https://hygraph.com/images/docs/integrations/plasmic/connect-apps.png)

1. In your project settings, select `GraphCMS Credentials Provider`.
   **Note:**
     Our company has recently changed its name to Hygraph. Our name in Plasmic
     will soon be updated, but for now please note that it shows our old name.
   
2. Replace the `API URL` value in Plasmic with the `Content API` endpoint from your Hygraph project. You will find it by navigating to `Settings > Access > API access > Endpoints > Content API` in your Hygraph project.
3. Replace the `Auth Token` value in Plasmic with the value for the PAT you created in Hygraph for [Step 1 of this tutorial](https://hygraph.com/docs/integrations/connect-plasmic#step-1-add-a-pat-to-your-hygraph-project). To copy the value, go to `Settings > Access > API access > Permanent Auth Token` in your Hygraph project and click on the copy icon.

Your projects are now connected.

## Use Plasmic with Hygraph

Now that your projects are connected, you will need to add a **Fetcher** and then a **Field** inside it.

To add them:

[Video: Add Hygraph content fields in Plasmic](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/mzGvFQXzSSCPNrwqtoPi)

1. Click on the blue `+` icon at the top left corner of the screen, and type "GraphCMS" in the search field.
2. Drag and drop the **GraphCMS Fetcher** element from the search results, into the place in your project where you want to have it.
3. Set a query for the **Fetcher** element by clicking on `unset` next to `Query` on the right sidebar.
4. Type in your query in the playground, and run it to test that it works. Once you've tested it, click on `Save`.
5. Click on the **GraphCMS Fetcher** element on the template to display its settings on the right sidebar.
6. Click on `unset` next to `Field` to open the field selection screen.
7. A popup will show you all the fields that you set up in the query. Click on one to select it, then click on `Save`.

The selected content should be fetched and displayed on your frontend preview.

## Resources

- [Plasmic documentation](https://docs.plasmic.app/learn/)
- [Plasmic no-code quickstart](https://docs.plasmic.app/learn/no-code-quickstart/)
- [Visually build Hygraph pages with Plasmic](https://www.youtube.com/watch?v=PACZDi-dIv0)