HTML to PNG Quote Card Designer with html-to-image — Free JavaScript Snippet

<div class="hc">
  <aside class="hc-panel">
    <h2>Quote card</h2>
    <label>Quote <textarea id="hcQuote" rows="4" maxlength="220">Design is not just what it looks like and feels like. Design is how it works.</textarea></label>
    <label>Author <input id="hcAuthor" value="Steve Jobs" maxlength="40"></label>
    <label>Handle <input id="hcHandle" value="@northwind.studio" maxlength="30"></label>
    <fieldset>
      <legend>Theme</legend>
      <div class="hc-themes" id="hcThemes"></div>
    </fieldset>
    <label>Size <select id="hcSize">
      <option value="1080x1080">Square post · 1080 × 1080</option>
      <option value="1080x1350">Portrait post · 1080 × 1350</option>
      <option value="1200x630">Link preview · 1200 × 630</option>
    </select></label>
    <button type="button" id="hcExport">Export PNG</button>
    <p class="hc-status" id="hcStatus" role="status"></p>
  </aside>
  <main class="hc-stage">
    <div class="hc-label">Design (live DOM)</div>
    <div class="hc-card" id="hcCard">
      <div class="hc-mark">“</div>
      <p class="hc-text" id="hcText"></p>
      <div class="hc-foot"><span class="hc-author" id="hcAuthorOut"></span><span class="hc-handle" id="hcHandleOut"></span></div>
    </div>
    <div class="hc-label" id="hcResultLabel" hidden>Exported PNG</div>
    <div class="hc-result" id="hcResult"></div>
  </main>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:#f4f4f5;color:#18181b;min-height:100vh;padding:20px}
.hc{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.hc{grid-template-columns:1fr}}
.hc-panel{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.hc h2{font-size:16px}
.hc label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#52525b}
.hc textarea,.hc input,.hc select{font:500 13px Inter,system-ui;border:1px solid #d4d4d8;border-radius:8px;padding:7px 9px;width:100%;resize:vertical}
.hc fieldset{border:1px solid #e4e4e7;border-radius:10px;padding:8px 10px}
.hc legend{font-size:11px;font-weight:700;color:#52525b;padding:0 4px}
.hc-themes{display:flex;gap:8px}
.hc-themes button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d4d4d8;cursor:pointer}
.hc-themes button[aria-pressed="true"]{box-shadow:0 0 0 2px #18181b}
.hc :focus-visible{outline:2px solid #6366f1;outline-offset:2px}
#hcExport{border:0;border-radius:10px;background:#18181b;color:#fff;font:700 13px Inter,system-ui;padding:10px;cursor:pointer}
#hcExport:disabled{opacity:.5}
.hc-status{font-size:12px;color:#71717a;line-height:1.5}
.hc-stage{min-width:0}
.hc-label{font-size:11px;font-weight:700;color:#71717a;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.hc-result img{width:420px;max-width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:block}
.hc-result small{display:block;font-size:12px;color:#71717a;margin-top:6px}
.hc-card{position:relative;width:420px;max-width:100%;aspect-ratio:1/1;border-radius:22px;padding:40px 38px 30px;display:flex;flex-direction:column;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 18px 40px rgba(0,0,0,.18);margin-bottom:20px}
.hc-card::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.hc-mark{font:600 italic 110px/0.8 Fraunces,Georgia,serif;opacity:.35;height:52px}
.hc-text{font:600 italic 26px/1.3 Fraunces,Georgia,serif;margin-top:auto;margin-bottom:auto;position:relative;z-index:1}
.hc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:13px;position:relative;z-index:1}
.hc-author{font-weight:700;letter-spacing:.02em}
.hc-author::before{content:'— '}
.hc-handle{opacity:.8}

// Web fonts come from a <link> added here, with crossorigin="anonymous".
// html-to-image embeds fonts by reading the stylesheet's cssRules, which
// the browser only allows for cross-origin CSS loaded in CORS mode.
var fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.crossOrigin = 'anonymous';
fontLink.href = 'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,600&family=Inter:wght@500;700&display=swap';
document.head.appendChild(fontLink);

var THEMES = [
  { c1: '#4f46e5', c2: '#db2777', name: 'Sunset' },
  { c1: '#0f766e', c2: '#22c55e', name: 'Forest' },
  { c1: '#0f172a', c2: '#334155', name: 'Slate' },
  { c1: '#ea580c', c2: '#facc15', name: 'Citrus' },
];
var card = document.getElementById('hcCard');
var theme = 0;

var themeBox = document.getElementById('hcThemes');
THEMES.forEach(function (t, i) {
  var b = document.createElement('button');
  b.type = 'button';
  b.style.background = 'linear-gradient(135deg,' + t.c1 + ',' + t.c2 + ')';
  b.setAttribute('aria-label', t.name + ' theme');
  b.setAttribute('aria-pressed', i === 0 ? 'true' : 'false');
  b.addEventListener('click', function () {
    theme = i;
    themeBox.querySelectorAll('button').forEach(function (x, j) { x.setAttribute('aria-pressed', j === i ? 'true' : 'false'); });
    update();
  });
  themeBox.appendChild(b);
});

function size() { var s = document.getElementById('hcSize').value.split('x'); return { w: +s[0], h: +s[1] }; }

function update() {
  var t = THEMES[theme], s = size();
  card.style.setProperty('--c1', t.c1);
  card.style.setProperty('--c2', t.c2);
  card.style.aspectRatio = s.w + ' / ' + s.h;
  var quote = document.getElementById('hcQuote').value.trim();
  var text = document.getElementById('hcText');
  text.textContent = quote;
  var px = quote.length > 150 ? 18 : quote.length > 100 ? 21 : 26;
  if (s.h < s.w) px -= 4;
  text.style.fontSize = px + 'px';
  document.getElementById('hcAuthorOut').textContent = document.getElementById('hcAuthor').value;
  document.getElementById('hcHandleOut').textContent = document.getElementById('hcHandle').value;
}
document.querySelectorAll('#hcQuote, #hcAuthor, #hcHandle, #hcSize').forEach(function (el) { el.addEventListener('input', update); });

document.getElementById('hcExport').addEventListener('click', async function () {
  var btn = this, status = document.getElementById('hcStatus');
  btn.disabled = true;
  status.textContent = 'Rendering…';
  try {
    // Fonts must be loaded, or the PNG falls back to Georgia/system fonts.
    await document.fonts.ready;
    var target = size();
    var rect = card.getBoundingClientRect();
    // pixelRatio = output pixels ÷ on-screen pixels, so the PNG comes out at
    // the exact social size whatever the card's on-screen width is.
    var url = await htmlToImage.toPng(card, {
      pixelRatio: target.w / rect.width,
      cacheBust: true,
    });
    var img = new Image();
    img.src = url;
    await img.decode();
    var result = document.getElementById('hcResult');
    result.innerHTML = '';
    img.alt = 'Exported quote card';
    result.appendChild(img);
    result.insertAdjacentHTML('beforeend', '<small>' + img.naturalWidth + ' × ' + img.naturalHeight + ' px · ' +
      Math.round(url.length * 0.75 / 1024) + ' KB · <a href="' + url + '" download="quote-card.png">Download PNG</a> (open the demo in its own tab if the sandbox blocks downloads)</small>');
    document.getElementById('hcResultLabel').hidden = false;
    status.textContent = 'Exported at ' + img.naturalWidth + ' × ' + img.naturalHeight + '.';
  } catch (e) {
    status.textContent = 'Export failed: ' + (e && e.message ? e.message : e);
  }
  btn.disabled = false;
});

update();