# PlayPolaris > A free, open-source, browser-based builder for prototyping Shopify App Home screens with Polaris web components, with live validation and HTML or React export. PlayPolaris runs in the browser. It loads Shopify's Polaris web components from Shopify's CDN (polaris-1.js for v1, polaris-2.0-rc.js for the 2.0 release candidate) and builds its component catalog from the official @shopify/polaris-types packages. Work is stored locally in IndexedDB; there are no accounts and nothing is uploaded. It is an independent tool, not made or endorsed by Shopify. Last updated 2026-10-03. ## Pages - [Home](https://playpolaris.dev/): The official website for PlayPolaris, with features, workflow, and answers to common questions. - [Builder](https://playpolaris.dev/builder): The app itself. Layers and components on the left, a live Polaris preview in the middle, properties on the right. - [Source code](https://github.com/djordje-st/play-polaris): The open-source repository, issue tracker, and contribution guide. - [License](https://github.com/djordje-st/play-polaris/blob/main/LICENSE): MIT License. ## Features - The real Polaris runtime: Screens render with Shopify's own Polaris scripts. Switch between v1 and the 2.0 release candidate to see both admin designs. - Nesting rules, checked live: Every drop and edit is checked against Polaris slot and nesting rules, with a plain explanation when something doesn't fit. - Drag, drop or add in place: Drag from the palette, reorder in the layers tree, or add a component between any two elements. - HTML or React export: Copy or download clean markup for one page or all of them, as HTML or React JSX typed with @shopify/polaris-types. - Your own components: Save anything you build as a reusable component, then drop it into any page. - Ready for AI agents: In browsers with WebMCP, AI agents can read the catalog, build pages and export code. Every change lands in your undo history. ## How it works 1. Start from a layout: Pick a blank page or a common App Home layout: home, index, details, settings or empty state. 2. Build and check: Add components, edit their properties in the inspector, and fix anything the checker flags. 3. Export the code: Download HTML or React JSX and paste it into your Shopify app. ## FAQ ### What is PlayPolaris? PlayPolaris is a free, browser-based builder for prototyping Shopify App Home screens with Polaris web components. You arrange real components in a live preview, it checks Polaris nesting rules as you go, and you export the result as HTML or React JSX. ### Is it free, and do I need an account? It's free, and there's no account or sign-up. Open the builder and start; your work is saved in your browser as you go. ### Is PlayPolaris open source? Yes. PlayPolaris is released under the MIT License. You can read the source code, report issues, and contribute on GitHub. ### Which Polaris versions does it support? Polaris web components v1 (polaris-1.js) and the 2.0 release candidate (polaris-2.0-rc.js), which shows the new Shopify admin design. You can switch at any time. The component catalog comes from Shopify's official @shopify/polaris-types packages. ### Where is my work stored? In your browser's IndexedDB storage. Nothing is uploaded. Clearing this site's data removes it, so export pages you want to keep. ### Can I use the exported code in my Shopify app? Yes. HTML export can include the Polaris and App Bridge script tags, and React export produces a component typed with @shopify/polaris-types. Both use the same s-* elements Shopify documents for App Home. ### Does it check that my layout is valid? Yes. It checks allowed parents, what each slot accepts, property values, duplicate ids and basic accessibility, and it refuses drops Polaris doesn't allow, with the reason. ### Can AI agents use it? Yes, in browsers that support WebMCP. The builder exposes tools for reading the component catalog, creating and editing pages, validating and exporting, so an agent can build screens alongside you. ### Is this an official Shopify product? No. PlayPolaris is an independent tool. It loads Polaris from Shopify's CDN and follows Shopify's public documentation, but it isn't made or endorsed by Shopify. ## Optional - [Polaris web components documentation](https://shopify.dev/docs/api/app-home/web-components): Shopify's reference for the components the builder uses. - [WebMCP](https://webmachinelearning.github.io/webmcp/): The browser API AI agents use to work with the builder.