Lynx API Docs - Engine AI Context Bundle

Install Into Another Project

Use the npm CLI package to vendor this engine docs bundle into another project and inject a managed reference block into that project's root AGENTS.md. The package is intended to be consumed by upstream DSL framework skills or agents rather than directly by end developers.

npx @lynx-js/lynx-api-docs install

Optional flags:

• --project <path>: target another project root
• --dest <path>: override the default install location .ai/lynx-api-docs
• --dry-run: preview file changes without writing
• --no-link: skip linking to project-local agent skill directories
• --link-claude: link the skill to <project>/.claude/skills/
• --link-codex: link the skill to <project>/.codex/skills/
• --link-trae: link the skill to <project>/.trae/skills/
• --link-all: link the skill to all known project-local agent directories (default)
• --skills-dir <path>: link the skill to a custom directory

The CLI copies this engine context bundle into the target project and adds a compact AGENTS.md pointer so agents can retrieve the detailed references on demand. By default, it also links the installed skill into .claude/skills/, .codex/skills/, and .trae/skills/; use --no-link to skip those links.

This package is an AI context bundle, not a traditional JavaScript or native runtime API reference. It documents the public Lynx surface shipped in this repository.

This is the Lynx engine documentation entry point for upstream DSL framework skills and agents. It contains public documentation for CSS, layout, elements, patterns, examples, and best practices.

Public Surface

This package documents only the public Lynx surface. Use the public element references included in the package instead of relying on undocumented tags or host-specific behavior.

Quick Start

• Quick reference - Frequently used CSS properties and value types
• Best practices - Performance guidance and development recommendations

Layout Systems

Lynx provides four layout systems:

1. Linear layout - The default and most efficient layout, suitable for simple lists
2. Flex layout - CSS Flexbox, suitable for complex flexible layouts
3. Grid layout - A subset of CSS Grid, suitable for two-dimensional layouts
4. Relative layout - A Lynx-specific system for layouts based on relative constraints

CSS Reference

• Supported CSS properties - Complete property list
• Selectors - Supported selector types
• Values and units - Supported value and unit types
• Pseudo-classes and pseudo-elements - Supported pseudo-classes

Lynx-Specific Features

• Lynx and Web CSS differences - Differences from standard CSS
• Unsupported features - CSS features that Lynx explicitly does not support
• Migration guide - Migrating from the Web platform to Lynx

Elements

• page element - Page root, CSS rem reference root, and layout root
• view element - General-purpose container for layout wrappers and visual styles
• text element - Text rendering, nested text composition, and truncation
• image element - Bitmap loading, placeholders, and animated-image playback control
• list element - Large data sets, list-item structure, and scroll-threshold events
• input element - Single-line input, text selection, and confirm actions
• scroll-view element - General-purpose scroll container, scroll events, and scrolling methods
• scroll-coordinator element - Public coordinated header/content scrolling, collapse events, and scrolling methods
• svg element - Native SVG rendering and Serval-mode considerations
• textarea element - Multiline input, row limits, and text methods
• blur-view element - Public blur container, iOS material effects, and Android automatic-update control
• refresh element - Public pull-to-refresh container, refresh header, and refresh-state events
• viewpager element - Public paging container, page-change events, and selectTab
• overlay element - Public overlay container, show/dismiss events, and platform overlay capabilities
• webview element - Native WebView loading, message bridging, and method-based control

Styling Patterns

• Theming - CSS custom properties and theme switching
• Responsive design - Adapting to different screen sizes
• Animation - Animations and transitions

Layout Examples

• Card list - A common card-list layout
• Sticky header - A header that remains fixed while scrolling
• Bottom navigation - Navigation fixed to the bottom edge
• Sidebar layout - Sidebar and main content
• Masonry-style layout - A two-column Grid approximation of masonry placement

Usage Recommendations

As Context for an AI Coding Agent

const loadContext = (intent: string) => {
  const base = load('quick-reference.md');

  switch (intent) {
    case 'layout':
      return base + load('layout/' + layoutType + '.md');
    case 'element':
      return base + load('elements/' + elementName + '.md');
    case 'migration':
      return base + load('lynx-vs-web/migration-guide.md');
    default:
      return base + load('best-practices.md');
  }
};

Context Size

• Quick reference: ~8 KB - Frequently used value types and properties
• One layout system: ~8 KB - Detailed layout guidance and examples
• Complete context: All documentation, loaded on demand

Key Points

1. Layout selection: Use Linear for simple lists, Flex for complex layouts, and Grid for two-dimensional layouts.
2. Default behavior: An element with no display declaration uses Linear Layout by default, and text content must be placed in a <text> element.
3. Box model: box-sizing initially uses auto, normally with border-box sizing. Set an explicit value for configuration-independent sizing. Margins do not collapse.
4. Recommended units: Use rem and vw for screen adaptation. rpx is Lynx-specific and fully supported, but is not Web-compatible.
5. Performance first: Minimize nesting, use CSS classes, and avoid dynamic layout changes.
6. Element selection: Read the corresponding element reference before using platform-specific capabilities.

Feedback and Updates

This context bundle evolves with Lynx releases and developer feedback.