Skip to main content
Build interactive LinkApps for Linktree profiles.

​
What you need

Not sure if you have Node.js? Open your terminal and type node --version. If you see a number like v18.0.0 or higher, you’re good to go!

​
Quick start

Run these 3 commands to create and preview your first LinkApp: 
npx @linktr.ee/create-linkapp my-app
cd my-app
npm run dev
Your browser opens automatically to preview your app.

​
What are LinkApps?

LinkApps appear on Linktree profiles. Instead of a link that takes people away, they can interact right on your Linktree page. Examples:
  • Video players (YouTube, Vimeo, TikTok)
  • Product showcases with prices
  • FAQ sections
  • Contact forms
  • Social media feeds
The difference:
  • Normal link → Click → Leave Linktree
  • LinkApp → Click → Stay and interact

​
Create your first LinkApp

Run this command to start: 
npx @linktr.ee/create-linkapp
You’ll answer 3 quick questions: 
? Project name › my-app
? Initialize git repository? › Yes
? Install dependencies? › Yes
What these mean:
  • Project name - Your app’s folder name (like my-video-player)
  • Git repository - Version control (say Yes)
  • Install dependencies - Download required files (say Yes)
After a minute, you’ll see: 
✔ Created project at /path/to/my-app
✔ Installed dependencies

Success! Created my-app

Get started:
  cd my-app
  npm run dev
New to terminal? No problem!
  • Mac: Press Cmd + Space, type “Terminal”, hit Enter
  • Windows: Press Win + R, type “cmd”, hit Enter
Then copy-paste the commands above.

​
Your project files

Your new project includes:
  • app/expanded.tsx - Your main app layout (start editing here!)
  • linkapp.config.ts - Your app’s name and settings
  • components/ - For reusable UI components
  • app/featured.tsx - Optional hero layout

​
Preview your app

Start the preview: 
cd my-app
npm run dev
Your browser opens showing your app inside a fake Linktree profile. You can:
  • Test light/dark themes
  • See how it looks on different layouts
  • Edit code and see changes instantly
Leave this running! Every time you save your code, the preview updates automatically.

​
Edit your app

Open app/expanded.tsx in your editor and change the text:
app/expanded.tsx
import type { AppProps } from "@linktr.ee/linkapp";

export default function ClassicLayout({ __linkUrl, theme }: AppProps) {
  return (
    <div>
      <h2>👋 Hello!</h2>
      <p>This is my custom LinkApp!</p>
      <a href={__linkUrl}>Visit my website →</a>
    </div>
  );
}
Save the file and watch your preview update instantly!
What’s happening: - __linkUrl - The URL they’ll click to

​
Deploy to Linktree

​
Step 1: Log in

npx @linktr.ee/linkapp login
A browser window opens. Log in with your Linktree account.
You only do this once. Your login is saved.

​
Step 2: Deploy

npm run deploy
This builds your app and uploads it to Linktree. You’ll get a test link: 
✔ Deployed successfully!

  Test link: https://linktr.ee/admin?action=create-link&linkType=my-app
Click the test link to add your app to your Linktree profile!
Your app starts as a DRAFT. Only you can see it. To make it public for all Linktree users, contact Linktree for approval.

​
Add pre-built components

Want buttons, forms, or other UI elements? Add them instantly: 
npx @linktr.ee/linkapp add button
Then use it in your code: 
import { Button } from "@/components/ui/button";

export default function MyApp() {
  return <Button>Click me!</Button>;
}
Available: button, switch (more coming soon!)

​
Next steps

Layouts

Classic vs featured layouts

Configuration

Configure your app settings

CLI Commands

All available commands

Components

Browse UI components

​
Common issues

Preview won’t open?
  • Make sure Node.js 18+ is installed
  • Check nothing else is using port 3001
Changes not showing?
  • Save your file in the editor
  • Check the terminal for errors
Deploy failed?
  • Run npm run build first to check for errors
  • Make sure you ran npx @linktr.ee/linkapp login
Need help?