Your first app

create-kog scaffolds a small but real app — two screens, navigation, state, styling, and dark mode — so you can see every core concept working before you write a line.

Project layout

my-app/
├── src/
│   ├── App.tsx            # NavigationContainer + stack
│   └── screens/
│       ├── Home.tsx       # state, Slider, Switch, navigation
│       └── Settings.tsx   # params, dark mode toggle
├── board.yaml             # which hardware you're targeting (optional until you flash)
├── kog.config.ts          # project config (display size for sim, etc.)
├── tsconfig.json          # strict, with react → @kog/react aliasing preconfigured
└── package.json

It's just React

src/screens/Home.tsx (excerpt)

import { useState } from 'react';
import { View, Text, Slider, StyleSheet } from '@kog/ui';
import { useNavigation } from '@kog/ui';

export function Home() {
  const [brightness, setBrightness] = useState(80);
  const nav = useNavigation();

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Brightness: {brightness}%</Text>
      <Slider value={brightness} min={0} max={100} onChange={setBrightness} />
      <Text onPress={() => nav.push('Settings', { from: 'home' })}>Settings →</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 12, justifyContent: 'center' },
  title:  { fontSize: 18, fontWeight: 'bold' },
});

Imports come from react and @kog/ui (or react-native — it's aliased). Types, autocomplete, and error squiggles work in any editor with TypeScript support, with zero plugins.

Kog behaves slightly differently from React in a few deliberate ways — components run once, there are no stale closures, state reads after setState see the new value. Read Thinking in Kog once before building anything big; it's the highest-value ten minutes in these docs.

Run it

npm run dev

The simulator opens with your app running. Save any file — it hot-reloads in well under a second. Plug in a board at any point; the dev server picks it up and pushes the same bundle there too.