lynx-examples

What the examples cover

This repository is a collection of examples for Lynx, the cross platform UI framework from the Lynx family. The README's main job is to list the examples rather than explain the framework, so the value here is as a browsable catalog of working code. The examples are grouped into a few categories. There is a Benchmarks group that contains 7guis, the well known seven benchmarks, covering a counter, a temperature converter, a flight booker, a timer, CRUD, a circle drawer, and a cells example. There is a Tutorials group with a minimal hello world, a gallery tutorial that shows discoverPage, a bankcards tutorial, a composing elements example for ReactLynx, and a design guide example. The largest group is Builtin Elements, which walks through the framework's own components one by one: blur-view, event, image, list, scroll-view, text, text-composition, view, frame, page, refresh, scroll-coordinator, viewpager, title-bar-view, native-element, input, textarea, overlay, animax, svg, video, and markdown. Each entry is a small project you can open and run, which makes the repository a practical reference when you are unsure how a specific Lynx element behaves. The grouping also helps a newcomer learn in a sensible order, starting from hello world and moving toward individual elements.

Styling and layout samples

Beyond elements and tutorials, the repository includes a Styling group that shows how to apply visual rules in Lynx. The README lists animation examples, general CSS examples, layout related styling, global CSS usage, CSS Modules, and PostCSS usage. These cover the main ways a Lynx app can be styled, from plain style objects through to module scoping and a PostCSS pipeline. For a developer coming from web development, the CSS Modules and PostCSS entries are the most directly familiar, while the layout examples show how Lynx handles the box and flex behavior that drives screen arrangement. The presence of both a css-global example and a css-modules example is useful because it demonstrates the scoping choice explicitly rather than leaving it implicit. The animation examples round out the group by showing motion without requiring a separate library. Taken together, the styling samples answer the common questions a UI builder asks after learning the elements: how do I position things, how do I keep styles from leaking between components, and how do I add motion. Because each sample is a standalone example in the tree, a reader can copy the relevant one into a new project as a starting point. Keeping these samples separate from the element catalog also means a designer can study layout in isolation before mixing it with component logic.

How to use the catalog

The README presents the examples as a flat list with links, and the intended use is to open the one that matches the feature you are working on. Since the repository is a set of example projects rather than a single app, you typically clone it and navigate to the subdirectory you need, then follow that example's own setup. The hello world and the tutorial entries are the right starting point for someone new to Lynx, because they show the smallest working surface before the larger element catalog. The built in elements group is the reference to keep open while building a real interface, since it maps almost one to one with the components Lynx exposes. The benchmarks group is more of a self test of the framework's capabilities than something you would copy into an app, but it is a good way to compare Lynx against the standard 7guis tasks. The Apache-2.0 license makes the code safe to reuse in your own projects, including commercial ones, as long as the attribution and license notice are kept. The TypeScript primary language fits Lynx's ReactLynx approach, where components are written in a TypeScript and JSX style. For a team evaluating Lynx, this repository is the fastest way to see real, runnable code for each part of the framework before committing to a build setup.

Editorial conclusion

The examples are published under the Apache-2.0 license and target the TypeScript based Lynx framework.