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-reference.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-reference.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-reference.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: Builds and debugs LIFF (LINE Front-end Framework) web apps — `liff.init`, login, sendMessages, Share Target Picker, scanCodeV2, requestFriendship, permanent links, permission/scopes, pluggable SDK tree-shaking, LIFF plugins, LIFF Server API, LIFF CLI, and server-side ID token verification. Use when the user mentions LIFF, LIFF SDK, `@line/liff`, web apps inside LINE, Endpoint URL setup, LIFF browser vs external browser, LIFF-to-LIFF transitions, or any liff.* API.4---56# LINE LIFF (Front-end Framework)78**Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.**910Reference for building, reviewing, and debugging LIFF web apps inside LINE.1112## Workflow1314### Build151. Read [references/guidelines.md](references/guidelines.md) (registration, endpoint URL rules, environment compatibility)162. Load the relevant reference for the feature being implemented173. For architecture or design choices, consult [references/experts.md](references/experts.md) for directional guidance184. Write code following specs and constraints from references1920### Review / Debug211. Read [references/guidelines.md](references/guidelines.md) (URL constraints, authentication flow, API availability)222. Load relevant references for the code being reviewed233. 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 constraints2627## Environment Variables2829```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```3536## SDK3738Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.3940SDK installation, CDN/npm setup, pluggable SDK → **[references/api-reference.md § Pluggable SDK](references/api-reference.md)**4142## Initialization4344```javascript45liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })46 .then(() => { /* use LIFF APIs */ })47 .catch(err => console.error(err.code, err.message));48```4950- Must be called before all LIFF APIs (except pre-init methods)51- `withLoginOnExternalBrowser: true` — auto-trigger login in external browser52- `liff.ready` — Promise that resolves when init completes5354## Getting Started55561. 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)6061## API Reference6263Complete API reference (methods, parameters, scopes, availability matrix) → **[references/api-reference.md](references/api-reference.md)**6465## View Sizes6667| Type | Coverage |68|------|----------|69| Full | 100% screen |70| Tall | ~75% |71| Compact | ~50% |7273## Key Constraints7475- **Endpoint URL**: `liff.init()` only works at or below the registered Endpoint URL76- **URL handling**: modify URLs only after `liff.init()` resolves77- **Universal Links**: use `https://liff.line.me/{liffId}` as primary entry point78- **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 browser80- **Deprecated APIs**: `liff.scanCode()` → use `scanCodeV2()`; `liff.getLanguage()` → use `getAppLanguage()`; `liff.permanentLink.createUrl()` → use `createUrlBy()` (may be removed in v3)8182## Reference Index8384| File | Topic |85|------|-------|86| [references/api-reference.md](references/api-reference.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 |9495## SDK & Tools9697- **npm**: [@line/liff](https://www.npmjs.com/package/@line/liff)98- **Pluggable SDK**: `@line/liff/core` + individual modules99- **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 testing103- **Starter app**: [line/line-liff-v2-starter](https://github.com/line/line-liff-v2-starter) (vanilla/Next.js/Nuxt)
kuhaku-lab