> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Box View

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = href;
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

Box View is an embeddable service that allows developers to upload, convert,
and display files in their web and mobile apps via a high-fidelity,
interactive file viewer.

## Features

### View any file

Embed documents, images, videos, 360-degree videos and images, 3D models, and
dozens of other files in any web or mobile app using a standard `<iframe>`.

### Ease of use

Upload files to Box via a secure API and receive an embeddable HTML5
snippet to place into your application's UI.

### Collaboration in context

Allow end users to collaborate and mark up documents, presentations, and images
with annotations. Users can highlight text or comment on specific areas of a
file rendering.

## How does Box View work

1. Upload files into Box using our <Link href="/reference/post-files-content">secure upload API</Link>. All content is stored in Box's secure cloud storage infrastructure with virus scanning and 256 bit encryption.
2. Upon upload, files are converted into HTML5 compatible assets, which are designed to render crisply and responsively.
3. An embeddable URL is requested to access the file rendering. Previews can be embedded directly in your application using an `<iframe>` URL.

<Frame border center shadow>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/embed/box-view/box-view-flow.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=18ba1d242f6a91dbc48e171dfa3b3f76" alt="Box View flow" width="3000" height="950" data-path="images/guides/embed/box-view/box-view-flow.png" />
</Frame>

## Customize your experience with Box Content Preview

<Link href="/guides/embed/ui-elements/preview">Box Content Preview</Link> may be used to create
customized client-side experiences with the converted files.

## Use cases

* Convert and display PDF resumes in a recruiter application
* Convert and display course materials, including documents, videos, and PDFs in a student portal
* Convert and display HD video in a media room
* Convert and display sales collateral, including documents, videos, PDFs, and 3D models in a field sales enablement application

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Setup"), href: "/guides/embed/box-view/setup", badge: "GUIDE" },
{ label: translate("FAQ"), href: "/guides/embed/box-view/faq", badge: "GUIDE" }
]}
/>
