line-liff
LINE LIFF (Front-end Framework)
Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.
Reference for building, reviewing, and debugging LIFF web apps inside LINE.
Workflow
Build
- Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
- Load the relevant reference for the feature being implemented
- For architecture or design choices, consult references/experts.md for directional guidance
- Write code following specs and constraints from references
Review / Debug
- Read references/guidelines.md (URL constraints, authentication flow, API availability)
- Load relevant references for the code being reviewed
- Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
- For design pattern concerns, consult references/experts.md
- Report violations with reference to specific constraints
Environment Variables
LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)
SDK
Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.
SDK installation, CDN/npm setup, pluggable SDK → references/api.md § Pluggable SDK
Initialization
liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
.then(() => { /* use LIFF APIs */ })
.catch(err => console.error(err.code, err.message));
- Must be called before all LIFF APIs (except pre-init methods)
withLoginOnExternalBrowser: true— auto-trigger login in external browserliff.ready— Promise that resolves when init completes
Getting Started
- Create a LINE Login channel in LINE Developers Console
- Add a LIFF app and set the Endpoint URL (HTTPS required)
- Integrate SDK, call
liff.init() - Or scaffold with
npx @line/create-liff-app(React/Vue/Svelte/Next.js/Nuxt/vanilla)
API Reference
Complete API reference (methods, parameters, scopes, availability matrix) → references/api.md
View Sizes
| Type | Coverage |
|---|---|
| Full | 100% screen |
| Tall | ~75% |
| Compact | ~50% |
Key Constraints
- Endpoint URL:
liff.init()only works at or below the registered Endpoint URL - URL handling: modify URLs only after
liff.init()resolves - Universal Links: use
https://liff.line.me/{liffId}as primary entry point - Token security: send raw ID Token to server for verification, never expose decoded token → see server-auth.md
- Login behavior differs: auto in LIFF browser, manual in external browser
- Deprecated APIs:
liff.scanCode()→ usescanCodeV2();liff.getLanguage()→ usegetAppLanguage();liff.permanentLink.createUrl()→ usecreateUrlBy()(may be removed in v3)
Reference Index
| File | Topic |
|---|---|
| references/api.md | LIFF v2 API complete reference, pluggable SDK modules, error codes |
| references/guidelines.md | Registration, endpoint URL rules, authentication flow, UI/UX, environment compatibility |
| references/navigation.md | LIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization |
| references/plugins.md | LIFF plugin development, hooks system, official plugins (Inspector, Mock) |
| references/server-api.md | LIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete) |
| references/server-auth.md | Server-side ID Token (JWT) verification |
| references/cli.md | LIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok |
| references/experts.md | LIFF domain experts for architecture guidance |
SDK & Tools
- npm: @line/liff
- Pluggable SDK:
@line/liff/core+ individual modules - Official plugins: @line/liff-inspector | @line/liff-mock
- LIFF CLI: CLI tool (create, serve, deploy, HTTPS dev server)
- Create LIFF App:
npx @line/create-liff-app— scaffolding (React/Vue/Svelte/Next.js/Nuxt/vanilla, JS/TS) - LIFF Playground: liff-playground.netlify.app — online API testing
- Starter app: line/line-liff-v2-starter (vanilla/Next.js/Nuxt)
More from abgne/line-dev
messaging-api
Comprehensive reference for LINE Messaging API — webhook setup, message sending, Flex Message design, Rich Menu management, audience targeting, insights, coupons, and channel access tokens. This skill should be used when the user asks to "build a LINE Bot", "set up a webhook", "send a push message", "design a Flex Message", "create a Rich Menu", "manage audience targeting", "get messaging insights", "create a coupon campaign", "debug webhook signature verification", or mentions LINE Messaging API, LINE OA chatbot, reply/push/multicast/narrowcast/broadcast, Flex Message JSON, Rich Menu, group chat bot, channel access token, or URL schemes. Always use this skill whenever the user mentions LINE bots, chatbots, LINE OA, or any messaging-related LINE integration, even if they don't explicitly say "Messaging API".
47line-login
Comprehensive reference for LINE Login (OAuth 2.1) — authorization code flow, PKCE, token management, ID token JWT verification, user profiles, bot linking, and login button design. This skill should be used when the user asks to "implement LINE Login", "add Log in with LINE", "set up OAuth authorization flow", "verify an ID token", "refresh an access token", "link a bot to login", "design a login button", or mentions LINE Login, OAuth 2.1, PKCE, authorization code flow, ID token JWT verification, token refresh/revocation, user profile retrieval, bot linking, SSO login, LIFF authentication, or LINE MINI App authentication. Always use this skill whenever the user mentions LINE authentication, social login with LINE, or OAuth flows involving LINE, even if they don't explicitly say "LINE Login".
27line-notification-message
Reference for LINE Notification Messages — phone-number-based messaging to non-friends, template type (premade layouts) and flexible type (custom Flex Message), delivery completion webhooks, user consent flow, SMS authentication, and billing. Use when the user asks to "send a notification message via phone number", "hash a phone number for PNP", "handle delivery completion webhook", "set up template or flexible notification", "check notification message count", "integrate LON", or mentions LINE notification messages, LINE Official Notification (LON), PNP push, phone-number-based delivery, hashed phone number, notification template, delivery completion event, consent states, or SMS authentication for notifications. Always use this skill whenever the user mentions LINE notification messages, PNP, LON, LINE Official Notification, LINE 通知型訊息, or phone-based LINE messaging to non-friends, even if they don't explicitly say "notification message".
21line-mini-app
Comprehensive reference for LINE MINI App — Service Messages, Common Profile Quick Fill, In-App Purchase, Console setup (3 internal channels), submission review, and performance guidelines for web apps running inside LINE as an enhanced LIFF platform. This skill should be used when the user asks to "build a LINE MINI App", "send a service message", "set up Common Profile Quick Fill", "implement in-app purchase", "configure MINI App Console", "submit MINI App for review", or mentions LINE MINI App, Service Messages, notification token, Common Profile, IAP purchase flow, 3 internal channels, consent simplification, Custom Path, custom share messages, or verified vs unverified MINI App. Always use this skill whenever the user mentions LINE MINI App, mini apps in LINE, or enhanced LIFF features like service messages or in-app purchase, even if they don't explicitly say "MINI App".
16line-creators-market
Comprehensive reference for LINE Creators Market — sticker character design (static, animated, custom, message, big, popup, effect stickers), emoji series planning, theme creation, technical specifications, review guidelines, submission workflow, revenue model, AI usage declaration, and market strategies for Japan, Taiwan, Thailand, and global audiences. This skill should be used when the user asks to "design a LINE sticker character", "plan an emoji series", "create a LINE theme", "check sticker submission specs", "understand review guidelines", "optimize sticker SEO", "plan market strategy for LINE stickers", "calculate creator revenue", or mentions LINE stickers, LINE emoji, LINE themes, Creators Market, sticker submission, sticker review, sticker pricing, sticker rejection, APNG animated stickers, creator revenue sharing, LINE Sticker Premium, LINE Sticker Maker, custom stickers, message stickers, big stickers, popup stickers, effect stickers, or AI-generated stickers. Always use this skill whenever the user mentions LINE stickers, LINE emoji, LINE themes, sticker creation, or LINE Creators Market, even if they don't explicitly say "Creators Market".
10