OpenTwig is an open source personal link page generator that creates beautiful, customizable "link in bio" pages. Instead of relying on third-party services, users can define their configuration and instantly create a fully functional static site they own and control.
# Create a new project
npx opentwig --init
# Edit the generated config.json with your information
# Then generate your page
npx opentwig
# Or use live preview with interactive editor
npx opentwig --live
OpenTwig now includes a powerful live preview mode with an interactive configuration editor!
# Start live preview with config editor
npx opentwig --live
# Or using npm script
npm run live
Features:
How it works:
npx opentwig --live to start the development serverconfig.jsonCtrl+C to stop the serverdist/ folder is ready for deployment!OpenTwig uses a simple JSON configuration file (config.json) to define your page. Here's the complete configuration structure:
{
"theme": "default",
"url": "https://links.yourwebsite.com",
"title": "Your Name - opentwig 🌿",
"name": "Your Name",
"content": "Hello World! Here is my bio.",
"minify": true,
"avatar": {
"path": "./avatar.png"
},
"links": [
{
"url": "https://twitter.com",
"title": "Twitter"
},
{
"url": "https://instagram.com",
"title": "Instagram"
}
],
"footerLinks": [
{
"title": "Contact",
"url": "mailto:mail@mail.com"
},
{
"title": "Privacy",
"content": "Your privacy policy content here..."
}
],
"share": {
"title": "Your Name - opentwig 🌿",
"url": "https://links.yourwebsite.com",
"text": "Share"
}
}
{
"theme": "default",
"url": "https://links.yourwebsite.com",
"title": "Your Name - opentwig 🌿",
"name": "Your Name",
"content": "Hello World! Here is my bio.",
"minify": true,
"links": [
{
"url": "https://twitter.com",
"title": "Twitter"
},
{
"url": "https://instagram.com",
"title": "Instagram"
}
],
"footerLinks": [
{
"title": "Contact",
"url": "mailto:mail@mail.com"
}
],
"share": {
"title": "Your Name - opentwig 🌿",
"url": "https://links.yourwebsite.com",
"text": "Share"
}
}
| Option | Type | Description |
|---|---|---|
theme | string | Theme name (default, dark, minimal, colorful) |
url | string | Your page URL (for Open Graph and QR codes) |
title | string | Page title (appears in browser tab) |
name | string | Your display name |
content | string | Bio/description text |
minify | boolean | Enable CSS minification (default: true) |
avatar | object | Optional Avatar image configuration |
avatar.path | string | Optional Path to your avatar image (supports PNG, JPG, JPEG, WebP) |
links | array | Array of link objects with url and title |
footerLinks | array | Footer links (can be URLs or modal dialogs) |
share | object | Web Share API configuration |
The avatar feature is completely optional. If you don't include the avatar object in your configuration, no avatar will be displayed on your page.
Supported image formats:
Avatar processing:
avatar.png in the output directoryExample avatar configuration:
{
"avatar": {
"path": "./my-photo.jpg"
}
}
Note: If you don't want an avatar, simply omit the avatar object from your configuration entirely.
OpenTwig includes 4 beautiful themes:
All themes are mobile-responsive and include:
# Show help information
npx opentwig --help
# Create sample config.json
npx opentwig --init
# Generate page from config.json
npx opentwig
# Start live preview with config editor
npx opentwig --live
# Validate config.json
npx opentwig --validate-config
OpenTwig generates the following files in the dist/ directory:
index.html - Main HTML pagestyle.css - Processed and optimized CSSavatar.png - Processed avatar image (only generated if avatar is configured)og-image.jpg - Open Graph image for social sharingqr.svg - QR code for mobile sharingIf you want to contribute to OpenTwig or customize it locally:
# Clone the repository
git clone https://github.com/tufantunc/opentwig.git
cd opentwig
# Install dependencies
npm install
# Test the CLI
npm start -- --help
# Create a sample config for testing
npm start -- --init
# Test the build process
npm start
# Start live preview mode
npm run live
opentwig/
├── src/
│ ├── index.js # Main CLI entry point
│ ├── constants.js # Application constants
│ ├── live-ui/ # Live preview UI
│ │ ├── index.html # Live editor page
│ │ ├── styles.css # Live editor styles
│ │ ├── preview.js # Preview management
│ │ ├── editor.js # Config editor logic
│ │ └── sidebar.js # Sidebar components
│ └── utils/ # Core utilities
│ ├── buildPage.js # Page building logic
│ ├── generateHTML.js # HTML generation
│ ├── generateOGImage.js # Open Graph image creation
│ ├── generateQR.js # QR code generation
│ ├── processCSS.js # CSS processing and optimization
│ ├── startLiveServer.js # Live preview server
│ ├── websocketServer.js # WebSocket handling
│ ├── setupWatcher.js # Config file watcher
│ └── ...
├── theme/
│ ├── default/ # Default theme
│ │ ├── index.js # Theme template
│ │ ├── style.css # Theme styles
│ │ └── components/ # Reusable components
│ ├── dark/ # Dark theme
│ ├── minimal/ # Minimal theme
│ └── colorful/ # Colorful theme
├── .github/ # GitHub templates
│ ├── ISSUE_TEMPLATE/ # Issue templates
│ └── pull_request_template.md # PR template
└── dist/ # Generated output (gitignored)
Since OpenTwig generates static files, you can deploy to any static hosting service:
dist/ folder to a repositorydist/ folderdist/ folder to your serverCheck out these amazing websites created with OpenTwig! These examples showcase sites made with OpenTwig:
Have you created a website with OpenTwig? We'd love to showcase it! You can add your site to our showcase in two ways:
MIT License - see LICENSE file for details
OpenTwig is open source and welcomes contributions from the community! 🎉
good first issue labels - Perfect for newcomers🎃 This repository participates in Hacktoberfest 2025!
hacktoberfest and good first issue labelsWe appreciate all contributors! Contributors will be:
You can validate your configuration file using the CLI option:
npx opentwig --validate-config
--help - Show usage information--init - Create a sample config.json--validate-config - Validate the config.json filebuild - Compile the project filesstart - Run the projecttest - Execute the project testsFAQs
opentwig 🌿 is an open source link in bio page generator.
We found that opentwig demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Company News
Socket is joining the OpenJS Security Stewardship Program to fund Node.js vulnerability research, maintainer remediation, and security releases.
Security News
Two compromised GitHub Actions were re-enabled with malicious tags intact, exposing thousands of downstream repositories to Mini Shai-Hulud.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.