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>
  );
}

What it looks like at scale

Arithmetic

when "Place Order" is pressed:
    set subtotal to price * quantity
    set tax to subtotal * 0.08
    set total to subtotal + tax

Conditions with and / or

when "Submit" is pressed:
    if total is greater than 0 and items has items:
        go to CheckoutScreen passing cart
    otherwise:
        set errorMessage to "Cart is empty"

List chains

when screen opens:
    -- filter, transform, sort — all in one line
    set featured to from products keep only those where inStock is true sort by price ascending take the first 6

Each step chains naturally:

| Step | Meaning | |---|---| | keep only those where condition | filter | | remove where condition | filter out | | get their property | map to a field | | sort by property ascending | sort low → high | | sort by property descending | sort high → low | | take the first N | first N items | | find first where condition | first match |

Error handling

when "Load" is pressed:
    attempt:
        fetch products from "https://api.example.com/products"
            expecting a list of Product
            on success: (data) -> set products to data
    if that fails:
        set errorMessage to "Could not reach the server"
    always after:
        set isLoading to false

Compiles to a proper try / catch / finally block.

Error messages point at the problem

Line 14 — Expected word "is", got "COLON"

  when screen opens
                   ^

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');

With source maps:

import { compileWithSourceMap } from 'english-lang';

const { tsx, map, mapFile } = compileWithSourceMap(engSource, 'HomeScreen.eng');

VS Code extension

Install the bundled extension for syntax highlighting of .eng files. The grammar is generated from the same source-of-truth used by the compiler — keywords are always in sync.

Keywords

english lang english-lang react-native compiler natural-language-programming plain-english dsl programming-language mobile ios android code-generation no-jsx no-hooks typescript low-code

License

MIT