# Lynx Examples
This repository is intended to showcase examples of Lynx.
## List of examples
- Benchmarks
- [`7guis`]: The 7GUIs benchmark — Counter, Temperature Converter, Flight Booker, Timer, CRUD, Circle Drawer, Cells
- Tutorials
- [`hello-world`]: A minimal hello world example
- [`tutorial-gallery`]: An example shows how to use discoverPage
- [`tutorial-bankcards`]: An example shows how to use Lynx in bankcards project
- [`composing-elements`]: An example shows how to composing elements in ReactLynx
- [`design-guide`]: An example demonstrating design with Lynx capabilities
- Builtin Elements
- [`blur-view`]: An example shows how to use `<blur-view>` in Lynx
- [`event`]: An example shows how touch events work
- [`image`]: An example shows how to use images
- [`list`]: An example shows how to use reusable and scrollable container
- [`scroll-view`]: An example shows how to use scrollable container
- [`text`]: An example shows how to use text and inline-text
- [`text-composition`]: An example shows how to compose naturally wrapping text with inline text, images, views, and truncation
- [`view`]: An example shows how to use view
- [`frame`]: An example shows how to use frame
- [`page`]: An example shows how to use page in Lynx
- [`refresh`]: An example shows how to use `<refresh>` in Lynx
- [`scroll-coordinator`]: An example shows how to use `<scroll-coordinator>` in Lynx
- [`viewpager`]: An example shows how to use `<viewpager>` in Lynx
- [`title-bar-view`]: An example shows how to use `<title-bar-view>` in Lynx
- [`native-element`]: An example about using native element in Lynx
- [`input`]: An example shows how to use input
- [`textarea`]: An example shows how to use textarea
- [`overlay`]: An example shows how to use overlay
- [`animax`]: An example shows how to use `<animax-view>` in Lynx
- [`svg`]: An example shows how to use svg
- [`video`]: An example shows how to use `<video>` in Lynx
- [`webview`]: An example shows how to use `<x-webview>` in Lynx
- [`markdown`]: An example showing how to use Markdown
- Styling
- [`animation`]: Examples for using animation
- [`motion`]: Examples for `@lynx-js/motion` and `@lynx-js/motion/mini`
- [`css`]: Examples for using different CSS
- [`layout`]: Examples of the layout related styling
- [`media-query`]: A responsive layout adapting from phones to tablets and large screens with CSS media queries
- [`css-global`]: An example shows how to use global CSS in Lynx
- [`css-modules`]: An example shows how to use CSS Modules in Lynx
- [`css-postcss`]: An example shows how to use PostCSS in Lynx
- [`css-preprocessors`]: An example shows how to use Sass, Less and Stylus in Lynx
- [`tailwindcss`]: A settings UI with runtime theme switching using Tailwind CSS and CSS variables
- API
- [`fetch`]: An example shows how to use fetch API
- [`lazy-bundle`]: An example shows how code-splitting and lazy bundle works, both code-split and built standalone
- [`external-bundle`]: An example shows how to use external bundle in Lynx
- [`element-manipulation`]: An example shows how to manipulate elements in Lynx
- [`lynx-api`]: An example shows how to use Lynx APIs
- [`react-apis`]: An example shows how to use ReactLynx APIs
- [`main-thread`]: An example shows how to use main thread scripts
- [`local-storage`]: An example shows how to use local storage in Lynx
- [`networking`]: An example shows Lynx networking abilities
- [`react-lifecycle`]: An example shows ReactLynx lifecycle
- [`vanilla`]: An example of building Lynx apps directly with Element PAPI
- [`webassembly`]: An example shows how to run WebAssembly in Lynx
- Web Platform
- [`basic-usage`]: An example shows how to use Lynx Web Platform
- UI Components
- [`action-sheet`]: An example shows how to make an ActionSheet
- [`desktop`]: Desktop-oriented cursor demos with `cursor` and `mouse-cursor` entries
- [`lynx-ui-gallery`]: A gallery showcasing Lynx UI components
- [`swiper`]: An example shows how to use main thread script for interaction
- A11y
- [`accessibility`]: An example shows how to make App accessibility
- Performance
- [`performance-apis`]: An example shows how to listen an performance entry
- [`ifr`]: An example about Instant First-Frame Rendering (IFR) in Lynx
- I18n
- [`i18n`]: An example shows how to use i18n in Lynx
- Third-party Integrations
- [`a2ui`]: An example shows how to use A2UI in Lynx
- [`openui`]: An example shows how to render streaming OpenUI responses in Lynx
- [`react-navigation`]: An example shows how to use React Navigation in Lynx
- [`with-solidjs`]: An example shows how to use Lynx with SolidJS
- [`zustand`]: An example shows how to use zustand in Lynx
- [`tanstack-router`]: An example shows how to use TanStack Router in Lynx
- Developer Tooling
- [`react-devtool`]: The Lynx UI gallery with Preact DevTools enabled
- [`with-rspeedy`]: The hello-world example built with the Rspeedy CLI
[`7guis`]: ./examples/7guis
[`a2ui`]: ./examples/a2ui
[`action-sheet`]: ./examples/action-sheet
[`animax`]: ./examples/animax
[`animation`]: ./examples/animation
[`blur-view`]: ./examples/blur-view
[`css`]: ./examples/css
[`css-global`]: ./examples/css-global
[`css-modules`]: ./examples/css-modules
[`css-postcss`]: ./examples/css-postcss
[`css-preprocessors`]: ./examples/css-preprocessors
[`desktop`]: ./examples/desktop
[`design-guide`]: ./examples/design-guide
[`element-manipulation`]: ./examples/element-manipulation
[`event`]: ./examples/event
[`external-bundle`]: ./examples/external-bundle
[`fetch`]: ./examples/fetch
[`frame`]: ./examples/frame
[`hello-world`]: ./examples/hello-world
[`ifr`]: ./examples/ifr
[`image`]: ./examples/image
[`input`]: ./examples/input
[`i18n`]: ./examples/i18n
[`layout`]: ./examples/layout
[`lazy-bundle`]: ./examples/lazy-bundle
[`list`]: ./examples/list
[`local-storage`]: ./examples/local-storage
[`lynx-api`]: ./examples/lynx-api
[`lynx-ui-gallery`]: ./examples/lynx-ui-gallery
[`markdown`]: ./examples/markdown
[`react-apis`]: ./examples/react-apis
[`main-thread`]: ./examples/main-thread
[`media-query`]: ./examples/css/src/media_query/large_screen
[`motion`]: ./examples/motion
[`native-element`]: ./examples/native-element
[`networking`]: ./examples/networking
[`overlay`]: ./examples/overlay
[`openui`]: ./examples/openui
[`page`]: ./examples/page
[`performance-apis`]: ./examples/performance-api
[`react-devtool`]: ./examples/react-devtool
[`react-lifecycle`]: ./examples/react-lifecycle
[`react-navigation`]: ./examples/react-navigation
[`refresh`]: ./examples/refresh
[`scroll-coordinator`]: ./examples/scroll-coordinator
[`scroll-view`]: ./examples/scroll-view
[`svg`]: ./examples/svg
[`swiper`]: ./examples/swiper
[`tailwindcss`]: ./examples/tailwindcss
[`tanstack-router`]: ./examples/tanstack-router
[`text`]: ./examples/text
[`text-composition`]: ./examples/text-composition
[`webview`]: ./examples/webview
[`webassembly`]: ./examples/webassembly
[`textarea`]: ./examples/textarea
[`title-bar-view`]: ./examples/title-bar-view
[`tutorial-gallery`]: ./examples/Gallery
[`tutorial-bankcards`]: ./examples/BankCards
[`composing-elements`]: ./examples/composing-elements
[`vanilla`]: ./examples/vanilla
[`view`]: ./examples/view
[`video`]: ./examples/video
[`viewpager`]: ./examples/viewpager
[`basic-usage`]: ./examples/web-platform
[`with-rspeedy`]: ./examples/with-rspeedy
[`with-solidjs`]: ./examples/with-solidjs
[`zustand`]: ./examples/zustand
[`accessibility`]: ./examples/accessibility
## How to use
1. Clone the repository with SSH (recommended after [connecting to GitHub
with SSH]):
```bash
git clone git@github.com:lynx-family/lynx-examples.git
```
Alternatively, clone with HTTPS:
```bash
git clone https://github.com/lynx-family/lynx-examples.git
```
Then enter the repository root:
```bash
cd lynx-examples
```
2. With Node.js `>=22` installed, enable Corepack and install the workspace
dependencies:
```bash
corepack enable
pnpm install
```
3. Start an example from the repository root. For example:
```bash
pnpm --filter @lynx-example/image run dev
```
See the [contributor guide] for build commands and the full development
workflow.
## How to use examples on the lynx-website
1. Ensure the example has been published to the npm registry. Maintainers
adding a new package must follow the [package publishing guide].
2. Go to the project "packages/lynx-example-packages" directory on the lynx-website.
3. Update packages/lynx-example-packages/package.json dependencies
```json
"dependencies": {
"@lynx-example/xxx": "xxx",
}
```
4. Install dependencies in the lynx-website root directory, then start the
project:
```bash
pnpm install
pnpm run dev
```
5. Use it in your MDX files:
```jsx
import { Go } from "@lynx";
<Go
example="xxx"
defaultFile="src/App.tsx"
img="xxx-example-preview.png"
/>;
```
For more details please see [`<Go/>`](https://github.com/lynx-family/lynx-website/blob/main/src/components/go/README.md)
[contributor guide]: ./CONTRIBUTING.md
[connecting to GitHub with SSH]: https://docs.github.com/en/authentication/connecting-to-github-with-ssh
[package publishing guide]: ./CONTRIBUTING.md#publishing-a-new-package