Skip to main content
v0.1·73 built-in elements

Describe UIs faster than
any other language

Newt compiles to canvas, HTML, and JSON — from a syntax you can learn in 5 minutes.

Get StartedView Examples
example.newt
Newt — 8 lines
screen Main {
  column(gap: 16, padding: 24) {
    text("Hello Newt!", fontSize: 24)
    row(gap: 8) {
      button("Click me", fill: #7c3aed)
      button("Cancel", stroke: #e5e7eb)
    }
  }
}
React — 14 lines
function App() {
  return (
    <div style={{display:'flex', flexDirection:'column',
      gap:'16px', padding:'24px'}}>
      <h1 style={{fontSize:'24px'}}>Hello Newt!</h1>
      <div style={{display:'flex', gap:'8px'}}>
        <button style={{background:'#7c3aed',
          color:'#fff'}}>Click me</button>
        <button style={{border:'1px solid #e5e7eb'}}>
          Cancel</button>
      </div>
    </div>
  );
}

Same UI. Less code. No build step.

Everything you need, built in

No plugins, no config files, no dependency hell.

73 Built-in Elements

From box and text to modal, chart, and carousel — every common UI element is a first-class citizen.

Reactive State

Declare state variables and wire onClick handlers. Newt re-renders automatically when state changes.

Multi-Target Output

One .newt file compiles to a GPU-rendered canvas, a static HTML page, or a JSON layout tree.

Canvas IDE

Run newter-compiler serve for a live-reload browser preview. Edit your file, see changes instantly.

VS Code Extension

Full language support: syntax highlighting, completions, diagnostics, hover info, and go-to-definition.

Themes & Components

Define reusable components with parameters. Create theme palettes and apply them with use theme.

See Newt in action

Real examples you can copy and run right now.

let accent = #2563eb;

component StatCard(label, value, color) {
    card(fill: #ffffff, stroke: #e5e7eb, radius: 12, padding: 20)(
        column(gap: 8)(
            text { content: label, fontSize: 12 }
            text { content: value, fontSize: 28, fontWeight: "700" }
        )
    )
}

screen Dashboard {
    column(fill: #f9fafb)(
        header(fill: #ffffff, stroke: #e5e7eb, padding: 16)(
            row(gap: 12)(
                text("Dashboard", fontSize: 20, fontWeight: "700")
                spacer()
                button("Settings", stroke: #e5e7eb, radius: 8)
            )
        )
    )
}

Install in seconds

Pick your preferred method and start building.

cargo install newter-compiler
120+
GitHub Stars
500+
VS Code Installs
58
Built-in Elements
300+
crates.io Downloads