--- area: "Learn" url: "https://unpoly.com/learn" --- # Learn Unpoly Guides that explain how Unpoly works and how to use it. Looking up a specific attribute or function? See the [API reference](https://unpoly.com/api.md). Start here ## [Getting started](https://unpoly.com/learn/start/overview.md) {#learn-start-title} Unpoly lets your links and forms update fragments of the current page, instead of loading full new documents. Screens update without a full page load and keep their state. Your app stays on the server, rendering HTML with any language and any framework. - [How Unpoly works](https://unpoly.com/learn/start/overview.md) - [Installation](https://unpoly.com/learn/install.md) - [Link to a fragment](https://unpoly.com/learn/start/links.md) - [Submit a form](https://unpoly.com/learn/start/forms.md) - [Open an overlay](https://unpoly.com/learn/start/overlays.md) - [Enhance an element](https://unpoly.com/learn/start/elements.md) - [The shape of the API](https://unpoly.com/learn/start/api.md) - [Where to go from here](https://unpoly.com/learn/start/next.md) 1. ## [Links](https://unpoly.com/learn/links.md) Unpoly enhances links so they update a fragment of the current page, instead of loading a full new document. The rest of the page keeps its state: scroll positions, focus, unsaved form fields and running scripts all survive the click. - [Overview](https://unpoly.com/learn/links.md) - [Following links](https://unpoly.com/learn/following-links.md) - [Handling all links](https://unpoly.com/learn/handling-all-links.md) - [Preloading links](https://unpoly.com/learn/preloading.md) - [Navigation bars](https://unpoly.com/learn/navigation-bars.md) - [Custom links and buttons](https://unpoly.com/learn/faux-interactive-elements.md) 2. ## [Forms](https://unpoly.com/learn/forms.md) Unpoly submits forms and updates a fragment of the current page with the response. Your server keeps rendering plain HTML, and one convention on your backend also makes validation errors work. Fields can also re-render parts of the form while the user is still filling it in. - [Overview](https://unpoly.com/learn/forms.md) - [Submitting forms](https://unpoly.com/learn/submitting-forms.md) - [Validating forms](https://unpoly.com/learn/validation.md) - [Reactive server forms](https://unpoly.com/learn/reactive-server-forms.md) - [Switching form state](https://unpoly.com/learn/switching-form-state.md) - [Disabling forms while working](https://unpoly.com/learn/disabling-forms.md) - [Confirmation dialogs](https://unpoly.com/learn/confirmation-dialogs.md) - [Unsaved changes](https://unpoly.com/learn/unsaved-changes.md) - [Handling all forms](https://unpoly.com/learn/handling-all-forms.md) - [Custom fields](https://unpoly.com/learn/custom-form-fields.md) - [Watch options](https://unpoly.com/learn/watch-options.md) 3. ## [Overlays](https://unpoly.com/learn/overlays.md) Unpoly can open any URL in an overlay, like a modal dialog or a drawer. An overlay can show a single fragment or host an interaction that spans multiple pages. When it closes, an overlay can pass a result value back to the layer that opened it. - [Overview](https://unpoly.com/learn/overlays.md) - [Opening overlays](https://unpoly.com/learn/opening-overlays.md) - [Closing overlays](https://unpoly.com/learn/closing-overlays.md) - [Subinteractions](https://unpoly.com/learn/subinteractions.md) - [Customizing overlays](https://unpoly.com/learn/customizing-overlays.md) - [Targeting other layers](https://unpoly.com/learn/targeting-other-layers.md) - [Layer context](https://unpoly.com/learn/layer-context.md) - [History in overlays](https://unpoly.com/learn/history-in-overlays.md) 4. ## [Loading state](https://unpoly.com/learn/loading-state.md) While Unpoly waits for the server, it can show loading state, like a spinner, a skeleton screen or even the expected result. Every effect appears instantly after the user's interaction and is reverted when the request ends. This makes your app feel responsive, even when the server takes a moment to answer. - [Overview](https://unpoly.com/learn/loading-state.md) - [Feedback classes](https://unpoly.com/learn/feedback-classes.md) - [Placeholders](https://unpoly.com/learn/placeholders.md) - [Previews](https://unpoly.com/learn/previews.md) - [Optimistic rendering](https://unpoly.com/learn/optimistic-rendering.md) - [Progress bar](https://unpoly.com/learn/progress-bar.md) 5. ## [Live fragments](https://unpoly.com/learn/live-fragments.md) Live fragments are elements that update without being targeted by a link or form. They load lazily, poll, react to server events, or piggy-back on other responses. Your server renders their content like any other page. - [Overview](https://unpoly.com/learn/live-fragments.md) - [Lazy loading content](https://unpoly.com/learn/lazy-loading.md) - [Infinite scrolling](https://unpoly.com/learn/infinite-scrolling.md) - [Polling](https://unpoly.com/learn/polling.md) - [Real-time updates](https://unpoly.com/learn/real-time-updates.md) - [Hungry elements](https://unpoly.com/learn/hungry-elements.md) - [Notification flashes](https://unpoly.com/learn/flashes.md) 6. ## [History](https://unpoly.com/learn/history.md) Unpoly keeps the browser history working while it updates fragments. When a link or form changes the page's main fragment, the address bar and window title change as they would for a full page load, and the Back button brings the earlier page back. - [Overview](https://unpoly.com/learn/history.md) - [Updating history](https://unpoly.com/learn/updating-history.md) - [Restoring history](https://unpoly.com/learn/restoring-history.md) - [Tracking page views](https://unpoly.com/learn/tracking-page-views.md) 7. ## [Scrolling & focus](https://unpoly.com/learn/scrolling-and-focus.md) After a fragment update, Unpoly decides what scrolls and what gets focus. Following a link scrolls to the top and focuses the new content, the way a full page load would. A minor update leaves scroll positions and focus where they are. Every default can be changed per link, per form or globally. - [Overview](https://unpoly.com/learn/scrolling-and-focus.md) - [Scrolling](https://unpoly.com/learn/scrolling.md) - [Tuning the scroll behavior](https://unpoly.com/learn/scroll-tuning.md) - [Controlling focus](https://unpoly.com/learn/focus.md) - [Focus ring visibility](https://unpoly.com/learn/focus-visibility.md) 8. ## [Network & caching](https://unpoly.com/learn/network.md) All of Unpoly's requests go through one HTTP client. It caches responses so revisited pages render instantly, revalidates cached content so stale data is quickly replaced, aborts requests that would race each other, and handles disconnects without the browser's error screen. This works without setup, and every part can be changed for a single link, a form or your whole app. - [Overview](https://unpoly.com/learn/network.md) - [Caching](https://unpoly.com/learn/caching.md) - [Aborting requests](https://unpoly.com/learn/aborting-requests.md) - [Background requests](https://unpoly.com/learn/background-requests.md) - [Handling network issues](https://unpoly.com/learn/network-issues.md) 9. ## [Motion](https://unpoly.com/learn/motion.md) Unpoly can animate a fragment update: the old content fades or slides out while the new content comes in. You pick a motion effect by name in an HTML attribute, or define your own with a few lines of JavaScript. Users who have asked their system to reduce motion get instant updates instead. - [Overview](https://unpoly.com/learn/motion.md) - [Transitions](https://unpoly.com/learn/transitions.md) - [Animations](https://unpoly.com/learn/animations.md) - [Controlling motion](https://unpoly.com/learn/controlling-motion.md) 10. ## [Scripting](https://unpoly.com/learn/scripting.md) Unpoly pairs HTML elements with JavaScript behavior. Instead of running scripts once per page load, you register _compilers_ that enhance matching elements whenever they enter the page: at the initial load, and again with every fragment update. - [Overview](https://unpoly.com/learn/scripting.md) - [Enhancing elements with JavaScript](https://unpoly.com/learn/enhancing-elements.md) - [Attaching data to elements](https://unpoly.com/learn/data.md) - [Templates](https://unpoly.com/learn/templates.md) - [Framework islands](https://unpoly.com/learn/islands.md) - [Migrating legacy JavaScripts](https://unpoly.com/learn/legacy-scripts.md) - [Script security](https://unpoly.com/learn/script-security.md) 11. ## [Backend integration](https://unpoly.com/learn/backend-integration.md) Unpoly works with any backend that renders HTML. Requests from Unpoly look like regular browser requests, and the server answers with full pages, using the routes and templates it already has. Optional HTTP headers let the server shorten its responses, skip unchanged content, or steer the frontend. - [Overview](https://unpoly.com/learn/backend-integration.md) - [Optimizing responses](https://unpoly.com/learn/optimizing-responses.md) - [Conditional requests](https://unpoly.com/learn/conditional-requests.md) - [Reacting to new deployments](https://unpoly.com/learn/handling-asset-changes.md) - [Server protocol](https://unpoly.com/learn/server-protocol.md) 12. ## [Advanced rendering](https://unpoly.com/learn/advanced-rendering.md) Every link, form, overlay or poll that Unpoly handles ends in the same render pass, and every render pass takes the same options. This chapter covers those options: which fragments are updated, what else happens on a navigation, what to do when the server reports an error, and how your code can hook into the process. - [Overview](https://unpoly.com/learn/advanced-rendering.md) - [Attributes and options](https://unpoly.com/learn/attributes-and-options.md) - [Navigation defaults](https://unpoly.com/learn/navigation-defaults.md) - [Targeting fragments](https://unpoly.com/learn/targeting-fragments.md) - [Target derivation](https://unpoly.com/learn/target-derivation.md) - [Handling error responses](https://unpoly.com/learn/error-responses.md) - [Keeping elements](https://unpoly.com/learn/keeping-elements.md) - [Providing HTML to render](https://unpoly.com/learn/providing-html.md) - [Render lifecycle](https://unpoly.com/learn/render-lifecycle.md) 13. ## [Extensions](https://unpoly.com/learn/extensions.md) Unpoly works without extensions. This chapter collects the optional tooling around the core, for when it saves you work. - [Overview](https://unpoly.com/learn/extensions.md) - [Agent skill](https://unpoly.com/learn/skill.md) - [Protocol implementations](https://unpoly.com/learn/protocol-implementations.md) - [Supporting legacy browsers](https://unpoly.com/learn/legacy-browsers.md) - [Bootstrap integration](https://unpoly.com/learn/bootstrap-integration.md)