Penpot plugins API
    Preparing search index...

    Interface Library

    Represents a library in Penpot, containing colors, typographies, and components.

    interface Library {
        id: string;
        name: string;
        colors: LibraryColor[];
        typographies: LibraryTypography[];
        components: LibraryComponent[];
        tokens: TokenCatalog;
        createColor(): LibraryColor;
        createTypography(): LibraryTypography;
        createComponent(shapes: Shape[]): LibraryComponent;
        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 colors typographies components tokens

    Methods

    createColor createTypography createComponent getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

    Properties

    id: string

    The unique identifier of the library.

    name: string

    The name of the library.

    colors: LibraryColor[]

    An array of color elements in the library.

    console.log(penpot.library.local.colors);
    typographies: LibraryTypography[]

    An array of typography elements in the library.

    components: LibraryComponent[]

    An array of component elements in the library.

    console.log(penpot.library.local.components
    tokens: TokenCatalog

    A catalog of Design Tokens in the library.

    See TokenCatalog type to see usage.

    Methods

    • Creates a new color element in the library.

      Returns LibraryColor

      Returns a new LibraryColor object representing the created color element.

      const newColor = penpot.library.local.createColor();
      console.log(newColor);

    • Creates a new typography element in the library.

      Returns LibraryTypography

      Returns a new LibraryTypography object representing the created typography element.

      const newTypography = library.createTypography();

    • Creates a new component element in the library using the provided shapes.

      Parameters

      • shapes: Shape[]

        An array of Shape objects representing the shapes to be included in the component.

      Returns LibraryComponent

      Returns a new LibraryComponent object representing the created component element.

      const newComponent = penpot.library.local.createComponent([shape1, shape2]);

    • 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