Svelte Pagedjs

A Svelte wrapper for the PagedJS library that enables sophisticated web-based PDF-like pagination and print layouts. It seamlessly integrates PagedJS’s functionality with Svelte’s reactive paradigm.

Key Features

1. Dynamic Pagination

Transform your web content into a paginated format with minimal configuration:

<Pagedjs>
  <article>
    <h1>Your Content</h1>
    <p>Will be automatically paginated...</p>
  </article>
</Pagedjs>

2. Content Editing

Enable in-place editing of your paginated content:

<Pagedjs enableContentEditable={true}>
  <!-- Content becomes editable after rendering -->
</Pagedjs>

3. Responsive Layout

Automatic content scaling and repositioning for different screen sizes:

<Pagedjs
  autoResize={true}
  scaleWidth={0.9}
>
  <!-- Content automatically scales -->
</Pagedjs>

4. Performance Monitoring

Built-in performance metrics to track rendering efficiency:

<Pagedjs showMetrics={true}>
  <!-- Metrics will display after rendering -->
</Pagedjs>

Architecture

svelte-pagedjs is built on three main components:

• PagedjsManager — Singleton class managing PagedJS initialization and rendering
• Pagedjs Component — Main Svelte component handling content and configuration
• Metrics Component — Optional performance metrics display

Use Cases

• Digital Publishing
• Print Layout Preview
• Document Generation
• Magazine/Book Layout
• Academic Papers
• Technical Documentation

Getting Started

Install the package:

npm install svelte-pagedjs pagedjs

Import and use in your Svelte app:

<script>
  import { Pagedjs } from 'svelte-pagedjs';
</script>

<Pagedjs>
  <!-- Your content -->
</Pagedjs>

Server-Side Rendering

svelte-pagedjs is designed to work seamlessly with SSR:

• Uses esm-env for browser detection
• Safely handles initialization in server environment
• Hydrates content properly on client side

Performance Considerations

The library includes several optimizations:

• Lazy initialization of PagedJS
• Efficient cleanup of resources
• Performance monitoring
• Memory leak prevention

Browser Support

Supports all modern browsers with:

• CSS Custom Properties
• CSS Grid Layout
• Modern JavaScript features