TYPESCRIPT → NATIVE CODE

Write TypeScript.
Run native.

Native logic and views for React Native, written in TypeScript. From compiled functions to SwiftUI and Jetpack Compose.

YOU WRITEmath.lucent.ts

export function square(x: number) {
  return x * x;
}

YOUR APP CALLSApp.tsx

import { square } from './math.lucent';

square(5); // 25. Runs in C++.

iOS + AndroidExpo + React NativeModules through JSI · Views through Fabric

NATIVE VIEWS / NOW IN LUCENT

EXPERIMENTAL

TypeScript logic.
Each platform’s own UI.

like.lucent.tsxEXCERPT

// Shared logic, compiled to C++.
const liked = signal(false);
const toggle = () => liked.set(!liked.get());
const count = () =>
  props.count + (liked.get() ? 1 : 0);

if (PLATFORM === "ios") {
  return (
    <HStack spacing={6} onTapGesture={toggle}>
      <Image systemName={
        liked.get() ? "heart.fill" : "heart"
      } />
      <Text font={Font.headline}>
        {`${count()}`}
      </Text>
    </HStack>
  );
}

return (
  <Row
    horizontalArrangement={
      Arrangement.spacedBy(dp(8))
    }
    verticalAlignment={Alignment.CenterVertically}
    modifier={Modifier.clickable(toggle)}
  >
    <CText text={liked.get() ? "♥" : "♡"}
      fontSize={sp(24)} />
    <CText text={`${count()}`}
      fontSize={sp(17)}
      fontWeight={FontWeight.Bold} />
  </Row>
);

LIVE PREVIEWOne component. Each platform’s own UI.

ONE IMPORT IN REACTApp.tsx

import { Like } from './like.lucent';

<Like count={41} />

Tap the heart to try the interaction.

Write the logic once. Write each platform’s body in JSX. Lucent generates C++ for the logic and Swift or Kotlin for the UI.

Meet native views ↗

Views currently require LUCENT_VIEWS=fabric. The API is experimental and off by default.

01 / HOW IT COMES TOGETHER

One language.
Native all the way down.

Inside the compiler ↗

01 — WRITE

Stay in TypeScript.

Write your module in a checked TypeScript subset. Familiar types, functions, classes, and JavaScript behavior.

02 — COMPILE

Get native C++.

Lucent generates C++20 that builds with your app. Unsupported features surface as clear build-time diagnostics.

03 — CALL

Import. Call. Done.

A typed proxy connects your app to the compiled module through JSI. Synchronous calls return inline.

ONE LANGUAGE. NATIVE ON BOTH SIDES.

.lucent.ts + .lucent.tsx

One source language.

Write native functions and components in TypeScript.

Compiled native logic.

C++20 powers your modules and view logic. JSI connects module calls to React Native.

Each platform’s own UI.

Toolkit JSX becomes SwiftUI or Compose source. Fabric brings your views into the app.

Fits the app you already have.

Find your setup ↗

React NativeBare applications

ExpoDevelopment builds

02 / A FEW GOOD QUESTIONS

Know what
you’re building on.

Is this all of TypeScript?

Lucent compiles a checked subset. Supported features follow JavaScript semantics; unsupported features produce LUCENT diagnostics at build time. Read the language reference →

Does JavaScript run on the native side?

No. Module logic compiles to C++20 and is called through JSI. View logic also compiles to C++; SwiftUI and Compose bodies become Swift and Kotlin, hosted by Fabric.

Can I use it with Expo?

Yes, with an Expo development build. Lucent includes native code, so it requires a native build and does not run in Expo Go.

How does it compare to other native module tools?

Lucent uses a native JSI call path while letting you author modules in TypeScript. Compare with Expo Modules, Nitro, and TurboModules →

YOUR LOGIC. YOUR VIEWS. YOUR LANGUAGE.

Let’s make
it native.

TERMINAL

npm install -D @lucent-lang/lucent
npx lucent init

Node 22.12+ · Native development buildFull setup →

TypeScript logic.Each platform’s own UI.

One language.Native all the way down.