Penpot plugins API
    Preparing search index...

    Interface Board

    Represents a board in Penpot. This interface extends ShapeBase and includes properties and methods specific to board.

    interface Board {
        type: "board";
        clipContent: boolean;
        showInViewMode: boolean;
        grid?: GridLayout;
        flex?: FlexLayout;
        guides: Guide[];
        rulerGuides: RulerGuide[];
        horizontalSizing?: "auto" | "fix";
        verticalSizing?: "auto" | "fix";
        fills: Fill[];
        children: Shape[];
        appendChild(child: Shape): void;
        insertChild(index: number, child: Shape): void;
        addFlexLayout(): FlexLayout;
        addGridLayout(): GridLayout;
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
        ): RulerGuide;
        removeRulerGuide(guide: RulerGuide): void;
        isVariantContainer(): boolean;
        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[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutChildProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            r1: string;
            r2: string;
            r3: string;
            r4: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            p1: string;
            p2: string;
            p3: string;
            p4: string;
            m1: string;
            m2: string;
            m3: string;
            m4: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): void;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties: TokenProperty[] | undefined): void;
        clone(): Shape;
        remove(): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    type clipContent showInViewMode grid? flex? guides rulerGuides horizontalSizing? verticalSizing? fills children id name parent parentIndex x y width height bounds center blocked hidden visible proportionLock constraintsHorizontal constraintsVertical borderRadius borderRadiusTopLeft borderRadiusTopRight borderRadiusBottomRight borderRadiusBottomLeft opacity blendMode shadows blur? exports boardX boardY parentX parentY flipX flipY rotation strokes layoutChild? layoutCell? tokens interactions

    Methods

    appendChild insertChild addFlexLayout addGridLayout addRulerGuide removeRulerGuide isVariantContainer getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys setParentIndex isComponentInstance isComponentMainInstance isComponentCopyInstance isComponentRoot isComponentHead componentRefShape componentRoot componentHead component detach swapComponent switchVariant combineAsVariants isVariantHead resize rotate bringToFront bringForward sendToBack sendBackward export addInteraction removeInteraction applyToken clone remove

    Properties

    type: "board"

    The type of the shape, which is always 'board' for boards.

    clipContent: boolean

    When true the board will clip the children inside

    showInViewMode: boolean

    WHen true the board will be displayed in the view mode

    grid?: GridLayout

    The grid layout configuration of the board, if applicable.

    flex?: FlexLayout

    The flex layout configuration of the board, if applicable.

    guides: Guide[]

    The guides associated with the board.

    rulerGuides: RulerGuide[]

    The ruler guides attached to the board

    horizontalSizing?: "auto" | "fix"

    The horizontal sizing behavior of the board. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'auto': The container fits the content.
    verticalSizing?: "auto" | "fix"

    The vertical sizing behavior of the board. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'auto': The container fits the content.
    fills: Fill[]

    The fills applied to the shape.

    children: Shape[]

    The children shapes contained within the board. When writing into this property, you can only reorder the shapes, not changing the structure. If the new shapes don't match the current shapes it will give a validation error.

    board.children = board.children.reverse();
    id: string

    The unique identifier of the shape.

    name: string

    The name of the shape.

    parent: Shape | null

    The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null

    parentIndex: number

    Returns the index of the current shape in the parent

    x: number

    The x-coordinate of the shape's position.

    y: number

    The y-coordinate of the shape's position.

    width: number

    The width of the shape.

    height: number

    The height of the shape.

    bounds: Bounds

    Returns the bounding box surrounding the current shape

    center: Point

    Returns the geometric center of the shape

    blocked: boolean

    Indicates whether the shape is blocked.

    hidden: boolean

    Indicates whether the shape is hidden.

    visible: boolean

    Indicates whether the shape is visible.

    proportionLock: boolean

    Indicates whether the shape has proportion lock enabled.

    constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"

    The horizontal constraints applied to the shape.

    constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"

    The vertical constraints applied to the shape.

    borderRadius: number

    The border radius of the shape.

    borderRadiusTopLeft: number

    The border radius of the top-left corner of the shape.

    borderRadiusTopRight: number

    The border radius of the top-right corner of the shape.

    borderRadiusBottomRight: number

    The border radius of the bottom-right corner of the shape.

    borderRadiusBottomLeft: number

    The border radius of the bottom-left corner of the shape.

    opacity: number

    The opacity of the shape.

    blendMode:
        | "difference"
        | "normal"
        | "darken"
        | "multiply"
        | "color-burn"
        | "lighten"
        | "screen"
        | "color-dodge"
        | "overlay"
        | "soft-light"
        | "hard-light"
        | "exclusion"
        | "hue"
        | "saturation"
        | "color"
        | "luminosity"

    The blend mode applied to the shape.

    shadows: Shadow[]

    The shadows applied to the shape.

    blur?: Blur

    The blur effect applied to the shape.

    exports: Export[]

    The export settings of the shape.

    boardX: number

    The x-coordinate of the shape relative to its board.

    boardY: number

    The y-coordinate of the shape relative to its board.

    parentX: number

    The x-coordinate of the shape relative to its parent.

    parentY: number

    The y-coordinate of the shape relative to its parent.

    flipX: boolean

    Indicates whether the shape is flipped horizontally.

    flipY: boolean

    Indicates whether the shape is flipped vertically.

    rotation: number

    Returns the rotation in degrees of the shape with respect to it's center.

    strokes: Stroke[]

    The strokes applied to the shape.

    layoutChild?: LayoutChildProperties

    Layout properties for children of the shape.

    layoutCell?: LayoutChildProperties

    Layout properties for cells in a grid layout.

    tokens: {
        width: string;
        height: string;
        fill: string;
        x: string;
        y: string;
        all: string;
        r1: string;
        r2: string;
        r3: string;
        r4: string;
        shadow: string;
        strokeColor: string;
        strokeWidth: string;
        fontFamilies: string;
        fontSize: string;
        fontWeight: string;
        letterSpacing: string;
        rotation: string;
        opacity: string;
        layoutItemMinW: string;
        layoutItemMaxW: string;
        layoutItemMinH: string;
        layoutItemMaxH: string;
        rowGap: string;
        columnGap: string;
        p1: string;
        p2: string;
        p3: string;
        p4: string;
        m1: string;
        m2: string;
        m3: string;
        m4: string;
        textCase: string;
        textDecoration: string;
        typography: string;
    }

    The design tokens applied to this shape. It's a map property name -> token name.

    NOTE that the tokens application is by name and not by id. If there exist several tokens with the same name in different sets, the actual token applied and the value set to the attributes will depend on which sets are active (and will change if different sets or themes are activated later).

    interactions: Interaction[]

    The interactions for the current shape.

    Methods

    • Appends a child shape to the board.

      Parameters

      • child: Shape

        The child shape to append.

      Returns void

      board.appendChild(childShape);

    • Inserts a child shape at the specified index within the board.

      Parameters

      • index: number

        The index at which to insert the child shape.

      • child: Shape

        The child shape to insert.

      Returns void

      board.insertChild(0, childShape);

    • Adds a flex layout configuration to the board (so it's necessary to create a board first of all).

      Returns FlexLayout

      Returns the flex layout configuration added to the board.

      const board = penpot.createBoard();
      const flex = board.addFlexLayout();

      // You can change the flex properties as follows.
      flex.dir = "column";
      flex.wrap = "wrap";
      flex.alignItems = "center";
      flex.justifyContent = "center";
      flex.horizontalSizing = "fill";
      flex.verticalSizing = "fill";

    • Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn.

      Returns GridLayout

      Returns the grid layout configuration added to the board.

      const board = penpot.createBoard();
      const grid = board.addGridLayout();

      // You can change the grid properties as follows.
      grid.alignItems = "center";
      grid.justifyItems = "start";
      grid.rowGap = 10;
      grid.columnGap = 10;
      grid.verticalPadding = 5;
      grid.horizontalPadding = 5

    • Returns boolean

      Returns true when the current board is a VariantContainer

    • 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);

    • Changes the index inside the parent of the current shape. This method will shift the indexes of the shapes around that position to match the index. If the index is greater than the number of elements it will positioned last.

      Parameters

      • index: number

        the new index for the shape to be in

      Returns void

    • Returns Shape | null

      Returns the root of the component tree structure for the current shape. If the current shape is already a root will return itself.

    • Returns Shape | null

      Returns the head of the component tree structure for the current shape. If the current shape is already a head will return itself.

    • If the current shape is a component it will remove the component information and leave the shape as a "basic shape"

      Returns void

    • Switch a VariantComponent copy to the nearest one that has the specified property value

      Parameters

      • pos: number

        The position of the poroperty to update

      • value: string

        The new value of the property

      Returns void

    • Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu on the Penpot interface. The current shape must be a component main instance.

      Parameters

      • ids: string[]

        A list of ids of the main instances of the components to combine with this one.

      Returns void

    • Returns boolean

      Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent

    • Resizes the shape to the specified width and height.

      Parameters

      • width: number

        The new width of the shape.

      • height: number

        The new height of the shape.

      Returns void

      shape.resize(200, 100);

    • Rotates the shape in relation with the given center.

      Parameters

      • angle: number

        Angle in degrees to rotate.

      • Optionalcenter: { x: number; y: number } | null

        Center of the transform rotation. If not send will use the geometri center of the shapes.

      Returns void

      shape.rotate(45);

    • Generates an export from the current shape.

      Parameters

      Returns Promise<Uint8Array<ArrayBufferLike>>

      shape.export({ type: 'png', scale: 2 });

    • Adds a new interaction to the shape.

      Parameters

      • trigger: Trigger

        defines the conditions under which the action will be triggered

      • action: Action

        defines what will be executed when the trigger happens

      • Optionaldelay: number

        for the type of trigger after-delay will specify the time after triggered. Ignored otherwise.

      Returns Interaction

      shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });

    • Applies one design token to one or more properties of the shape.

      Parameters

      • token: Token

        is the Token to apply

      • properties: TokenProperty[] | undefined

        an optional list of property names. If omitted, the default properties will be applied.

        NOTE that the tokens application is by name and not by id. If there exist several tokens with the same name in different sets, the actual token applied and the value set to the attributes will depend on which sets are active (and will change if different sets or themes are activated later).

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods