When you open Wire, the workspace is divided into two main areas: the Forge panel on the left, and the working area in the center and right.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"At the top, the top bar contains:
Forge panel is where you write prompts, access chat history with Forge, and make targeted edits to selected elements. You can hide it at any time using the toggle to give more space to the working area.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The working area has two views you switch between using the tabs at the top:
The Playground is the live preview of your app. You can interact with it directly – click through flows, fill in forms, test navigation, and check whether logic and state work as expected.
Preview bar – at the top of the Playground, a browser-like bar shows the current route or path (for example /#menu). You can also refresh the preview from here.
Responsive preview – resize the preview by dragging the handles on the sides, or enter specific width and height values to test different screen sizes.
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/qBPTWHfKrifVjO8d_Wire_12.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/qBPTWHfKrifVjO8d_Wire_12.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":"Select & Edit – use the ~Select & Edit~ button or press “Cmd” “E” to pick a specific element directly in the Playground. Once selected, you can edit text inline or use the Forge panel to change only that element.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Forge in Wire"},"content":{"html":null}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/KwzrE355VGIbl5_y_Wire_13.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Forge is available in the Playground on the left. You can use it for broad changes across the whole build, or for targeted updates to a single selected element.
Here's what you can do with Forge in Wire:
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Forge in Wire uses Claude Sonnet 5. This model is selected as the best balance of speed and capability for most tasks. It cannot be changed within Wire.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Code Editor"},"content":{"html":null}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/-MaLS1EPBiQ9eBsI_Wire_14.png?auto=format,compress&rect=1,0,1502,631&w=752&h=316","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/-MaLS1EPBiQ9eBsI_Wire_14.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 Code editor gives you direct access to the app's file structure and code. Switch to it using the tab in the top bar.
On the left, you'll see the file tree. Browse and open any file in the project. On the right, you see the code for the open file. Saved changes you make here are reflected immediately in the Playground.
You can also use Forge while in the Playground to explain, refine, or fix specific parts of the code without switching views.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"To export a single file, open it in the Code editor and use the download icon at the top right. To export the full project, use the Export tab in the Share dialog and click Download ZIP.
The exported project is a standalone Vite + React app. Run npm install and then npm run dev to start it locally.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Media and Assets"},"content":{"html":"Wire gives you three ways to work with images.
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's saved as a new Variant of that build — so you can explore a different direction without overwriting the previous version.
You can access and manage Variants in two places:
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Within each Variant, Wire tracks your changes automatically and lets you step back if needed.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Edit history – use the history panel to browse changes made to the current Variant and restore an earlier state if needed.
Autosave – Wire saves your work automatically as you build and test. There's no manual save step.
Builds panel – to see all Wire Variants created within a prototype, open Prototype actions (with nothing selected on the canvas) and choose ~Wire Builds~.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Publish and Share"},"content":{"html":null}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/PBgDX8iKPNZi4_f8_Wire_03.png?auto=format,compress&rect=0,0,1504,968&w=752&h=484","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/PBgDX8iKPNZi4_f8_Wire_03.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":"Once your app is ready, you can share it in several ways.
Publish – publish the working app as a hosted UXPin link. Anyone with the link can open it in the browser. Use "Cmd ""Shift""P" to publish quickly.
Custom subdomain – before publishing for the first time, you can set a custom subdomain for a cleaner URL, for example https://my-project.uxpin.app. This can only be set before the first publication, after that subdomain can't be changed.
Share options – share by URL, email, or QR code. In the Share dialog you can also choose whether to show the code panel and sidebar, open in fullscreen, or apply a dark theme.
Password protection – check Require password to view this project in the Share dialog to limit who can access the shared app.
Code export – download individual files from the Code editor or export the full project as a ZIP from the Share dialog.
"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"wire","pageUid":"interface-wire","meta_description":"UXPin's wire Docs, interface 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":"Interface | Wire","page_title":"Interface | Wire"}}