Bio Link Page Generator
Build a full Linktree-style link-in-bio page with stacked buttons, preview it live, then copy the standalone HTML to host anywhere.
About the Bio Link Page Generator
Type a profile name, a short tagline and a list of links (title plus URL), and the preview updates as a stacked-button mini page so you can see exactly what visitors would get. Press Generate Page HTML and the tool assembles a complete, self-contained HTML document, styles included, with no external files or scripts, that you can copy and save as index.html and upload to any free static host as your own link-in-bio page instead of paying for a hosted link service.
Why the exported file needs HTML escaping but the live preview doesn't
The on-page live preview builds its elements with textContent, which the browser always treats as inert plain text, so it's inherently safe from the start. The exported standalone page is different: it's assembled as one long literal HTML string via template literals, and that string becomes a real, standalone HTML file once saved and opened in any browser. If your profile name or a link title contained something like a stray < or an actual <script> tag, embedding it unescaped into that string would inject it as live, executable markup into your own generated page. The escapeHtml() function specifically converts &, <, >, and quote characters into their safe entity equivalents before anything gets woven into the final HTML, so what you typed always renders back out as the exact visible text you intended, never as unintended markup.
Why unrecognized link input falls back to "#" instead of a broken URL
Before accepting a typed link, this tool checks it against two patterns, one for a full https:// URL, and one for a bare domain-looking string like example.com that's missing its protocol, which gets https:// automatically prepended. If neither pattern matches at all, the generated link falls back to a plain # href rather than outputting whatever unrecognized text you typed as a raw link target. That's a deliberate safety choice: a placeholder # link simply does nothing when clicked, which is a far safer failure mode than echoing arbitrary unvalidated input directly into an href attribute, where it could otherwise end up forming a broken or unexpected link target.
Why every generated link includes rel="noopener noreferrer"
Links that open in a new tab via target="_blank" without this attribute give the newly opened page's JavaScript a way to access window.opener, the original tab, and in rare cases redirect it to a different, potentially malicious page behind the visitor's back, a real, documented technique sometimes called tabnabbing. rel="noopener" closes off that access entirely. noreferrer additionally stops the browser from sending a Referer header to the destination site, so external sites you link to don't automatically learn which specific bio page sent them traffic. Both are included by default on every generated link, a small but genuinely meaningful security habit baked into every page this tool produces.
Why the exported page has zero external dependencies
Every style is written inline inside a single <style> block, and there are no linked stylesheets, external fonts, or third-party scripts anywhere in the output. That self-containment is what makes the generated file genuinely portable, it can be uploaded to GitHub Pages, Netlify, any static file host, or even opened directly as a local file on your own computer, and it will render identically every time with zero additional setup, no build step, no dependency to fetch, no configuration required beyond having the one HTML file itself. The avatar circle is also just a CSS gradient and a single letter, not an uploaded image, so there's no separate image asset to host or link to either.
Frequently Asked Questions
Why does the live preview not need HTML escaping while the exported file does?
The live preview builds elements with textContent, which the browser always treats as inert text. The exported file is assembled as a literal HTML string that becomes a real standalone page once saved, so unescaped input could inject unintended markup into your own generated page, which is why escaping happens specifically at export time.
What happens if I type something that doesn't look like a valid link?
The generated link falls back to a plain # href instead of using your unrecognized text as the link target. A # link simply does nothing when clicked, a safer outcome than embedding arbitrary unvalidated text directly into a link attribute.
Do I need to type "https://" for every link?
No, a bare domain like example.com is recognized and automatically gets https:// prepended. Only text that doesn't match either a full URL or a domain-like pattern falls back to the safe placeholder link instead.
Why does every link include rel="noopener noreferrer"?
Without it, a link opening in a new tab could let that new page's JavaScript access and redirect your original tab, a known technique called tabnabbing. noopener blocks that access, and noreferrer also stops your bio page's address from being sent to the destination site.
Can I host the exported page on any free static hosting service?
Yes, the generated file has no external stylesheets, fonts, or scripts, everything is self-contained in one HTML file. It works identically on GitHub Pages, Netlify, any static host, or even opened directly as a local file with no extra setup.
How is this different from the Social Bio Generator tool?
This tool builds an actual clickable webpage with a button for every link, the kind of page you'd put in an Instagram or TikTok bio field. The Social Bio Generator instead writes short bio text and captions, it doesn't produce a hostable page.