HTML Viewer 365 - Run Interactive HTML in Office

Why teams use HTML Viewer 365

Some Office documents need more than plain text or screenshots. HTML Viewer 365 gives you a focused place to paste a self-contained HTML page and keep the rendered result beside the slide or workbook where the conversation is happening.

The add-in saves the HTML with the document and renders it in a sandboxed iframe, so the page stays portable without injecting your pasted HTML into the parent Office add-in page.

Features

PowerPoint and Excel support

Use the same content add-in in slides and workbooks.

Saved per-document HTML

Reopen the file later and keep the pasted HTML source with the document.

Sandboxed JavaScript

Run pasted scripts in an isolated, sandboxed frame.

Clean editing workflow

Open the editor, paste the source, save, and collapse the toolbar for more room.

Sample

Copy the HTML from the left column, paste it into HTML Viewer 365, and the add-in will render the same page shown on the right. This snippet is self-contained: HTML, CSS, and content in one block.

Slide card HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Slide Status Card</title>
    <style>
      :root {
        color-scheme: light;
        font-family: Inter, Arial, sans-serif;
        --title-size: clamp(34px, 8.4vmin, 96px);
        --metric-size: clamp(44px, 16vmin, 132px);
        --risk-size: clamp(42px, 12vmin, 96px);
        --body-size: clamp(18px, 3.2vmin, 32px);
        --label-size: clamp(14px, 2.4vmin, 20px);
        --detail-size: clamp(14px, 2.4vmin, 20px);
        --detail-strong-size: clamp(18px, 3.2vmin, 28px);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: #0f172a;
        color: #e2e8f0;
      }

      .slide-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(8px, 2.4vmin, 18px);
        position: relative;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        min-height: 0;
        padding: clamp(12px, 4vmin, 40px);
        background: #0f172a;
      }

      .slide-card::before {
        content: "";
        position: absolute;
        top: -16vmin;
        right: -10vmin;
        width: 42vmin;
        height: 42vmin;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 68%);
      }

      .card-header {
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: clamp(8px, 2vmin, 16px);
        align-items: start;
        min-width: 0;
        position: relative;
        z-index: 1;
      }

      .eyebrow {
        margin: 0 0 clamp(4px, 1vmin, 10px);
        color: #22d3ee;
        font-size: clamp(10px, 1.8vmin, 12px);
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      h1 {
        margin: 0;
        font-size: var(--title-size);
        line-height: 0.98;
      }

      .status-pill {
        padding: clamp(5px, 1.6vmin, 8px) clamp(8px, 2vmin, 12px);
        border: 1px solid rgba(20, 184, 166, 0.38);
        border-radius: 8px;
        background: rgba(20, 184, 166, 0.14);
        color: #99f6e4;
        font-size: var(--label-size);
        font-weight: 800;
      }

      .tabs {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(6px, 1.8vmin, 12px);
        min-height: 0;
        position: relative;
        z-index: 1;
      }

      .tabs input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .tab-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 4px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
      }

      .tab-list label {
        padding: clamp(5px, 1.5vmin, 8px) clamp(6px, 1.8vmin, 10px);
        border-radius: 6px;
        color: #94a3b8;
        cursor: pointer;
        font-size: var(--label-size);
        font-weight: 700;
        text-align: center;
      }

      #tab-readiness:checked ~ .tab-list label[for="tab-readiness"],
      #tab-plan:checked ~ .tab-list label[for="tab-plan"],
      #tab-risks:checked ~ .tab-list label[for="tab-risks"] {
        background: #22d3ee;
        color: #0f172a;
      }

      .tab-panels {
        min-height: 0;
      }

      .tab-panel {
        display: none;
        height: 100%;
        min-height: 0;
        padding: clamp(8px, 3vmin, 26px);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 10px;
        background: rgba(30, 41, 59, 0.62);
      }

      #tab-readiness:checked ~ .tab-panels .panel-readiness,
      #tab-plan:checked ~ .tab-panels .panel-plan,
      #tab-risks:checked ~ .tab-panels .panel-risks {
        display: grid;
      }

      .metric {
        align-content: center;
        gap: clamp(6px, 2vmin, 12px);
      }

      .metric strong {
        display: block;
        color: #22d3ee;
        font-size: var(--metric-size);
        line-height: 0.9;
      }

      .metric span,
      .tab-panel p {
        color: #cbd5e1;
        font-size: var(--body-size);
        font-weight: 700;
      }

      .bar {
        height: clamp(7px, 1.8vmin, 12px);
        overflow: hidden;
        border-radius: 999px;
        background: #e5e5e5;
      }

      .bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #22d3ee, #34d399);
      }

      .details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(5px, 1.6vmin, 10px);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .details li {
        min-width: 0;
        padding: clamp(6px, 2vmin, 12px);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.7);
        color: #cbd5e1;
        font-size: var(--detail-size);
      }

      .details strong {
        display: block;
        color: #f8fafc;
        font-size: var(--detail-strong-size);
      }

      .checklist {
        display: grid;
        gap: clamp(6px, 2vmin, 12px);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .checklist li {
        display: flex;
        gap: clamp(6px, 1.8vmin, 10px);
        align-items: center;
        color: #dbeafe;
        font-size: var(--body-size);
        font-weight: 700;
      }

      .checklist span {
        display: grid;
        place-items: center;
        width: clamp(18px, 4vmin, 24px);
        height: clamp(18px, 4vmin, 24px);
        border-radius: 999px;
        background: #34d399;
        color: #0f172a;
        font-size: var(--label-size);
        font-weight: 900;
        flex: 0 0 auto;
      }

      .risk-score {
        align-content: center;
      }

      .risk-score strong {
        color: #fcd34d;
        font-size: var(--risk-size);
        line-height: 0.95;
      }

      @media (max-height: 420px) {
        .slide-card {
          --title-size: clamp(22px, 8vmin, 42px);
          --metric-size: clamp(30px, 14vmin, 64px);
          --risk-size: clamp(30px, 12vmin, 54px);
          --body-size: 12px;
          --label-size: 11px;
          --detail-size: 10px;
          --detail-strong-size: 12px;
          gap: 8px;
          padding: 10px;
        }

        .eyebrow {
          display: none;
        }

        .tab-panel {
          padding: 8px 10px;
        }

        .details li {
          padding: 6px;
        }
      }
    </style>
  </head>
  <body>
    <main class="slide-card" aria-label="Launch readiness status card">
      <header class="card-header">
        <div>
          <p class="eyebrow">Launch status</p>
          <h1>Portal refresh</h1>
        </div>
        <span class="status-pill">On track</span>
      </header>

      <section class="tabs">
        <input type="radio" id="tab-readiness" name="status-tab" checked />
        <input type="radio" id="tab-plan" name="status-tab" />
        <input type="radio" id="tab-risks" name="status-tab" />

        <div class="tab-list" role="tablist" aria-label="Status views">
          <label for="tab-readiness" role="tab">Readiness</label>
          <label for="tab-plan" role="tab">Plan</label>
          <label for="tab-risks" role="tab">Risks</label>
        </div>

        <div class="tab-panels">
          <section class="tab-panel panel-readiness metric" aria-label="Readiness">
            <strong>82%</strong>
            <span>ready for stakeholder review</span>
            <div class="bar" aria-label="82 percent ready"><span style="width: 82%"></span></div>
          </section>

          <section class="tab-panel panel-plan" aria-label="Plan">
            <ul class="checklist">
              <li><span>1</span>Finish support handoff</li>
              <li><span>2</span>Publish release notes</li>
              <li><span>3</span>Confirm go-live owner</li>
            </ul>
          </section>

          <section class="tab-panel panel-risks risk-score" aria-label="Risks">
            <strong>Low</strong>
            <p>Only copy review and final QA remain open.</p>
          </section>
        </div>
      </section>

      <ul class="details" aria-label="Launch details">
        <li><strong>7</strong>open items</li>
        <li><strong>Aug 14</strong>ship target</li>
        <li><strong>Mia</strong>owner</li>
      </ul>
    </main>
  </body>
</html>

Rendered preview

Tip: Write your HTML to fill the whole frame

Fixed-size HTML can waste space in a large frame and make text collide when the add-in is resized smaller. The two screenshots below show both problems.

Fixed-size HTML card that does not fill the whole frame — Large frames: a centered fixed card leaves unused slide space around the content.

Fixed-size HTML text collides with footer content in a small frame — Small frames: fixed text can run into nearby content instead of scaling down.

Treat the iframe like the slide. Make the outer shell fill the viewport, then reserve a flexible middle row with minmax(0, 1fr) so panels, charts, or tab content do not push into footer content.

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide-card {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

Put the important text sizes in CSS variables. Use readable clamp() baselines for normal frames, then reduce only the necessary values in a short-height media query.

:root {
  --title-size: clamp(34px, 8.4vmin, 96px);
  --body-size: clamp(18px, 3.2vmin, 32px);
  --label-size: clamp(14px, 2.4vmin, 20px);
}

@media (max-height: 420px) {
  .slide-card {
    --body-size: 12px;
    --label-size: 11px;
  }
}

Common use cases

Meeting briefs - Share a polished status page inside the deck where decisions are being made.
Mockups and concepts - Bring lightweight HTML/CSS/JavaScript prototypes into PowerPoint without exporting screenshots.
Reference pages - Keep an interactive checklist, table, or visual guide next to the workbook it supports.
Portable handoffs - Save the source with the document so the view is ready when someone else opens it.

Frequently asked questions

Can I use CSS?

Yes. Put the CSS in a style tag inside the pasted HTML so the snippet stays self-contained.

Will JavaScript run?

Yes. HTML Viewer 365 runs pasted scripts inside an isolated, sandboxed frame.

Does the HTML stay with the document?

Yes. The add-in saves the HTML source in document settings so it is available when you reopen the file.

How does HTML Viewer 365 handle my data?

HTML Viewer 365 is designed to minimize data collection and protect your content. We never upload or store your PowerPoint presentation, Excel workbook, or HTML source on our servers. The add-in runs the HTML in a sandboxed frame that does not receive direct access to the add-in’s account session or Office document APIs. JavaScript can contact external services, so only run code you trust. Read our privacy policy for full details. Need more information or have special requirements? Contact support and we'll help.

What should I avoid putting in snippets?

Only paste code you trust. Avoid depending on private resources unless everyone opening the file can access them.

Ready to keep the right HTML in view?

Install HTML Viewer 365 from AppSource, paste a self-contained snippet, and keep the rendered page beside the Office content it supports.

Get on App Store View Pricing