#Getting Started with Lynxtron

#Create a Project

It is recommended to quickly create a Lynxtron project by executing the following command:

npm create @lynx-js/lynxtron@latest

yarn create @lynx-js/lynxtron

pnpm create @lynx-js/lynxtron@latest

bun create @lynx-js/lynxtron@latest

deno init --npm @lynx-js/lynxtron@latest

Follow the prompts to create a Lynxtron project.

The generated project includes an AGENTS.md with development and debugging instructions for coding agents. Open the project in your coding agent to get started, or follow the steps below to develop manually.

#Start Development

1. Navigate into your Lynxtron project:

cd <project-name>

2. Install dependencies:

   npm

   yarn

   pnpm

   bun

   deno

   npm install

   yarn install

   pnpm install

   bun install

   deno install

3. Start the application:

   npm

   yarn

   pnpm

   bun

   deno

   npm run dev

   yarn run dev

   pnpm run dev

   bun run dev

   deno run npm:dev

After running, you will see the Hello Lynxtron application launch successfully, as shown below:

#Debug Your Application

The development command uses a DevTool-enabled Lynxtron runtime by default. Keep it running while you debug the main process or Lynx UI.

#Debug with a Coding Agent or the CLI

The agent-lynx CLI exposes the same connection to scripts and coding agents. With the development command still running, you can discover the Lynxtron client, inspect its UI tree, read console output, or capture an annotated screenshot:

npx --yes agent-lynx list-clients
npx --yes agent-lynx snapshot
npx --yes agent-lynx get-console
npx --yes agent-lynx screenshot --annotate -o page.jpeg

agent-lynx includes the official lynx-devtool skill. A coding agent can discover and load its complete instructions directly from the CLI:

npx --yes agent-lynx skills list
npx --yes agent-lynx skills get lynx-devtool

The skill teaches the agent how to select clients and sessions and use DevTool commands for inspection, interaction, logs, sources, and screenshots.

#Debug the Lynx UI with Lynx DevTool

Download and open Lynx DevTool, select the running Lynxtron application, then inspect its elements, console output, and source code.

#Debug Node.js Code with Chrome DevTools

The development command starts the Node.js inspector on localhost:9222.

1. Open chrome://inspect in Chrome.
2. Select Configure... and make sure localhost:9222 is in the target discovery list.
3. Find the Lynxtron process under Remote Target, then select inspect.

#Package Your Application

You can use the following command to package your application:

npm run pack

yarn run pack

pnpm run pack

bun run pack

deno run npm:pack

pack uses the release runtime by default. To create a DevTool-enabled package for local debugging, add this top-level option:

lynxtron:
  runtimeVariant: devtool

Remove this option before distributing the application.

Open the packaged application and connect with Lynx DevTool in the same way as during development.

If the session list is empty on the first CLI connection, quit and restart the app. The CLI enables DevTool when it connects, but existing windows need to be recreated. Run agent-lynx list-clients again after restarting and select the current client address.

If you need to configure some custom parameters, you can modify the electron-builder.yml configuration file.

For detailed configuration parameters of electron-builder.yml, please refer to electron-builder Configuration.