# @unlayer/types

TypeScript types for the [Unlayer](https://unlayer.com) email editor.

## Install

```sh
npm install @unlayer/types
```

## Usage

```ts
import type {
  UnlayerEditor,
  UnlayerOptions,
  JSONTemplate,
  ButtonValues,
  BodyValues,
} from '@unlayer/types';

// Editor options
const options: UnlayerOptions = {
  displayMode: 'email',
  projectId: 12345,
};

// JSONTemplate types for each Display Mode
type EmailDesign = JSONTemplate<'email'>; // body.values has preheaderText
type PopupDesign = JSONTemplate<'popup'>; // body.values has popupPosition

// Container and Tool types, e.g. BodyValues, RowValues, ButtonValues, etc
type EmailBody = BodyValues<'email'>; // has preheaderText, lacks popupPosition
type PopupBody = BodyValues<'popup'>; // has popupPosition, lacks preheaderText

// The Unlayer instance propagates its display mode to method typings:
declare const unlayer: UnlayerEditor<'email'>;
unlayer.exportHtml((result) => {
  const html = result.html;
  const preheaderText = result.design.body.values.preheaderText; // typed, email-only field
});

// Alternatively, you can use the display mode generic on the method:
unlayer.exportHtml<'popup'>((result) => {
  const popupBackgroundColor = result.design.body.values.popupBackgroundColor; // available on popup mode
  // @ts-expect-error
  const preheaderText = result.design.body.values.preheaderText; // not available on popup mode
});

// Example of fully typed json manipulation
function handleDesign(design: JSONTemplate) {
  for (const row of design.body.rows) {
    for (const column of row.columns) {
      for (const content of column.contents) {
        if (content.type === 'button') {
          // content.values type is narrowed to ButtonValues
          console.info('Button found', content.id, content.values.buttonColors);
        }
      }
    }
  }
}
```

## License

MIT