---
title: "AssetSidebarWidget"
description: "AssetSidebarWidget"
url: "https://www.contentstack.com/docs/developers/sdks/contentstack-app-sdk/typescript/reference/assetsidebarwidget"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-09-22"
---

# AssetSidebarWidget

## AssetSidebarWidget

The AssetSidebarWidget UI location integrates with asset management interfaces in the Contentstack UI.

```
const assetSidebar = sdk.location.AssetSidebarWidget;
if (assetSidebar) {
  const assetData = assetSidebar.getData();
  await assetSidebar.setData({ title: 'New Asset Title' });
  assetSidebar.onSave((updatedAsset) => {
    console.log('Asset saved:', updatedAsset);
  });
}
```

## currentAsset

The [currentAsset](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L15) property retrieves the current asset object directly.

```
const asset = assetSidebar.currentAsset;
console.log('Current asset:', asset);
```

## getData

The [getData](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L61) method retrieves the current asset data.

```
const assetData = assetSidebar.getData();
console.log('Asset title:', assetData.title);
console.log('Asset URL:', assetData.url);
```

## setData(asset)

The [setData](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L70) method sets data for the current asset.

```
await assetSidebar.setData({ 
  title: 'New Asset Title',
  description: 'Updated description'
});
```

## syncAsset

The [syncAsset](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L78) method synchronizes the asset with the parent application.

```
await assetSidebar.syncAsset();
```

## updateWidth(width)

The [updateWidth](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L88) method updates the width of the Asset Sidebar widget.

```
await assetSidebar.updateWidth(400);
```

## replaceAsset(file)

The [replaceAsset](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L103) method replaces the current asset with a new file.

```
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
await assetSidebar.replaceAsset(file);
```

## onSave(callback)

The [onSave](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L113) method listens for asset save events.

```
assetSidebar.onSave((savedAsset) => {
  console.log('Asset saved:', savedAsset);
});
```

## onChange(callback)

The [onChange](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L132) method listens for asset change events.

```
assetSidebar.onChange((changedAsset) => {
  console.log('Asset changed:', changedAsset);
});
```

## onPublish(callback)

The [onPublish](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L154) method listens for asset publish events.

```
assetSidebar.onPublish((publishedAsset) => {
  console.log('Asset published:', publishedAsset);
});
```

## onUnPublish(callback)

The [onUnPublish](https://github.com/contentstack/app-sdk/blob/main/src/AssetSidebarWidget.ts#L176) method listens for asset unpublish events.

```
assetSidebar.onUnPublish((unpublishedAsset) => {
  console.log('Asset unpublished:', unpublishedAsset);
});
```