open-index/open-npm huggingface dataset:
npm package: @showpad/content-picker
Description: Showpad Content Picker SDK
Author: Showpad
Latest version: 0.1.1

# @showpad/content-picker

## Introduction

The content-picker lib allows Third-party developers to embed a Showpad ContentPicker within their app

## Requirements

**Development**

- HTML & JavaScript knowledge
- a Code Editor (we like [Visual Studio Code](https://code.visualstudio.com/))
- [Node.js 15+](https://nodejs.org/en/)

**Showpad**

- Ultimate subscription to Showpad
- Administrator access to Showpad's Online Platform
- [A Showpad OAUTH Client or API token](https://developer.showpad.com/docs/apis/concepts/authentication#personal-api-tokens)

## Platform & Browser Compatibility

We comply with all evergreen browsers & versions as documented on our [Help Center](https://help.showpad.com/hc/en-us/articles/211957089-System-and-Device-Requirements)

## Installation

```shell
# npm
npm i @showpad/content-picker

# yarn
yarn add @showpad/content-picker

# pnpm
pnpm install @showpad/content-picker
```

## Usage

Minimal working example of the @showpad/content-picker SDK
\*\*Requires a Showpad OAuth Client or Personal API token, see the [developer docs](https://developer.showpad.com/docs/apis/concepts/authentication#personal-api-tokens) on how to create one

```ts
// example for acme.showpad.com

import { createContentPicker, Auth } from '@showpad/content-picker';

// Register Auth Provider
Auth.registerProvider({
    getToken: async () => {
        // use your own personal API token or implement an oauth client auth flow
        return 'ACCESS_TOKEN';
    },
    getOrgInfo: async () => {
        // name of your Showpad instance
        return { subdomain: 'acme' };
    },
});

// create a Showpad content picker
const contentPicker = await createContentPicker(document.getElementById('content-picker-slot'), {
    // assets selected callback
    onSelectAssets: (assets) => {
        console.log(assets);
        contentPicker.close();
    },
    // (optional) allow selection of multiple assets
    allowMultipleSelection: true,
    // (optional) preview asset callback
    onPreview: (asset) => console.log(asset),
    // (optional) provide a Showpad supported language identifier
    language: 'en',
});

// open the content picker
contentPicker.open();
```
npm package: @showpad/experience-app-cli
Description: Experience App CLI
Author: Platform Solutions
Latest version: 3.1.1

# Experience App CLI

## Introduction

The Experience App CLI is a command line tool to help you build Experience apps.

## Requirements

- Showpad domain with administrator rights.
- [NodeJS >=15.0.0](https://nodejs.org/)

## Platform & Browser Compatibility

> **@next versions**: Versions tagged with --next might contain small issues.
> Only use in production if you can alter the `.showpad` package quickly.

### Development

|         | Localhost | Proxy App |
| ------- | :-------: | :-------: |
| Chrome  |    ✅     |    ✅     |
| Firefox |    ✅     |    ✅     |
| Edge    |    ✅     |    ✅     |
| Safari  |    ✅     |    ❌     |

> **The Proxy App doesn't run on Safari**: Use another browser to run the Proxy
> App while developing Localhost on Safari.

|             |  Mac  | Windows | Linux |
| ----------- | :---: | :-----: | :---: |
| CLI Version | 3.1.0 |  3.1.0  | 3.1.0 |

### Production

> **Showpad Experience Apps run inside Iframes**: Use relative paths in
> production.

> **The Experience App SDK targets ES2022**: Transpile your code if you need
> legacy support.

## Installation

```shell
# npm
npm i @showpad/experience-app-cli -D

# yarn
yarn add @showpad/experience-app-cli -D
```

## Documentation

You can find documentation on the
[Showpad Developer Portal](https://docs.api.showpad.com/docs/apps/preparation/toolkit/cli).
npm package: @showpad/experience-app-sdk
Description: Experience App SDK
Author: Platform Solutions
Latest version: 3.3.0

---
slug: overview
---

# Experience App SDK

## Introduction

The Experience App SDK is a typescript library to help you utilize ShowpadJS in
your experience apps.

## Requirements

**Development**

- HTML & JavaScript knowledge
- a Code Editor (we like [Visual Studio Code](https://code.visualstudio.com/))
- [Node.js 15+](https://nodejs.org/en/)

**Showpad**

- Ultimate subscription to Showpad
- Administrator access to Showpad's Admin App

## Platform & Browser Compatibility

> **@next versions**: Versions tagged with --next might contain small issues.
> Only use in production if you can alter the .Showpad package quickly.

### Development

You can run your extension point from localhost in latest Chrome, Firefox, Edge
& Safari.

### Production

|             |  WEB  |  iOS  | Android | Windows |
| ----------- | :---: | :---: | :-----: | :-----: |
| SDK Version | 3.0.0 | 3.0.0 |  3.0.0  |  3.0.0  |

> **Showpad Experience Apps run inside Iframes**: Use relative paths in
> production.

> **The Experience App SDK targets ES2022**: Transpile your code if you need
> legacy support.

## Installation

```shell
# npm
npm i @showpad/experience-app-sdk

# yarn
yarn add @showpad/experience-app-sdk
```

## Usage

```ts
import { Showpad } from '@showpad/experience-app-sdk';

const main = async (): Promise<void> => {
  // Always wait for ShowpadLib to be loaded
  await Showpad.onShowpadLibLoaded();

  const userInfo = await Showpad.getUserInfo();
  const deviceInfo = await Showpad.getDeviceInfo();
};

main();
```

## Documentation

You can find documentation on the
[Showpad Developer Portal](https://developer.showpad.com/docs/appsv2/developer-tools/sdk).