Skip to main content

Your first app

create-kog scaffolds a small but real app (two routes, 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            # <Router> + <Routes>
│   └── screens/
│       ├── Home.tsx       # state, Slider, Switch, navigation
│       └── Settings.tsx   # route params, dark mode
├── board.yaml             # declarative hardware description (not read by the CLI yet)
├── kog.config.ts          # project config (board, simulator size, etc.)
├── tsconfig.json          # strict, with react → @kog/react aliasing preconfigured
└── package.json

It's just React Native​

src/screens/Home.tsx (excerpt)
import { useState } from 'react';
import { View, Text, Slider, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigate } from '@kog/router';

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

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Brightness: {brightness}%</Text>
      <Slider value={brightness} minimumValue={0} maximumValue={100} step={1} onValueChange={setBrightness} />
      <TouchableOpacity onPress={() => navigate('/settings/' + brightness)}>
        <Text>Settings</Text>
      </TouchableOpacity>
    </View>
  );
}

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

Components and React Native APIs come from react-native, hooks from react, and routing from @kog/router. Kog-only widgets, such as the Arc dial, come from @kog/ui. Coming from React Native? Coming from React Native lists every difference. Types, autocomplete, and error squiggles work in any editor with TypeScript support, with zero plugins.

Kog behaves slightly differently from React in a few intentional ways: components run once, there are no stale closures, and state reads after setState see the new value. Read Thinking in Kog once before building anything big. It's the most valuable ten minutes you'll spend in these docs.

Run it​

npm run dev

The simulator opens with your app running. Save any file and it hot-reloads in well under a second. If a flashed board (Flash your board) is plugged in when you start npm run dev, the dev server targets it too and pushes the same bundle there over USB.