N Language — VS Code Extension v2.5.0

The official VS Code extension for N Language. Write complete, dynamic, beautiful websites using a single clean syntax that compiles to HTML, CSS, and JavaScript.

What is N Language?

N Language is a programming language for the web. Instead of writing HTML, CSS, and JavaScript separately, you write everything in one .n file — and N Language compiles it to a valid, production-ready HTML document.

head { title = "My Portfolio" }

vars {
  primary: "#7c3aed"
  bg:      "#09090b"
}

style { theme = black }

class btn {
  background-color = "var(--primary)"
  color            = "white"
  padding          = "12px 24px"
  border-radius    = "8px"
  border           = "none"
  cursor           = "pointer"
}

body {
  section {
    section.padding.text-align = "80px 24px, center"

    heading = "Hello World"
    heading.font-size.font-weight.color = "64px, 900, white"

    button = "Get Started"
    button.use = "btn"
    button.onclick-href = "/about"
  }
}

One file. One command. Full website.

Installation

Open VS Code
Press Ctrl+P (or Cmd+P on Mac)
Type ext install iamristaf.n-language
Press Enter

Or search "N Language" in the VS Code Extensions panel.

Keyboard Shortcuts

Shortcut	Action
`Ctrl+Shift+R`	Export to HTML and open in browser
`Ctrl+Shift+P`	Open live preview panel
`Ctrl+Shift+B`	Compile to HTML (save to dist/)

How to Write N Language

1. File Structure

Every .n file follows this structure. Blocks you don't need can be omitted.

head { }       // Page title, meta tags
vars { }       // CSS variables
style { }      // Theme and global styles
links { }      // External CSS/JS/fonts
class name { } // Reusable CSS classes
body { }       // All your HTML content
scripts { }    // JavaScript (N Logic Engine)

2. Head Block

head {
  title = "My Website"
  meta.charset = "UTF-8"
  meta.viewport = "width=device-width, initial-scale=1.0"
  meta.description = "My awesome website"
  meta.og-title = "My Website"
}

3. Variables

Define CSS custom properties in vars {}. Use them anywhere with var(--name).

vars {
  primary: "#7c3aed"
  bg:      "#09090b"
  text:    "#ffffff"
  muted:   "#a1a1aa"
}

Use them in your body:

heading.color = "var(--primary)"

4. Themes

Apply a complete design system in one line:

style {
  theme = black    // dark background, purple accent
}

Available themes: black, white, purple, blue, green, red, orange, pink

Themes automatically set CSS variables for background, surface, text, border, primary color, and border radius. You can use var(--bg), var(--text), var(--primary), var(--border), etc. immediately.

5. Links — External CSS, JS, and Fonts

links {
  font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  css  = "https://cdn.tailwindcss.com"
  js   = "https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"
}

6. CSS Classes

Define reusable CSS classes. Use them anywhere with .use.

class btn {
  background-color = "var(--primary)"
  color            = "white"
  padding          = "12px 24px"
  border-radius    = "8px"
  border           = "none"
  cursor           = "pointer"
  font-weight      = "600"
  transition       = "opacity 0.2s"
}

Apply it:

button = "Click Me"
button.use = "btn"

7. Body — HTML Elements

Every HTML element has a simple syntax: elementName = "content".

body {
  heading   = "My Title"
  paragraph = "Some text here."
  button    = "Click Me"
  image     = "https://example.com/photo.jpg"
  link      = "Visit Google"
}

Element aliases you can use:

N Language	HTML Output
`heading`	`<h2>`
`paragraph`	`<p>`
`button`	`<button>`
`image`	`<img>`
`link`	`<a>`
`container`	`<div>`
`section`	`<section>`
`card`	`<div>`
`row`	`<div>`
`grid`	`<div>`
`nav`	`<nav>`
`footer`	`<footer>`
`hero`	`<section>`
`sidebar`	`<aside>`
`input`	`<input>`
`textarea`	`<textarea>`
`select`	`<select>`
`form`	`<form>`
`table`, `thead`, `tbody`, `tr`, `th`, `td`	Standard table tags
`ul`, `ol`, `li`	List tags
`video`, `audio`, `iframe`	Media tags

