EmbedPDF
DocsSveltePluginsRotate

Rotate Plugin

The Rotate Plugin allows you to change the orientation of the entire document. It applies a rotation to every page, letting users view content in 90-degree increments.

Installation

This plugin is available as a separate NPM package.

npm install @embedpdf/plugin-rotate

Registration

Import RotatePluginPackage and add it to the plugins array. You can also specify a default rotation to apply when a document is first loaded.

import { createPluginRegistration } from '@embedpdf/core'
import { Rotation } from '@embedpdf/models'
import { RotatePluginPackage } from '@embedpdf/plugin-rotate/svelte'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register and configure the rotate plugin
  createPluginRegistration(RotatePluginPackage, {
    defaultRotation: Rotation.Degree90, // Start documents rotated 90° clockwise
  }),
]
 
// ... rest of your component

Usage

The plugin provides the useRotate composable to control the rotation from your UI and a <Rotate /> component to apply the visual transformation to each page.

Building a Rotate Toolbar

Use the useRotate composable to get the current rotation state and the provides object, which contains methods to change it. The rotation state is a number from the Rotation enum (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°).

<script lang="ts">
import { useRotate } from '@embedpdf/plugin-rotate/svelte'
 
const rotate = useRotate();
</script>
 
{#if rotate.provides}
  <div class="toolbar">
    <span>Current Rotation: {rotate.rotation * 90}°</span>
    <button onclick={() => rotate.provides?.rotateBackward()}>Rotate Left</button>
    <button onclick={() => rotate.provides?.rotateForward()}>Rotate Right</button>
  </div>
{/if}

Applying the Rotation

For the rotation to be visible, you must wrap your page layers with the <Rotate /> component inside the RenderPageSnippet of the <Scroller>. This component calculates and applies the necessary CSS transform. It’s important to place it outside the PagePointerProvider to ensure interactions are correctly mapped to the rotated page.

<script lang="ts">
import type { RenderPageProps } from '@embedpdf/plugin-scroll/svelte';
</script>
 
{#snippet RenderPageSnippet(page: RenderPageProps)}
  <Rotate pageSize={{ width: page.width, height: page.height }}>
    <PagePointerProvider
      pageIndex={page.pageIndex}
      pageWidth={page.width}
      pageHeight={page.height}
    >
      <RenderLayer pageIndex={page.pageIndex} scale={page.scale} />
    </PagePointerProvider>
  </Rotate>
{/snippet}
 
<Scroller {RenderPageSnippet} />

Live Example

This is a complete viewer that uses a rotate toolbar and correctly applies the <Rotate /> component to each page.

API Reference

Configuration (RotatePluginConfig)

OptionTypeDescription
defaultRotationRotationSets the initial rotation for loaded documents. The Rotation enum can be imported from @embedpdf/models.
Default: Rotation.Degree0

Composable: useRotate()

Connects your component to the rotate plugin’s state and functions.

Returns

PropertyTypeDescription
rotationRotationThe current reactive rotation state (0, 1, 2, or 3).
providesRotateCapability | nullAn object with methods to control rotation, or null if the plugin is not ready.

RotateCapability Methods

MethodDescription
rotateForward()Rotates the document 90 degrees clockwise.
rotateBackward()Rotates the document 90 degrees counter-clockwise.
setRotation(rotation)Sets the document to a specific Rotation value.
getRotation()Returns the current rotation value.

Component: <Rotate />

A wrapper component that applies the correct CSS rotation transform to its children.

Props

PropTypeDescription
pageSizeSize(Required) An object { width: number, height: number } representing the unrotated dimensions of the page. This is used to calculate the correct transform origin.
Last updated on October 22, 2025
ZoomSelection

Need Help?

Join our community for support, discussions, and to contribute to EmbedPDF's development.

GitHub DiscussionsDiscord CommunitySupport Development