{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-organize-pages",
  "framework": "react",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "organize-pages",
  "dependencies": [
    "@syncfusion/ej2-react-pdfviewer"
  ],
  "description": "PDF viewer organizes pages by reordering, rotating, and deleting them in a side panel.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/pdf-viewer-organize-pages.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-organize-pages/PdfViewer.tsx",
      "content": "/**\n * Default PDF Viewer sample\n */\nimport {\n    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,\n    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer, Inject,\n    type PageOrganizerSettingsModel\n} from '@syncfusion/ej2-react-pdfviewer';\n\nfunction Default() {\n    let viewer: PdfViewerComponent;\n    let isInitialLoading: boolean =  true;\n    let pageOrganizerSettings: PageOrganizerSettingsModel = { showImageZoomingSlider: true };\n    return (<div>\n        <div className='control-section'>\n            {/* Render the PDF Viewer */}\n            <PdfViewerComponent ref={(scope) => { viewer = scope; }} id=\"container\" documentPath=\"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf\" resourceUrl = \"https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib\" documentLoad = {documentLoaded} style={{ 'height': '640px' }}\n                pageOrganizerSettings={pageOrganizerSettings}>\n                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]} />\n            </PdfViewerComponent>\n        </div>\n    </div>\n    );\n    function documentLoaded() {\n        if(isInitialLoading){\n            viewer.isPageOrganizerOpen = true;\n            isInitialLoading = false;\n        }\n        else{\n            viewer.isPageOrganizerOpen = false;\n        }\n    }\n}\nexport default Default;"
    }
  ]
}