This Svelte library wraps the magnificent Paged.js library in a <PagedJS> component for usage in your Svelte-based Web2Paper models. If your document has more than a single page or very simple layout rules then you most likely need this.

⚠️ Web2Paper and its ecosystem are under construction. Expect breaking change to API and bugs.

Usage

Simply wrap the root of your document model's template within <PagedJS>:

<script lang="ts">
    import {DEFAULT_PAGEDJS_PROPS, PagedJS, type PagedjsProps} from '@web2paper/modeling-svelte-pagedjs';
    
    // Sane default options
    const options: PagedjsProps = DEFAULT_PAGEDJS_PROPS
</script>

<style>
    /* See the documentation of Paged.js (https://pagedjs.org/documentation/5-web-design-for-print/) */
    @page {
        margin: 10mm 20mm 30mm 40mm;

        @bottom-right {
            content: "I am a page number.";
        }
    }
</style>

<PagedJS {...options}>
    <!--  Your Web2Paper document template -->
    <main style="display: flex; flex-direction: column;">
        <h1>Hello world</h1>
        <h2>Chapter 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet at dolore dolorem eos error id itaque magnam
            modi neque quia quis ratione reiciendis rem sed tempora totam, veritatis, voluptate!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut autem cum dolor, dolores enim esse
            ex, exercitationem illo maxime perferendis quasi quibusdam quos sunt temporibus. Ex facere id quas?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur dicta, ea facilis fugit harum hic
            illo minima modi necessitatibus nihil nisi omnis pariatur placeat praesentium quis quod recusandae
            voluptatibus?</p>
        <h2>Chapter 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, aliquam autem, cum cumque delectus error
            eveniet, fugiat harum iure magnam minima neque obcaecati odio quas reprehenderit repudiandae sequi soluta
            voluptatem.</p>
    </main>
</PagedJS>

This component automatically import the previewing Previewer stylesheet in order to allow you to develop your model in the browser while previewing its printed appearance.

It seems like Vite live-reload may not work perfectly with PagedJS, you may need to reload manually the page to avoid some weird artifacts.

Acknowledgments

Paged.js has been a life savior for the Web2Paper project as it helps to bridge the gap between browsers and printed media for multi-pages documents. Huge thanks to all the people who worked and keep working on that project.

The code in this library is an adapted version of svelte-pagedjs. Thanks to @codebygio, its author, who did the hard integration work here.