Tip: Line breaks are preserved. Output uses a <pre> or <div> block.
Limit: 10,000 words (preview + generated output).
2) Style controls
If you pick a Google Font, it will be loaded into both preview and generated HTML.
Preview
Generated HTML (Full Page)
Copy this full page HTML into a file, or copy just the block portion into your site. (If you only need a snippet, tell me what platform you’re pasting into.)
\n' +
'';
return full;
}
function generate(){
applyVars();
renderPreview();
output.textContent = buildFullHtmlPage();
}
function bindColorPair(picker, hex){
picker.addEventListener('input', () => {
hex.value = picker.value;
generate();
});
hex.addEventListener('input', () => {
const v = normalizeHex(hex.value);
if(v){
picker.value = v;
hex.value = v;
generate();
}
});
hex.addEventListener('blur', () => {
const v = normalizeHex(hex.value);
if(v){
picker.value = v;
hex.value = v;
}else{
hex.value = picker.value;
}
});
}
[
inputText, fontFamily, fontChoice, fontSize, lineHeight, maxWidth, padding, radius, borderW, usePre
].forEach(ctrl => ctrl.addEventListener('input', generate));
bindColorPair(borderColor, borderColorHex);
bindColorPair(bgColor, bgColorHex);
bindColorPair(textColor, textColorHex);
el('btnGenerate').addEventListener('click', generate);
el('btnCopy').addEventListener('click', async () => {
const html = output.textContent || '';
if(!html) return;
try{
if(navigator.clipboard && window.isSecureContext){
await navigator.clipboard.writeText(html);
}else{
throw new Error('Clipboard API unavailable (needs HTTPS or localhost).');
}
}catch(e){
const ta = document.createElement('textarea');
ta.value = html;
ta.setAttribute('readonly', '');
ta.style.position = 'fixed';
ta.style.left = '-9999px';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
});
el('btnClear').addEventListener('click', () => {
inputText.value = '';
generate();
inputText.focus();
});
/* KEY FIX:
Your previous code attached DOMContentLoaded AFTER it had already fired
(because the script is at the end of ). So generate() never ran.
Call generate() immediately, and also keep a readyState fallback. */
generate();
if(document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', generate, { once: true });
}