Your first run

From zero to an app running on your phone. You need a browser and a few minutes; a phone is optional but worth it — seeing your code run natively on a real device is the point of LeCodes.

Create a project

Open the editor and sign in — no card, no downloads, no local setup. Create a new project and you're looking at the whole workflow already: your project's TypeScript on one side, a live preview of the app on the other.

Make it yours

Replace the project code with the smallest possible app — it's running right here, in the phone next to you:

TypeScript

const screen = UIScreen([
  UIText("Hello, LeCodes!").style({ color: "white", fontSize: 28, fontWeight: 700 }),
]).style({ bgColor: "black", p: 24, pt: "max(safe-top, 24px)" })

screen.open()

Run the preview and the screen appears. Three things just happened that are worth noticing:

UIScreen, UIText came from nowhere — no imports. The whole SDK is global; the build injects what you use and strips what you don't. More on this in Anatomy of a project.
The compiler packed your TypeScript into a single portable bundle in well under a second.
The preview is the real runtime — the same bundle that runs on phones, compiled to run in your browser. It's not a mockup of the app; it is the app.

Now make it interactive — a counter, straight from the UI element model. The button in the phone really clicks:

TypeScript

let taps = 0
let label: UIText

const screen = UIScreen([
  label = UIText("Taps: 0").style({ color: "white", fontSize: 24, fontWeight: 700 }),
  UIButton([ UIText("Tap").style({ color: "white" }) ])
    .style({ bgColor: "#FF4032", borderRadius: 12, p: 16, alignSelf: "flex-start" })
    .onClick(() => { label.text = `Taps: ${++taps}` }),
]).style({ bgColor: "black", p: 24, pt: "max(safe-top, 24px)", gap: 16 })

screen.open()

No JSX, no virtual DOM, no re-render cycle: elements are plain objects, and you update the app by mutating them (label.text = …).

Open it on your phone

Publish the project — the editor gives you a link and a QR code. Install the LeCodes app on your phone (see Downloads), scan the code, and your app opens natively: no WebView, the same engines that render the preview running directly on the device.

From here the loop is: edit in the browser, publish, reopen on the phone. And once you want to live in your own editor, the CLI has lecodes dev — hot reload over your local network — but you don't need it for a first project.

The AI assistant

The editor has an assistant that writes and edits project code from a description. What makes it unusual is that it sees the result: LeCodes can render an app headlessly in milliseconds, so the assistant checks a screenshot and a semantic tree of what its code actually produced, and fixes its own mistakes. Use it as a pair: describe a screen, look at what it built, then read the code — it's a good way to pick up the SDK's idioms.

What's next

Read Anatomy of a project — five minutes that explain the rules everything else assumes. Then pick a track from the overview.