# Parallelogram > Parallelogram (`@parallelogram-js/core` on npm) is a small, dependency-free JavaScript library that adds behaviour to server-rendered HTML through data attributes and a small set of web components. Each component loads the first time a page uses it, and links swap the page in place instead of reloading it. The package is ESM only and targets Baseline 2023 browsers. This describes version 0.7.19 of `@parallelogram-js/core`. Install it with `npm install @parallelogram-js/core`. Import the framework from `@parallelogram-js/core` and each component from `@parallelogram-js/core/components/`, with or without `.js`; never import files from `dist` or `src`. Create the app with `Parallelogram.create()`, register the components your pages use with `app.components.add(selector, () => import('@parallelogram-js/core/components/'))`, then call `app.run()`. ## Guides - [Getting started](https://dev.parallelogram.com.au/getting-started.html): This guide adds @parallelogram-js/core to a server-rendered site: installing it, choosing import paths, starting the framework, registering components and loading their styles. - [Pages and the router](https://dev.parallelogram.com.au/pages-and-router.html): The router fetches same-origin pages when links are followed and swaps the matching data-view fragments into the current page, then mounts components, moves focus and restores scroll. Anything it can't show in place loads as a normal page, so a site behaves the same with or without it. - [Writing a component](https://dev.parallelogram.com.au/writing-components.html): An enhancement component is a class that extends BaseComponent and adds behaviour to markup already on the page, configured through data-- attributes. This guide covers how the framework loads and mounts your class, the helpers it inherits, and a complete example. - [Events and alerts](https://dev.parallelogram.com.au/events-and-alerts.html): Parallelogram reports what it does through DOM events on elements and through messages on a shared event bus, and shows toast notifications through AlertManager. This guide explains both channels, lists every message the framework puts on the bus, and covers alerts. - [Deferred trackers](https://dev.parallelogram.com.au/trackers.html): DeferTracker loads analytics and advertising scripts after the first interaction instead of during page load. This guide covers setting it up, when trackers start, consent, the adapters in the package and the API for writing your own. - [Upgrading within 0.7](https://dev.parallelogram.com.au/upgrading-within-0-7.html): Three 0.7 releases renamed or removed something, or changed what a page already had. Each is marked Breaking in the changelog; this is the same list as what to change. - [Upgrading from 0.5 to 0.6](https://dev.parallelogram.com.au/upgrading.html): 0.6 removes the names 0.5 deprecated and makes a few start-up changes. If your site runs on 0.5 without deprecation warnings in the development build, most of it needs no changes. Coming from 0.4, work through Upgrading from 0.4 to 0.5 first. - [Upgrading from 0.4 to 0.5](https://dev.parallelogram.com.au/upgrading-from-0-4.html): 0.5 is a breaking release. Renamed attributes and events kept working through 0.5, but some changes need updates to your build, styles, markup or server code. Work through the sections that apply to your site, then follow Upgrading from 0.5 to 0.6, which removes the deprecated names. ## Enhancement components - [Accordion](https://dev.parallelogram.com.au/accordion.html): Animate native details elements as they open and close - [CopyToClipboard](https://dev.parallelogram.com.au/copy-to-clipboard.html): Copy text to the clipboard from a button - [DataTable](https://dev.parallelogram.com.au/data-table.html): Sorting, filtering and pagination for an existing table - [DeferTracker](https://dev.parallelogram.com.au/defer-tracker.html): Load third-party trackers after the first interaction, described by inert JSON - [Dropdown](https://dev.parallelogram.com.au/dropdown.html): A menu that opens beside its button, from markup on the page or from a template filled in per button - [FormEnhancer](https://dev.parallelogram.com.au/form-enhancer.html): Accessible error messages for the browser's own form validation - [Lazysrc](https://dev.parallelogram.com.au/lazysrc.html): Lazy image loading built on the browser's own loading="lazy" - [Lightbox](https://dev.parallelogram.com.au/lightbox.html): Image gallery viewer shown in a native modal dialog - [Modal](https://dev.parallelogram.com.au/modal.html): Buttons that open a - [Scrollhide](https://dev.parallelogram.com.au/scrollhide.html): Hide an element while the page scrolls down and show it again on scrolling up - [Scrollreveal](https://dev.parallelogram.com.au/scrollreveal.html): Reveal elements as they scroll into view, one after another - [SelectLoader](https://dev.parallelogram.com.au/select-loader.html): Load an HTML fragment into a target when a select's choice changes - [Tabs](https://dev.parallelogram.com.au/tabs.html): Tabbed panels built from a list of tab buttons or in-page links - [Toast](https://dev.parallelogram.com.au/toast.html): Show a toast when a trigger is clicked - [Toggle](https://dev.parallelogram.com.au/toggle.html): Show and hide a target element from one or more trigger buttons - [Tooltip](https://dev.parallelogram.com.au/tooltip.html): A short description of a control, shown beside it while the pointer rests on it or it has focus - [Videoplay](https://dev.parallelogram.com.au/videoplay.html): Play videos as they scroll into view and pause them as they leave ## Web components - [``](https://dev.parallelogram.com.au/p-datetime.html): Date, time and date range picker with a calendar dialog - [``](https://dev.parallelogram.com.au/p-modal.html): Modal dialog built on the native element - [``](https://dev.parallelogram.com.au/p-select.html): A select that can be searched, built as an editable combobox - [``](https://dev.parallelogram.com.au/p-toasts.html): A stack of toast notifications - [``](https://dev.parallelogram.com.au/p-uploader.html): Upload, order and describe a set of files ## Optional - [Custom Elements Manifest](https://cdn.jsdelivr.net/npm/@parallelogram-js/core@0.7.19/dist/custom-elements.json): The web components as custom-elements.json - [Design system workbench](https://dev.parallelogram.com.au/design-system.html): Every component in a light and a dark frame, with live controls for the design tokens - [GitHub repository](https://github.com/parallelogram-dev/parallelogram-js): Source, issues and the changelog