{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/customizing-polypane/","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\": \"Customizing Polypane\"\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, `Though Polypane doesn't have a traditional settings panel, there are still plenty of ways to make Polypane your own and configure it in a way that works best for you. While interacting with the interface, Polypane will remember your choices where that makes sense.`), mdx(\"p\", null, `This guide assumes you've read through the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `Intro to Polypane`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/ui-overview/\"\n  }), `UI Overview`), ` docs.`), mdx(\"h2\", {\n    \"id\": \"picking-your-preferred-color-scheme\"\n  }, `Picking your preferred color scheme`), mdx(\"p\", null, `Polypane comes in both a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/dark-and-light-mode/\"\n  }), `dark and light mode`), `. On first launch of the application we'll automatically match your OS, but if you want to change that you can press `, mdx(ShortCutDisplay, {\n    letter: \"i\",\n    cmdKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` to flip from light to dark mode, or the other way around. You can also find \"Toggle Dark Mode\" in the global View menu.`), mdx(\"img\", {\n    src: darklight,\n    className: \"imgshadow\",\n    alt: \"dark mode and light mode side by side\"\n  }), mdx(\"h2\", {\n    \"id\": \"customizing-the-workspace\"\n  }, `Customizing the workspace`), mdx(\"p\", null, `In the workspace, you can change the layout, the number of panes and whether or not you want to show an explicit \"Add pane\" button.`), mdx(\"img\", {\n    src: workspace,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"choosing-a-layout\"\n  }, `Choosing a Layout`), mdx(\"p\", null, `The workspace is the central area of Polypane, containing your panes. The first way to customize this is to choose a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `layout`), `:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Horizontal`), ` shows all panes in a single horizontal row.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Vertical`), ` shows all panes wrapped to multiple lines.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Focus mode`), ` shows a single pane (similar to how regular browsers show emulated devices).`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Full mode`), ` is like a regular browser, where the site takes up the full area.`)), mdx(\"p\", null, `To switch between these, click the Layout icon, directly to the right of the address bar.`), mdx(\"img\", {\n    src: layouts,\n    alt: \"layouts switcher\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Here you can also see the shortcuts: press `, mdx(ShortCutDisplay, {\n    letter: \"h\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` for Horizontal, `, mdx(ShortCutDisplay, {\n    letter: \"v\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` for Vertical, `, mdx(ShortCutDisplay, {\n    letter: \"f\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` for Focus and `, mdx(ShortCutDisplay, {\n    letter: \"b\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` (for browser) for Full mode. This lets you quickly switch between them without using your mouse. Small tip: if you have a pane focused, first press `, mdx(ShortCutDisplay, {\n    letter: \"Esc\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to clear that focus before using a shortcut.`), mdx(\"h3\", {\n    \"id\": \"customizing-the-set-of-panes\"\n  }, `Customizing the set of panes`), mdx(\"p\", null, `The easiest ways to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/pane-management/#adding-and-removing-panes\"\n  }), `add a new pane`), ` are to double click anywhere between panes that you want to add a new one, or to click the `, mdx(ShortCutDisplay, {\n    letter: \"+\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` button at the end of your list of panes.`), mdx(\"p\", null, `To `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#adding-and-removing-panes\"\n  }), `remove a pane`), `, hover over the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panes/#the-pane-header\"\n  }), `pane header`), ` and an `, mdx(ShortCutDisplay, {\n    letter: \"x\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` will appear in the top right. Click it to remove the pane.`), mdx(\"p\", null, `When hovering the header, you'll also see one or two arrows that let you `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/pane-management/#changing-the-order-of-panes\"\n  }), `re-order`), ` panes, and a `, mdx(ShortCutDisplay, {\n    letter: \"+\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` button that will let you `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/pane-management/#duplicate-a-pane\"\n  }), `duplicate`), ` a pane with all its configuration.`), mdx(\"p\", null, `Read more about `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/pane-management/\"\n  }), `managing the number of panes`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/pane-sizes/\"\n  }), `changing the size of panes`), `.`), mdx(\"h4\", {\n    \"id\": \"hiding-the-add-pane-button\"\n  }, `Hiding the \"add pane\" button`), mdx(\"p\", null, `If you don't want to show the add pane button on the workspace at all times, you can hide it by going to the Settings menu in the top right of the application and unchecking \"Visible Add Pane Button\".`), mdx(\"img\", {\n    src: settings,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"customizing-the-new-tab\"\n  }, `Customizing the new tab`), mdx(\"p\", null, `You can fully customize how new tabs appear in Polypane. You can set a default layout, default set of panes or completely overwrite the new tab.`), mdx(\"h3\", {\n    \"id\": \"picking-a-default-layout\"\n  }, `Picking a default layout`), mdx(\"p\", null, `To change which layout is used for new tabs, right click the plus button in the tab bar, then pick the layout you want to use for a new pane.\nFrom now on that layout will be used for all new tabs. You can see which one it is by looking at the checkmark in this context menu.`), mdx(\"p\", null, `If you don't want to use multiple panes by default, switch it to focus or full mode and you're good to go.`), mdx(\"h3\", {\n    \"id\": \"configuring-a-default-set-of-panes\"\n  }, `Configuring a default set of panes`), mdx(\"p\", null, `Each `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/workspace-management/\"\n  }), `workspace`), ` has a small \"home\" icon that you can click to replace the default three pane view with for all new tabs. This lets you use your frameworks breakpoints, or a set of workspaces based on your analytics data (or any other workspace!) for all new tabs.`), mdx(\"img\", {\n    src: customworkspace,\n    alt: \"a single workspace\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"setting-the-current-tab-as-the-default-new-tab\"\n  }, `Setting the current tab as the default new tab`), mdx(\"p\", null, `To create a fully custom new tab, configure your current tab the way you like with a URL, set of panes, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `debug tools`), ` and even the default Panel size and position, and if it automatically opens or not. Then in the File menu select \"Set Current Tab as Default New Tab\". All new tabs will now look exactly like this one.`), mdx(\"h2\", {\n    \"id\": \"changing-the-text-size-of-the-ui\"\n  }, `Changing the text size of the UI`), mdx(\"p\", null, `If you want to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browser-features/#changing-the-text-size-of-the-ui\"\n  }), `increase or decrease the size of the text in the UI`), `, click \"Adjust Text Size...\" in the global View menu.`), mdx(\"img\", {\n    src: adjusttextsize,\n    className: \"imgshadow\",\n    alt: \"page zoom UI\"\n  }), mdx(\"p\", null, `You can configure the text size of the entire UI and the text size in the panel separately.`), mdx(\"h2\", {\n    \"id\": \"picking-which-devtools-to-use\"\n  }, `Picking which devtools to use`), mdx(\"p\", null, `Polypane comes with `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/developer-tools/\"\n  }), `two sets devtools`), ` the Polypane developer tools and the Chromium developer tools. The Polypane developers tools work across all panes at the same time, while the Chromium developer tools can only inspect and edit a single pane at the same time.`), mdx(\"img\", {\n    src: selectdevtools,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `By default Polypane will use the Polypane developer tools when using the shortcuts, right-clicking to inspect or when using `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), `, but if you want to switch over to using the Chromium devtools you can right-click the inspect element icon in the header and selecting \"inspect in devtools\". From now on, the Chromium devtools will be used instead.`), mdx(\"h2\", {\n    \"id\": \"customizing-the-panel-location\"\n  }, `Customizing the Panel location`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `panel`), ` is where you can find many of Polypane's inspection and editing tools. By default, it opens on the right-hand side of the window, but you can right-click the panel icon in the header to set it to the bottom or left side, to to detach it into its own window. You can also click the panel icon inside the panel to pick a new side.`), mdx(\"img\", {\n    src: panel,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The layout inside the panel will automatically reflow to fit a horizontal or vertical layout, and for each tab in the panel Polypane automatically remembers which tool is selected.`), mdx(\"p\", null, `Polypane will remember the selected panel for each tab and reinstate it for you when opening the panel again.`), mdx(\"h2\", {\n    \"id\": \"configuring-pane-notifications\"\n  }, `Configuring pane notifications`), mdx(\"p\", null, `Polypane can surface information on the state of your panes in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panes/#info-bar\"\n  }), `info bar`), ` below each pane. Depending on what you're working on, you might want to show or hide this information.`), mdx(\"h3\", {\n    \"id\": \"console-information\"\n  }, `Console information`), mdx(\"p\", null, `By default, Polypane will show you the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panes/#console-stats\"\n  }), `number of console messages, warnings and errors`), ` below a pane. This way you can keep track of how noisy the console is for each pane. If you want to hide this information, uncheck \"Console Stats per Pane\" in the Settings menu in the top right of the application.`), mdx(\"img\", {\n    src: panefooter,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"horizontal-overflow-badge\"\n  }, `Horizontal overflow badge`), mdx(\"p\", null, `When Polypane detects a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/horizontal-overflow/\"\n  }), `horizontal overflow issue`), ` in a pane, it will show a warning badge that you can click to turn on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `layout debugging`), ` which will automatically highlight the elements causing the overflow.`), mdx(\"img\", {\n    src: \"/doc-img/horizoverflow.png\",\n    className: \"imgshadow\",\n    alt: \"The horizontal overflow icon.\"\n  }), mdx(\"p\", null, `To hide this button, uncheck \"Horizontal Overflow Warnings\" in the Settings menu in the top right of the application.`), mdx(\"h3\", {\n    \"id\": \"web-vitals-information\"\n  }, `Web Vitals information`), mdx(\"p\", null, `Turned off by default, Polypane can collect and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/web-vitals/\"\n  }), `show web vitals information`), ` for each pane and compare that to global CrUX data. To turn this on check \"Web Vitals Status\" in the Settings menu in the top right of the application.`), mdx(\"img\", {\n    src: \"/doc-img/webvitals.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"choosing-what-to-sync-across-panes\"\n  }, `Choosing what to sync across panes`), mdx(\"p\", null, `By default Polypane `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `syncs the following things`), ` across all panes: scrolling, hovers, clicks, keypresses, form input and form change events. Additionally, Polypane can keep the focused element in sync between panes.`), mdx(\"img\", {\n    src: syncedInteractions,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `To enable focus syncing, or disable some of the other evens, you can right-click the sync icon in the header and check and uncheck which events you want to keep synced.`), mdx(\"p\", null, `The above events should properly keep the URL in sync as well, but sometimes they don't, due to different UI's being used at different viewport sizes. As a last resort, Polypane loads the latest URL in all panes and keeps pages in sync this way.`), mdx(\"h3\", {\n    \"id\": \"showing-multiple-pages-in-one-overview\"\n  }, `Showing multiple pages in one overview`), mdx(\"p\", null, `You can disable navigation sync per pane by clicking the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/#network-emulation\"\n  }), `device options button`), ` above a pane, going to the \"network \"tab and toggling the \"Sync Navigation\" button. This allows you to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/#sync-navigation\"\n  }), `show multiple web pages`), ` side by side.`), mdx(\"video\", {\n    src: navsync,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `For comprehensive guidance on working with multiple URLs, including use cases, best practices, and advanced techniques, see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/showing-multiple-urls/\"\n  }), `Showing multiple URLs`), `.`), mdx(\"h2\", {\n    \"id\": \"common-changes\"\n  }, `Common changes`), mdx(\"p\", null, `There are a few common changes people want to make to better fit their workflow.`), mdx(\"h3\", {\n    \"id\": \"make-polypane-look-like-a-regular-browser\"\n  }, `Make Polypane look like a regular browser`), mdx(\"p\", null, `To make `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/switching-to-polypane/\"\n  }), `switching to Polypane`), ` easier you can initially configure it to look like a regular browser by doing the following things:`), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Switch to the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/layouts/#full-layout-shortcut-b\"\n  }), `full layout`)), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Switch from the Polypane devtools to the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#picking-which-devtools-to-use\"\n  }), `Chromium devtools`), ` as the default`)), mdx(\"p\", null, `This will make Polypane look and behave very similar to other browsers, with the devtools you're already used to. From here you can start to explore the other parts of Polypane, like the different `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `parts of the Panel`), `, the various `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `debug tools`), ` et cetera.`), mdx(\"h3\", {\n    \"id\": \"starting-with-your-frameworks-breakpoints\"\n  }, `Starting with your frameworks breakpoints`), mdx(\"p\", null, `If you develop your sites using a framework like Tailwind, Bootstrap or Chakra, you can configure Polypane to use their breakpoints for your default new tab panes. To do so, load them in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/workspace-management/\"\n  }), `workspace panel`), ` and click the \"home\" icon for the one you want to use:`), mdx(\"img\", {\n    src: customworkspace,\n    alt: \"a single workspace\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Polypane has these frameworks built in in the \"Default\" workspaces:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Bootstrap`), ` The default Bootstrap breakpoints`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Material UI`), ` The default (simplified) Material UI breakpoints`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Tailwind CSS`), ` The default Tailwind CSS breakpoints`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Bulma`), ` The default Bulma breakpoints`)), mdx(\"p\", null, `In addition, we have a number of downloadable workspaces available, like Chakra UI, Ionic, UIKit and more in our workspaces documentation: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/workspaces/#downloadable-workspaces\"\n  }), `downloadable workspaces`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"excerpt":"Though Polypane doesn't have a traditional settings panel, there are still plenty of ways to make Polypane your own and configure it in a…","frontmatter":{"title":"Customizing Polypane","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Console","nextSlug":"/docs/console/","prevTitle":"Browsersync and Polypane","prevSlug":"/docs/browsersync-and-polypane/","slug":"/docs/customizing-polypane/","date":null,"ogFileName":"customizing-polypane"}},"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/customizing-polypane/"}},"staticQueryHashes":["4164364741","425175329"]}