beautiful-html

name beautiful-html description Turn any document, proposal, report, or outline into a stunning single-file HTML presentation using 34 pre-built professional templates. Use when the user wants to convert a markdown file, proposal, or written content into a beautiful visual HTML document ready to share or convert to PDF. Beautiful HTML Convert any written content into a polished, single-file HTML presentation using templates from the beautiful-html-templates library. Template Library 34 templates available. Key ones by use case: Use Case Template Style Raw URL B2B proposals, consulting, investor updates blue-professional Light / Cobalt Blue https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/blue-professional/template.html Investor decks, board presentations signal Mixed / Navy & Gold https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/signal/template.html White papers, research, policy briefs monochrome Light / Black & White https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/monochrome/template.html Investment theses, research reports cartesian Light / Neutral Warm https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/cartesian/template.html Leadership presentations, strategy emerald-editorial Mixed / Emerald-Navy https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/emerald-editorial/template.html Research findings, white papers vellum Dark / Navy & Gold https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/vellum/template.html Design reports, studio annuals cobalt-grid Light / Cobalt Blue https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/cobalt-grid/template.html Startup pitches, founder presentations raw-grid Light / Multi https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/raw-grid/template.html Quarterly reviews, studio updates editorial-forest Mixed / Forest Green https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/editorial-forest/template.html Design studios, creative agencies studio Dark / Electric Yellow https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/studio/template.html Full list of all 34 templates at: https://github.com/zarazhangrui/beautiful-html-templates Workflow Phase 1 — Gather Content Ask the user: "What's the content? (paste text, share a .md file path, or describe what to build)" "What's the purpose? (proposal, report, pitch, research, internal update)" "Who's the audience?" If a file path is provided, read it. If it's a markdown proposal, parse it into sections. Phase 2 — Template Selection Based on the purpose and audience, recommend 3 templates from the library above with a one-line reason for each. Show them as options (A, B, C). For professional B2B proposals → default recommend blue-professional , signal , cartesian . For research/reports → default recommend monochrome , vellum , cartesian . For creative/agency → default recommend studio , editorial-forest , cobalt-grid . Wait for the user to pick one — or auto-select if they say "you choose." Phase 3 — Fetch Template Use WebFetch to retrieve the raw HTML template from GitHub: WebFetch: https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/<template-name>/template.html Read the template structure carefully: Identify all slide layout types available (cover, content, metrics, quote, split, timeline, etc.) Note the CSS variable names for colors and fonts Identify placeholder text patterns to replace Phase 4 — Populate Content Map the user's content onto the template's slide layouts: Mapping rules: Cover slide → title, subtitle, date, submitted by Agenda slide → top-level sections as bullet list Content slides → one section per slide, headline = the key insight (not the topic label) Metrics slide → any numbers, KPIs, success metrics Quote slide → testimonials, key statements, pull quotes Split slide → before/after, problem/solution, two-column comparisons Timeline slide → roadmaps, horizons, phased plans Table slide → pricing, commercials, structured breakdowns Content rules: Every slide headline = one complete insight Bad: "Section 3" Good: "90% of the team will have a live AI agent in production by month six" Never dump raw sections — rewrite as slide-friendly statements Keep bullets to 4–5 max per slide Numbers and metrics get their own slide Replace all placeholder text in the template HTML with the user's actual content. Preserve all CSS, JS, navigation, and structure — only change the text content and optionally adjust CSS color variables if needed to better match the client's brand. Phase 5 — Save and Open Save the populated HTML file with a descriptive filename (e.g. sb-ai-proposal.html ). Offer to: Convert to PDF using Playwright: npx playwright install chromium --with-deps node -e " const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.setViewportSize({ width: 1280, height: 720 }); await page.goto('file://' + require('path').resolve('<filename>.html')); const slideCount = await page.evaluate(() => document.querySelectorAll('.slide').length); await page.pdf({ path: '<filename>.pdf', width: '1280px', height: '720px', printBackground: true, pageRanges: '1-' + slideCount }); await browser.close(); console.log('Saved: <filename>.pdf'); })(); " Deploy to Vercel for a shareable link Source Templates from beautiful-html-templates by Zara Zhang Rui. MIT licensed.