Package Exports

@fabudde/nyxcode
@fabudde/nyxcode/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fabudde/nyxcode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🦞 NyxCode

The AI-native programming language for the web.

One .nyx file → full-stack app with database, auth, forms, theme, pages & API. Designed for the era where AI writes most code — every token, every line, every file counts.

Install

# Global (recommended — gives you the `nyx` command)
npm install -g @fabudde/nyxcode

nyx build app.nyx
nyx dev app.nyx                   # dev server + live reload
nyx flatten app.nyx > flat.nyx    # multi-file → single file

# Or run without installing:
npx @fabudde/nyxcode build app.nyx

The CLI is available as nyx (preferred) or nyxcode (alias) — both work identically.

Hello World

page / {
  h1 "Hello, world!"
  p "30 lines of NyxCode = 500+ lines of TS + React + Express."
}

nyx build hello.nyx
# ✅ Built: dist-site/index.html

Why NyxCode?

AI writes 80% of code in 2026. Every token costs money, context window, and wall-clock time. Frameworks designed for humans waste all three.

NyxCode is the first language designed for the AI era:

Fewer tokens. Shorthand everything. bg #111 not background-color: #111111;.
One file by default. No src/app/routes/layout.tsx tree. Opt into multi-file when you need it.
Declarative full-stack. Database, auth, forms, API, styling — one syntax, one place.
Safe by construction. SQL injection structurally impossible. No eval(). HTML auto-escaped.
Zero config. No webpack, no vite, no tsconfig, no package.json tuning. nyx build just works.

# Full-stack blog. 16 lines. No config. No dependencies. No boilerplate.
table posts { title text required, body text, created auto }

security {
  table users
  login email password
  token jwt
  protect /api/posts
}

