{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/ui-overview/","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 UI overview\",\n  \"slug\": \"ui-overview\"\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, `Parts of Polypane will be still familiar if you come from a different browser: There's an address bar,\nforward and backward buttons and a reload button.`), mdx(\"p\", null, `However, other parts of the UI might be less familiar. With this overview of the Polypane UI you\nshould be able to find most of the options.`), mdx(\"p\", null, `Polypane can be split into roughly three areas:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `The header`), `, with the address bar and navigation UI.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `The workspace`), `, where your panes are.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `The panel`), `, where the devtools are.`)), mdx(\"h2\", {\n    \"id\": \"the-header\"\n  }, `The header`), mdx(\"p\", null, `The header is the similar to other browsers: there's a tab bar, an address bar, back and forward buttons and a reload button.`), mdx(\"img\", {\n    src: uiheader,\n    alt: \"Polypane header\",\n    className: \"imgShadow\"\n  }), mdx(\"p\", null, `The navigational buttons will be clickable depending on if there is a forward or backward history, and right clicking will show you a list of previously visited pages.`), mdx(\"p\", null, `The tab bar also shows the current `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/projects/\"\n  }), `project`), ` in the top left corner, and if there are any bookmarks in the current project, a bookmark icon is shown next to it.`), mdx(\"h3\", {\n    \"id\": \"the-address-bar\"\n  }, `The address bar`), mdx(\"p\", null, `The address bar shows the URL for all panes in the current tab. Entering a new URL and pressing Enter navigates every pane at once. Press `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"L\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` (or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Alt+D`), ` / `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `F6`), `) to focus it from the keyboard.`), mdx(\"p\", null, `When typing, Polypane shows suggestions based on your history, matching any fragment of the title or URL. We match per fragment, so you can type \"po do\" to match `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `https://polypane.app/docs/`), `, for example. Use the arrow keys to select a suggestion and press Enter to navigate to it, or click it with the mouse.`), mdx(\"p\", null, `Press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Esc`), ` to cancel and return to the current URL. If what you type can't be resolved to a URL, Polypane will search using your default search engine. For more on history, suggestions and search engines, see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browser-features/\"\n  }), `Browser features`), `.`), mdx(\"p\", null, `Hover over the address bar to show the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/link/\"\n  }), `share QR`), ` that lets you quickly open the current page on your mobile devices, or share your current tab overview with your team.`), mdx(\"p\", null, `A few contextual indicators appear inside the address bar depending on the current state:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `shield icon`), ` when web security is disabled for the current tab.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `An Offline badge when Polypane detects that you're offline.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `magnifier icon`), ` (+ or −) after you zoom a page. Click it to adjust or reset the zoom level.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `session name`), ` when the tab is using a non-default session. Click it to open the session manager.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A JS or CSS badge when you have active `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `snippets`), ` for the current tab. Click it to open the snippets panel.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `portal`), ` icon when showing a local URL. Click it to open the portal settings and start sharing your local URL with connected devices and browsers.`)), mdx(\"p\", null, `If a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/projects/\"\n  }), `project environment`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/tab-customization/\"\n  }), `Tab or URL`), ` has a color set, that color is shown in the address bar so you can quickly see which environment you are working in.`), mdx(\"h3\", {\n    \"id\": \"reload\"\n  }, `Reload`), mdx(\"p\", null, `Clicking the Reload icon will reload the page, but if you right click it you get a few more options:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/reload-css/\"\n  }), `Reload the CSS`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Hard reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Clear cookies and reload`)), mdx(\"p\", null, `You can also find quick options to scroll to the top or bottom of the page and access the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/live-auto-reloading/\"\n  }), `Live and Auto reloading`), ` configuration from here, which lets you automate reloading pages based on changes you make in your code editor.`), mdx(\"p\", null, `If you click the reload button again while the page is loading, loading will be stopped.`), mdx(\"p\", null, `Tabs can be re-arranged by drag and drop, you can click the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `+`), ` button to add a new tab (or use `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"t\",\n    mdxType: \"ShortCutDisplay\"\n  }), `). Right-clicking the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `+`), ` button lets you pick a new `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `layout`), ` for the new tab.`), mdx(\"h3\", {\n    \"id\": \"the-buttons-in-the-header\"\n  }, `The buttons in the header`), mdx(\"p\", null, `To the right of the address bar is a set of icons that are unique to Polypane. Different layouts can\nshow different buttons depending on whether or not they're available for that layout.`), mdx(\"p\", null, `From left to right (in horizontal and vertical layouts):`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `Change layout`), `. Click it to choose between horizontal, vertical, focus and full mode.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/session-management/\"\n  }), `Session management`), `. Switch to a different session.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `Color Picker`), `. Pick colors from anywhere on the screen. Right click for the color picker UI.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `Scroll Sync`), `. Toggle synchronized scrolling on and off. When off, a small `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `x`), ` is visible on the icon. Right click to manage other synchronisation features`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/breakpoints/\"\n  }), `Breakpoints`), `. Clicking this button will creates panes for all breakpoins in the site CSS. Right click to find a list of all the breakpoints, and the 'simplified' breakpoints option.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/making-screenshots/\"\n  }), `Screenshot`), `. Makes a overview screenshot of all panes together.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Inspect element`), `. Click to inspect elements in all panes. Right click to inspect with pane-specific devtools. (this setting is remembered.)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/developer-tools/\"\n  }), `Open devtools`), `. Click to toggle the developer tools. Right click to open the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/browser-extensions/\"\n  }), `Browser extensions manager`), `.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `Open Panel`), `. Click to open the side panel, where you can find Meta information, social media previews, snippets, the browse panel and an overview of your saved workspaces.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/global-zoom/\"\n  }), `Global zoom`), ` lets you zoom all your panes at once. The percentage can be clicked and manually changed as well. By double clicking the percentage you can zoom to 100% or zoom to fit.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/browser-extensions/\"\n  }), `Browser Extensions`), ` Click to toggle showing your browser extensions or right-click to open the extensions manager.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `App settings`), ` contains various global options to turn on and off, like web vitals and console messages, as well as performance options. You can also open this with the shortcut `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \",\",\n    mdxType: \"ShortCutDisplay\"\n  }), `.`)), mdx(\"p\", null, `In the Focus and Full layouts the Pane-specific options are also added to the header UI.`), mdx(\"h2\", {\n    \"id\": \"the-workspace\"\n  }, `The Workspace`), mdx(\"p\", null, `The workspace is where all your panes are shown. To learn more about the different layouts availabl for the workspace, read `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `the layout section`), ` of our documentation.`), mdx(\"img\", {\n    src: uiworkspaces,\n    alt: \"Polypane workspace\",\n    className: \"imgShadow\"\n  }), mdx(\"p\", null, `To learn more about panes and their UI, read the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panes/\"\n  }), `Intro to panes`), `.`), mdx(\"h2\", {\n    \"id\": \"the-panel\"\n  }, `The Panel`), mdx(\"p\", null, `The panel is where you find some of the more advanced tools that Polypane offers, like the unified\nconsole, the combined element inspector and the meta information panel.`), mdx(\"img\", {\n    src: uipanel,\n    alt: \"Polypane panel\",\n    className: \"imgShadow\"\n  }), mdx(\"p\", null, `The panel can be opened by clicking the icon in the header or by pressing `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    shiftKey: true,\n    letter: \"p\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` and can be docked to the right, left or bottom of the window, or in its own window.`), mdx(\"p\", null, `For a full overview, read the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `intro to panel`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Parts of Polypane will be still familiar if you come from a different browser: There's an address bar,\nforward and backward buttons and a…","frontmatter":{"title":"Polypane UI overview","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Accessibility audit workflow","nextSlug":"/docs/accessibility-audit-workflow/","prevTitle":"Tab customization","prevSlug":"/docs/tab-customization/","slug":"/docs/ui-overview/","date":null,"ogFileName":"polypane-ui-overview"}},"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-tools/"},"frontmatter":{"title":"Debug tools"}}},{"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/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/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/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/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"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/ui-overview/"}},"staticQueryHashes":["4164364741","425175329"]}