{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/live-auto-reloading/","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\": \"Live/auto reloading\"\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 includes both live and autoreloading functionality.`), mdx(\"p\", null, `Live reloading will automatically refresh your CSS, images or the page whenever you change a file, while auto reloading will reload the page at a set interval.`), mdx(\"p\", null, `You can find this by right clicking the reload icon and selecting either \"Live reload\" or \"Auto reload\", or by going to the \"configurators\" item in the global Edit menu.`), mdx(\"img\", {\n    src: livereload,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `Once configured for a tab it will remain active whenever that tab is active.`), mdx(\"p\", null, `Tabs will show a lightning bold outline `, mdx(Lightning, {\n    width: 16,\n    height: 16,\n    mdxType: \"Lightning\"\n  }), ` when they have live reloading configured but are not currently active. When Live reloading is active, the lightning bold will be filled.`), mdx(\"h2\", {\n    \"id\": \"live-reload\"\n  }, `Live reload`), mdx(\"p\", null, `Live reloading will automatically update your page (in-place, or with a page reload) whenever Polypane detects a change on your file system. In the configuration panel, select a directory and check the events you want to respond to. When live reloading is active, you'll see a lightning bolt ( `, mdx(Lightning, {\n    width: 16,\n    height: 16,\n    fill: \"currentColor\",\n    mdxType: \"Lightning\"\n  }), ` ) next to the reload icon.`), mdx(\"p\", null, `If you're currently using `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browsersync-and-polypane/\"\n  }), `Browsersync`), `, Polypane's live reloading is a direct replacement with tighter integration.`), mdx(\"p\", null, `Live reload settings are stored per tab, and will automatically be paused and re-activated as you switch tabs. You can check \"Show notifications for file changes\" to see popups in the top right corner whenever a file gets saved. This can be useful to see which files Polypane is responding to.`), mdx(\"h3\", {\n    \"id\": \"css-and-images-update-without-a-page-refresh\"\n  }, `CSS and images update without a page refresh`), mdx(\"p\", null, `Live reloading will automatically try to replace the CSS, images and background images in your site without a page refresh. If it can't find a match, or if you're updating another type of file, the page is reloaded. This only works for files linked from the page. That means that css using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@import`), ` can't be matched and causes a page reload. Usng `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@import`), ` is generally not recommended for performance reasons, but if you do use it, you can use a build tool to combine your CSS files into one file.`), mdx(\"p\", null, `Polypane will also try to match .scss/.sass file names to linked CSS files and update the CSS file when the .scss/.sass file is saved.`), mdx(\"h3\", {\n    \"id\": \"listen-to-different-events\"\n  }, `Listen to different events`), mdx(\"p\", null, `By default, Polypane only listens to the change file event, but you can configure it to also refresh when adding and removing files or directories. When editing, often just \"Change file\" is enough. Adding more events will take more resources, but will also pick up new or removed files.`), mdx(\"h3\", {\n    \"id\": \"ignored-files\"\n  }, `Ignored files`), mdx(\"p\", null, `Polypane automatically ignores some files and folders, like dotfiles, dotfolders, node_modules and .git, from causing reloads. Here is the full list:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `any files or folders starting with a dot`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `node_modules/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `bower_components/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `cache/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `temp/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `tmp/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `.git/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `.idea/`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `.vscode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `.sass-cache`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `.gooutput`)), mdx(\"p\", null, `If you think we should ignore more files or folders by default, please let us know.`), mdx(\"h4\", {\n    \"id\": \"custom-ignore-patterns\"\n  }, `Custom ignore patterns`), mdx(\"p\", null, `To ignore additional folders and files, Polypane looks for a file called \"ignorepatterns.txt\" in the selected folder or any of its parent folders.`), mdx(\"p\", null, `Add `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `anymatch`), ` patterns (like in your `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `.gitignore`), `) to this file, one on each line, and Polypane will load them in when starting the app and included them in the list of ignored files.`), mdx(\"p\", null, `If you want to match specific files or folders, make sure to add `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `**/`), ` in front of them to make sure anymatch catches them. For example if you want to ignore a \"debug.log\" file, the line in your `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `ignorepatterns.txt`), ` file should say `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `**/debug.log`), `.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Global ignore patterns`)), mdx(\"p\", null, `You can also add an \"ignorepatterns.txt\" file to the Polypane settings folder to have ignore rules that always apply. The location of the application folder differs per platform: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/application-folder/\"\n  }), `application folder`), `.`), mdx(\"p\", null, `Polypane will load and apply both ignorepatterns files when found.`), mdx(\"h3\", {\n    \"id\": \"reload-delay\"\n  }, `Reload delay`), mdx(\"p\", null, `Depending on your local setup, a resource might not be ready the moment a file has been saved. In that case, Polypane can reload too fast. To make sure Polypane reloads `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `after`), ` any post processing has happened, you can configure a delay in seconds. By default, that delay is 0.`), mdx(\"p\", null, `You can also set decimal seconds (\"decisecond\", like 0.1s) if your local server needs less than a second to prepare your resources.`), mdx(\"h2\", {\n    \"id\": \"auto-reload\"\n  }, `Auto reload`), mdx(\"p\", null, `Auto reloading is there for when you're working on a website that's not on your local machine (like a staging environment) that you still want to reload automatically. In the configurator, set the number of seconds that you want to wait between reloads.`), mdx(\"img\", {\n    src: autoreload,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `Polypane will wait for a page to load fully before starting the next countdown.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"Polypane includes both live and autoreloading functionality. Live reloading will automatically refresh your CSS, images or the page whenever…","frontmatter":{"title":"Live/auto reloading","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Measure text length","nextSlug":"/docs/measure-text-length/","prevTitle":"Share panel","prevSlug":"/docs/link/","slug":"/docs/live-auto-reloading/","date":null,"ogFileName":"live-auto-reloading"}},"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/live-auto-reloading/"}},"staticQueryHashes":["4164364741","425175329"]}