Linkleaf Link-in-Bio App Template

Give everyone one page for all their links, like Linktree. People claim a name at /username, then add up to 50 links they can drag into order, hide, or schedule, plus a photo, a bio, and up to eight social icons, with autosave and a live phone preview. Start from eight themes and change the accent color, background, button style, shape, and font; text stays at 4.5:1 contrast whatever they pick. Public pages render on the server with large tap targets for the browsers inside Instagram and TikTok, and every link goes through a server redirect that allows only http, https, and mailto addresses. Owners see page views, link clicks, click-through rate, top links, and top sources over 7 or 30 days, stored as daily counters with no IP addresses. Visitors can report a page, and rate limits cover sign-ups, uploads, and tracking. Try mode opens the editor with sample data and no account, and the draft carries through sign-up. Includes a landing page and five fictional example pages. Built with Layerwise, React, and TanStack Start.

Use Linkleaf to run a link-in-bio site for creators, a community, or any group where each person needs one simple page at /username. Choose Try the editor to build a page with sample data and no account, then sign up to keep the draft and claim a name.

• A landing page with a live username check, five fictional example pages, Try mode with sample data, and sign-up with a password plus sign-in with a one-time email code or a password.
• An editor with autosave and a live phone preview: up to 50 links you can drag, hide, or schedule, a photo and bio, up to eight social icons, and eight themes with custom colors, button styles, and fonts.
• Server-rendered public pages with link preview tags, analytics by day, link, and source with no IP addresses stored, server checks on links and uploads, rate limits, and a Report this page form.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start in src/linkleaf.config.ts, which holds the product name, colors, themes, fonts, reserved usernames, limits, and rate limits; the landing page and public pages follow it. Replace the fictional example pages before launch. When you add a route with a new first path segment, add it to the reserved usernames, and keep new colors going through the theme check and new URLs through the link check.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Add an optional square thumbnail to each link. In a link’s details on the Links tab, add Upload image and Remove, accepting JPG, PNG, or WebP up to 5 MB, resized in the browser to 160×160, checked by its bytes on the server, kept private in Storage, and served through /media/ like avatars. Hide Upload image in Try mode. Show the thumbnail at the left of the link’s button on the public page and in the phone preview, keep the button’s current minimum height, and check the page at phone width.

• Choose Try the editor, add a link, pick Atelier on the Design tab, then choose Sign up and keep this draft and create an account. Claim your name should say Your draft comes with you: 5 links, your design, and your profile, and those should be on your public page after Claim and continue.
• On Claim your name, type try and confirm it says That name is reserved. Try another. Later, on Links, choose Add link, enter a title and javascript:alert(1), and confirm it says Use a link that starts with https://, http://, or mailto:.
• In a private window, open your page with ?utm_source=newsletter on the address and tap a link. It should reach its destination, and in Analytics, Page views and Link clicks should each rise by 1, with the link under Top links and newsletter under Top sources.

New projects on paid plans start private, so turn off Private in the Publish menu before sharing a page. Local and published apps use separate databases, so claim your name again after publishing. Changing a username breaks links already shared and frees the old name for anyone. Analytics has no unique-visitor count and leaves out social icon clicks. Reports wait in the reports table with no admin screen or alert, so review them in Database. Each account gets one page, and per-person custom domains, link thumbnails, self-serve account deletion, and payments are not included.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build a Link in Bio App with AIBuild a link-in-bio app in Layerwise with claimed usernames, server-rendered pages, safe links, readable themes, and analytics that store no IPs.