Browser-native language Readable in. Native out.

Interfaces,
stitched ahead
of time.

A typed, indentation-first language for browser interfaces. Readable source, focused DOM updates, and a browser-native boundary.

Explore the playground Inspect the compiler

Compile modelAhead of time

Compiler coreRust

Public boundaryWeb Components

NBuild graphcounter.needle

01Needle source

state count = 3
button "+" on click:
  count += 1

02Compiler

Parse & analyzeBuild component graphGenerate focused output

NEEDLE

03Browser output

Web Components Incremental updates Zero required runtime

Typed syntaxReal interfaces.

Same source.
Faster tomorrow.

Build successful42msA more delightful web ♥

Needle Studio

A little source. Something you can touch.

Ncounter.needleexample

Change count to 12, run the example, then try the counter.

Source Original example

Ln 1, Col 1Tab leaves editor · Ctrl / ⌘ + Enter runs

Illustrative output · not compiler-produced

Example ready2 state slots · 1 text binding

Browser demo · not the production Rust compilerSource drafts stay in this browser.

See the idea. Inspect the work. Preview a fixture, follow its effect plan, then read the illustrative JavaScript.

How the compiler is designed

01 Language surface

Friendly to read.
Precise underneath.

Needle keeps the component legible without making the compiler guess. Types, identity, lifetimes, and browser boundaries stay visible in the source.

One file, one readable unit

State, structure, behavior, and styles stay close enough to understand.

The syntax is compact, but the important decisions do not disappear into convention or compiler magic.

typed stateexplicit eventsscoped styles

counter.needlesource sketch

component Counter as counter-view:
  state count i32 = 3

  view:
    output {count}
    button "Increase" on click:
      count += 1

  style:
    radius 24px

Planned, not diffed

Bindings become exact browser operations.

Changing count already knows which text node should move.

count → output.textContent

Browser-shaped output

Needle ends at standards you already know.

Custom Elements, static CSS, declarations, and maps remain inspectable.

<counter-view>

Runtime by evidence

Helpers appear only when a feature proves it needs them.

No universal client engine is assumed by default.

features → helpers

Readable source.needle

→

Typed programRust AST

→

Known effectsDOM plan

→

Ordinary filesJS · CSS · DTS

02 Ahead of time

A soft surface over a
hard compiler.

The friendly syntax sits on a deliberate Rust pipeline. Needle reads the whole component, proves what it can, and leaves the browser with a concrete plan.

needlecIllustrated Rust pipeline

design walkthroughtarget/browser

Stage 01 / Parse

Rust reads structure, not a template string.

Indentation, directives, and declarations become a typed syntax tree with precise source spans for diagnostics.

Binding1 dependencycount

Effect1 known writetextContent

Boundary1 custom elementcounter-view

↯

Direct updates

Text, attributes, classes, styles, and lists receive purpose-built operations.

◇

Readable artifacts

Generated JavaScript, CSS, declarations, and maps remain ordinary project files.

◎

Stable boundary

Custom Elements let Needle live beside another stack—or outlast it.

03 Working patterns

The important ideas,
in language sketches.

Explore the intended shape of Needle’s core surface: explicit identity, visible lifetimes, scoped styling, and optional Rust through a typed boundary.

Pattern 01 / Typed state

State stays beside the view.

1 state slot1 text edge1 listener

state.needle

Identity

Keys are a language decision.

Collections preserve the nodes that should survive, rather than relying on an incidental loop shape.

Lifetime

Cleanup belongs beside creation.

Requests, subscriptions, effects, and branches carry a visible disposal path.

Boundary

Interop is explicit.

Props, events, slots, and Rust calls cross typed boundaries you can inspect.

04 Intricacies

The details are part of the design.

Advanced mechanics stay available when an application needs them, without crowding the first ten lines of a component.

SourceStatic analysisBrowser work

Fine-grained dependency plansState changes already know their destination.

Each binding creates a compiler dependency edge. Emitted code runs only the operations attached to that edge.

count → value.textContent

Keyed collection identityLists preserve the nodes that should survive.

Keys are language syntax rather than a loose convention, giving the compiler a stable reconciliation path.

key task.id → node record

Resource cleanupAsync work owns an abort and disposal path.

Requests, subscriptions, and effects connect to component and branch lifetimes during compilation.

branch leaves → abort()

Scoped style outputLocal source still becomes ordinary CSS.

Selectors are rewritten into stable local output that remains understandable in browser tooling.

.card → .n-card_k7m2

Web Component contractsProps and events cross a platform boundary.

Public props, attributes, methods, slots, and events compile into a documented Custom Element contract.

<search-box value="needle">

05 Project updates

Follow the thread.

Compiler notes, language sketches, and the next thing worth trying. A small update when there’s something to share.

Language & compiler notesNew examples to exploreEarly design discussions

Interfaces,
stitched ahead
of time.

Needle Studio

Friendly to read.
Precise underneath.

State, structure, behavior, and styles stay close enough to understand.

Bindings become exact browser operations.

Needle ends at standards you already know.

Helpers appear only when a feature proves it needs them.

A soft surface over a
hard compiler.

Rust reads structure, not a template string.

Direct updates

Readable artifacts

Stable boundary

The important ideas,
in language sketches.

State stays beside the view.

Keys are a language decision.

Cleanup belongs beside creation.

Interop is explicit.

The details are part of the design.

Follow the thread.

A few useful shortcuts.

Start with the original?

Interfaces,stitched aheadof time.

Needle Studio

State, structure, behavior, and styles stay close enough to understand.

Bindings become exact browser operations.

Needle ends at standards you already know.

Helpers appear only when a feature proves it needs them.

Rust reads structure, not a template string.

Direct updates

Readable artifacts

Stable boundary

Keys are a language decision.

Cleanup belongs beside creation.

Interop is explicit.

The details are part of the design.

Follow the thread.

Interfaces,
stitched ahead
of time.