> ## Documentation Index
> Fetch the complete documentation index at: https://hub-docs.wundergraph.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Types and Fields

> Create fields and types on an isolated branch, assign them to subgraphs, and verify the change before proposing it for review.

All schema changes in Hub happen on branches, not on main. You create a branch, make your changes on the canvas, and open a proposal when you are ready for review.

**Main stays untouched until a proposal is approved and merged.**

## Walkthrough

### Fork from Main

Click the branch dropdown in the top bar next to the graph name. Select **Fork** to create a new branch from main. Give the branch a name that reflects the feature or change you are making.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/bwmtzkdos45w?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

<Note>
  The branch captures the full schema state at the point you fork. Any changes you make are isolated to that branch.
</Note>

### Reset the Canvas (Optional)

Click **Reset** in the toolbar to clear the canvas layout if you want a focused view. This does not delete any schema data. Skip this step if you prefer to keep the existing layout.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/j0o7zvvshocm?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

### Create a Field or Type

Click **Create** in the toolbar and select **Create Type / Field**. Hub opens the **Create New** modal, which has two tabs.

Select **New Fields** to add fields to an existing type. Choose the parent type from the **Select existing type** dropdown, then use **Add Field** to define each field. See [Design a Query Before the Fields Exist](/guides/design-query) for a full walkthrough of the field creation controls.

Select **New Type** to define a new type from scratch. Name the type, choose its kind, and add initial fields inline.

Enable **Create More** to keep the modal open after each creation if you are adding several fields or types in sequence.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/js5pwlw4495p?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

### Assign to a Subgraph

Fields created at the supergraph level are unassigned until you place them in a subgraph. An unassigned indicator appears on the field row in place of the standard icon controls.

Click the unassigned indicator to open the **Assign to subgraph** modal. Select an existing subgraph from the list to assign the field to it. If the field requires a new service, select **Create new subgraph** at the bottom of the list. Hub opens the **Create New Subgraph** modal where you enter a name. Hub then creates a new subgraph schema containing the field and any dependencies it needs.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/py0rt3k9vaeq?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

If you are unsure which subgraph should own the field, open **Governance** in the top bar to check type and subgraph ownership, or use **Threads** to start a discussion with the relevant team.

<Check title="What You Should Have at This Point">
  New fields or types on an isolated branch, assigned to the correct subgraph. The unassigned indicator clears when every field is placed. Main is untouched.
</Check>
