<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
<a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
<img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
</a>
<div style="display:flex;align-items:center;gap:8px;">
<span style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">tubespanner.com/bio/fluffykiwi</span>
<a href="#" class="btn btn-light" style="font-size:0.8125rem;padding:5px 14px;">View live</a>
<button class="btn btn-primary" style="font-size:0.8125rem;padding:5px 14px;">Save changes</button>
<div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">FK</div>
</div>
</header>
<div class="dashaboard-main">
<div class="app-sidebar-wrapper">
<div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
<ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Ideas</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Discover</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Plan</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Projects</span>
</a>
</li>
<li class="nav-item active">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid var(--primary-color);background:var(--primary-light);color:var(--primary-color);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:700;">
<span style="width:20px;height:20px;border-radius:4px;background:var(--primary-color);flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Growth</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Settings</span>
</a>
</li>
</ul>
</div>
</div>
<div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
<div style="display:grid;grid-template-columns:1fr 380px;gap:0;min-height:calc(100vh - 56px);">
<div style="padding:24px;overflow-y:auto;border-right:1px solid var(--primary-light);">
<div class="card" style="padding:20px;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">Profile</h3>
<div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
<div style="width:64px;height:64px;border-radius:50%;background:var(--primary-color);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Satoshi';font-weight:700;font-size:1.25rem;">FK</div>
<div>
<button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;margin-bottom:4px;">Change photo</button>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">JPG, PNG or GIF. Max 2MB.</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:4px;">Display name</label>
<input type="text" value="My Channel" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:8px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);box-sizing:border-box;">
</div>
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:4px;">Bio</label>
<textarea rows="3" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:8px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);resize:vertical;box-sizing:border-box;">Creator. Sharing tips and tutorials.</textarea>
</div>
</div>
</div>
<div class="card" style="padding:20px;margin-bottom:16px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0;">Links</h3>
<button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;">+ Add link</button>
</div>
<div style="display:flex;flex-direction:column;gap:10px;">
<div style="display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid var(--primary-light);border-radius:6px;padding:10px 12px;">
<div style="width:8px;height:8px;border-radius:50%;background:var(--paragraph);cursor:grab;flex-shrink:0;opacity:0.4;"></div>
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:600;color:var(--title);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Latest Video</div>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">youtube.com/...</div>
</div>
<a href="#" style="font-size:0.75rem;font-weight:600;color:var(--primary-color);text-decoration:none;flex-shrink:0;">Edit</a>
<a href="#" style="font-size:0.75rem;color:var(--paragraph);text-decoration:none;flex-shrink:0;">✕</a>
</div>
<div style="display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid var(--primary-light);border-radius:6px;padding:10px 12px;">
<div style="width:8px;height:8px;border-radius:50%;background:var(--paragraph);cursor:grab;flex-shrink:0;opacity:0.4;"></div>
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:600;color:var(--title);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Follow on Instagram</div>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">instagram.com/...</div>
</div>
<a href="#" style="font-size:0.75rem;font-weight:600;color:var(--primary-color);text-decoration:none;flex-shrink:0;">Edit</a>
<a href="#" style="font-size:0.75rem;color:var(--paragraph);text-decoration:none;flex-shrink:0;">✕</a>
</div>
</div>
</div>
<div class="card" style="padding:20px;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">Appearance</h3>
<div style="display:flex;flex-direction:column;gap:14px;">
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:8px;">Background colour</label>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<div style="width:32px;height:32px;border-radius:50%;background:#7c3aed;cursor:pointer;border:3px solid transparent;box-sizing:border-box;"></div>
<div style="width:32px;height:32px;border-radius:50%;background:#0f172a;cursor:pointer;border:3px solid transparent;box-sizing:border-box;"></div>
<div style="width:32px;height:32px;border-radius:50%;background:#f97316;cursor:pointer;border:3px solid var(--title);box-sizing:border-box;"></div>
<div style="width:32px;height:32px;border-radius:50%;background:#10b981;cursor:pointer;border:3px solid transparent;box-sizing:border-box;"></div>
<div style="width:32px;height:32px;border-radius:50%;background:conic-gradient(red,orange,yellow,green,blue,purple,red);cursor:pointer;border:3px solid transparent;"></div>
</div>
</div>
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:8px;">Button style</label>
<div style="display:flex;gap:8px;">
<div style="flex:1;height:36px;border-radius:6px;border:2px solid var(--primary-color);background:var(--primary-light);cursor:pointer;"></div>
<div style="flex:1;height:36px;border-radius:20px;border:2px solid var(--primary-light);background:#fff;cursor:pointer;"></div>
<div style="flex:1;height:36px;border-radius:0px;border:2px solid var(--primary-light);background:#fff;cursor:pointer;"></div>
</div>
</div>
</div>
</div>
</div>
<div style="background:#f0f0f0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;position:sticky;top:56px;height:calc(100vh - 56px);">
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:12px;text-align:center;">Live preview</div>
<div style="width:220px;height:440px;border-radius:32px;border:6px solid #1a1a1a;background:#f97316;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.25);">
<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:18px;background:#1a1a1a;border-radius:0 0 12px 12px;z-index:2;"></div>
<div style="position:absolute;inset:0;overflow-y:auto;padding:28px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;">
<div style="width:56px;height:56px;border-radius:50%;background:var(--primary-color);border:3px solid rgba(255,255,255,0.5);margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Satoshi';font-weight:700;font-size:1rem;flex-shrink:0;">FK</div>
<div style="font-family:'Satoshi';font-size:0.8rem;font-weight:700;color:#ffffff;margin-bottom:4px;">My Channel</div>
<div style="font-family:'Satoshi';font-size:0.6rem;color:#ffffff;opacity:0.75;margin-bottom:14px;line-height:1.4;">Creator. Sharing tips and tutorials.</div>
<div style="display:flex;flex-direction:column;gap:7px;width:100%;">
<div style="width:100%;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,0.9);font-family:'Satoshi';font-size:0.65rem;font-weight:700;color:#f97316;text-align:center;box-sizing:border-box;">Latest Video</div>
<div style="width:100%;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,0.9);font-family:'Satoshi';font-size:0.65rem;font-weight:700;color:#f97316;text-align:center;box-sizing:border-box;">Follow on Instagram</div>
</div>
<div style="margin-top:14px;font-family:'Satoshi';font-size:0.5rem;color:#ffffff;opacity:0.4;letter-spacing:0.05em;">Made with TubeSpanner</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{! Social Bio editor — split layout: editor left, live preview right }}
<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
<a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
<img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
</a>
<div style="display:flex;align-items:center;gap:8px;">
<span style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">{{pageUrl}}</span>
<a href="#" class="btn btn-light" style="font-size:0.8125rem;padding:5px 14px;">View live</a>
<button class="btn btn-primary" style="font-size:0.8125rem;padding:5px 14px;">Save changes</button>
<div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">{{userInitials}}</div>
</div>
</header>
<div class="dashaboard-main">
{{! Sidebar }}
<div class="app-sidebar-wrapper">
<div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
<ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
{{#each navGroups}}
<li class="nav-item{{#if this.active}} active{{/if}}">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--title){{/if}};text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};">
<span style="width:20px;height:20px;border-radius:4px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">{{this.label}}</span>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{! Main content — two-column editor }}
<div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
<div style="display:grid;grid-template-columns:1fr 380px;gap:0;min-height:calc(100vh - 56px);">
{{! Left — editor panel }}
<div style="padding:24px;overflow-y:auto;border-right:1px solid var(--primary-light);">
{{! Section: Profile }}
<div class="card" style="padding:20px;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">Profile</h3>
<div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
<div style="width:64px;height:64px;border-radius:50%;background:var(--primary-color);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Satoshi';font-weight:700;font-size:1.25rem;">{{userInitials}}</div>
<div>
<button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;margin-bottom:4px;">Change photo</button>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">JPG, PNG or GIF. Max 2MB.</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:4px;">Display name</label>
<input type="text" value="{{bio.displayName}}" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:8px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);box-sizing:border-box;">
</div>
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:4px;">Bio</label>
<textarea rows="3" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:8px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);resize:vertical;box-sizing:border-box;">{{bio.bioText}}</textarea>
</div>
</div>
</div>
{{! Section: Links }}
<div class="card" style="padding:20px;margin-bottom:16px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0;">Links</h3>
<button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;">+ Add link</button>
</div>
<div style="display:flex;flex-direction:column;gap:10px;">
{{#each bio.links}}
<div style="display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid var(--primary-light);border-radius:6px;padding:10px 12px;">
<div style="width:8px;height:8px;border-radius:50%;background:var(--paragraph);cursor:grab;flex-shrink:0;opacity:0.4;"></div>
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:600;color:var(--title);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{this.label}}</div>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{this.url}}</div>
</div>
<a href="#" style="font-size:0.75rem;font-weight:600;color:var(--primary-color);text-decoration:none;flex-shrink:0;">Edit</a>
<a href="#" style="font-size:0.75rem;color:var(--paragraph);text-decoration:none;flex-shrink:0;">✕</a>
</div>
{{/each}}
</div>
</div>
{{! Section: Appearance }}
<div class="card" style="padding:20px;margin-bottom:16px;">
<h3 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">Appearance</h3>
<div style="display:flex;flex-direction:column;gap:14px;">
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:8px;">Background colour</label>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
{{#each bio.colorOptions}}
<div style="width:32px;height:32px;border-radius:50%;background:{{this.color}};cursor:pointer;border:3px solid {{#if this.active}}var(--title){{else}}transparent{{/if}};box-sizing:border-box;"></div>
{{/each}}
<div style="width:32px;height:32px;border-radius:50%;background:conic-gradient(red,orange,yellow,green,blue,purple,red);cursor:pointer;border:3px solid transparent;"></div>
</div>
</div>
<div>
<label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:8px;">Button style</label>
<div style="display:flex;gap:8px;">
{{#each bio.buttonStyles}}
<div style="flex:1;height:36px;border-radius:{{this.radius}};border:2px solid {{#if this.active}}var(--primary-color){{else}}var(--primary-light){{/if}};background:{{#if this.active}}var(--primary-light){{else}}#fff{{/if}};cursor:pointer;"></div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
{{! Right — live preview (phone mockup) }}
<div style="background:#f0f0f0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;position:sticky;top:56px;height:calc(100vh - 56px);">
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:12px;text-align:center;">Live preview</div>
{{! Phone frame }}
<div style="width:220px;height:440px;border-radius:32px;border:6px solid #1a1a1a;background:{{bio.bgColor}};overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.25);">
{{! Notch }}
<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:18px;background:#1a1a1a;border-radius:0 0 12px 12px;z-index:2;"></div>
{{! Bio content }}
<div style="position:absolute;inset:0;overflow-y:auto;padding:28px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;">
{{! Avatar }}
<div style="width:56px;height:56px;border-radius:50%;background:var(--primary-color);border:3px solid rgba(255,255,255,0.5);margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Satoshi';font-weight:700;font-size:1rem;flex-shrink:0;">{{userInitials}}</div>
<div style="font-family:'Satoshi';font-size:0.8rem;font-weight:700;color:{{bio.textColor}};margin-bottom:4px;">{{bio.displayName}}</div>
<div style="font-family:'Satoshi';font-size:0.6rem;color:{{bio.textColor}};opacity:0.75;margin-bottom:14px;line-height:1.4;">{{bio.bioText}}</div>
{{! Links }}
<div style="display:flex;flex-direction:column;gap:7px;width:100%;">
{{#each bio.links}}
<div style="width:100%;padding:8px 12px;border-radius:{{../bio.buttonRadius}};background:{{../bio.buttonColor}};font-family:'Satoshi';font-size:0.65rem;font-weight:700;color:{{../bio.buttonTextColor}};text-align:center;box-sizing:border-box;">{{this.label}}</div>
{{/each}}
</div>
{{#if bio.watermark}}
<div style="margin-top:14px;font-family:'Satoshi';font-size:0.5rem;color:{{bio.textColor}};opacity:0.4;letter-spacing:0.05em;">Made with TubeSpanner</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
{
"userInitials": "FK",
"pageUrl": "tubespanner.com/bio/fluffykiwi",
"navGroups": [
{
"label": "Dashboard",
"active": false
},
{
"label": "Ideas",
"active": false
},
{
"label": "Discover",
"active": false
},
{
"label": "Plan",
"active": false
},
{
"label": "Projects",
"active": false
},
{
"label": "Growth",
"active": true
},
{
"label": "Settings",
"active": false
}
],
"bio": {
"displayName": "My Channel",
"bioText": "Creator. Sharing tips and tutorials.",
"bgColor": "#f97316",
"textColor": "#ffffff",
"buttonColor": "rgba(255,255,255,0.9)",
"buttonTextColor": "#f97316",
"buttonRadius": "6px",
"watermark": true,
"links": [
{
"label": "Latest Video",
"url": "youtube.com/..."
},
{
"label": "Follow on Instagram",
"url": "instagram.com/..."
}
],
"colorOptions": [
{
"color": "#7c3aed",
"active": false
},
{
"color": "#0f172a",
"active": false
},
{
"color": "#f97316",
"active": true
},
{
"color": "#10b981",
"active": false
}
],
"buttonStyles": [
{
"radius": "6px",
"active": true
},
{
"radius": "20px",
"active": false
},
{
"radius": "0px",
"active": false
}
]
}
}
Bio page editor — split layout with editor panel on the left and a live phone preview on the right. Creators manage their links, profile, and appearance here. Free: 1 page (watermarked), Core: 1 page, Pro: 3 pages. This is the primary focus for the next improvement sprint. Appears in: /dashboard/bio-pages.