HTML Viewer - View Static HTML in Office

Why teams use HTML Viewer

Some Office documents need more than plain text or screenshots. HTML Viewer 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.

Static rendering surface

Render HTML and CSS in a sandboxed iframe without running pasted scripts.

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, and the add-in will render the same static 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 prototypes into PowerPoint without exporting screenshots.
Reference pages - Keep a static 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?

No. HTML Viewer renders pasted source in a sandboxed iframe without script execution.

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.

What should I avoid putting in snippets?

Avoid depending on private images or stylesheets unless everyone opening the file can access them.

Ready to keep the right HTML in view?

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

Open HTML Viewer Get Help