# Lynx Examples: A Practical Tour of Lynx Through 60+ Runnable Projects

> This repository is the official collection of Lynx examples, covering built-in elements, styling, APIs, and third-party integrations. It is the fastest way to evaluate Lynx for your next cross-platform app, but the breadth and lack of depth in some areas require careful selection.

**lynx-family/lynx-examples** — 🚀 Comprehensive Lynx Examples

- Repository: https://github.com/lynx-family/lynx-examples
- Website: https://lynxjs.org/
- Stars: 140 · Forks: 74
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-08-27 · Updated: 2026-08-27 · Language: en
- Canonical page: https://hysenlabs.com/projects/lynx-family-lynx-examples

## What This Repository Actually Provides

Lynx Examples is the official companion repository for the Lynx framework, hosted under the lynx-family organization. It is not a single application but a collection of over 60 individual examples, each in its own directory under examples/. The README groups them into ten categories: Benchmarks, Tutorials, Builtin Elements, Styling, API, Web Platform, UI Components, A11y, Performance, I18n, and Third-party Integrations. The stated purpose is straightforward: to showcase examples of Lynx. For an engineer evaluating Lynx, this is the practical starting point: you can clone the repo, pick an example, and see how a specific feature behaves in a runnable project. The repository is written in TypeScript and licensed under Apache-2.0, which means you can copy code with few restrictions, though you should check the license terms for any notices.

## The Breadth of Built-in Element Examples

The largest category is Builtin Elements, with 22 examples covering everything from basic view and text to more specialized components like blur-view, scroll-coordinator, viewpager, title-bar-view, and animax. Each example is named after the element it demonstrates, such as image, list, scroll-view, and video. This is a deliberate structure: it lets you answer a specific question like 'how do I use a list?' by opening examples/list. The text-composition example is notably detailed, showing how to compose naturally wrapping text with inline text, images, views, and truncation, which is a common pain point in cross-platform UI. However, the README descriptions are terse, often just 'An example shows how to use X'. You will need to read the actual code to understand the nuances. For instance, the scroll-coordinator example likely demonstrates how to coordinate scroll-driven animations, but the README does not explain the mechanism. This is a limitation: the repository assumes you already know what each element is for.

## Styling and CSS: From Global to Tailwind

The Styling category is where the repository shows its depth. It includes examples for animation, CSS, layout, css-global, css-modules, css-postcss, css-preprocessors, and tailwindcss. The css-preprocessors example covers Sass, Less, and Stylus, giving you a direct comparison of how each integrates with Lynx. The tailwindcss example is described as 'A settings UI with runtime theme switching using Tailwind CSS and CSS variables', which is a concrete demonstration of a real-world pattern: dynamic theming. This is valuable because it shows not just that Tailwind works, but how to handle runtime theme changes, a feature that is often tricky in native rendering. The css-modules example is similarly useful for teams that want scoped styles. The presence of these examples suggests that Lynx's styling system is flexible enough to accommodate both classic CSS and modern tooling. However, the repository does not provide a comparison of performance or bundle size between these approaches. You will have to measure that yourself.

## APIs and Advanced Features: Fetch, WebAssembly, and Main Thread

The API category covers fetch, lazy-bundle, external-bundle, element-manipulation, lynx-api, react-apis, main-thread, local-storage, networking, react-lifecycle, and webassembly. The main-thread example is particularly interesting because Lynx uses a separate main thread for UI work, and the example shows how to run scripts on it. This is a core architectural difference from many other cross-platform frameworks. The lazy-bundle example demonstrates code-splitting, with both code-split and standalone builds, which is directly relevant to app startup performance. The webassembly example shows how to run WebAssembly in Lynx, which is a forward-looking feature for compute-heavy tasks. The react-apis example is one of the few with recent releases (version 0.1.7 as of the last push), indicating active maintenance. The presence of these examples tells you that Lynx is not just a UI toolkit but a platform with networking, storage, and code execution capabilities. However, the README gives no details on the APIs themselves. You must run the examples and read the source to learn the exact method signatures.

## Third-party Integrations and the Web Platform

The repository includes integrations with SolidJS, Zustand, TanStack Router, and OpenUI. The with-solidjs example shows that Lynx is not tied to React, despite the ReactLynx branding elsewhere. The zustand example demonstrates state management, and tanstack-router shows routing. These are practical for teams that already use these libraries. The openui example is unusual: it renders streaming OpenUI responses in Lynx, which points to generative UI use cases. The Web Platform category has a single example, basic-usage, which shows how to use Lynx on the web. This is a thin section, and it suggests that web support may be less mature than native. The desktop example in UI Components includes cursor and mouse-cursor entries, indicating desktop support is being explored. The breadth of integrations is a strength, but each integration is a separate example, so you cannot see how they work together. There is no example that combines routing, state management, and a UI library in a single app.

## Running the Examples: Commands and Setup

