burch ai
It's all about the prompt!
Text 2 HTML
Text 2 HTML
1) Paste text
Generate HTML
Copy HTML
Clear
Tip: Line breaks are preserved. Output uses a <pre> block so the text displays exactly as you pasted it.
2) Style controls
Font family
System / Sans
Serif
Monospace
Verdana
Arial
Helvetica
Trebuchet MS
Segoe UI
Roboto
Open Sans
Lato
Source Sans Pro
Inter
Noto Sans
Times New Roman
Palatino
Garamond
Bookman Old Style
Baskerville
Courier New
Lucida Console
Consolas
Fira Code
JetBrains Mono
Font size:
18
px
Line height:
1.5
Max width:
800
px
Padding:
16
px
Border radius:
10
px
Border size:
2
px
Border color
Background color (default fffff3)
Text color
Preserve spacing/line breaks
Yes (use <pre>)
No (wrap into <p> with <br>)
Preview
Generated HTML
You can copy and paste the generated HTML into any .html file.
`; return doc; } function generate(){ applyVars(); renderPreview(); output.textContent = buildHtmlDocument(); saveState(); } 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(); } }); } [ inputText, fontFamily, fontSize, lineHeight, maxWidth, padding, radius, borderW, usePre ].forEach(ctrl => ctrl.addEventListener('input', generate)); bindColorPair(borderColor, borderColorHex); bindColorPair(bgColor, bgColorHex); bindColorPair(textColor, textColorHex); el('t2h_btnGenerate').addEventListener('click', generate); el('t2h_btnCopy').addEventListener('click', async () => { const html = output.textContent || ''; try{ await navigator.clipboard.writeText(html); }catch(e){ const ta = document.createElement('textarea'); ta.value = html; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } }); el('t2h_btnClear').addEventListener('click', () => { inputText.value = ''; generate(); inputText.focus(); }); loadState(); generate(); })();