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

1. Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
2. Load the relevant reference for the feature being implemented
3. For architecture or design choices, consult references/experts.md for directional guidance
4. Write code following specs and constraints from references

Review / Debug

1. Read references/guidelines.md (URL constraints, authentication flow, API availability)
2. Load relevant references for the code being reviewed
3. Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
4. For design pattern concerns, consult references/experts.md
5. 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](references/api-reference.md)

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 browser
• liff.ready — Promise that resolves when init completes

Getting Started

1. Create a LINE Login channel in LINE Developers Console
2. Add a LIFF app and set the Endpoint URL (HTTPS required)
3. Integrate SDK, call liff.init()
4. 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](references/api-reference.md)

View Sizes

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

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)