The README gives a clear three-step process. First, clone the repository with git clone git@github.com:lynx-family/lynx-examples.git. Second, change into the example directory, such as cd examples/image. Third, install dependencies using pnpm or another package manager, then start the project. The README specifically recommends using corepack to enable pnpm: corepack enable, then pnpm i, then pnpm run dev. This is a standard pnpm workflow, and it implies that each example is a separate project with its own package.json. The use of corepack is notable because it ensures a consistent pnpm version across environments. The README also says you can fork the project or copy the code, which is permitted under the Apache-2.0 license. The commands are simple, but they assume you have Node.js and corepack installed. If you use npm or yarn, you will need to adapt the commands, though the package manager should not affect the example logic.

## Limitations: What This Repository Does Not Tell You

The most significant limitation is the lack of documentation beyond the README's one-line descriptions. There are no guides explaining the architecture of each example, no comments in the README about performance characteristics, and no mention of how to debug or profile. The performance-apis example exists, but the README only says it shows how to listen to performance entries. You will not learn how to interpret those entries or what the numbers mean. Another limitation is that the examples are isolated. There is no shared component library or common utilities across examples, so you cannot see how to structure a larger Lynx app. The 7guis benchmark is a notable exception: it implements seven classic GUI tasks in a single example, which gives you a sense of how Lynx handles forms, lists, and interactions in a more integrated way. However, the README gives no results or comparisons, so you cannot judge performance. Finally, the repository has no testing examples. If you are evaluating Lynx for a production app, you will need to look elsewhere for testing patterns.

## Alternatives and How They Differ

The most direct alternative is the official documentation at lynxjs.org, which is linked from the repository's homepage. The documentation likely provides API references and guides that the examples lack. The examples repository complements the docs by showing runnable code, but it does not replace them. Another alternative is the React Native community's example collection, such as the react-native examples in the main repository. The difference is that React Native's examples are part of the core repository, not a separate examples repo, and they are often used for testing the framework itself. Lynx Examples are more like a showcase: they are meant for human consumption, not automated testing. If you need a production-ready template, you might look at the Lynx CLI's template project, though that is not mentioned in the material. The key difference is that this repository is a learning resource, not a starter kit. It shows you the pieces, but you have to assemble them yourself.

## Maintenance, Licensing, and Upgrade Considerations

The repository is not archived, and the last push was in August 2026, which indicates active maintenance. The recent releases of @lynx-example/react-apis (0.1.7) and @lynx-example/react-devtool (0.2.5) suggest that the examples are updated in tandem with the Lynx framework. The Apache-2.0 license allows you to use, modify, and distribute the code, but it requires retaining copyright notices and does not provide patent protection. When copying an example into your project, you should keep the license header if present. The upgrade cost is moderate: because each example is independent, you can update them individually. However, the examples may target specific Lynx versions, so you should check the dependency versions in each package.json before adopting an example. The README does not mention a migration guide, so you will need to rely on the release notes for the Lynx framework itself. The frequent releases of the react-apis example are a good sign, but they also mean that older examples may become stale.

## Conclusion

Adopt lynx-examples if you are evaluating Lynx for a cross-platform app and need a broad, working reference for its built-in elements, styling options, and APIs. The repository is ideal for learning by copying: each example is self-contained, and the README gives explicit clone and run commands. Do not use it as a production template, because several examples are minimal and lack the state management, error handling, and testing you would need in a real app. Before adopting a specific example, verify its dependencies, the Lynx version it targets, and whether the example is actively maintained. The frequent releases of @lynx-example/react-apis and @lynx-example/react-devtool suggest ongoing updates, but check the last commit date for each example you plan to reuse.

## FAQ

### What is lynx-examples and how is it organised?

It is a pnpm workspace of small Lynx applications, one directory per capability, grouped into benchmarks, tutorials, builtin elements, styling, API, web platform, UI components, accessibility, performance, internationalisation, third-party integrations and developer tooling.

### Does lynx-examples have an example for every Lynx builtin element?

It has a separate directory per element, including view, page, frame, image, text, list, scroll-view, input, textarea, refresh, overlay, svg, video, markdown, scroll-coordinator, title-bar-view, viewpager, animax-view, x-webview and native-element, plus an event example for touch behaviour.

### Which CSS toolchains work with Lynx according to lynx-examples?

There are examples for plain CSS, global CSS, CSS Modules, PostCSS, and the Sass, Less and Stylus preprocessors in one directory. A separate Tailwind CSS example is a settings interface with runtime theme switching using Tailwind and CSS variables.

### Can I build a Lynx app without React?

Yes. A vanilla example shows building Lynx apps directly with Element PAPI rather than through React, and there is a separate example for using Lynx with SolidJS, so the React-flavoured API is a layer rather than the only entry point.

### What benchmarks are in lynx-examples?

The 7GUIs benchmark is implemented in full, with Counter, Temperature Converter, Flight Booker, Timer, CRUD, Circle Drawer and Cells. There is also an example for listening to performance entries and one about Instant First-Frame Rendering.

### What do I need to build the lynx-examples workspace?

Node 22 or newer and pnpm at a pinned version, since the engines field requires both. The build runs through turbo across every package, formatting uses dprint via a nano-staged and husky pre-commit hook, and changesets handle versioning.

## Sources

- [Official documentation](https://lynxjs.org/)
- [Official README](https://github.com/lynx-family/lynx-examples#readme)
- [Project repository](https://github.com/lynx-family/lynx-examples)
- [Release notes](https://github.com/lynx-family/lynx-examples/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lynx-family-lynx-examples