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

# Sync with Github

> Generate designs and then sync them with Github

<Note>
  Sync with Github requires a paid plan. [Upgrade
  here](https://www.magicpatterns.com/dashboard?dl=billing).
</Note>

Export your design to a Github code repository. This is a great way to either hand off a design to a developer or bring Magic Patterns designs into your code editor, like Cursor.

<Info>
  Sync with Github creates a **new repository** in your selected organization. You can then clone this repo and continue development in your preferred environment.
</Info>

You'll be able to pull new changes from Github to continue working on them with Magic Patterns.

It is a two-way sync.

### Steps

You can sync your Magic Patterns design to and from Github with a few easy steps.

<Steps>
  <Step title="Open the Github panel">
    Generate a design and click on the Github icon at the top of the code tab.

    <img height="200" src="https://mintcdn.com/magicpatterns/yhBxQxxixYmnt-5a/images/github/github-icon.png?fit=max&auto=format&n=yhBxQxxixYmnt-5a&q=85&s=aecca822405c9af1589996c616d766e1" data-path="images/github/github-icon.png" />
  </Step>

  <Step title="Install Magic Patterns Github App">
    If it's your first time syncing to Github, you'll be asked to install the Magic
    Patterns Github app. Click 'Install Github App' to continue.
  </Step>

  <Step title="Authorize the Magic Patterns Github App">
    Follow the instructions to install the app. Pick the organization where you
    want to create the new repository. The Github app will request the necessary
    permissions.

    <img height="200" src="https://mintcdn.com/magicpatterns/yhBxQxxixYmnt-5a/images/github/install-and-authorize.png?fit=max&auto=format&n=yhBxQxxixYmnt-5a&q=85&s=5b93a2ae86e406268f0a63c7ea311705" data-path="images/github/install-and-authorize.png" />
  </Step>

  <Step title="Within Magic Patterns, chose a new repository name">
    Once the app is installed and authorized, you will automatically be
    brought back to Magic Patterns. In the Github panel, you will see the
    available organizations you can create the new repository in.

    Once you select an organization, the new repository will be created.

    <img height="200" src="https://mintcdn.com/magicpatterns/yhBxQxxixYmnt-5a/images/github/pick-organization.png?fit=max&auto=format&n=yhBxQxxixYmnt-5a&q=85&s=1e276c87775f77eaf0b8a8cde2461da5" data-path="images/github/pick-organization.png" />
  </Step>

  <Step title="Two-way Sync">
    If you have many edits in Magic Patterns you want to sync new changes, simply click export to Github again in the top right corner and then "sync." Similarly, if you have many edits in Github you want to sync back to Magic Patterns, simply click "sync" in the Github panel.

    <img height="200" src="https://cdn.magicpatterns.com/assets/no-padding-github-sync.gif" />
  </Step>
</Steps>

### FAQ

<AccordionGroup>
  <Accordion title="Can I export to a different code framework?">
    We currently support exporting to a React + Vite code template. More
    customizations are coming soon (let us know what you want to see). We chose
    React + Vite for its popularity.
  </Accordion>

  <Accordion title="Will I lose my changes if I sync?">
    No! We keep every version you make in Magic Patterns, including when you
    pull a new version from Github.
  </Accordion>

  <Accordion title="Can I make changes to the code in Cursor?">
    Yes! You can make changes to the code in Cursor and then push them to
    Github, which can then be synced back to Magic Patterns.
  </Accordion>

  <Accordion title="I don't see my Github code in Magic Patterns.">
    In order to keep the code compatible in Magic Patterns, we strip out what we
    deem as unnecessary code. Please get in touch if you think this is a
    mistake!
  </Accordion>
</AccordionGroup>