{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/playgrounds/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane Playgrounds\",\n  \"slug\": \"playgrounds\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane playgrounds let you open any directory on your device as a HTTPS URL on localhost. This lets you use cookies, local storage and features that require a secure context without setting up a web server yourself.`), mdx(\"p\", null, `That means you don't have to configure and run a web server, remember a port number or deal with self-signed certificates. You can just open your project in Polypane and start testing.`), mdx(\"p\", null, `The URLs that Playgrounds create are only accessible inside Polypane. To access them in other browsers, you can use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `Portals`), `.`), mdx(\"h2\", {\n    \"id\": \"playground-manager\"\n  }, `Playground manager`), mdx(\"p\", null, `To open the playgrounds manager:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Right-click the reload button and select 'playgrounds' from the menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Go to the top level Edit menu, Configurators, Playgrounds...`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Type \"playgrounds\" into the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/command-bar\"\n  }), `command bar`))), mdx(\"p\", null, `After that, the Playgrounds manager opens:`), mdx(\"img\", {\n    src: playgroundsmanager,\n    alt: \"The playgrounds manager\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `The playgrounds manager will list all your playgrounds and lets you edit them or add new ones`), mdx(\"h2\", {\n    \"id\": \"listed-playgrounds\"\n  }, `Listed playgrounds`), mdx(\"p\", null, `All configured playgrounds are listed in the manager and show the domain and directory they are serving. A lightning bolt icon indicates that the playground has automatic live reloading enabled.`), mdx(\"p\", null, `Click them to open in the current tab or middle-click to open in a new tab.`), mdx(\"p\", null, `Hover over each playground to show three additional icons:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Folder`), `: Click the folder icon to open the directory in your file explorer`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Edit`), `: Click the pencil icon to edit the playground's settings`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Delete`), `: Click the trash icon to remove the playground. This will not remove the directory on your device, only make it no longer available on your chosen domain. You'll be asked for confirmation before it is deleted.`)), mdx(\"h2\", {\n    \"id\": \"setting-up-a-playground\"\n  }, `Setting up a playground`), mdx(\"p\", null, `After opening the Playgrounds manager, add a new playground by setting:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A domain (always ends with `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `.localhost`), ` and can be anything you want)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A directory on your device that will be served as that domain`)), mdx(\"p\", null, `Clicking the directory will open a directory picker so you can select the directory you want to serve. After that, click 'Add' and your playground will be added to the list.`), mdx(\"p\", null, `Playgrounds have three additional options:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Automatic live reloading`), ` (on by default): hooks into Polypane's `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/live-auto-reloading/\"\n  }), `live reloading system`), ` to reload pages or reinject CSS and images on change`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Allow Directory listing`), ` (on by default): Show a directory listing for all directories without an index file`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Use SPA fallback`), ` (off by default): Serve your index.html file for all requests that don't match a file. This is useful for single page applications that use client-side routing.`)), mdx(\"p\", null, `You can make the same directory available on multiple domains, and each domain can have its own settings.`), mdx(\"h3\", {\n    \"id\": \"automatic-live-reloading-on-by-default\"\n  }, `Automatic live reloading (on by default)`), mdx(\"p\", null, `When automatic live reloading is enabled, Polypane will watch the directory of your playground for changes. When a file changes, Polypane will reload the page or reinject CSS and images.`), mdx(\"p\", null, `That way, you can use your favorite editor to edit your files and see the changes immediately in Polypane without having to refresh the page.`), mdx(\"p\", null, `This feature is built on Polypane's `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/live-auto-reloading/\"\n  }), `live reloading system`), `.`), mdx(\"h3\", {\n    \"id\": \"allow-directory-listing-on-by-default\"\n  }, `Allow Directory listing (on by default)`), mdx(\"p\", null, `When this option is enabled, Polypane will show a directory listing for all directories that don't have an index file. This makes it easy to navigate through your folder structure and get an overview of the files in your project.`), mdx(\"img\", {\n    src: directorylisting,\n    alt: \"The directory listing for a playground\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Directory listings are also available on the file protocol`), `.`), mdx(\"h3\", {\n    \"id\": \"use-spa-fallback-off-by-default\"\n  }, `Use SPA fallback (off by default)`), mdx(\"p\", null, `When this option is enabled, Polypane will serve your index.html file for all requests that don't match a file and would otherwise give a 404 or try to show a directory listing.`), mdx(\"p\", null, `if your index file containst an SPA with a client-side router, this will allow you to use the router's navigation without having to configure a server to serve the index file for all routes. Every URL opens the index file and your router will take care of the rest.`), mdx(\"h2\", {\n    \"id\": \"playgrounds-are-portal-enabled\"\n  }, `Playgrounds are Portal-enabled`), mdx(\"p\", null, `Portal is a feature that lets you make local servers available to other browsers on your network, or through a public URL. Playgrounds are automatically Portal-enabled and can also be configured to be available through a public URL.`), mdx(\"p\", null, `This lets you share your playground with others or test the files in your playground on other browsers and devices without having to set up a web server or configure your router.`), mdx(\"video\", {\n    src: playgroundportal,\n    alt: \"Polypane Portal in action\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    },\n    controls: true\n  }), mdx(\"p\", null, `Portal automatically syncs your interactions across all connected browsers, so you can test your playground on multiple devices at the same time. You can also use it to share your playground with others for collaboration or testing.`), mdx(\"p\", null, `Learn more about `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `Portals in our docs`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"Polypane playgrounds let you open any directory on your device as a HTTPS URL on localhost. This lets you use cookies, local storage and…","frontmatter":{"title":"Polypane Playgrounds","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Sales and Procurement","nextSlug":"/docs/sales-and-procurement/","prevTitle":"Performance","prevSlug":"/docs/performance/","slug":"/docs/playgrounds/","date":null,"ogFileName":"polypane-playgrounds"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-overlays/"},"frontmatter":{"title":"Debug overlays"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/image-overlay/"},"frontmatter":{"title":"Image overlay"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/mcp-server/"},"frontmatter":{"title":"MCP server"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/playgrounds/"},"frontmatter":{"title":"Polypane Playgrounds"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/playgrounds/"}},"staticQueryHashes":["4164364741","425175329"]}