Reveal.js Presentations
Create HTML presentations using reveal.js. No build step required - just open the HTML in a browser.
What You Create
A reveal.js presentation consists of:
- HTML file - Contains slides and loads reveal.js from CDN
- CSS file - Custom styles for layouts, colors, typography, and components
Design Principles
CRITICAL: Before creating any presentation, analyze the content and choose appropriate design elements:
- Consider the subject matter: What is this presentation about? What tone, industry, or mood does it suggest?
- Check for branding: If the user mentions a company/organization, consider their brand colors and identity
- Match palette to content: Select colors that reflect the subject
- State your approach: Explain your design choices before writing code
Requirements:
- ✅ State your content-informed design approach BEFORE writing code
- ✅ Use web-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via
@import in CSS
- ✅ Create clear visual hierarchy through size, weight, and color
- ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment
- ✅ Be consistent: repeat patterns, spacing, and visual language across slides
- ✅ Always use
pt (points) for font sizes - slides are fixed-size, so pt is predictable and familiar (like PowerPoint/Keynote). Never use em, rem, or px for font sizes.
Color Palette Selection
Choosing colors creatively:
- Think beyond defaults: What colors genuinely match this specific topic? Avoid autopilot choices.
- Consider multiple angles: Topic, industry, mood, energy level, target audience, brand identity (if mentioned)
- Be adventurous: Try unexpected combinations - a healthcare presentation doesn't have to be green, finance doesn't have to be navy
- Build your palette: Pick 3-5 colors that work together (dominant colors + supporting tones + accent)
- Ensure contrast: Text must be clearly readable on backgrounds
Example color palettes (use these to spark creativity - choose one, adapt it, or create your own):
- Classic Blue: Deep navy (#1C2833), slate gray (#2E4053), silver (#AAB7B8), off-white (#F4F6F6)
- Teal & Coral: Teal (#5EA8A7), deep teal (#277884), coral (#FE4447), white (#FFFFFF)
- Bold Red: Red (#C0392B), bright red (#E74C3C), orange (#F39C12), yellow (#F1C40F), green (#2ECC71)
- Warm Blush: Mauve (#A49393), blush (#EED6D3), rose (#E8B4B8), cream (#FAF7F2)
- Burgundy Luxury: Burgundy (#5D1D2E), crimson (#951233), rust (#C15937), gold (#997929)
Slide Content Principles
Diverse presentation is key. Even when slides have similar content types, vary the visual presentation:
- Use different layouts across slides: columns on one, stacked boxes on another, callouts with icons on a third
- Mix container styles: plain text, boxes, callouts, blockquotes
- Use visual hierarchy:
<strong> for key terms, different colors to distinguish categories
- Break up lists with other elements (quotes, callouts, columns)
- Don't repeat the same layout pattern on consecutive slides
Keep it scannable:
- Short bullet points, not paragraphs
- One main idea per slide when possible
- Use icons (Font Awesome) to add visual interest
When a slide has less content, make it bigger - don't leave empty space with tiny text.
Basic HTML Structure
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Presentation Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="slide-1">
<h1>Title</h1>
<div class="content">
<!-- Content here -->
</div>
</section>
<!-- More slides -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
slideNumber: true,
hash: true,
transition: 'slide',
center: false
});
</script>
</body>
</html>
CSS Variables (styles.css)
:root {
--background-color: #ffffff;
--heading-font: "Source Sans Pro", Helvetica, sans-serif;
--body-font: "Source Sans Pro", Helvetica, sans-serif;
--base-font-size: 32px;
--text-size: 16pt;
--h1-size: 48pt;
--h2-size: 36pt;
--h3-size: 24pt;
--primary-color: #2196F3;
--secondary-color: #ff9800;
--text-color: #222;
--muted-color: #666;
--box-bg: #f5f5f5;
--box-border: #ddd;
}
.reveal { font-family: var(--body-font); }
.reveal h1, .reveal h2, .reveal h3 {
font-family: var(--heading-font);
text-transform: none;
color: var(--text-color);
}
Multi-column Layouts (Inline CSS Grid)
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
<div>Column 1</div>
<div>Column 2</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 40px;">
<div>Narrow sidebar</div>
<div>Wide main content</div>
</div>
CSS Components
Boxes
.box {
background: var(--box-bg);
border: 1px solid var(--box-border);
border-radius: 8px;
padding: 20px;
}
Callouts
.callout {
border-left: 6px solid var(--primary-color);
padding: 15px 20px;
margin: 15px 0;
background: #f9f9f9;
border-radius: 8px;
}
.callout-blue { border-left-color: #2196F3; background: #e3f2fd; }
.callout-orange { border-left-color: #ff9800; background: #fff3e0; }
.callout-green { border-left-color: #4caf50; background: #e8f5e9; }
Icons (Font Awesome)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<i class="fas fa-check"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-lightbulb"></i>
Text Size Utilities
.text-lg { font-size: 18pt; }
.text-xl { font-size: 20pt; }
.text-2xl { font-size: 24pt; }
.text-3xl { font-size: 28pt; }
.text-4xl { font-size: 32pt; }
.text-muted { color: var(--muted-color); }
.text-center { text-align: center; }
Built-in Reveal.js Classes
r-fit-text - Auto-size text to fill slider-stretch - Stretch element to fill remaining vertical spacer-stack - Layer elements on top of each other
Reveal.js Configuration
Reveal.initialize({
controls: true, // Show navigation arrows
progress: true, // Show progress bar
slideNumber: true, // Show slide numbers
hash: true, // Update URL hash for each slide
transition: 'slide', // none/fade/slide/convex/concave/zoom
center: false, // Vertical centering (false = top align)
autoSlide: 0, // Auto-advance (ms), 0 to disable
loop: false // Loop presentation
});
1---2name: revealjs3description: Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.4---56# Reveal.js Presentations78Create HTML presentations using reveal.js. No build step required - just open the HTML in a browser.910## What You Create1112A reveal.js presentation consists of:13141. **HTML file** - Contains slides and loads reveal.js from CDN152. **CSS file** - Custom styles for layouts, colors, typography, and components1617## Design Principles1819**CRITICAL**: Before creating any presentation, analyze the content and choose appropriate design elements:20211. **Consider the subject matter**: What is this presentation about? What tone, industry, or mood does it suggest?222. **Check for branding**: If the user mentions a company/organization, consider their brand colors and identity233. **Match palette to content**: Select colors that reflect the subject244. **State your approach**: Explain your design choices before writing code2526**Requirements**:27- ✅ State your content-informed design approach BEFORE writing code28- ✅ Use web-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via `@import` in CSS29- ✅ Create clear visual hierarchy through size, weight, and color30- ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment31- ✅ Be consistent: repeat patterns, spacing, and visual language across slides32- ✅ **Always use `pt` (points) for font sizes** - slides are fixed-size, so `pt` is predictable and familiar (like PowerPoint/Keynote). Never use `em`, `rem`, or `px` for font sizes.3334### Color Palette Selection3536**Choosing colors creatively**:37- **Think beyond defaults**: What colors genuinely match this specific topic? Avoid autopilot choices.38- **Consider multiple angles**: Topic, industry, mood, energy level, target audience, brand identity (if mentioned)39- **Be adventurous**: Try unexpected combinations - a healthcare presentation doesn't have to be green, finance doesn't have to be navy40- **Build your palette**: Pick 3-5 colors that work together (dominant colors + supporting tones + accent)41- **Ensure contrast**: Text must be clearly readable on backgrounds4243**Example color palettes** (use these to spark creativity - choose one, adapt it, or create your own):44451. **Classic Blue**: Deep navy (#1C2833), slate gray (#2E4053), silver (#AAB7B8), off-white (#F4F6F6)462. **Teal & Coral**: Teal (#5EA8A7), deep teal (#277884), coral (#FE4447), white (#FFFFFF)473. **Bold Red**: Red (#C0392B), bright red (#E74C3C), orange (#F39C12), yellow (#F1C40F), green (#2ECC71)484. **Warm Blush**: Mauve (#A49393), blush (#EED6D3), rose (#E8B4B8), cream (#FAF7F2)495. **Burgundy Luxury**: Burgundy (#5D1D2E), crimson (#951233), rust (#C15937), gold (#997929)5051### Slide Content Principles5253**Diverse presentation is key.** Even when slides have similar content types, vary the visual presentation:5455- Use **different layouts** across slides: columns on one, stacked boxes on another, callouts with icons on a third56- Mix container styles: plain text, boxes, callouts, blockquotes57- Use **visual hierarchy**: `<strong>` for key terms, different colors to distinguish categories58- Break up lists with other elements (quotes, callouts, columns)59- Don't repeat the same layout pattern on consecutive slides6061**Keep it scannable:**62- Short bullet points, not paragraphs63- One main idea per slide when possible64- Use icons (Font Awesome) to add visual interest6566**When a slide has less content, make it bigger** - don't leave empty space with tiny text.6768## Basic HTML Structure6970```html71<!doctype html>72<html>73<head>74 <meta charset="utf-8">75 <title>Presentation Title</title>76 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css">77 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css">78 <link rel="stylesheet" href="styles.css">79</head>80<body>81 <div class="reveal">82 <div class="slides">83 <section id="slide-1">84 <h1>Title</h1>85 <div class="content">86 <!-- Content here -->87 </div>88 </section>89 <!-- More slides -->90 </div>91 </div>92 <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js"></script>93 <script>94 Reveal.initialize({95 controls: true,96 progress: true,97 slideNumber: true,98 hash: true,99 transition: 'slide',100 center: false101 });102 </script>103</body>104</html>105```106107## CSS Variables (styles.css)108109```css110:root {111 --background-color: #ffffff;112 --heading-font: "Source Sans Pro", Helvetica, sans-serif;113 --body-font: "Source Sans Pro", Helvetica, sans-serif;114 --base-font-size: 32px;115 --text-size: 16pt;116 --h1-size: 48pt;117 --h2-size: 36pt;118 --h3-size: 24pt;119 --primary-color: #2196F3;120 --secondary-color: #ff9800;121 --text-color: #222;122 --muted-color: #666;123 --box-bg: #f5f5f5;124 --box-border: #ddd;125}126127.reveal { font-family: var(--body-font); }128.reveal h1, .reveal h2, .reveal h3 {129 font-family: var(--heading-font);130 text-transform: none;131 color: var(--text-color);132}133```134135## Multi-column Layouts (Inline CSS Grid)136137```html138<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">139 <div>Column 1</div>140 <div>Column 2</div>141</div>142143<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 40px;">144 <div>Narrow sidebar</div>145 <div>Wide main content</div>146</div>147```148149## CSS Components150151### Boxes152```css153.box {154 background: var(--box-bg);155 border: 1px solid var(--box-border);156 border-radius: 8px;157 padding: 20px;158}159```160161### Callouts162```css163.callout {164 border-left: 6px solid var(--primary-color);165 padding: 15px 20px;166 margin: 15px 0;167 background: #f9f9f9;168 border-radius: 8px;169}170.callout-blue { border-left-color: #2196F3; background: #e3f2fd; }171.callout-orange { border-left-color: #ff9800; background: #fff3e0; }172.callout-green { border-left-color: #4caf50; background: #e8f5e9; }173```174175### Icons (Font Awesome)176```html177<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">178<i class="fas fa-check"></i>179<i class="fas fa-arrow-right"></i>180<i class="fas fa-lightbulb"></i>181```182183## Text Size Utilities184185```css186.text-lg { font-size: 18pt; }187.text-xl { font-size: 20pt; }188.text-2xl { font-size: 24pt; }189.text-3xl { font-size: 28pt; }190.text-4xl { font-size: 32pt; }191.text-muted { color: var(--muted-color); }192.text-center { text-align: center; }193```194195## Built-in Reveal.js Classes196197- `r-fit-text` - Auto-size text to fill slide198- `r-stretch` - Stretch element to fill remaining vertical space199- `r-stack` - Layer elements on top of each other200201## Reveal.js Configuration202203```javascript204Reveal.initialize({205 controls: true, // Show navigation arrows206 progress: true, // Show progress bar207 slideNumber: true, // Show slide numbers208 hash: true, // Update URL hash for each slide209 transition: 'slide', // none/fade/slide/convex/concave/zoom210 center: false, // Vertical centering (false = top align)211 autoSlide: 0, // Auto-advance (ms), 0 to disable212 loop: false // Loop presentation213});214```
zaizira