{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/showing-multiple-urls/","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\": \"Showing multiple URLs\"\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, `With Polypane, you can show multiple different URLs side by side. Whether it's to compare your local development site with the live production version, testing different pages of your site simultaneously, or comparing your site with competitors.`), mdx(\"h2\", {\n    \"id\": \"decoupling-panes-for-different-urls\"\n  }, `Decoupling panes for different URLs`), mdx(\"p\", null, `By default, all panes in Polypane navigate together through `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/#navigation-sync\"\n  }), `navigation sync`), `. However, you can decouple all panes, or individual panes to show different URLs while keeping others synchronized.`), mdx(\"h3\", {\n    \"id\": \"disabling-navigation-sync-for-all-panes-in-a-tab\"\n  }, `Disabling navigation sync for all panes in a tab`), mdx(\"p\", null, `Right-click the sync button in the address bar and toggle \"navigation\". This will turn off navigation syncing for all panes in the current tab.`), mdx(\"p\", null, `When navigation sync is disabled for a tab, all panes will show an address bar instead of a title, allowing you to enter any URL.`), mdx(\"h3\", {\n    \"id\": \"disabling-navigation-sync-for-a-pane\"\n  }, `Disabling navigation sync for a pane`), mdx(\"p\", null, `To show a different URL in a specific pane:`), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Click the emulation settings button in the pane header (devices icon)`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Go to the \"Network\" tab`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Toggle off \"Sync navigation\"`)), 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, `When navigation sync is disabled for a pane:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The pane title transforms into an address bar where you can enter any URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A broken link icon appears before the URL to indicate this pane is decoupled`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `This pane will no longer follow navigation changes from other panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Other panes will continue to sync with each other`)), mdx(\"h3\", {\n    \"id\": \"domain-and-environment-colors\"\n  }, `Domain and Environment colors`), mdx(\"p\", null, `When a pane has a disabled navigation and its URL matches an `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/projects/#environments\"\n  }), `environment`), ` in the current project or a domain customisation different from the default, the color associated with that is shown in the header of a pane. This makes it easy to visually identify which environment each pane is showing.`), mdx(\"img\", {\n    src: panecolor,\n    className: \"imgshadow\",\n    alt: \"Pane environment colors\"\n  }), mdx(\"h3\", {\n    \"id\": \"common-use-cases-for-multiple-urls\"\n  }, `Common use cases for multiple URLs`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Local vs. Production comparison`), `: Load your development site in some panes and your live site in others to compare changes, spot differences, or ensure consistency.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Multi-page testing`), `: Display different pages of your site simultaneously to test navigation flows, check consistency across pages, or verify global changes like header/footer updates.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Competitive analysis`), `: Compare your site side by side with competitor sites to analyze design patterns, performance, or user experience approaches.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `A/B testing`), `: Show different versions of the same page to compare designs, layouts, or content variations.`), mdx(\"h2\", {\n    \"id\": \"working-with-sessions-for-multiple-urls\"\n  }, `Working with sessions for multiple URLs`), mdx(\"p\", null, `When using multiple URLs, you might also want to use different `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/session-management/\"\n  }), `sessions`), ` to test various user states across your different URLs:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Test logged-in vs. logged-out states`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Compare different user roles or permissions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Test with different language preferences`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Simulate various user data scenarios`)), mdx(\"p\", null, `Each pane can have its own session, allowing you to test complex scenarios where different URLs might need different authentication states or user contexts.`), mdx(\"h2\", {\n    \"id\": \"disabling-synced-interactions-for-multiple-urls\"\n  }, `Disabling synced interactions for multiple URLs`), mdx(\"p\", null, `When showing different URLs, you typically want to disable `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `synced interactions`), ` since:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The pages might have different layouts and structures`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Interactions shouldn't be replicated across different sites`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Scrolling and clicking should be independent per URL`)), mdx(\"p\", null, `To disable interaction syncing:`), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Right-click the sync button in the address bar`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Select \"Disable all\" to turn off all interaction syncing`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `Or selectively disable specific interactions like scroll sync, click sync, etc.`)), mdx(\"p\", null, `This prevents unintended interactions from affecting all panes when they're showing different content.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"With Polypane, you can show multiple different URLs side by side. Whether it's to compare your local development site with the live…","frontmatter":{"title":"Showing multiple URLs","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Meta information","nextSlug":"/docs/meta-information/","prevTitle":"Message Bus","prevSlug":"/docs/message-bus/","slug":"/docs/showing-multiple-urls/","date":null,"ogFileName":"showing-multiple-ur-ls"}},"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/showing-multiple-urls/"}},"staticQueryHashes":["4164364741","425175329"]}