svelte-pagedjs

A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.

Installation

npm install svelte-pagedjs pagedjs

Features

• 📑 Page-based content layout
• 🖨️ Print-optimized rendering
• 📏 Automatic content resizing
• ✏️ Editable content support
• 📊 Performance metrics
• 🎨 Custom CSS styling support

Usage

<script lang="ts">
  import { Pagedjs } from 'svelte-pagedjs';

  // Optional configuration
  const options = {
    enableContentEditable: true,
    autoResize: true,
    scaleWidth: 0.9,
    cssFiles: ['path/to/your/styles.css'],
    showMetrics: true
  };
</script>

<Pagedjs {...options}>
  <!-- Your content here -->
  <div>
    <h1>My Paged Content</h1>
    <p>This content will be paginated...</p>
  </div>
</Pagedjs>

Configuration Options

Performance Metrics

When showMetrics is enabled, the component displays a performance dashboard showing:

• Total number of pages rendered
• Rendering time
• Start and completion timestamps

Server-Side Rendering (SSR)

The component is SSR-friendly and automatically detects browser environment using esm-env.

TypeScript Support

Full TypeScript support is included. Types are exported for easy integration:

import type { PagedjsProps, PerformanceMetrics } from 'svelte-pagedjs';

Example

<script lang="ts">
  import { Pagedjs } from 'svelte-pagedjs';
</script>

<Pagedjs
  enableContentEditable={true}
  autoResize={true}
  showMetrics={true}
>
  <article>
    <h1>Chapter 1</h1>
    <p>Your content here...</p>
  </article>
</Pagedjs>

Event Handling

The component automatically handles:

• Window resize events for responsive layouts
• Content editable toggling
• Cleanup on component destruction

Browser Support

Works in modern browsers that support CSS Custom Properties and CSS Grid.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Acknowledgements

Built on top of PagedJS