8. CSS Properties

Apply CSS directly using dot notation. Single property:

heading.color = "red"
heading.font-size = "48px"
heading.font-weight = "900"

Multiple properties in one line (values separated by commas):

heading.color.font-size.font-weight = "white, 48px, 900"

The number of values must match the number of properties. If you have 2 properties, provide 2 comma-separated values.

9. Hover and Focus States

button.background-color = "var(--primary)"
button.hover.background-color = "var(--secondary)"
button.transition = "background-color 0.2s"

input.border = "1px solid var(--border)"
input.focus.border = "1px solid var(--primary)"

10. CSS Shorthands

N Language includes 40+ shorthand properties for common patterns:

container.flex-center = ""          // display:flex; align-items:center; justify-content:center
grid.grid-3 = ""                    // display:grid; grid-template-columns:repeat(3,1fr); gap:24px
element.glass = ""                  // glassmorphism effect
element.card-shadow = ""            // subtle card shadow
element.transition-all = ""         // transition:all 0.2s ease
element.rounded-full = ""           // border-radius:9999px
element.full-width = ""             // width:100%
element.overflow-hidden = ""        // overflow:hidden
element.pointer = ""                // cursor:pointer

Full shorthand list: flex-center, flex-col, flex-col-center, flex-between, flex-around, flex-start, flex-end, flex-wrap, grid-2, grid-3, grid-4, grid-auto, grid-center, cover, fixed-full, sticky-top, abs-center, text-truncate, text-break, scroll-smooth, no-scrollbar, reset, sr-only, glass, card-shadow, shadow-lg, transition-all, transition-fast, transition-slow, no-select, pointer, full-width, full-height, full-screen, overflow-hidden, rounded, rounded-full, rounded-lg, border-box, no-border, no-list, no-decoration

11. onclick-href

Make any element navigate to a URL:

button = "Go to About"
button.onclick-href = "/about"

// Works on any element:
card.onclick-href = "/product/1"

For <a> tags, it sets href. For other elements, it uses JavaScript.

12. Nesting

Elements can contain other elements. Just nest them inside {}:

section {
  container {
    container.max-width.margin = "1200px, 0 auto"

    heading = "Features"
    heading.font-size = "48px"

    grid {
      grid.grid-3 = ""

      card {
        card.background-color.padding.border-radius = "var(--surface), 24px, 12px"
        heading = "Feature One"
        paragraph = "Description here."
      }

      card {
        card.background-color.padding.border-radius = "var(--surface), 24px, 12px"
        heading = "Feature Two"
        paragraph = "Description here."
      }
    }
  }
}

13. Scripts — N Logic Engine

Write interactive JavaScript using the N Logic Engine inside scripts {}:

scripts {
  state count = 0

  when addBtn clicked {
    count += 1
    display.textContent = "Count: " + count
  }

  after 3s {
    log "Still here!"
  }

  fetch "https://api.example.com/users" {
    on success {
      log response
    }
    on error {
      log "Failed to load"
    }
  }
}

Available script keywords:

Keyword	What it does
`state name = value`	Create a reactive variable
`when elemId clicked { }`	Click event listener
`when elemId changed { }`	Input change listener
`when elemId hovered { }`	Hover event listener
`when elemId submitted { }`	Form submit listener
`after 1s { }`	Run code after 1 second
`after 500ms { }`	Run code after 500 milliseconds
`fetch "url" { on success { } on error { } }`	Fetch API call
`if condition { }`	Conditional
`repeat 5 { }`	Loop 5 times
`for item in list { }`	For-each loop
`log value`	Console.log
`alert "message"`	Browser alert
`emit "event-name"`	Dispatch custom event

14. Element IDs

Assign an ID to any element for use in scripts:

heading = "Count: 0"
heading.id = "display"

