Skip to content

Add HTML Pagination Support (A4/A5 Style Pages like canvas-editor)Β #534

@Asifislam110

Description

@Asifislam110

Is this a unique feature?

  • I have checked "open" AND "closed" issues and this is not a duplicate

Description

Hi @yoopta team πŸ‘‹,

Thanks for building such a modern and powerful editor β€” really enjoying the modular approach and extensibility! πŸ™Œ

✨ Feature Request: HTML Pagination (Page View with Breaks)

We would love to see support for HTML pagination within Yoopta Editor β€” similar to Word-style documents β€” where:

  • The editor content is paginated visually (e.g., A4/A5 size pages).
  • Each page has fixed dimensions (like A4 = 210mm x 297mm).
  • Automatic page breaks occur based on content overflow.
  • Optional configuration for page margins (top/bottom/left/right).
  • Page preview UI with borders or shadows to simulate physical pages.

This feature is especially useful for apps that need print-ready document creation like:

  • Exams, certificates, or official documents
  • Resume builders
  • Reports and printable forms

πŸ“Œ Reference: canvas-editor by Hufe921

A good reference for this feature is canvas-editor by Hufe921, which already supports:

  • Configurable page size (A4, A5, etc.)
  • Dynamic rendering with content flowing across multiple HTML pages
  • Margin settings
  • Smooth visual separation between pages

Here’s a quick screenshot of that behavior in action:
canvas-editor pagination demo


πŸ§ͺ Example Usage

const editor = createYooptaEditor({
  pagination: {
    enabled: true,
    pageSize: 'A4',
    margin: { top: 40, bottom: 40, left: 50, right: 50 },
  },
});


### Do you want to work on this issue?

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions