Penpot plugins API
    Preparing search index...

    Interface LibraryTypography

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

    interface LibraryTypography {
        id: string;
        libraryId: string;
        name: string;
        path: string;
        fontId: string;
        fontFamilies: string;
        fontVariantId: string;
        fontSize: string;
        fontWeight: string;
        fontStyle?: "normal" | "italic" | null;
        lineHeight: string;
        letterSpacing: string;
        textTransform?: "uppercase" | "capitalize" | "lowercase" | null;
        applyToText(shape: Shape): void;
        applyToTextRange(range: TextRange): void;
        setFont(font: Font, variant?: FontVariant): void;
        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 fontId fontFamilies fontVariantId fontSize fontWeight fontStyle? lineHeight letterSpacing textTransform?

    Methods

    applyToText applyToTextRange setFont 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.

    fontId: string

    The unique identifier of the font used in the typography element.

    fontFamilies: string

    The font families of the typography element.

    fontVariantId: string

    The unique identifier of the font variant used in the typography element.

    fontSize: string

    The font size of the typography element.

    fontWeight: string

    The font weight of the typography element.

    fontStyle?: "normal" | "italic" | null

    The font style of the typography element.

    lineHeight: string

    The line height of the typography element.

    letterSpacing: string

    The letter spacing of the typography element.

    textTransform?: "uppercase" | "capitalize" | "lowercase" | null

    The text transform applied to the typography element.

    Methods

    • Applies the typography styles to a text shape.

      Parameters

      • shape: Shape

        The text shape to apply the typography styles to.

      Returns void

      typographyElement.applyToText(textShape);

    • Applies the typography styles to a range of text within a text shape.

      Parameters

      • range: TextRange

        Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges.

      Returns void

      typographyElement.applyToTextRange(textShape);

    • Sets the font and optionally its variant for the typography element.

      Parameters

      • font: Font

        The font to set.

      • Optionalvariant: FontVariant

        The font variant to set (optional).

      Returns void

      typographyElement.setFont(newFont, newVariant);

    • 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