lynx-family/lynx-examples

ملف lynx-family

آخر نشاط مصدر مسجل: ١٦ سبتمبر ٢٠٢٦ في ٠٤:٠٧

آخر تحديث لفهرس SkillsMP: ١٧ أكتوبر ٢٠٢٦ في ٠٠:٠٩

skills مجمعة: ١

نجوم GitHub: ١٤٠
تفرعات GitHub: ٧٤

ملف README للمستودع

مصدر ملف README للمستودع: README.md

قراءة الملف الأصلي

عرض ملف README كاملًا

# 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

جارٍ تحميل ملف README للمستودع…

Skills في هذا المستودع

مطوّرو الويب

١ فئات مهنية · 100% مصنفة

skill

المهنة

الوصف

آخر تحديث

text-composition

مطوّرو الويب

Use when implementing or reviewing ReactLynx content that needs continuous text measurement, natural wrapping, nested text/image/view composition, truncation, vertical alignment, bidirectional text, or language-aware line breaking.

لغة النص الأصلي: الإنجليزية

2026-09-16

عرض ١ من أصل ١ skills مجمعة.

التثبيت بمساعدة مساعد ذكي

انسخ هذا الطلب إلى المساعد الذكي الذي تستخدمه.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/lynx-family/lynx-examples.