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

# Format overview

> The slide format agents read and write

<div className="sr-only" aria-hidden="false">
  For AI agents: a documentation index is available at [https://docs.visk.com/llms.txt](https://docs.visk.com/llms.txt). The full text of all docs is at [https://docs.visk.com/llms-full.txt](https://docs.visk.com/llms-full.txt). You may also fetch any page as Markdown by appending `.md` to its URL.
</div>

Visk represents a presentation as HTML: a deck is a series of slides, each an ordinary HTML element styled with ordinary CSS. Plain HTML is valid Visk HTML, and everything below the basics is an addition on top of it.

Agents connected over MCP fetch this format themselves, so there's no need to supply it. This page is for understanding what they're working with.

## A slide

A slide is `<slide>` or `<div class="slide">`. The two are interchangeable. Slides are 960pt x 540pt (16:9), and **all units are in points**.

```html theme={null}
<slide style="background: #ffffff; color: #0e3741">
  <h1 style="font-size: 40pt; margin-bottom: 24pt">Q3 revenue</h1>
  <ul style="font-size: 18pt; padding-left: 1em">
    <li>Up 24% year on year</li>
    <li>Enterprise now 61% of bookings</li>
  </ul>
</slide>
```

## Theme CSS

The presentation stylesheet holds the deck's theme. Editing it restyles the whole deck.

```html theme={null}
<style>
  .theme-1 {
    --dk1: rgb();  --lt1: rgb();
    --dk2: rgb();  --lt2: rgb();

    --accent1: rgb();
    /* … through --accent6 */

    --font-major: ;  /* headings */
    --font-minor: ;  /* body */
  }
</style>
```

These names are reserved and map to PowerPoint's own theme. Additional variables and classes can be defined alongside them for presentation-wide styling.

Reference them from slides as `var(--accent1)`.

## A whole deck

To hand over an entire presentation at once, wrap slides in a `<body>` with a single `<style>` block:

```html theme={null}
<body>
  <style>
    .theme-1 {
      --accent1: rgb(38, 107, 118);
      --font-major: Aileron;
      --font-minor: Manrope;
    }
  </style>

  <div class="slide"> ... slide 1 ... </div>
  <div class="slide"> ... slide 2 ... </div>
</body>
```

Put shared styling in that one `<style>` block rather than repeating it inline on every slide. There is no `<html>`, `<head>`, or external stylesheet, and no JavaScript.

## Positioning

Normal document flow, flexbox and grid all work exactly as they do on the web.

For absolute placement, `box` is shorthand in points:

```html theme={null}
<div box="60, 40, 840, 60">Title area</div>
```

`box="l, t, w, h"` is equivalent to `position: absolute; left: l; top: t; width: w; height: h`. It takes the element out of the flow, and it creates a new positioning context, so coordinates on nested elements resolve against the box rather than the slide.

## Enhancements

Each of these maps to a native PowerPoint object, so the result stays editable after export.

### Attributes

| Attribute                        | What it does                                                                                                                            |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `box="l, t, w, h"`               | Absolute position in pt                                                                                                                 |
| `style="vertical-align: middle"` | Vertical alignment within a shape (`top`, `middle`, `bottom`)                                                                           |
| `class="z-N"`                    | z-index shorthand                                                                                                                       |
| `class="resize-text"`            | Shrink text to fit the shape, as PowerPoint does                                                                                        |
| `class="group"`                  | Becomes a PowerPoint group shape containing its descendants                                                                             |
| `--bullet-color`                 | Bullet colour on `<ul>` / `<ol>`                                                                                                        |
| `data-id`                        | Shape id, needed only when a `<Connector>` targets the shape                                                                            |
| `autoshape="name"`               | PowerPoint preset geometry, e.g. `triangle`. Omitted where CSS already implies the shape: a rectangle, a rounded rectangle, or a circle |
| `data-adjustments`               | Adjustment values for the preset, when they differ from PowerPoint's defaults                                                           |

### Charts

Use `<Chart>` for any data visualisation. It maps to a native, editable PowerPoint chart. Supported types are `line`, `bar`, `area`, `scatter`, `pie`, `radar`, `bubble` and `waterfall`.

```html theme={null}
<Chart type="bar" style="width: 500pt; height: 250pt">
  <ChartTitle text="Revenue" />
  <XAxis labels='["Q1","Q2","Q3","Q4"]' border='{"display":true}' />
  <YAxis border='{"display":false}' grid='{"display":true}' />
  <Dataset label="FY25" data="[120,180,210,260]" backgroundColor="var(--accent1)" />
  <Legend position="bottom" />
</Chart>
```

See [Charts](/charts) for the full component reference, chart types and worked examples.

### Connectors

Straight horizontal and vertical rules are just a `<div>` with `border-top` or `border-left`. To draw a line *between* two shapes, use `<Connector>`, where each endpoint is either a shape anchor or a coordinate:

```html theme={null}
<div data-id="1" box="80, 200, 200, 60">Discovery</div>
<div data-id="2" box="400, 200, 200, 60">Delivery</div>
<Connector from="#1" to="#2" head="arrow" style="stroke: var(--accent1)" />
```

Add `variant` for elbow and curved presets and `waypoints` to shift the bend. See [Connectors](/connectors) for variants and diagram patterns.

### Icons, flags and logos

```html theme={null}
<i class="fa-chart-line" style="color: var(--accent1); font-size: 24pt"></i>
<i class="flag-gb" style="width: 24pt"></i>
<i class="logo-stripe" title="Stripe" style="width: 80pt"></i>
```

Font Awesome names for icons, ISO 3166-1 alpha-2 codes for flags, and a domain for logos. These can't be used inline within text, as PowerPoint has no inline-icon concept.

### Tables, lists and images

Real `<table>`, `<ul>` / `<ol>` and `<img>` elements each convert to the native PowerPoint equivalent, so a table arrives as a table and a list as a real bulleted list. Bullet colour is set with `--bullet-color` on the list.

Avoid nested shapes within tables, which aren't valid in PowerPoint.

### Speaker notes

`<notes>` as the last child of a slide:

```html theme={null}
<slide>
  ...
  <notes>Open with the revenue number, then the enterprise mix.</notes>
</slide>
```

## Layouts and placeholders

Decks built on an existing master carry two special classes:

* **`inherited`** shapes come from the layout. On a slide they can't be modified or deleted, and reappear if you try.
* **`ph`** shapes are placeholders. Keep the box and styling for titles and footers; body placeholders can be replaced with your own content, ideally reusing the same box.

The `data-ph-idx` attribute carries the placeholder's identity, and a shape that loses it no longer round-trips back to PowerPoint. See [Layouts](/layouts) for placeholder types and deck-wide restyling.

## What doesn't convert

PowerPoint has no equivalent for these, so they're unsupported:

* `<script>`, JavaScript, animations, hover and focus states
* CSS-generated shapes via `::before` / `::after`, or triangles built from borders and `clip-path`. Use inline SVG instead
* SVG `foreignObject`, `filter`, `mask`, `pattern`, `animate`, `mix-blend-mode`
* SmartArt
