Library / SDK
zarazhangrui/beautiful-html-templates avatar
zarazhangrui/beautiful-html-templates

beautiful-html-templates: 34 HTML Slide Templates Designed for Coding Agents

A library of HTML slide templates designed so any coding agent can pick the right one and produce a beautiful deck on the user's behalf, automatically.

4,677 stars393 forksHTMLMIT

At a glance

What is it?
beautiful-html-templates is a MIT-licensed repository of 34 self-contained HTML slide deck templates, each with a distinct visual identity, organized so that AI coding agents can select the appropriate one and produce a presentation without human guidance on layout or color choices.
Who is it for?
beautiful-html-templates is useful when you want an AI coding agent to produce a slide deck and you need it to choose a visual style that fits a brief without manual intervention. It is less useful for users who want a traditional presentation builder with live editing, export to PowerPoint, or built-in collaboration.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 112 days ago.
What is it written in?
Mainly HTML, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 29, 2026, and from our analysis. They are not legal advice.

Editorial analysis

The Problem This Repository Addresses

Generating a slide deck with an AI coding agent is straightforward for content but difficult for design. An agent can draft bullet points and structure, but choosing a color palette, typography, and layout system requires design judgment that general-purpose agents do not reliably apply consistently.

beautiful-html-templates solves this by pre-deciding the design. Each template is a complete visual system: typography, color palette, and layout are already determined. The agent's job is to select the most appropriate template for the user's brief and fill it with content. The repository's AGENTS.md documents how to do this selection.

The alternative approach is generating HTML from scratch for each request. That produces inconsistent results and requires the agent to make design decisions it cannot reliably optimize. This repository trades design flexibility for consistency.

Repository Structure and How Agents Use It

The README is direct about the intended user: 'Agents using the library should read AGENTS.md.' The AGENTS.md file is described as 'the operating manual: how to read index.json, match the user's brief to a template, clone it, and adapt the content.'

The `index.json` file is the machine-readable catalog. An agent reads index.json to see what templates are available and their metadata, then uses AGENTS.md to understand the selection criteria.

To invoke this workflow, the README provides a ready-made prompt to give to a coding agent:

code
Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck.

The `runtime/` directory and `scripts/` directory handle any build tooling for the templates. Each template lives in its own subdirectory under `templates/`.

The 34 Templates: Visual Range and Categories

The README documents all 34 templates with brief descriptions. The range covers several aesthetic categories.

Editorial and professional: Soft Editorial (Cormorant Garamond serif on warm paper), Vellum (deep navy with warm-yellow Cormorant), Emerald Editorial (magazine-cover business style), Signal (institutional navy with muted gold), and Blue Professional (clean modern cobalt).

Neobrutalism and poster: Neo-Grid Bold (neon yellow on off-white), BlockFrame (pastel-neon with chunky borders), Raw Grid (thick borders with offset shadows), Bold Poster (Shrikhand display with fire-engine red), and People's Platform (activist poster energy).

Retro and playful: 8-Bit Orbit (pixel-art neon arcade aesthetic), Retro Windows (Windows 95 chrome and MS Sans Serif), Retro Zine (riso-print aesthetic in HTML), Daisy Days (hand-drawn daisies and stars), and Scatterbrain (Post-it sticky note style).

Several other templates cover distinct territory. Broadside combines a dark editorial canvas with a bilingual Latin/Chinese type stack and a single fire orange accent. Cobalt Grid pairs electric cobalt italic serifs with a graph-paper canvas and pixel-glitch decorations. Studio uses a black canvas with electric-yellow type and no decoration. Editorial Forest applies forest green, dusty pink, and warm cream in Source Serif 4 for a quarterly-review feel. Sakura Chroma draws from vintage Japanese cassette packaging, with diagonal rainbow ribbons and JIS-style spec checkboxes. Long Table takes a warm cream and rust-red supper-club aesthetic with bold uppercase grotesks and italic Fraunces. Cartesian favors a quiet warm-neutral palette with classical Playfair serifs.

The descriptions in the README give a real sense of what differentiates each one: 'Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients' (Biennale Yellow) versus 'Black canvas, hot pink accent, pearl-cream paper' (Pink Script).

Three slides per template are shown in the gallery: a cover, a mid-deck slide, and a later slide. This gives a sense of how the visual system handles different content layouts.

What Each Template Contains

The README describes templates as having HTML, metadata, and sibling assets. This means each template folder includes the HTML files for individual slides, a metadata file (likely JSON) that describes the template's properties for index.json, and any image files or font references needed.

Templates that reference web fonts likely load them from Google Fonts or similar CDNs. The README does not document a list of external dependencies per template, so an agent adapting a template for an offline presentation would need to check each template's HTML.

The MIT license applies to the entire repository. Templates can be used freely in commercial projects, modified, and redistributed. Attribution is not required by the license.

Reveal.js and the Difference in Design Philosophy

Reveal.js is a widely used HTML presentation framework where developers write slides as nested HTML sections, control transitions via data attributes, and apply visual styles through a library of CSS themes. It targets engineers who will build and edit slides by hand. The selection of a theme is a manual decision the developer makes; there is no catalog an AI agent can query to match a visual style to a brief.

beautiful-html-templates inverts this arrangement. The design decisions are pre-made and catalogued. An agent can read index.json, match a user's brief to a template, and fill the HTML with content without the user needing to specify typography, spacing, or color. The trade-off is that beautiful-html-templates drops the runtime features Reveal.js provides: speaker notes, keyboard navigation, presenter view, PDF export, and plugin integrations. The templates are plain HTML files, not Reveal.js format, so they are not interchangeable. If your workflow depends on Reveal.js-specific features, beautiful-html-templates is not a substitute.

Limitations of a Template-Driven Approach

A template library of this kind has a ceiling. 34 templates cover a range of aesthetics, but they are all fixed systems. If none of the 34 templates fits the user's brief closely, the agent must either use the nearest match or modify a template. Modification takes the agent outside the structured workflow and back to general HTML generation.

The repository also does not include animation or interactive elements in the documented template descriptions. The README describes static visual aesthetics. A presentation requiring animated transitions or embedded video would need custom work.

The last push to the repository was on 2026-06-09. There are no GitHub releases. The repository does not document a roadmap for new templates or changes to the agent API in AGENTS.md.

Editorial conclusion

beautiful-html-templates is useful when you want an AI coding agent to produce a slide deck and you need it to choose a visual style that fits a brief without manual intervention. It is less useful for users who want a traditional presentation builder with live editing, export to PowerPoint, or built-in collaboration. The last push was on 2026-06-09. If you need agent-generated slides now, clone the repository and paste the provided prompt into your coding agent.

Frequently asked questions

How does beautiful-html-templates work with a coding agent?

The README provides a prompt to copy into a coding agent: clone the repository and follow the instructions in AGENTS.md. The agent reads index.json to see available templates, uses AGENTS.md to select the right one for the user's brief, and adapts the HTML with the requested content.

Are the beautiful-html-templates free to use in commercial projects?

The repository is released under the MIT license, which permits free use, modification, and redistribution in both personal and commercial projects without requiring attribution.

How many templates are in beautiful-html-templates and what styles do they cover?

The README documents 34 templates spanning editorial, neobrutalist, retro, playful, professional, and other aesthetics. Each template includes three preview slides (cover, mid-deck, later) and has its own HTML files and metadata.

Official sources

  1. Issues
  2. License: MIT
  3. README
  4. zarazhangrui/beautiful-html-templates on GitHub
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/zarazhangrui-beautiful-html-templates.svg)](https://hysenlabs.com/projects/zarazhangrui-beautiful-html-templates)