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

| Option | Type | Default | Description | |--------|------|---------|-------------| | enableContentEditable | boolean | false | Makes the content editable after rendering | | autoResize | boolean | false | Enables automatic resizing of content | | scaleWidth | number | 0.9 | Scale factor for content width (0-1) | | cssFiles | string[] | [] | Array of CSS file paths to apply | | showMetrics | boolean | false | Shows rendering performance metrics |

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