> ## 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.

# Quickstart

> End-to-end schema change walkthrough

# From Requirement to Production

This walkthrough covers the core Hub flow: start from a UI requirement, design the query your consumer needs, propose the schema change, and ship it.

<Note>
  Before you start, [create or import a graph](/setup/creating-your-first-graph). The HR platform starter template works well for following along. If you already have a graph, see [Explore Your Graph](/guides/explore-graph) to orient before making changes.
</Note>

***

## 1. Create a branch

Open the branch dropdown in the header and fork from main. Main stays read only, all changes happen on your branch.

<Tip>
  See [Add Types and Fields](/guides/add-types-and-fields) for the full branching workflow.
</Tip>

<div style={{position: "relative", paddingBottom: "calc(49.92% + 25px)", width: "100%", height: 0}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/lxhdykzswlwk?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>

## 2. Start from a requirement

Drop a UI mockup onto the [canvas](/api-design/canvas/canvas-introduction). Highlight what needs data, and Hub creates a connected [Operation Builder](/ui-mock-query/operation-builder-node) for each one.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 25px)", width: "100%", height: 0}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/xkw4u8iyaskn?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>

## 3. Build the dream query

In the Operation Builder, pick the operation type (query, mutation, subscription) you need. Select fields from the explorer, and use **+** to create any types or fields that don't exist.

<Tip>
  See [Design a Query from a Mockup](/guides/design-query) for the full walkthrough.
</Tip>

<div style={{position: "relative", paddingBottom: "calc(48.40% + 25px)", width: "100%", height: 0}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/4mi5yeqcmwgi?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>

## 4. Assign ownership

New fields need to live somewhere. Open the subgraph menu on any unassigned field and use **Assign to** to place it in the right service.

<Tip>
  Need a new service? See [Create a Subgraph](/guides/create-subgraph). To configure team-level ownership and review routing, see [Assign Ownership](/guides/assign-ownership).
</Tip>

<div style={{position: "relative", paddingBottom: "calc(48.40% + 25px)", width: "100%", height: 0}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/kvxoiuziyebo?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>

## 5. Open a proposal

Go to the **Proposal** tab and click **Create Proposal**. If available, select [collections](/api-design/collections) for impact analysis — Hub runs schema checks, flags breaking changes, and displays the complexity impact.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/2ry9keqgfhxu?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>

<Tip>
  See [Propose and Review Changes](/guides/propose-and-review) for the full proposal workflow.
</Tip>

<Note>
  Proposals require a graph connected to a [schema registry](/integrations/schema-registry/schema-registry).
</Note>

## 6. Review, discuss, ship

Review the [operations changed](/collaboration/proposals/operations-changed-page) and [complexity metrics](/collaboration/proposals/proposal-overview). Start [discussion threads](/collaboration/discussions) on any type or field. Once all of the threads are resolved, approve the proposal, then merge.

With [GitHub connected](/integrations/git/github), merging moves draft PRs to ready for review and syncs your schema files automatically.

***

## What else can you do with Hub?

<CardGroup cols={2}>
  <Card title="Guides" icon="compass" href="/guides/guides-overview">
    Design queries from UI requirements, make safe schema changes, enable governance
  </Card>

  <Card title="Concepts" icon="lightbulb" href="/concepts/core-concepts">
    Dream queries, fission, branches, and governance
  </Card>
</CardGroup>