button = "Add"
button.id = "addBtn"
button.use = "btn"

Then in scripts:

scripts {
  state count = 0
  when addBtn clicked {
    count += 1
    display.textContent = "Count: " + count
  }
}

15. Images

image = "https://example.com/photo.jpg"
image.alt = "A beautiful photo"
image.width.border-radius = "100%, 12px"

16. Forms and Inputs

form {
  input = "name-input"
  input.type = "text"
  input.placeholder = "Your name"

  input = "email-input"
  input.type = "email"
  input.placeholder = "you@example.com"

  textarea = "msg"
  textarea.placeholder = "Your message..."
  textarea.rows = "5"

  button = "Send"
  button.type = "submit"
  button.use = "btn"
}

17. Video and IFrame

video = "my-video"
video.src = "https://example.com/video.mp4"
video.controls = "true"
video.width = "100%"

iframe = "youtube"
iframe.src = "https://www.youtube.com/embed/VIDEO_ID"
iframe.width.height = "100%, 400px"
iframe.frameborder = "0"

18. Tables

table {
  table.width.border-collapse = "100%, collapse"

  thead {
    tr {
      th = "Name"
      th = "Role"
      th = "Status"
    }
  }

  tbody {
    tr {
      td = "Rahul"
      td = "Developer"
      td = "Active"
    }
  }
}

19. Lists

ul {
  li = "First item"
  li = "Second item"
  li = "Third item"
}

ol {
  li = "Step one"
  li = "Step two"
  li = "Step three"
}

20. Complete Website Example

head { title = "My SaaS" }

vars {
  primary: "#7c3aed"
  bg:      "#09090b"
  muted:   "#a1a1aa"
}

style { theme = black }

class btn {
  background-color = "var(--primary)"
  color = "white"
  padding = "12px 28px"
  border = "none"
  border-radius = "8px"
  cursor = "pointer"
  font-weight = "700"
}

class btn-outline {
  background-color = "transparent"
  color = "white"
  padding = "12px 28px"
  border = "1px solid rgba(255,255,255,0.3)"
  border-radius = "8px"
  cursor = "pointer"
  font-weight = "600"
}

body {
  body.background-color.color.font-family = "var(--bg), var(--text), system-ui, sans-serif"

  // Hero
  section {
    section.padding.text-align.min-height.display.align-items.justify-content = "80px 24px, center, 100vh, flex, center, center"

    container {
      container.max-width.margin = "800px, 0 auto"

      heading = "Build websites faster."
      heading.font-size.font-weight.margin-bottom = "clamp(40px,7vw,80px), 900, 16px"

      paragraph = "N Language — one syntax for HTML, CSS, and JavaScript."
      paragraph.color.font-size.margin-bottom = "var(--muted), 18px, 40px"

      row {
        row.display.gap.justify-content = "flex, 12px, center"
        button = "Get Started"
        button.use = "btn"
        button.onclick-href = "https://nlang.in/docs"

        button = "View on GitHub"
        button.use = "btn-outline"
        button.onclick-href = "https://github.com/iamristaf/nlang"
      }
    }
  }

  // Features
  section {
    section.padding = "80px 24px"

    container {
      container.max-width.margin = "1200px, 0 auto"

      heading = "Why N Language?"
      heading.text-align.font-size.margin-bottom = "center, clamp(28px,4vw,44px), 48px"

      grid {
        grid.display.grid-template-columns.gap = "grid, repeat(auto-fit, minmax(280px,1fr)), 24px"

        card {
          card.background-color.border-radius.padding.border = "var(--surface), 12px, 24px, 1px solid var(--border)"
          heading = "One File"
          heading.font-size.margin-bottom = "20px, 8px"
          paragraph = "No more switching between HTML, CSS, and JS files."
          paragraph.color = "var(--muted)"
        }

        card {
          card.background-color.border-radius.padding.border = "var(--surface), 12px, 24px, 1px solid var(--border)"
          heading = "50+ Snippets"
          heading.font-size.margin-bottom = "20px, 8px"
          paragraph = "Type npage, press Tab. Your whole site structure is ready."
          paragraph.color = "var(--muted)"
        }

        card {
          card.background-color.border-radius.padding.border = "var(--surface), 12px, 24px, 1px solid var(--border)"
          heading = "Live Preview"
          heading.font-size.margin-bottom = "20px, 8px"
          paragraph = "Press Ctrl+Shift+P. See your site update instantly as you type."
          paragraph.color = "var(--muted)"
        }
      }
    }
  }
}

