{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-wire","document":[{"data":{"title":{"text":"What is Wire"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"opening-wire","document":[{"data":{"title":{"text":"Opening Wire"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"interface-wire","document":[{"data":{"title":{"text":"Interface "},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"shortcuts-wire","document":[{"data":{"title":{"text":"Shortcuts"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Opening Wire"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

You can open Wire in two ways, depending on where you're starting from.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"From the Editor"},"content":{"html":"

You can open Wire from the UXPin Editor in a few ways:

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

From a single component

Select a Merge-based component on the UXPin canvas – for example a card, form, modal, or product tile. You'll see the ~New Wire~ app button appear in the Properties panel on the right. Click it to open that component in Wire.

Wire works with code components from Merge libraries. If you don't have your own library connected, you can use one of the built-in options: Shadcn, MUI, AntD, or Bootstrap. Native UXPin elements are not supported.

"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":null,"tip_title":"Tip","tip":{"html":"

Want to use your own design system in Wire? Connect your component library to Merge first. Learn how to set up Merge

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/L__R8GCgEKH2LgYU_Wire_09.png?auto=format,compress&rect=0,0,1504,968&w=752&h=484","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/L__R8GCgEKH2LgYU_Wire_09.png?auto=format,compress&rect=0,0,1504,968&w=1504&h=968"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

From multiple screens

If you want to connect several existing screens into one flow, make sure nothing is selected on the canvas first. Then click ~New Wire app~ in the Properties panel. Wire brings all screens from the canvas into a single container, where you can use Forge to wire them together.

"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"

All elements on the canvas must be code components from the same library. You can't mix libraries or use native UXPin elements.

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/XNFYkwLT50LCsU7N_Wire_10.png?auto=format,compress&rect=0,0,1504,968&w=752&h=484","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/XNFYkwLT50LCsU7N_Wire_10.png?auto=format,compress&rect=0,0,1504,968&w=1504&h=968"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

From Forge

If you generate a UI using Forge in the Editor, you'll get a prompt asking whether you want to open the result in Wire. This is useful when you want to immediately connect generated screens or add logic to what Forge just built.

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/PVWR-Y8BoVGLN3NQ_Wire_105.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/PVWR-Y8BoVGLN3NQ_Wire_105.png?auto=format,compress&rect=0,0,1504,631&w=1504&h=631"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Once you're in Wire, you use Forge to add logic, connect screens, and refine the experience. You test everything live in the Playground and make edits through Forge or directly in the Code Editor.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"From Wire Dashboard "},"content":{"html":null}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/rGA5tgpLl60I0R5r_Wire_builds.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/rGA5tgpLl60I0R5r_Wire_builds.png?auto=format,compress&rect=0,0,1504,631&w=1504&h=631"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

The Wire Dashboard is accessible from the main app dashboard via the Wire tab. It collects all your builds from across your account in one place.

To create a new app from the Dashboard:

  1. Click ~New build~ in the top left.
  2. Describe what you want to build.
  3. Choose a component library and design system.

Wire generates a full app with pages, navigation, and logic ready to edit. This is useful when you're starting from scratch rather than from an existing design.

"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"

Builds created from the Dashboard are not linked to any UXPin prototype. They can only be opened and edited from the Wire Dashboard.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Every Wire app you create is saved as a build. If you open Wire again from the same component or screen and create a new app, it gets saved as a new Variant of that build – so you can explore a different direction without overwriting the previous version. 

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/Q7ZiHh4rHohMiaWu_Wire_builds_2.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/Q7ZiHh4rHohMiaWu_Wire_builds_2.png?auto=format,compress&rect=0,0,1504,631&w=1504&h=631"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

On the Wire Dashboard, each build card shows how many Variants it has. You can organize your builds into Collections to keep things tidy.

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/wJrIEWHuLZMGBVcG_Wire_builds_3.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/wJrIEWHuLZMGBVcG_Wire_builds_3.png?auto=format,compress&rect=0,0,1504,631&w=1504&h=631"}},"image_description":{"text":null}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"wire","pageUid":"opening-wire","meta_description":"UXPin's wire Docs, opening wire for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity%2F596562eb-7e0e-4ef3-a001-4d1baebd1ad3_og_uxpin_docs.png?auto=format,compress&rect=0,0,1200,600&w=1200&h=600","meta_title":"Opening Wire | Wire","page_title":"Opening Wire | Wire"}}