NX

tasks.nx

type Task = { title:string  done:boolean = false }

let <TaskList tasks:Task+ /> =
  <ul>
    for task in tasks {
      <li checked={task.done}>{task.title}</li>
    }
  </ul>

<TaskList tasks={
  <Task title="Write the docs" done=true />
  <Task title="Ship the site" />
} />

Open in playground ↗

Evaluates to

<ul
  content={<li checked=true content="Write the docs" /> <li checked=false content="Ship the site" />}
/>

Why NX

Markup and logic together

Elements, functions, if and for are all expressions of one language. There is no separate template syntax, and no code-behind file.

Typed all the way through

Records, unions and components are checked before anything runs. A missing property or a misspelled case is a compile error with a precise location.

Runs where your app runs

Evaluate NX from .NET with NxLang.Sdk, or compile it to NX IR in the browser or Node with @nx-lang/sdk-wasm and run it with @nx-lang/ir-runtime.

Good tooling from day one

One compiler powers the language service behind hover, completion and diagnostics, in the editor and in the playground.

See NX draw

NX in the DrawnUI fiddleWrite NX in the browser and watch it render as live, interactive graphics with DrawnUI.

Start here

Getting StartedTry NX, then use it from .NET or JavaScript.

Language TourElements, functions, expressions and types, one page each.

PlaygroundEdit NX in your browser and see what it evaluates to as you type.

ReferenceThe exact rules for every construct.