Box Content Preview

JavaScript library for rendering files stored on Box

Content Preview UI Kit is compatible with both OAuth (Managed User Auth) and JWT (App User Auth)

We have designed the UI kits in an authentication-type agnostic way so whether you are using UI kits for users who have Box accounts (Managed Users) or non-Box accounts (App Users), UI Kits should just work out of the box. The reason for this is that UI Kits only expect a "token" to be passed in for authentication, and Box provides two different ways to generate tokens - OAuth and JWT.

So depending on which type of app you are building, follow the linked authentication guides above on how to initiate Auth and retrieve tokens, and refer to the UI Kits documentation below how to pass along those tokens to the Content Preview UI Kit.

The Box Content Preview Javascript UI Kit allows developers to easily embed high quality and interactive previews of Box files in their desktop or mobile web application. The library fetches information about the file and its converted representations through the Box API, chooses the appropriate viewer for the file type, dynamically loads the necessary static assets and file representations, and finally renders the file. Box Content Preview also allows previews of multiple files to be loaded in the same container and exposes arrows to navigate between those files.

This UI Kit powers Preview in the main Box web application as well as the 'expiring embed' Box API endpoint.

Browser Support

  • Desktop Chrome, Firefox, Safari, Edge, and Internet Explorer 11
  • Limited support for mobile web - previews will render but some controls may not work

If you are using Internet Explorer 11, which doesn't natively support Promises, include a script (see sample code below) or a Promise library like Bluebird.

Current Version

  • Version: 0.129.1
  • Locale: en-US

Update to v0.114.0 or higher

If you are using a version of the UI Kit prior to v0.114.0, please upgrade to v0.114.0 or higher. We have made necessary breaking changes to the underlying API that serves converted representations in order to support more use cases and improve clarity.

Please note that until UI Kit reaches v1.0.0, we may make breaking changes as needed. We expect to release v1.0.0 and have the UI Kit source code publicly available on GitHub in Q2.

Supported Locales

To use a different locale, replace en-US in the URLs above with any of the following supported locales:

en-AU, en-CA, en-GB, en-US, da-DK, de-DE, es-ES, fi-FI, fr-CA, fr-FR, it-IT, ja-JP, ko-KR, nb-NO, nl-NL, pl-PL, pt-BR, ru-RU, sv-SE, tr-TR, zh-CN, zh-TW

Supported File Types

Box Content Preview supports 100+ file types, including most document and image formats, HD video, 3D models, 360-degress images, and 360-degree videos. You can find the full list of supported file types at


You can self-host the Box Content Preview UI Kit and Promise library or reference the versions hosted on the Box CDN.

<!DOCTYPE html>
<html lang="en-US">
    <meta charset="utf-8" />
    <title>Box Content Preview UI Kit Demo</title>
    <!-- only loads a Promise polyfill if your browser needs one -->
    <script src=""></script>

    <!-- Latest version of Box Content Preview for en-US locale -->
    <script src=""></script>
    <link rel="stylesheet" href="" />
    <div class="preview-container" style="height:400px; width:100%;"></div>
        var preview = new Box.Preview();'93392244621', 'EqFyi1Yq1tD9mxY8F38sxDfp73pFd7FP', {
            container: '.preview-container',
            showDownload: true

CORS (Cross-Origin Resource Sharing)

For security purposes, you must whitelist your application's HTTP origin, omitting any trailing slash, in the configuration section of the Developer Console. For example, CodePen's domain is whitelisted for the demo application below.

Box Content Preview Demo

Use the navigation arrows to preview different file types.

Initialization and Options

To show a preview, call, accessToken, { options }). Parameters and options are described below.

