HTML Templates Guide
📸 Preset Templates
ReelForge provides the following preset templates:
| Template | Style | Preview |
|---|---|---|
classic |
Classic black & white, minimalist professional | Clean white background with elegant typography |
modern |
Modern gradient with glassmorphism effects | Purple-blue gradient with frosted glass style |
minimal |
Minimalist with ample whitespace | Light gray background with refined design |
Usage
from reelforge.service import reelforge
await reelforge.initialize()
# Use preset template
result = await reelforge.generate_video(
topic="为什么阅读改变命运",
frame_template="classic" # or "modern", "minimal"
)
🎨 Creating Custom Templates
Method 1: Generate with LLM (Recommended ⭐, Zero Code)
For users who want unique styles but don't want to write code
Step 1: Open Prompt File
Open prompts/generate_html_template.txt in the project root directory.
Or view online: View Prompt File
Step 2: Copy Prompt, Modify Style Description
Find this section in the prompt:
## Visual Style
[👉 Replace this section with your desired style]
Replace with your desired style, for example:
## Visual Style
Cyberpunk style with neon lights, dark background, purple and blue gradients
Step 3: Paste to LLM Platform
Copy the entire prompt and paste it into any of these platforms:
- 💬 ChatGPT: https://chat.openai.com
- 💬 Claude: https://claude.ai
- 💬 Tongyi Qianwen: https://tongyi.aliyun.com
- 💬 DeepSeek: https://chat.deepseek.com
- 💬 Doubao: https://www.doubao.com
- 💬 Or any LLM you prefer
Step 4: Save HTML
Copy the HTML code returned by the LLM.
⚠️ Note: If the LLM returns HTML wrapped in ```html```, only copy the HTML inside (excluding ```html and ```)
Save as:
templates/my-cyberpunk.html
Step 5: Use Template
await reelforge.generate_video(
topic="...",
frame_template="my-cyberpunk" # Use your template
)
🎉 Done! Your video now uses your custom style!
Example Style Descriptions
Here are some style descriptions you can use or adapt:
- "Cyberpunk style with neon lights, dark background, purple gradient"
- "Fresh and clean style, light blue background, rounded cards, soft shadows"
- "Professional business style, dark blue with gold accents, serious and dignified"
- "Cute cartoon style, pink theme, rounded fonts, rainbow gradient"
- "Vintage retro style, sepia tones, aged paper texture, rounded borders"
- "Tech minimalist style, pure white background, thin borders, subtle animations"
- "Warm reading style, beige background, book texture, soft lighting"
Method 2: Write HTML Manually (Full Control)
For users familiar with HTML/CSS
Create an HTML file directly:
<!-- templates/my-style.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
width: 1080px;
height: 1920px;
background: #ffffff;
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px;
box-sizing: border-box;
}
.topic {
font-size: 72px;
font-weight: bold;
color: #333;
text-align: center;
}
.image-container {
width: 100%;
height: 900px;
display: flex;
align-items: center;
justify-content: center;
}
.image-container img {
max-width: 100%;
max-height: 100%;
border-radius: 20px;
}
.text {
font-size: 42px;
color: #666;
text-align: center;
line-height: 1.8;
}
.book-info {
font-size: 36px;
color: #999;
text-align: center;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="topic">{{topic}}</div>
<div class="image-container">
<img src="{{image}}" alt="Frame Image">
</div>
<div>
<div class="text">{{text}}</div>
<div class="book-info">《{{book_title}}》 - {{book_author}}</div>
</div>
</body>
</html>
Available Variables:
Required (always available):
{{topic}}- Video topic{{text}}- Current frame narration text{{image}}- AI-generated image path
Optional (available via ext parameter):
{{book_title}}- Book title{{book_author}}- Author{{book_cover}}- Book cover path{{book_rating}}- Book rating- And any other custom fields you pass via
ext
🤝 Share Your Templates
Created a beautiful template? Share it with the community!
- Fork this repository
- Add your HTML to
templates/community/ - Submit a Pull Request
Excellent templates will be featured in the official template gallery!
❓ FAQ
Q: What if the HTML generated by LLM has syntax errors? A: Regenerate, or emphasize "ensure HTML syntax is correct" in the prompt
Q: What if I'm not satisfied with the generated style? A: Modify the style description in the prompt, or manually edit the HTML file
Q: Can I use external CSS frameworks (like Tailwind)? A: Yes, but you need CDN links. We recommend inline CSS for offline compatibility
Q: Where should template files be placed?
A: In the templates/ directory. The filename is the template name (without .html extension)
Q: What's the recommended canvas size? A: 1080x1920 (9:16 portrait for TikTok/Douyin)
Q: Can I use custom fonts? A: Yes, but system fonts are recommended (PingFang SC, Microsoft YaHei, etc.) for compatibility
📚 Technical Details
How HTML Rendering Works
- Load HTML template file
- Replace variables (
{{topic}},{{text}}, etc.) with actual data - Render HTML to image using
html2image(Chrome headless) - Save as frame image
Performance
- First render: ~1-2 seconds (browser initialization)
- Subsequent renders: ~0.5-1 second per frame
- For 5-frame videos: acceptable total time
Browser Requirements
html2image uses Chrome/Chromium headless mode. It will automatically find:
- System Chrome
- System Chromium
- Or download a lightweight browser engine
💡 Tips
- Preview before generating: Open HTML in browser to preview effect
- Maintain aspect ratio: Keep 1080x1920 for best results
- Watch text length: Ensure long text wraps properly (
word-wrap,overflow-wrap) - Consider contrast: Ensure text is readable against background
- Use relative units:
%andvh/vwfor better responsiveness
🎨 Inspiration Gallery
Looking for inspiration? Check out:
- Official Template Gallery (coming soon)
- Community Templates (coming soon)
- Design sites: Dribbble, Behance, Pinterest