{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/snippets/","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\": \"Snippets\"\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, `The Snippets panel lets you add and manage JS and CSS snippets that can be applied to all or some of the panes as well as connected browsers through `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `Portal`), `. They can be toggled on and off individually or as a group when combined in a folder.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Go to our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/snippets/\"\n  }), `Snippets store`), ` to browse and install snippets created by the community.`)), mdx(\"p\", null, `Snippets are a powerful way to augment your workflow in Polypane, whether it's adding custom styles for testing, injecting JavaScript for debugging, or quickly applying code changes across multiple viewports.`), mdx(\"p\", null, `Snippets can also easily be shared between different Polypane installations using the import and export functionality.`), mdx(\"img\", {\n    src: snippetspanel,\n    className: \"imgshadow\",\n    alt: \"Snippets panel\"\n  }), mdx(\"h2\", {\n    \"id\": \"snippet-types\"\n  }, `Snippet types`), mdx(\"p\", null, `Polypane has three different snippet types:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `CSS snippets`), `. These snippets contain CSS code that is added to the page's stylesheets.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `JS Load snippets`), `. These snippets contain JavaScript code that is applied every page load.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `JS Activate snippets`), `. These snippets contain JavaScript code that is only applied when pressing the \"Run\" button for a snippet.`)), mdx(\"h2\", {\n    \"id\": \"folders\"\n  }, `Folders`), mdx(\"p\", null, `Snippets can be organized in folders. Folders can be enabled or disabled as a group, making it easy to toggle related snippets on and off together.`), mdx(\"h2\", {\n    \"id\": \"snippet-indicator\"\n  }, `Snippet indicator`), mdx(\"p\", null, `When one or more snippets are active for a pane, a snippet indicator is shown in the address bar showing a \"CSS\" and/or \"JS\" badge depending on which snippets are active for that tab, to prevent you from accidentally forgetting about active snippets that may affect the page.`), mdx(\"p\", null, `Click on the badge to open the snippets panel and manage your snippets.`), mdx(\"h3\", {\n    \"id\": \"snippet-activation\"\n  }, `Snippet activation`), mdx(\"p\", null, `When a new pane is added, all active snippets and folders will be applied to it automatically if the folders or snippets are applied to the majority of panes. If a snippet or folder is only applied to some panes, the new pane will not have it applied.`), mdx(\"p\", null, `When a snippet or folder is activated, it will be applied to all existing panes immediately. To specify which panes a snippet or folder should be applied to, click the dropdown next to the toggle or run button.`), mdx(\"p\", null, `Snippets can also be activated and deactivated using the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/command-bar/\"\n  }), `command bar`), ` by searching for the snippet name. The state of the snippet (active/inactive) is shown in the search results.`), mdx(\"h3\", {\n    \"id\": \"running-snippets\"\n  }, `Running snippets`), mdx(\"p\", null, `Snippets that are of type \"JS Activate\" have a \"Run\" button instead of a toggle. This button can be clicked to run the snippet in the selected panes. You can also choose which panes to run the snippet in by clicking the dropdown next to the button.`), mdx(\"p\", null, `These snippets are wrapped in an IFFE (Immediately Invoked Function Expression) to prevent clashes with other snippets or page scripts so you don't have to worry about variable or function name conflicts.`), mdx(\"h2\", {\n    \"id\": \"snippets-store\"\n  }, `Snippets store`), mdx(\"p\", null, `Polypane has a public `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/snippets/\"\n  }), `Snippets store`), ` where you can find snippets created and shared by the community. Click the 'Store' button in the snippets panel to open it inside Polypane. When you open the snippet store in Polypane, you can directly install snippets and collections by clicking the \"Install\" button. The browser will confirm that you want to install the snippet and then it will be added to your snippets panel.`), mdx(\"video\", {\n    src: installsnippets,\n    controls: true,\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\",\n      \"display\": \"block\"\n    }\n  }), mdx(\"p\", null, `If you want to add your own snippets to the store, you can submit them to our GitHub repository at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/polypane/snippets\"\n  }), `https://github.com/polypane/snippets`), ` and we will review them and add them to the store if they meet our guidelines.`), mdx(\"p\", null, `In other browsers, snippets can be downloaded as JSON files and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#importing-and-exporting-snippets\"\n  }), `imported`), ` into Polypane using the import functionality in the snippets panel.`), mdx(\"h2\", {\n    \"id\": \"managing-snippets\"\n  }, `Managing snippets`), mdx(\"p\", null, `Snippets and folders are listed alphabetically, and can be activated by clicking the toggle or 'run' button next to them. Click the dropdown next to the toggle or button to select which panes to apply a snippet to and click the pencil icon to edit, delete or export a snippet or folder.`), mdx(\"h3\", {\n    \"id\": \"folders-1\"\n  }, `Folders`), mdx(\"p\", null, `Click the \"Folder\" button in the top bar to add a new folder. Enter a name for the folder and click \"Save\".`), mdx(\"img\", {\n    src: snippetfolder,\n    className: \"imgshadow\",\n    alt: \"Add snippet folder\"\n  }), mdx(\"p\", null, `Click the Pencil icon next to a folder to rename, delete or export it. When deleting a folder, any snippets in it will also be deleted. To keep snippets, move them out of the folder first.`), mdx(\"h3\", {\n    \"id\": \"snippets\"\n  }, `Snippets`), mdx(\"p\", null, `To add a new snippet, press the \"+ snippet\" button in the top bar. The Add Snippet dialog will open, where you can enter:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Name`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Folder to add the snippet to (optional)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Description (optional, will be displayed in the overview)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Language (CSS or JavaScript)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `When to run (on load or on activate, only for JavaScript snippets)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Whether to show a live preview (only for CSS snippets)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The actual code`)), mdx(\"img\", {\n    src: addsnippet,\n    className: \"imgshadow\",\n    alt: \"Adding a snippet\"\n  }), mdx(\"h4\", {\n    \"id\": \"code-editor\"\n  }, `Code editor`), mdx(\"p\", null, `The code editor is fully aware of CSS and JS syntax and values and will provide suggestions while you type. Select a suggestion with the arrow keys, then press Tab or Enter to apply it.`), mdx(\"img\", {\n    src: codesuggestions,\n    className: \"imgshadow\",\n    alt: \"Suggestions in the code editor\"\n  }), mdx(\"h3\", {\n    \"id\": \"js-bookmarklet-support\"\n  }, `JS Bookmarklet support`), mdx(\"p\", null, `Polypane automatically cleans up bookmarklets when pasted into the code editor, removing the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `javascript:`), ` prefix and unescaping characters so you can easily convert bookmarklets into snippets.`), mdx(\"p\", null, `To add a bookmarklet, just copy the URL and paste it into the code editor, Polypane will do the rest.`), mdx(\"h3\", {\n    \"id\": \"live-preview\"\n  }, `Live preview`), mdx(\"p\", null, `For CSS snippets you can turn Live preview on. With live preview, your snippet will be applied to the page as you type, so you can see the effect of your changes immediately without needing to save or toggle the snippet on.`), mdx(\"p\", null, `This is very useful for quickly trying out CSS changes and iterating on them until you get the desired result.`), mdx(\"h3\", {\n    \"id\": \"get-css-selectors-from-the-page\"\n  }, `Get CSS Selectors from the page`), mdx(\"p\", null, `Use the \"Get CSS Selectors\" button above the code editor and click on any element in any pane to get a list of CSS selectors that match that element as suggestions.`), mdx(\"img\", {\n    src: cssselectors,\n    className: \"imgshadow\",\n    alt: \"CSS Selector Suggestions in the code editor\"\n  }), mdx(\"p\", null, `This lets you quickly write CSS to target an element with the right level of specificity without needing to go to the devtools. It's also useful in your JS snippets to quickly get selectors for `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `document.querySelector`), ` calls.`), mdx(\"h3\", {\n    \"id\": \"google-fonts\"\n  }, `Google Fonts`), mdx(\"p\", null, `The Snippets tab will automatically load in any Google font you define in your CSS, letting you quickly try out multiple fonts. All Google fonts are available as suggestions (starting with a capital) so when you type `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `font-family:`), ` you can easily get to them.`), mdx(\"p\", null, `Polypane also has support for variable fonts served by Google Fonts, and all axes are available for use.`), mdx(\"h3\", {\n    \"id\": \"formatting\"\n  }, `Formatting`), mdx(\"p\", null, `The Format code button uses Prettier to format your code on the fly. We have a default Prettier configuration that works well for most users, but you can also set your own custom Prettier configuration as described below.`), mdx(\"h4\", {\n    \"id\": \"custom-formatting-with-prettier\"\n  }, `Custom formatting with Prettier`), mdx(\"p\", null, `You can set custom formatting options by adding a Prettier configuration file, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `.prettierrc`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `.prettierrc.js`), ` file in the Polypane settings folder. This will be applied to the Snippets panel, the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/source-panel/\"\n  }), `Source Panel`), ` and to any code snippet you copy from the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements Panel`), `.`), mdx(\"p\", null, `The Polypane settings folder can be found in this location:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Windows: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `%APPDATA%/Polypane/`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `macOS: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `~/Library/Application Support/Polypane/`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Linux: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `~/.config/Polypane/`))), mdx(\"p\", null, `Add your configuration file and set your preferred `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://prettier.io/docs/en/options.html\"\n  }), `Prettier options`), `. Polypane loads this file on launch.`), mdx(\"h2\", {\n    \"id\": \"importing-and-exporting-snippets\"\n  }, `Importing and exporting snippets`), mdx(\"p\", null, `Snippets and folders can be exported and imported using the export and import options in the snippet/folder edit dialog.`), mdx(\"p\", null, `When exporting, a JSON file will be created containing the snippet or folder data. This file can then be imported on another Polypane installation using the import option.`), mdx(\"p\", null, `This makes it easy to share snippets between different Polypane installations or with other users.`), mdx(\"h3\", {\n    \"id\": \"importing-bookmarklets\"\n  }, `Importing bookmarklets`), mdx(\"p\", null, `If you want to move over your existing bookmarklets from another browser, export them as a bookmarks.html file (this is supported across brtowsers) and import that HTML file into Polypane. This converts all bookmarklets to snippets. It automatically recreate folders when your bookmarks have them, though we flatten them to a single level.`), mdx(\"p\", null, `When importing bookmarklets, they are added as JavaScript Activate snippets, so you can run them when needed. Non-bookmarklet entries will be ignored, though the same file can also be used to import regular bookmarks into the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/projects/#adding-bookmarks\"\n  }), `project settings`), `.`), mdx(\"p\", null, `Alternatively, use a JSON export extension to export specific bookmarklets. If the bookmarklets have a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `title`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `url`), ` field, Polypane can import them directly as snippets.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":5,"excerpt":"The Snippets panel lets you add and manage JS and CSS snippets that can be applied to all or some of the panes as well as connected browsers…","frontmatter":{"title":"Snippets","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Source panel","nextSlug":"/docs/source-panel/","prevTitle":"Website issues you could encounter","prevSlug":"/docs/website-issues-you-could-encounter/","slug":"/docs/snippets/","date":null,"ogFileName":"snippets"}},"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/snippets/"}},"staticQueryHashes":["4164364741","425175329"]}