N Language

Visit: https://nlang.in/

2.3.0 — The Complete Language

The biggest update in N Language history. v2.3.0 makes N a genuinely complete programming language for the frontend.

Goal 1: HTML Completeness

Every HTML element that has ever existed is now supported in N.

What's new:

All deprecated tags — marquee, blink, center, font, big, acronym, tt, strike, xmp, listing
All HTML5 semantic elements — search, slot, template, noscript, and all existing ones
All SVG elements — svg-path, svg-rect, svg-circle, svg-ellipse, svg-line, svg-polyline, svg-polygon, svg-text, svg-g, svg-defs, svg-symbol, svg-use, svg-clippath, svg-mask, svg-filter, svg-linearGradient, svg-radialGradient, svg-stop, svg-pattern, svg-image, svg-foreignObject
MathML elements — math, math-mi, math-mn, math-mo, math-mrow, math-mfrac, math-msup, math-msub, math-mroot, math-msqrt, math-mtable
All form input types — input-text, input-search, input-url, input-week, input-month, input-datetime, input-image, input-button, input-reset, input-submit
New aliases — btn, flex, flexbox, gridbox, block, text, txt, nav-item, lottie, h-group
Unknown element names now pass through as custom HTML elements (Web Components) Any tag not in the list compiles as-is, enabling all future HTML and Web Components.
rawhtml block remains available as the ultimate escape hatch

Goal 2: CSS Completeness

Every CSS property, at-rule, and feature ever created is now accepted.

What's new:

Open CSS whitelist: any CSS property not in the known list passes through unchecked. This includes experimental properties, vendor prefixes, future CSS, and custom properties. Examples now working: anchor-name, interpolate-size, view-transition-name, content-visibility, field-sizing, offset-path, overscroll-behavior-block.
CSS custom properties (--anything) work in all positions including dot chains.
111 shorthand groups (up from 22 in v1.x.x). 89 new groups added: Flexbox: flex-stretch, flex-baseline, inline-flex, flex-1, flex-auto, flex-none Grid: grid-1, grid-5, grid-6, inline-grid, grid-cols-2/3/4 Position: sticky-top, sticky-bottom, relative, absolute, fixed Display: block, inline, inline-block, hidden, visible, invisible Sizing: full, w-full, h-full, w-screen, h-screen, min-full, square, video-ratio Text: text-center, text-left, text-right, text-justify, uppercase, lowercase, capitalize, italic-text, no-underline, underline, line-through, bold-text, normal-text, light-text Overflow: overflow-hidden, overflow-auto, overflow-scroll, overflow-visible, clip Pointer: pointer, grab, no-pointer, select-none, select-all Border: rounded, rounded-sm, rounded-lg, rounded-xl, rounded-full, no-border Shadow: shadow-sm, shadow, shadow-lg, shadow-xl, no-shadow Transition: transition-all, transition-fast, transition-slow, no-transition Spacing: no-margin, no-padding, no-gap, center-margin List: list-disc, list-decimal, list-none Opacity: opacity-0, opacity-50, opacity-75, opacity-100 Background: bg-cover, bg-contain, bg-center
@layer block: write CSS layers directly in N syntax
@container-query block: container queries in N syntax

Goal 3: JavaScript Completeness

Every JavaScript feature is now available in N. No restrictions. No limitations.

Two new blocks:

js { raw = "..." }

Write any multi-line JavaScript directly. No wrappers, no transformation. Use this for class definitions, complex logic, library integration, anything.

js { raw = "class Store { constructor() { this.items = [] } add(item) { this.items.push(item) } }" } js { raw = "const chart = new Chart(document.getElementById('canvas'), { type: 'bar', data: {...} })" } js { raw = "import('heavy-module.js').then(m => m.init())" }

scripts { ... } — enhanced with full JS passthrough

All existing logic keywords still work (on, when, state, function, call, if, repeat, after, fetch, save to storage, log, show, hide, toggle).

NEW: Any statement that N doesn't recognise is emitted as raw JavaScript. This means you can write any JS expression directly inside scripts {}:

scripts { state count = 0 state items = [] // array literal now supported

when btn clicked {
  count += 1               // operators work
  if count > 10 { ... }
}

// Raw JS expressions pass through:
document.title = "My App"
window.location.href = "/home"
const x = 42
localStorage.clear()
navigator.clipboard.writeText("copied")
history.pushState({}, "", "/new-path")

}

scripts {} compiles to a fully functional runtime:

Reactive state via Proxy — state updates automatically bind to DOM elements
Delegated event handling via addEventListener
Function definitions are hoisted and callable with call
Async/await fully supported
fetch() with success/error handlers
setTimeout for timers (2s → 2000ms, 500ms → 500ms)
localStorage save/restore
Raw JS fallback for everything else

Goal 4: Backwards Compatibility

Every single piece of N syntax from v1.0.0 through v2.2.0 works identically.

All element names work as before
All CSS property chains work
All 22 original shorthands work plus the 89 new ones
vars, keyframes, theme, global, breakpoint blocks unchanged
component, class, import unchanged
state and event planning syntax unchanged
script { raw = "..." } unchanged
rawhtml unchanged
Pseudo-classes, pseudo-elements, breakpoints unchanged
Multi-property chains unchanged
Inline formatters ($b, $i, $c, $kbd...) unchanged
Auto-fix hints still shown alongside every error
Error recovery: all errors collected before reporting

2.2.0 — Deterministic Runtime

VDOM, IRBuilder, Optimizer, hydration markers.

2.1.0 — Core Runtime Stability

NRuntime, reactive state, lifecycle hooks, module resolver.

2.0.0 — N Logic Engine

scripts {} block, N-native logic syntax.

1.1.8 — Production-Ready Frontend DSL

Component system, nested blocks, reusable classes, file imports, 5-stage pipeline.

1.1.7

Explicit styling and aliases.

1.1.6

Reserved keywords, AST validator, GRAMMAR.md.

1.1.5

In-memory compilation.

1.1.3

110+ HTML elements, 200+ CSS properties, 22 shorthand groups.

1.1.0

Built-in compiler, live reload server.

1.0.0

Initial release — syntax highlighting, snippets.

iamristaf