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() → use scanCodeV2(); liff.getLanguage() → use getAppLanguage(); liff.permanentLink.createUrl() → use createUrlBy() (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
1---2name: line-liff3description: Comprehensive reference for LINE Front-end Framework (LIFF) SDK — building web apps inside LINE with authentication, messaging, QR scanning, permanent links, pluggable SDK, and LIFF plugin development. This skill should be used when the user asks to "build a LIFF app", "initialize liff.init()", "send messages from LIFF", "use Share Target Picker", "scan a QR code in LIFF", "create a permanent link", "develop a LIFF plugin", or mentions LIFF SDK, LINE Front-end Framework, CDN/npm integration, pluggable SDK tree-shaking, LIFF-to-LIFF transitions, LIFF browser vs external browser, Endpoint URL configuration, or server-side ID token verification from LIFF. Always use this skill whenever the user mentions LIFF, web apps inside LINE, or LINE Front-end Framework, even if they don't explicitly say "LIFF SDK".4---5
6# LINE LIFF (Front-end Framework)
7
8**Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.**
9
10Reference for building, reviewing, and debugging LIFF web apps inside LINE.
11
12## Workflow
13
14### Build
151. Read [references/guidelines.md](references/guidelines.md) (registration, endpoint URL rules, environment compatibility)
162. Load the relevant reference for the feature being implemented
173. For architecture or design choices, consult [references/experts.md](references/experts.md) for directional guidance
184. Write code following specs and constraints from references
19
20### Review / Debug
211. Read [references/guidelines.md](references/guidelines.md) (URL constraints, authentication flow, API availability)
222. Load relevant references for the code being reviewed
233. Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
244. For design pattern concerns, consult [references/experts.md](references/experts.md)
255. Report violations with reference to specific constraints
26
27## Environment Variables
28
29```
30LIFF_ID=LIFF app ID (from LINE Developers Console)
31LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
32LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
33CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)
34```
35
36## SDK
37
38Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.
39
40SDK installation, CDN/npm setup, pluggable SDK → **[references/api.md § Pluggable SDK](references/api.md)**
41
42## Initialization
43
44```javascript
45liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
46 .then(() => { /* use LIFF APIs */ })
47 .catch(err => console.error(err.code, err.message));
48```
49
50- Must be called before all LIFF APIs (except pre-init methods)
51- `withLoginOnExternalBrowser: true` — auto-trigger login in external browser
52- `liff.ready` — Promise that resolves when init completes
53
54## Getting Started
55
561. Create a **LINE Login channel** in [LINE Developers Console](https://developers.line.biz/console/)
572. Add a **LIFF app** and set the **Endpoint URL** (HTTPS required)
583. Integrate SDK, call `liff.init()`
594. Or scaffold with `npx @line/create-liff-app` (React/Vue/Svelte/Next.js/Nuxt/vanilla)
60
61## API Reference
62
63Complete API reference (methods, parameters, scopes, availability matrix) → **[references/api.md](references/api.md)**
64
65## View Sizes
66
67| Type | Coverage |
68|------|----------|
69| Full | 100% screen |
70| Tall | ~75% |
71| Compact | ~50% |
72
73## Key Constraints
74
75- **Endpoint URL**: `liff.init()` only works at or below the registered Endpoint URL
76- **URL handling**: modify URLs only after `liff.init()` resolves
77- **Universal Links**: use `https://liff.line.me/{liffId}` as primary entry point
78- **Token security**: send raw ID Token to server for verification, never expose decoded token → see [server-auth.md](references/server-auth.md)
79- **Login behavior differs**: auto in LIFF browser, manual in external browser
80- **Deprecated APIs**: `liff.scanCode()` → use `scanCodeV2()`; `liff.getLanguage()` → use `getAppLanguage()`; `liff.permanentLink.createUrl()` → use `createUrlBy()` (may be removed in v3)
81
82## Reference Index
83
84| File | Topic |
85|------|-------|
86| [references/api.md](references/api.md) | LIFF v2 API complete reference, pluggable SDK modules, error codes |
87| [references/guidelines.md](references/guidelines.md) | Registration, endpoint URL rules, authentication flow, UI/UX, environment compatibility |
88| [references/navigation.md](references/navigation.md) | LIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization |
89| [references/plugins.md](references/plugins.md) | LIFF plugin development, hooks system, official plugins (Inspector, Mock) |
90| [references/server-api.md](references/server-api.md) | LIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete) |
91| [references/server-auth.md](references/server-auth.md) | Server-side ID Token (JWT) verification |
92| [references/cli.md](references/cli.md) | LIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok |
93| [references/experts.md](references/experts.md) | LIFF domain experts for architecture guidance |
94
95## SDK & Tools
96
97- **npm**: [@line/liff](https://www.npmjs.com/package/@line/liff)
98- **Pluggable SDK**: `@line/liff/core` + individual modules
99- **Official plugins**: [@line/liff-inspector](https://www.npmjs.com/package/@line/liff-inspector) | [@line/liff-mock](https://www.npmjs.com/package/@line/liff-mock)
100- **LIFF CLI**: [CLI tool](https://developers.line.biz/en/docs/liff/cli-tool-introduction/) (create, serve, deploy, HTTPS dev server)
101- **Create LIFF App**: `npx @line/create-liff-app` — scaffolding (React/Vue/Svelte/Next.js/Nuxt/vanilla, JS/TS)
102- **LIFF Playground**: [liff-playground.netlify.app](https://liff-playground.netlify.app/) — online API testing
103- **Starter app**: [line/line-liff-v2-starter](https://github.com/line/line-liff-v2-starter) (vanilla/Next.js/Nuxt)
majiayu000