Pages

A document consists of one or more pages. In Lucidchart, a document may include more than one page, while in Lucidspark, there is always a single page. A page contains any number of items which may be blocks, lines, or groups.

You can access the list of all pages through the DocumentProxy class, or get a reference to the currently displayed page through the Viewport class:

TypeScript

import {DocumentProxy, EditorClient, Viewport} from 'lucid-extension-sdk';

const client = new EditorClient();
const document = new DocumentProxy(client);
const viewport = new Viewport(client);

client.registerAction('listPages', () => {
    for (const [pageId, page] of document.pages) {
        console.log(
            pageId,
            page.getTitle(),
            viewport.getCurrentPage() === page ? 'active' : ''
        );
    }
});

Importing Pages

One or more pages can be imported from another document or template if the user has permisson to view the document.

This can be done by using the importPage command with the EditorClient:

TypeScript

import {EditorClient} from 'lucid-extension-sdk';

const client = new EditorClient();

const pageNumsToGet = [0, 1]; // Import the first two pages of the specified document
const documentId = '<documentId>'

await client.importPage(documentId, pageNumsToGet);

To get the document ID, open the document in Lucid and get the ID from the URL (ex https://lucid.app/lucidchart/{{DOCUMENT_ID}}/edit).****