{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/integrations/","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\": \"Integrations\"\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 integrates with several applications and tools. For a quick overview, check out the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/\"\n  }), `integrations overview`), `.`), mdx(\"p\", null, `This page covers in-app integrations (tools that run inside a pane) and IDE/editor integrations (launching Polypane from your code editor). For local dev server tools like Browsersync and WPEngine Local, see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/other-tools/\"\n  }), `Local servers support`), `.`), mdx(\"h2\", {\n    \"id\": \"pane-level-integrations\"\n  }, `Pane-level integrations`), mdx(\"p\", null, `By default, Integration settings are hidden. Click the global menu options icon in the top right of the app and check \"Show Pane Integrations\" to show the Cog icon above panes.`), mdx(\"img\", {\n    src: toggleintegrations,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `This cog icon above each pane contains the pane integrations: third party applications you can run in the context of your pane. Currently, we support Marker.io. If you'd like us to support other tools, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `let us know`), `.`), mdx(\"img\", {\n    src: cogicon,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"markerio\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"https://marker.io/?utm_source=polypane\"\n  }), `Marker.io`)), mdx(\"img\", {\n    src: markerintegrate,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Connect to Marker.io, select your destination and activate Marker.io for the current pane. Polypane will automatically load the Marker.io capture UI into the pane, allowing you to capture the page or parts of the page, mark them up and add details and then send them to your selected documentation, right from the pane.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/markerio/#setup\"\n  }), `Setup instructions`), `.`), mdx(\"h2\", {\n    \"id\": \"external-tools-that-support-polypane\"\n  }, `External tools that support Polypane`), mdx(\"p\", null, `Polypane can also integrate with other tools, like Tumult Hype and Whisk.`), mdx(\"h3\", {\n    \"id\": \"code-editors-and-ides\"\n  }, `Code editors and IDE's`), mdx(\"p\", null, `Polypane supports opening the app and new tabs with most 'open in browser' features or plugins for VS Code, Atom, Webstorm, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tumult.com/whisk/\"\n  }), `Whisk`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tumult.com/hype/\"\n  }), `Hype`), ` and other code editors and IDE's. Polypane registers itself as a browser and HTML viewer so depending on the plugin, Polypane will be automatically recognized. If it isn't, or the code editor operates on a whitelist, you can add it like any other browser.`), mdx(\"p\", null, `When Polypane is not yet open, it will be launched and if it's already running, 'open in browser' will open a new tab in Polypane for you.`), mdx(\"h4\", {\n    \"id\": \"vs-code-live-server\"\n  }, `VS Code Live Server`), mdx(\"p\", null, `Configure Polypane as a browser in the settings of the Live Server extension. Open the settings of the Live Server extension and add the following as the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `liveServer.settings.CustomBrowser`), ` setting:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `\"liveServer.settings.CustomBrowser\"`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), `\"polypane\"`)))), mdx(\"p\", null, `When you 'Go Live', Polypane will automatically be started if it hasn't already and a new tab will be opened for you. If Polypane is already running, the new tab will be opened in the existing instance. Depending on your operating system you might need to add the full path to the Polypane executable.`), mdx(\"h4\", {\n    \"id\": \"vs-code-five-server\"\n  }, `VS Code Five Server`), mdx(\"p\", null, `Configure Polypane as a browser in the settings of the Five Server extension. Open your settings and add the following as the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `fiveServer.browser`), ` setting:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token property\"\n  }), `\"fiveServer.browser\"`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), `:`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `[`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), `\"C:\\\\\\\\Program Files\\\\\\\\Polypane\\\\\\\\Polypane.exe\"`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `]`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), `\n`))), mdx(\"p\", null, `When you 'Go Live', Polypane will automatically be started if it hasn't already and a new tab will be opened for you. If Polypane is already running, the new tab will be opened in the existing instance.`), mdx(\"p\", null, `Note that the full path above is for Windows and uses double back slashes. Depending on your setup, Polypane might be installed in `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `C:\\\\\\\\Program Files (x86)\\\\\\\\Polypane\\\\\\\\Polypane.exe`), `.`), mdx(\"p\", null, `On macOS, the path will be `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `/Applications/Polypane.app/Contents/MacOS/Polypane`), ` and on Linux it will be `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `/usr/bin/Polypane`), `.`), mdx(\"h4\", {\n    \"id\": \"visual-studio\"\n  }, `Visual Studio`), mdx(\"p\", null, `To launch Polypane from Visual Studio you need to add it to the list of browsers and then set it as the defaults. For detailed instructions see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://serversncode.com/using-polypane-with-visual-studio/\"\n  }), `Using Polypane with Visual Studio`), ` written by `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://serversncode.com/\"\n  }), `James Kenny`), `.`), mdx(\"h4\", {\n    \"id\": \"tumult-hype\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"https://tumult.com/hype/\"\n  }), `Tumult Hype`)), mdx(\"p\", null, `When you preview your design by clicking the 'preview' button in Hype and selecting Polypane, it will automatically open the viewports you've specified in Hype so you get the full overview with just a single click. If you click the preview button again Polypane focuses and reloads your existing tab, even if you've made changes to that tab.`), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"width\": \"100%\",\n      \"paddingTop\": \"56.25%\"\n    }\n  }, mdx(\"a\", {\n    id: \"video\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"-100px\"\n    }\n  }), mdx(\"iframe\", {\n    src: \"https://www.youtube.com/embed/rJ3ON_oSL_g?&autoplay=false&start=0\",\n    allow: \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: \"\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    },\n    frameBorder: \"0\"\n  }), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/tumult-hype/#setup\"\n  }), `Setup instructions`))), mdx(\"p\", null, `Find more information on the Tumult Hype blog: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://blog.tumult.com/2020/06/15/preview-all-your-responsive-layouts-at-once-with-hypes-new-polypane-integration/\"\n  }), `Hype and Polypane`)), mdx(\"h3\", {\n    \"id\": \"mcp-for-ai-code-assistants-like-claude-copilot-and-chatgpt\"\n  }, `MCP for AI code assistants like Claude, Copilot and ChatGPT`), mdx(\"p\", null, `If you want to connect a coding agent you can link the Chrome DevTools MCP with Polypane. See `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/using-chrome-devtools-mcp-with-polypane/\"\n  }), `Using chrome-devtools-mcp with Polypane`), ` for more information`), mdx(\"h3\", {\n    \"id\": \"got-suggestions\"\n  }, `Got suggestions?`), mdx(\"p\", null, `We'd love to implement with more tools. If you want to integrate with Polypane, or know of a tool we should integrate, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `reach out`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Polypane integrates with several applications and tools. For a quick overview, check out the  integrations overview . This page covers in…","frontmatter":{"title":"Integrations","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Horizontal overflow detection","nextSlug":"/docs/horizontal-overflow/","prevTitle":"Helper extension for other browsers","prevSlug":"/docs/helper-extension-for-other-browsers/","slug":"/docs/integrations/","date":null,"ogFileName":"integrations"}},"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/integrations/"}},"staticQueryHashes":["4164364741","425175329"]}