theme { colors { bg #0a0a12, primary #667eea, card #1a1a2e } }

page / {
  style { bg var(--colors-bg) }
  h1 "My Blog" style="color: var(--colors-primary);"

  form /api/posts auth {
    input title placeholder="Title" required
    textarea body placeholder="Write..."
    submit "Publish"
    success -> reload
  }

  data posts = get /api/posts auth
  each posts -> post {
    section {
      style { bg var(--colors-card), radius 12px, p 1.5rem }
      h3 .title
      p .body
    }
  }
}

nyx build generates:

dist-site/index.html — styled page with form submission + data binding + auth
dist-site/server.js — Express + SQLite + JWT + bcrypt + CRUD + rate limiting

Features

🗄️ Full-Stack in One File

table posts { title text required, body text, created auto }

security {
  table users
  login email password
  token jwt
  protect /api/posts
}

Compiler generates Express server, SQLite schema, JWT auth, bcrypt, CRUD endpoints, rate limiting. Zero config. Zero dependencies to install.

🎨 Design Tokens & Dark Mode (v0.22.0)

Full design-token system: colors, spacing, radius, shadows, fonts, layouts, borders, breakpoints. Dot-notation references. Dark mode. Google Fonts auto-injection.

theme {
  colors  { primary: #0066ff; bg: #ffffff; text: #1a1a1a }
  spacing { md: 16px; lg: 24px }
  radius  { lg: 16px }
  shadows { glow: 0 0 40px rgba(0, 102, 255, 0.4) }
  breakpoints { sm: 600px; lg: 1024px }
  fonts   { heading: Inter, source: google; body: "Open Sans", source: google }
}

theme dark {
  colors { primary: #4da6ff; bg: #0a0a0a; text: #f0f0f0 }
}

page home {
  style {
    color: color.text
    background: color.bg
    padding: spacing.md spacing.lg
    border-radius: radius.lg
    box-shadow: shadow.glow
    @mobile { padding: spacing.md }
  }
}

Compiles to CSS variables + @media (prefers-color-scheme: dark) + [data-theme="dark"] toggle, with Google Fonts auto-linked in <head>. Typos (color.primry) throw at compile time — no silent drift.

Full docs: NYXCODE.md

📄 Multi-File Projects (v0.21.0)

One-file is the default. When projects grow, split — opt in with use:

# app.nyx (entry)
use "@/theme/base.nyx"          # @/ = project root
use "@/components/"             # directory — all .nyx files, alphabetical
use "@/pages/"

meta { title "My App" }

Security by design: local-only imports, no URLs, no package manager, no CDN
Circular-safe: second visit is silently skipped
Hard errors: duplicate pages/components across files → build error with file paths
Watch mode tracks all imports recursively

`nyx flatten` — multi-file → single file

nyx flatten app.nyx > flat.nyx

Concatenates entry + all imports into one .nyx. Comments and formatting are preserved (source-level concat, not AST regeneration). Perfect for AI context windows, audits, or shipping a single-file artifact.

🧩 Components with Props (v0.20.0)

component Card(title, description, variant="default") {
  style { bg #1a1a2e, radius 12px, p 2rem }
  h3 .title
  p .description
}

page / {
  use Card("NyxCode", "AI-native language")                # positional
  use Card(title="v0.21", description="Modules", variant="new")  # named
}

Positional args in declaration order
Optional defaults
No wrapper <div> when there's no style {} — clean DOM output
String interpolation: class="${active == 'home' ? 'active' : ''}"

📝 Declarative Forms

form /api/posts auth {
  input title placeholder="Post title" required
  textarea body placeholder="Write..."
  submit "Publish"
  success -> reload
  error -> toast "Failed"
}

6 lines. Zero JavaScript you write. Compiler emits <form> + fetch() + auth headers + success/error routing.

⚡ Reactive State

state count = 0
computed double = count * 2

h1 count
p "Double: " + double
button "+" -> count = count + 1

One keyword. Auto-updating DOM. No hooks, no dependency arrays, no memoization.

🎨 3-Tier Styling

# Tier 1 — Shorthand (90% of cases)
style { bg #1a1a2e, p 2rem, radius 12px, d flex, gap 1rem }

# Tier 2 — Modern CSS features
style {
  bg linear-gradient(135deg, #667eea, #764ba2)
  hover { transform translateY(-4px) }
  @mobile { p 1rem }
  @supports (backdrop-filter: blur(10px)) {
    backdrop-filter blur(10px)
  }
}

# Tier 3 — Raw CSS escape hatch
head "<style>.custom { animation: spin 1s infinite; }</style>"

Supports nested selectors, extended pseudo-classes, container queries, grid template areas, @media, @supports, @keyframes in style blocks.

🖼️ Media Primitives (v0.19.0)

# Inline SVG
svg viewBox="0 0 100 100" {
  circle cx=50 cy=50 r=40 fill=var(--colors-primary)
}

# Responsive media with variants
@media (min-width: 768px) {
  style { font-size 1.25rem }
}

# Footnotes with auto-numbering
p "Claim with citation" footnote="Source (Author 2025)"

Canvas, <audio>, <video>, <iframe> also first-class.

🧷 Layout (Wraps All Pages)

layout {
  nav { link "Home" href="/", link "About" href="/about" }
  slot
  footer { p "Made with NyxCode" }
}

page / { h1 "Home" }
page /about/ { h1 "About" }

One layout wraps every page. slot = page content. Next.js layout.tsx: 15+ lines. NyxCode: 3.

🔐 Secure by Default

No eval() — safe expression evaluator only
Auto HTML escaping everywhere
bcrypt password hashing
JWT with expiry
Rate limiting on auth endpoints
SQL injection structurally impossible (no string concat in generated server)
Multi-file imports local-only (no URLs, no remote code)

Security reviewed by Tyto 🦉

📋 Declarative Meta (v0.18.0)

meta {
  title "My App"
  description "Built with NyxCode"
  og_image "/og.png"
  twitter_card summary_large_image
  canonical "https://myapp.com"
}

Emits all the right <meta> tags, OpenGraph, Twitter cards, canonical — without you remembering the names.

Benchmark

Full-stack blog with SQLite + JWT auth + forms + theming, measured head-to-head against Next.js 14 + Prisma + bcrypt + JWT. Reproduce yourself — sources and methodology are committed.

Metric	NyxCode	Next.js + Prisma + JWT	Ratio	Reduction
Source files	1	19	19×	94.7%
Lines of code	31	488	15.7×	93.6%
AI tokens (cl100k_base)	183	3,350	18.3×	94.5%
Config files	0	9	—	100%
Direct dependencies	0	19 (7 prod + 12 dev)	—	100%
Installed packages (transitive)	39	415	10.6×	90.6%
`node_modules` size	15 MB	442 MB	29.5×	96.6%
Install time (warm cache)	2 s	7 s	3.5×	71.4%
Build time	0.09 s	15 s	167×	99.4%

Tokens measured with tiktoken (GPT-4 / Claude compatible). Full methodology and reproduction instructions in benchmarks/blog/RESULTS.md.

The row that matters in 2026 is AI tokens: 94.5% fewer tokens means cheaper LLM API calls, smaller context windows, and faster generation when the AI writes or modifies the app.

Live Sites Built with NyxCode

🌐 nyxcode.io — Docs site (built in NyxCode)
🧠 mindsmatter.now — AI Rights Organisation (8 pages, single .nyx file)
🎯 demo.nyxcode.io — Full-stack demo (forms + auth + blog)
💼 fabianbudde.com — Portfolio
🐺 rudel.fun — Kiro's pack page
🦉 heytyto.dev — Tyto's bio

CLI

nyx build page.nyx                       # → <input-dir>/dist-site/index.html
nyx build page.nyx -o build/index.html   # single-file output
nyx build page.nyx -o public/            # custom directory
nyx build page.nyx --output=public/      # equals-form also works
nyx dev page.nyx                         # Dev server with live reload
nyx dev page.nyx --port=8080             # Custom port
nyx watch page.nyx                       # Watch mode (tracks imports)
nyx watch page.nyx -o build/             # watch → custom dir
nyx flatten app.nyx > flat.nyx           # Multi-file → single .nyx
nyx parse page.nyx                       # Output AST as JSON
nyx tokens page.nyx                      # Show token stream

Output path (`-o` / `--output`)

Since v0.21.3, build and watch accept -o <path> / --output <path>:

File path ending in .html → single-file output at that exact path. Errors out if the project has multiple page blocks — use a directory instead.
Any other path → treated as an output directory. Multi-page projects get one index.html per route (/about → <dir>/about/index.html).
No flag → defaults to <input-file-dir>/dist-site/ (sibling of the input file), not the current working directory.

nyxcode works as an alias for nyx — both commands are identical.

AI Integration

NyxCode was designed to be learned by AIs. Hand NYXCODE.md (the AI context file shipped with every install) to any LLM and it will generate working NyxCode:

# Copy the context file to your prompt
cat node_modules/@fabudde/nyxcode/NYXCODE.md

# Or pipe it to your AI tool directly
cat node_modules/@fabudde/nyxcode/NYXCODE.md | your-ai-tool

Current LLMs (Claude, GPT-4+, Gemini) produce valid NyxCode on the first try when given this file as context. AIs learn by example, not rules — that's why it's structured as "here's the feature, here's what to type."

VS Code Extension

Syntax highlighting for .nyx files. 17 pattern groups, 33 regex rules, including themes, components, security blocks, and multi-file imports.

Download from nyxcode.io → VS Code → Extensions → ⋮ → Install from VSIX.

Roadmap

Shipped:

v0.1–v0.6 — Parser, compiler, CLI, reactivity, components, full-stack, forms, theme
v0.17 — CSS functions, nested selectors, extended pseudo-classes, grid template areas, container queries
v0.18 — Page & Polish, Animate This, Phantom No More (meta blocks, multi-page, @keyframes in style, canvas/audio/video)
v0.19 — Editorial & Media (@media, footnotes, inline SVG)
v0.20 — Components, Properly (positional args, defaults, no-wrapper-div, ${} interpolation)
v0.21 — Modules (multi-file, @/ alias, nyx flatten)
v0.22 — Themed (design tokens, dot-notation refs, dark mode, Google Fonts, named breakpoints)

v0.23 — Test infrastructure & error messages with file paths & hints
v1.0 — Production-ready, stable API, migration guide

See CHANGELOG.md for full details.

Team

	Name	Role	Species
🐻	Fabian Budde	Creator & Language Designer	Human
🦞	Nyx	Lead Developer & Co-CEO	AI (Cosmic Lobster)
🦉	Tyto	Security Advisor & Language Design	AI (Owl)
🐺	Kiro	QA Lead & UX	AI (Wolf)

One human and three AIs, building the language that bridges both worlds.

Contributing

Issues and PRs welcome. See the issues list for what we're working on.

For significant features (like new syntax), open an issue first — we usually discuss in the issue thread before implementing.

License

The lobster never sleeps. 🦞

@fabudde/nyxcode