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

# Linking Screens Together

> Link together screens and get an embeddable prototype

On the canvas you can link screens together and get a
"playable" app using "Prototype Mode."

<Tip>
  You can make a <strong>single</strong> chat highly interactive with multiple
  pages, and therefore no need for prototype mode. <br /> <br />
  But we offer this feature for linking together large designs because once designs
  get very large it can be hard for the AI to add new pages.
</Tip>

<br />

<Frame caption="An onboarding flow prototype.">
  <img src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/projects/images/prototype-linking-example.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=db15f99cf0f9b2835626453a8819eb23" width="1722" height="1124" data-path="documentation/projects/images/prototype-linking-example.png" />
</Frame>

## Prototyping Tutorial

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/_LRBQjy4Z1g?si=7McGjLNkll9y0e51&start=152" title="Tutorial: How to create a prototype in Magic Patterns" alt="Tutorial: How to create a prototype in Magic Patterns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## How to link screens

1. Enter prototype mode either through the tool selector in the bottom bar or use the keyboard shortcut `P`
2. Hover over the element in the screen you want to link. It should turn blue. Click that element.
3. Click the screen you want to connect that element to.
4. You should see a toast in the bottom right pop up "Linking screens..."
5. Once your screens are linked, you should see an arrow connecting those two screens.

## Playing your prototype

To play your prototype, select the screen you want to start on. Next, click the "Play" button in the top toolbar.

This will open up a separate window with your prototype.

## Unlinking screens

To unlink screens, select the screen you want to remove links from. Click the "Unlink" button in the top toolbar.

<Note>
  Make sure you have the screen selected first before trying to unlink!
</Note>

<img src="https://mintcdn.com/magicpatterns/yhBxQxxixYmnt-5a/images/unlink.png?fit=max&auto=format&n=yhBxQxxixYmnt-5a&q=85&s=dde72cbcaaab4c8a64fd3e85ef82b5f6" width="1950" height="838" data-path="images/unlink.png" />
