English (.eng)

Write what you mean. Build what you know.

A programming language where you write plain English that compiles directly to React Native — shipping real iOS and Android apps with zero JSX, zero hooks, and zero accidental complexity.

Install

npm install -g english-lang

Usage

# Scaffold a new project (React Native app + screens/ folder)
engc init my-app

# Compile a single file
engc screens/HomeScreen.eng --out rn/src/

# Compile all .eng files in a directory
engc compile screens/ --out rn/src/

# Watch a directory and recompile on every save
engc watch screens/ --out rn/src/

Example

Write this in screens/HomeScreen.eng:

screen HomeScreen:
    title is "Hello World"

    state:
        message is "Hello!"
        count is 0

    when screen opens:
        set count to 1

    when "Say Hello" is pressed:
        set message to "Hello from English!"

    layout:
        vertical stack spacing 16 padding 16:
            show message as heading
            show count
            button "Say Hello"

Run engc screens/HomeScreen.eng --out rn/src/ and get this:

export function HomeScreen({ navigation }: any) {
  const [message, setMessage] = useState<string>("Hello!");
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    setCount(1);
  }, []);

  const handleSayHello = () => {
    setMessage("Hello from English!");
  };

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'column', gap: 16, padding: 16 }}>
        <Text style={styles.heading}>{message}</Text>
        <Text style={styles.body}>{count}</Text>
        <TouchableOpacity style={styles.button} onPress={handleSayHello}>
          <Text style={styles.buttonText}>Say Hello</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

Project structure

MyApp/                         ← project root (.eng world)
├── package.json               ← compile / watch scripts only
├── screens/                   ← write your .eng files here
│   ├── HomeScreen.eng
│   └── DetailScreen.eng
└── rn/                        ← entire React Native project
    ├── App.tsx                ← auto-generated by engc (navigation wiring)
    ├── src/                   ← auto-generated .tsx (engc output)
    │   ├── HomeScreen.tsx
    │   └── DetailScreen.tsx
    ├── ios/
    ├── android/
    ├── node_modules/
    ├── index.js
    └── package.json

Rules:

• You only ever edit files in screens/ — never touch rn/src/ or rn/App.tsx
• rn/App.tsx is regenerated automatically whenever you add, rename, or remove a .eng file
• rn/src/*.tsx are regenerated automatically on every save

Quick start:

# One command sets everything up: scaffolds RN, installs deps, starts Metro
engc init MyApp

# From inside MyApp/ — Metro + eng watcher in one command
npm run dev

# In a separate terminal — run on device / simulator
cd rn && npx react-native run-ios

Programmatic use

import { compile } from 'english-lang';

const tsx = compile(engSource, 'HomeScreen.eng');

License

MIT