var preview = new Box.Preview();, accessToken, {
    container: '.preview-container',
    sharedLink: '',
    sharedLinkPassword: 'bar',
    collection: [fileId, '123', '234', ...],
    header: 'light',
    logoUrl: '',
    showDownload: true


Box File ID.


Box API access token to use.




CSS selector of the container in which Preview should be placed.


Shared link URL, required if file is shared and the access token doesn't belong to an owner or collaborator of the file. See for more details.


Shared link password, required if shared link has a password. See for more details.


List of file IDs to preview over. When used, this will show previews of multiple files within the same container and expose arrows to navigate between those files. Note that FILE_ID needs to be included in this list and that the SDK doesn't support collections with files that require a shared link or password.



Values that control header visibility and background color. Use 'none' for no header, 'light' for a light header and background, and 'dark' for a dark header and background.


Box logo

URL of custom logo to show in header.



Whether annotation button in header and annotations on content are shown.



Whether download button is shown in header. Will also control print button visibility in viewers that support print. Note that this option will not override download permissions on the access token.

Access Token

Box Content Preview needs an access token to make Box Content API calls. You can either get an access token from the token endpoint ( or generate a developer token on your application management page (

Additional Methods

These additional methods are available once a preview is loaded.

preview.hide() hides the preview.

preview.print() prints the file if printable. downloads the file if downloadable.

preview.resize() resizes the current preview if applicable. This function only needs to be called when preview's viewport has changed while the window object has not. If the window is resizing, then preview will automatically resize itself.


The preview object exposes addListener and removeListener for binding to events. Event listeners should be bound before show() is called, otherwise events can be missed.

Viewer Events

The full list of events that each individual viewer fires can be found at

const listener = (value) => {
    // Do something with value

// Attach listener before calling show otherwise events can be missed
var preview = new Box.Preview();
preview.addListener(EVENTNAME, listener);

// Show a preview;

// Remove listener when needed
preview.removeListener(EVENTNAME, listener);

EVENTNAME can be one of the following

  • viewer event will be fired when we have the viewer instance first available. This will be the same object that is also a property included in the load event. Preview fires this event before load so that clients can attach their listeners before the load event is fired.

  • load event will be fired on every preview load when show() is called or if inter-preview navigation occurs. The event data will contain:

error: 'message', // Error message if any error occurred while loading
viewer: {...},    // Instance of the current viewer object if no error occurred
metrics: {...},   // Performance metrics
file: {...}       // Box file object with properties defined in file.js
  • navigate event will be fired when navigation happens. The event includes the file ID of the file being navigated to, and this event will fire before load.

  • notification event will be fired when either the preview wrapper or one of the viewers wants to notify something like a warning or non-fatal error. The event data will contain:

message: 'message', // Message to show
type: 'warning'    // 'warning', 'notice', or 'error'
  • viewerevent Each viewer will fire its own sets of events. For example, the Image viewer will fire rotate or resize, etc. while other viewers may fire another set of events. The full list of events can be found at The preview wrapper will also re-emit events at the preview level, with event data containing:
event: EVENTNAME,         // Event name
data: DATA,               // Event data object
viewerName: VIEWERNAME,   // Name of the viewer. See VIEWERNAME above
fileId: fileId            // The file ID

Example event usage

var preview = new Box.Preview();
preview.addListener('viewer', (viewer) => {
    viewer.addListener('rotate', () => {
        // Do something when a viewer rotates a preview

preview.addListener('load', (data) => {
    const viewer = data.viewer;
    viewer.addListener('rotate', () => {
        // Do something when a viewer rotates a preview

preview.addListener('viewerevent', (data) => {
    if (data.viewerName === 'Image') {
        if (data.event === 'rotate') {
            // Do something when an image preview is rotated
    } else if (data.viewerName === 'Image360') {
        if (data.event === 'rotate') {
            // Do something different when a 360-degree image is rotated
    } else {}

preview.addListener('rotate', (data) => {
    if (data.viewerName === 'Image') {
        // Do something when an image preview is rotated
    } else if (data.viewerName === 'Image360') {
        // Do something different when a 360-degree image is rotated
    } else {}

If you have any questions, please visit our developer forum.

Box Content Preview

JavaScript library for rendering files stored on Box