Skip to main content
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. You’ll be able to pull new changes from Github to continue working on them with Magic Patterns.

​
Steps

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

Open the Github panel

Generate a design and click on the Github icon at the top of the code tab.
2

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

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

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

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.

​
FAQ

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.
No! We keep every version you make in Magic Patterns, including when you pull a new version from Github.
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.
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!
⌘I