Penpot plugins API
    Preparing search index...

    Interface Page

    Page represents a page in the Penpot application. It includes properties for the page's identifier and name, as well as methods for managing shapes on the page.

    interface Page {
        id: string;
        name: string;
        rulerGuides: RulerGuide[];
        root: Shape;
        getShapeById(id: string): Shape | null;
        findShapes(
            criteria?: {
                name?: string;
                nameLike?: string;
                type?:
                    | "boolean"
                    | "path"
                    | "ellipse"
                    | "image"
                    | "text"
                    | "group"
                    | "board"
                    | "rectangle"
                    | "svg-raw";
            },
        ): Shape[];
        flows: Flow[];
        createFlow(name: string, board: Board): Flow;
        removeFlow(flow: Flow): void;
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
            board?: Board,
        ): RulerGuide;
        removeRulerGuide(guide: RulerGuide): void;
        addCommentThread(content: string, position: Point): Promise<CommentThread>;
        removeCommentThread(commentThread: CommentThread): Promise<void>;
        findCommentThreads(
            criteria?: { onlyYours: boolean; showResolved: boolean },
        ): Promise<CommentThread[]>;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }

    Hierarchy (View Summary)

    Index

    Properties

    id name rulerGuides root flows

    Methods

    getShapeById findShapes createFlow removeFlow addRulerGuide removeRulerGuide addCommentThread removeCommentThread findCommentThreads getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

    Properties

    id: string

    The id property is a unique identifier for the page.

    name: string

    The name property is the name of the page.

    rulerGuides: RulerGuide[]

    The ruler guides attached to the board

    root: Shape

    The root shape of the current page. Will be the parent shape of all the shapes inside the document. Requires content:read permission.

    flows: Flow[]

    The interaction flows defined for the page.

    Methods

    • Retrieves a shape by its unique identifier.

      Parameters

      • id: string

        The unique identifier of the shape.

      Returns Shape | null

      const shape = penpot.currentPage.getShapeById('shapeId');

    • Finds all shapes on the page. Optionaly it gets a criteria object to search for specific criteria

      Parameters

      • Optionalcriteria: {
            name?: string;
            nameLike?: string;
            type?:
                | "boolean"
                | "path"
                | "ellipse"
                | "image"
                | "text"
                | "group"
                | "board"
                | "rectangle"
                | "svg-raw";
        }

      Returns Shape[]

      const shapes = penpot.currentPage.findShapes({ name: 'exampleName' });

    • Creates a new flow in the page.

      Parameters

      • name: string

        the name identifying the flow

      • board: Board

        the starting board for the current flow

      Returns Flow

      const flow = penpot.currentPage.createFlow('exampleFlow', board);

    • Removes the flow from the page

      Parameters

      • flow: Flow

        the flow to be removed from the page

      Returns void

    • Creates a new comment thread in the position. Optionaly adds it into the board. Returns the thread created. Requires the comment:write permission.

      Parameters

      • content: string
      • position: Point

      Returns Promise<CommentThread>

    • Removes the comment thread. Requires the comment:write permission.

      Parameters

      Returns Promise<void>

    • Find all the comments that match the criteria.

      • onlyYours: if true will return the threads where the current user has engaged.
      • showResolved: by default resolved comments will be hidden. If true the resolved will be returned. Requires the comment:read or comment:write permission.

      Parameters

      • Optionalcriteria: { onlyYours: boolean; showResolved: boolean }

      Returns Promise<CommentThread[]>

    • Retrieves the data for our own plugin, given a specific key.

      Parameters

      • key: string

        The key for which to retrieve the data.

      Returns string

      Returns the data associated with the key as a string.

      const data = shape.getPluginData('exampleKey');
      console.log(data);

    • Sets the plugin-specific data for the given key.

      Parameters

      • key: string

        The key for which to set the data.

      • value: string

        The data to set for the key.

      Returns void

      shape.setPluginData('exampleKey', 'exampleValue');

    • Retrieves all the keys for the plugin-specific data.

      Returns string[]

      Returns an array of strings representing all the keys.

      const keys = shape.getPluginDataKeys();
      console.log(keys);

    • If we know the namespace of an external plugin, this is the way to get their data.

      Parameters

      • namespace: string

        The namespace for the shared data.

      • key: string

        The key for which to retrieve the data.

      Returns string

      Returns the shared data associated with the key as a string.

      const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
      console.log(sharedData);

    • Sets the shared plugin-specific data for the given namespace and key.

      Parameters

      • namespace: string

        The namespace for the shared data.

      • key: string

        The key for which to set the data.

      • value: string

        The data to set for the key.

      Returns void

      shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');

    • Retrieves all the keys for the shared plugin-specific data in the given namespace.

      Parameters

      • namespace: string

        The namespace for the shared data.

      Returns string[]

      Returns an array of strings representing all the keys in the namespace.

      const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
      console.log(sharedKeys);

    Settings

    Member Visibility

    On This Page

    Properties
    Methods