Penpot plugins API
    Preparing search index...

    Interface LibraryComponent

    Represents a component element from a library in Penpot. This interface extends LibraryElement and includes properties specific to component elements.

    interface LibraryComponent {
        instance(): Shape;
        mainInstance(): Shape;
        isVariant(): boolean;
        transformInVariant(): void;
        id: string;
        libraryId: string;
        name: string;
        path: string;
        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 libraryId name path

    Methods

    instance mainInstance isVariant transformInVariant getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

    Properties

    id: string

    The unique identifier of the library element.

    libraryId: string

    The unique identifier of the library to which the element belongs.

    name: string

    The name of the library element.

    path: string

    The path of the library element.

    Methods

    • Creates an instance of the component.

      Returns Shape

      Returns a Shape object representing the instance of the component.

      const componentInstance = libraryComponent.instance();

    • Returns boolean

      true when this component is a VariantComponent

    • Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a set of properties based on the component name and path. Similar to doing it with the contextual menu or the shortcut on the Penpot interface

      Returns void

    • 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