Interface Library

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

interface Library {
    id: string;
    name: string;
    colors: LibraryColor[];
    typographies: LibraryTypography[];
    components: LibraryComponent[];
    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 full)

Properties

id name colors typographies components

Methods

createColor createTypography createComponent getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

Properties

Readonlyid

id: string

The unique identifier of the library.

Readonlyname

name: string

The name of the library.

colors

colors: LibraryColor[]

An array of color elements in the library.

Example

console.log(penpot.library.local.colors);

typographies

typographies: LibraryTypography[]

An array of typography elements in the library.

components

components: LibraryComponent[]

An array of component elements in the library.

Example

console.log(penpot.library.local.components

Methods

createColor

  • createColor(): LibraryColor

  • Creates a new color element in the library.

    Returns LibraryColor

    Returns a new LibraryColor object representing the created color element.

    Example

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

createTypography

  • createTypography(): LibraryTypography

  • Creates a new typography element in the library.

    Returns LibraryTypography

    Returns a new LibraryTypography object representing the created typography element.

    Example

    const newTypography = library.createTypography();

createComponent

  • createComponent(shapes): LibraryComponent

  • 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.

    Example

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

getPluginData

  • getPluginData(key): string

  • 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.

    Example

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

setPluginData

  • setPluginData(key, value): void

  • 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

    Example

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

getPluginDataKeys

  • getPluginDataKeys(): string[]

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

    Returns string[]

    Returns an array of strings representing all the keys.

    Example

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

getSharedPluginData

  • getSharedPluginData(namespace, key): string

  • 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.

    Example

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

setSharedPluginData

  • setSharedPluginData(namespace, key, value): void

  • 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

    Example

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

getSharedPluginDataKeys

  • getSharedPluginDataKeys(namespace): string[]

  • 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.

    Example

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

Settings

Member Visibility

On This Page

Properties
Methods