Commands Reference

Command	Shortcut	Description
`N Language: Live Preview`	`Ctrl+Shift+P`	Open a live preview panel that updates as you type
`N Language: Export & Open in Browser`	`Ctrl+Shift+R`	Compile and open in your default browser
`N Language: Compile to HTML`	`Ctrl+Shift+B`	Compile and save to `dist/` folder
`N Language: New .n File`	—	Create a new .n file with a full starter template

Settings

Open VS Code Settings and search "N Language":

Setting	Default	Description
`nlang.autoPreview`	`false`	Auto-open preview when a .n file is opened
`nlang.outputDir`	`"dist"`	Output directory for compiled HTML
`nlang.openBrowserOnExport`	`true`	Open browser after export

Snippets Reference

Type any prefix in a .n file and press Tab:

Prefix	What it creates
`npage`	Complete page template
`npage-theme`	Page with built-in theme
`nhead`	Head block
`nvars`	Variables block
`ntheme`	Style theme block
`nlinks`	Links block
`nlinks-tailwind`	Links with Tailwind CSS
`nlinks-bootstrap`	Links with Bootstrap
`nclass`	CSS class definition
`ncomponent`	Reusable component
`nh`	Heading
`nh-styled`	Heading with styles
`np`	Paragraph
`np-styled`	Paragraph with styles
`nbtn`	Button
`nbtn-link`	Button with navigation
`nbtn-styled`	Button with class
`nlink`	Anchor link
`nimg`	Image
`ninput`	Input field
`ntextarea`	Textarea
`nselect`	Select dropdown
`nform`	Full contact form
`ncontainer`	Centered container
`nsection`	Page section
`nhero`	Full hero section
`nnav`	Navigation bar
`nfooter`	Footer
`ncard`	Content card
`ngrid`	CSS Grid
`ngrid2`	2-column grid
`nflex`	Flexbox row
`nflex-center`	Centered flex
`n2col`	Two-column layout
`nhover`	Hover effect
`nanim`	CSS animation
`nresponsive`	Responsive width
`ngrad`	Gradient background
`nscripts`	Scripts block
`nstate`	State variable
`nwhen`	Event listener
`nafter`	Timer event
`nfetch`	Fetch request
`nrepeat`	Repeat loop
`nfor`	For-in loop
`nif`	If condition
`nlog`	Console log
`ntable`	Table
`nol`	Ordered list
`nul`	Unordered list
`nvideo`	Video element
`niframe`	IFrame
`nmodal`	Modal dialog
`ntoast`	Toast notification
`ntestimonial`	Testimonial card
`npricing`	Pricing card
`nfeatures`	3-column features
`ncta`	CTA section
`ncounter`	Interactive counter
`ndark`	Complete dark page
`nportfolio`	Portfolio layout

Common Mistakes to Avoid

Do not put multiple values in a single-property assignment:

// WRONG:
heading.color = "white, red"  // two values for one property

// CORRECT — match properties to values:
heading.color = "white"

// OR use multi-property chain:
heading.color.background-color = "white, red"  // 2 props, 2 values

Always quote values:

// WRONG:
heading.color = white

// CORRECT:
heading.color = "white"

Always close blocks:

// WRONG:
section {
  heading = "Hello"
  // forgot closing brace

// CORRECT:
section {
  heading = "Hello"
}

Resources

License

MIT — free for personal and commercial use.

Made with ❤ by IAMRISTAF