present-in-html template

Decks that look designed

Write plain HTML. Pick a layout. The engine handles the stage, builds, magic move and print.

Your NameRole or teamOctober 2026

Agenda

Why this matters 5 min
What we built 10 min
What we learned 10 min
Questions 5 min

Part one

1

Why this matters

A one-line promise for this section.

One sentence, set big, is a whole slide.

Five points at most

Lead with the claim. Then one short line of support.
Auto-sized. More items, slightly smaller type.
Built one by one with data-build="list".
Balanced wrapping keeps lines even.

Before and after

Before

Hand-tuned spacing on every slide
Fonts that break on another laptop
No version history

After

One file, a fixed 16:9 stage, tokens for colour and type, and layouts that fit their content.

Layout

Image left, text right

Drop an img inside the figure and it crops to fill. With no image, a quiet geometric placeholder holds the space.

And the mirror

Bleeds to the slide edge
Flips automatically in RTL decks

Full bleed

Let the picture carry it

Add <img class="bleed" src="..." alt=""> for a photo; without one you get the brand colour.

Big number

98%

One hero metric and one honest caption.

Source: your data, date

Three numbers that matter

4.2MUsers this quarter

38%Faster than last year

12Countries live

Revenue by quarter

Q4 closes the year at its highest point.

Quarter	Revenue
Q1	12
Q2	18
Q3	21
Q4	29

Source: finance, FY26

Pick a plan

	Starter	Team	Enterprise
Seats	Up to 5	Up to 50	Unlimited
Support	Community	Next business day	Dedicated engineer
Price	$0	$12 per seat	Talk to us

Roadmap

Jan
Prototype
Working demo with real data.
Apr
Private beta
Fifty teams, weekly releases.
Aug
Launch
Public release in six regions.
Dec
Scale
Self-serve and partners.

How it works

Capture
Collect the raw input.
Process
Clean, enrich, score.
Decide
Route to the right owner.
Learn
Feed results back in.

Design is not how it looks. It is how it works.

Person NameTitle, Company

Code

Syntax-tinted, step by step

    const slides = document.querySelectorAll('.slide');
    // every slide is a 1920x1080 canvas
    function next() {
      if (step < steps) return step++;
      return go(index + 1);
    }

The team

Amira KhalilProduct

Jon ReyesEngineering

Lena TorresDesign

Malik OkaforData

Diagram

Diagrams that draw themselves

Author at viewBox width 1680 and use the dg-* classes so it follows the theme.

Sources

Finance, September close Revenue by quarter, FY25 to FY26. Internal.
Operations dashboard On-time delivery, April to September.
Vendor quote, 14 August Installation cost for option B.

Questions welcome

Thank you

Your Nameyou@example.comexample.com/deck