Vue Lynx
  • English

      • Quick Start

      Welcome to Vue Lynx! Let's create a Vue Lynx project and start developing.

      System Requirements

      • Node.js 18 or later.
        • Requires Node.js 18.19 when using TypeScript as configuration.

      Start Developing

      The quickest way to get started with Vue Lynx is to set up only the frontend project and preview with Lynx Explorer (for native) or Lynx for Web (for browser).

      Create a new Vue Lynx project

      We use create-vue-lynx to scaffold a new project:

      npm
      yarn
      pnpm
      bun
      deno
      npm create vue-lynx@latest

      After completing the prompts, create-vue-lynx will create a folder with your project name containing a starter app.

      Run the dev server

      1. Navigate to the created project:
      cd <project-name>
      1. Install dependencies:
      npm
      yarn
      pnpm
      bun
      deno
      npm install
      1. Start the development server:
      npm
      yarn
      pnpm
      bun
      deno
      npm run dev

      You should see output like this:

      Rspeedy v0.13.5

➜  Web         http://localhost:3000/main.web.bundle
➜  Web Preview http://localhost:3000/__web_preview?casename=main.web.bundle
➜  Lynx        http://localhost:3000/main.lynx.bundle

      The dev server produces three URLs:

      • Web Preview — Open this in your browser for a quick preview of your app.
      • Lynx — The bundle URL for native rendering via Lynx Explorer (see next step).
      • Web — The raw web bundle (useful for integration into web containers).

      Preview on the Web

      Open the Web Preview URL in your browser. You'll see a live preview of your app rendered on the Web, updating automatically as you edit code.

      hello-worldsrc/App.vue

      Preview on a native device

      To see your app rendered natively, use Lynx Explorer. Scan the QR code shown in the terminal, or copy the Lynx bundle URL and paste it into "Enter Card URL" in Lynx Explorer.

      iOS Simulator

      1. Install Xcode from the Mac App Store.

      2. Download LynxExplorer

        For Apple Silicon (M1/M2/M3), download LynxExplorer-arm64.app.tar.gz, then extract:

        mkdir -p LynxExplorer-arm64.app/
tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/

        For Intel Mac, download LynxExplorer-x86_64.app.tar.gz, then extract:

        mkdir -p LynxExplorer-x86_64.app/
tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/

      3. Install on Simulator — Open Xcode, choose Open Developer Tool > Simulator, then drag the .app folder into it.

      Android

      Download the pre-built APK from GitHub Releases and install on your device.

      Community downloads

      Lynx Explorer is also available on the App Store and Play Store, published by community contributors. These versions are not maintained by the Lynx team.

      Build from source

      If the pre-built binaries don't work for your environment, you can build Lynx Explorer from source:

      Debugging

      Download the Lynx DevTool desktop application. Connect your device via USB and start debugging. See the Lynx debugging guide to learn more.

      Going to Production

      The Vue Lynx project you created is a frontend project — it produces JavaScript bundles that a Lynx-enabled native app loads and renders. Lynx Explorer is a pre-built native app for development, but for production you'll need your own native app.

      Start with Sparkling (Experimental)

      Sparkling is TikTok's open-source infrastructure for building apps with Lynx. It provides CLI tools to scaffold a native app project with scheme-driven navigation in minutes. Currently experimental and supports iOS and Android only.

      Integrate into an existing app

      For the most flexibility, you can integrate Lynx directly into your existing app. This approach supports iOS, Android, Harmony, Desktop, and Web, giving you full control over how Lynx is embedded within your application.

      Follow the Lynx integration guide to get started.

      Next Steps