Using Lynx API Docs
Overview
Pre-training knowledge is insufficient for Lynx. Lynx is a rendering platform (like a browser) with its own elements, non-standard CSS behavior, unique layout systems, and web-incompatible defaults. Always retrieve from the installed API docs before writing or modifying Lynx page code.
Core Rule
MUST ALWAYS read the relevant API docs BEFORE writing or editing any Lynx code.
Do not rely on web CSS knowledge. Do not assume standard HTML behavior. Do not guess element APIs. Lynx is a distinct platform with its own rules.
Why Web Knowledge Fails
Lynx is not a web browser. Web assumptions produce broken Lynx code:
- Elements:
<view>, <text>, <image> — not <div>, <span>, <img>
- CSS defaults:
border-box, no margin collapsing, Linear layout (not Flow)
- Properties: Many CSS properties are unsupported or behave differently — always check
css/ docs
Every web assumption is a potential bug.
How to Use the Docs
- Identify what you're working on (layout, CSS, element, migration, pattern)
- Look up the relevant doc file from the table below
- Read the doc BEFORE writing or editing code
- Apply the rules and constraints from the doc
- If uncertain, search the
elements/ or css/ directories
Quick Reference
| Task |
Read These Files First |
| Choose layout |
layout/linear-layout.md (default), layout/flex-layout.md, layout/grid-layout.md, layout/relative-layout.md |
| CSS properties/units |
css/supported-properties.md, css/values-and-units.md |
| CSS selectors |
css/selectors.md, css/pseudo-classes.md |
| Use an element |
elements/<element-name>.md |
| Migrate from web |
lynx-vs-web/migration-guide.md, lynx-vs-web/css-differences.md |
| Theming/animation/responsive |
patterns/theming.md, patterns/animation.md, patterns/responsive.md |
| General lookup |
quick-reference.md, best-practices.md |
Core Rules
The compact layout decision rules and key CSS constraints are documented in quick-reference.md. Most critical:
- Text must use
<text> component
- Default box-sizing is
border-box (not content-box)
- No margin collapsing
- Use
rem + vw for screen adaptation
Red Flags — Stop and Read Docs
- Adding a
<div> or <span> → Lynx uses <view>, <text>
- Using
margin without checking if margin collapsing applies → It doesn't
- Assuming
content-box → Default is border-box
- Using web CSS properties without checking
css/supported-properties.md
- Guessing element attributes → Read
elements/<name>.md
- Choosing
rpx for web-portable code → rpx is Lynx-specific; use rem + vw for web compatibility
- Writing plain text without
<text> wrapper → Invalid in Lynx
- Using web pseudo-classes without checking
css/pseudo-classes.md
- Assuming standard HTML flow layout → Lynx uses linear layout by default
1---2name: lynx-api-docs3description: Provides authoritative guidance for Lynx development involving pages, templates, components, CSS, layouts, elements, web migration, rendering or styling bugs, and code review. Applies to *.ttml, Lynx *.tsx, and all Lynx-specific files, and requires searching the installed API docs before acting.4---5
6# Using Lynx API Docs
7
8## Overview
9
10**Pre-training knowledge is insufficient for Lynx.** Lynx is a rendering platform (like a browser) with its own elements, non-standard CSS behavior, unique layout systems, and web-incompatible defaults. Always retrieve from the installed API docs before writing or modifying Lynx page code.
11
12## Core Rule
13
14**MUST ALWAYS read the relevant API docs BEFORE writing or editing any Lynx code.**
15
16Do not rely on web CSS knowledge. Do not assume standard HTML behavior. Do not guess element APIs. Lynx is a distinct platform with its own rules.
17
18## Why Web Knowledge Fails
19
20Lynx is **not** a web browser. Web assumptions produce broken Lynx code:
21
22- **Elements**: `<view>`, `<text>`, `<image>` — not `<div>`, `<span>`, `<img>`
23- **CSS defaults**: `border-box`, no margin collapsing, Linear layout (not Flow)
24- **Properties**: Many CSS properties are unsupported or behave differently — always check `css/` docs
25
26**Every web assumption is a potential bug.**
27
28## How to Use the Docs
29
301. Identify what you're working on (layout, CSS, element, migration, pattern)
312. Look up the relevant doc file from the table below
323. **Read the doc BEFORE writing or editing code**
334. Apply the rules and constraints from the doc
345. If uncertain, search the `elements/` or `css/` directories
35
36## Quick Reference
37
38| Task | Read These Files First |
39|------|------------------------|
40| Choose layout | `layout/linear-layout.md` (default), `layout/flex-layout.md`, `layout/grid-layout.md`, `layout/relative-layout.md` |
41| CSS properties/units | `css/supported-properties.md`, `css/values-and-units.md` |
42| CSS selectors | `css/selectors.md`, `css/pseudo-classes.md` |
43| Use an element | `elements/<element-name>.md` |
44| Migrate from web | `lynx-vs-web/migration-guide.md`, `lynx-vs-web/css-differences.md` |
45| Theming/animation/responsive | `patterns/theming.md`, `patterns/animation.md`, `patterns/responsive.md` |
46| General lookup | `quick-reference.md`, `best-practices.md` |
47
48## Core Rules
49
50The compact layout decision rules and key CSS constraints are documented in `quick-reference.md`. Most critical:
51
52- **Text** must use `<text>` component
53- **Default box-sizing** is `border-box` (not `content-box`)
54- **No margin collapsing**
55- **Use `rem` + `vw`** for screen adaptation
56
57## Red Flags — Stop and Read Docs
58
59- Adding a `<div>` or `<span>` → Lynx uses `<view>`, `<text>`
60- Using `margin` without checking if margin collapsing applies → It doesn't
61- Assuming `content-box` → Default is `border-box`
62- Using web CSS properties without checking `css/supported-properties.md`
63- Guessing element attributes → Read `elements/<name>.md`
64- Choosing `rpx` for web-portable code → `rpx` is Lynx-specific; use `rem` + `vw` for web compatibility
65- Writing plain text without `<text>` wrapper → Invalid in Lynx
66- Using web pseudo-classes without checking `css/pseudo-classes.md`
67- Assuming standard HTML flow layout → Lynx uses linear layout by default
lynx-community