Your first app#

Scaffold a Lynx project, run it on a simulator and make it reactive — in about five minutes.

Prerequisites#

You'll need the toolchain from Installation — run sigx doctor if you're not sure.

Scaffold the app#

Using the CLI#

Terminal 
npm create @sigx@latest hello-lynx -- --template lynx
cd hello-lynx && pnpm install

Run on a simulator#

Terminal 
sigx dev
sigx run:ios        # or run:android

The dev client connects to the dev server — edits hot-reload straight into the simulator.

Your first component#

TSX 
import { component } from 'sigx';
import { View, Text } from '@sigx/lynx';

export const Hello = component(() => {
    return () => (
        <View style={{ padding: 24 }}>
            <Text style={{ fontSize: 24, fontWeight: '600' }}>Hello, Lynx!</Text>
        </View>
    );
});

The same component() you use on the web — only the elements differ: View, Text, Image and friends render to real native views.

Adding reactivity#

TSX 
import { component } from 'sigx';
import { View, Text, Pressable } from '@sigx/lynx';

export const Counter = component(({ signal }) => {
    const state = signal({ count: 0 });
    return () => (
        <View style={{ padding: 24, gap: 12 }}>
            <Text style={{ fontSize: 32 }}>{state.count}</Text>
            <Pressable onPress={() => state.count++}>
                <Text>Tap me</Text>
            </Pressable>
        </View>
    );
});

When state.count changes, only the Text node that reads it updates — the op streams to the main thread and patches one native view.

Next steps#