Core Concepts

ZhinNX uses a small set of functions. The goal is to make the common path obvious and keep advanced behavior optional.

page()

page() registers a route and a render function.

page('/about', () => `
  <main>
    <h1>About</h1>
  </main>
`)

go()

go() navigates without reloading the page.

go('/about')

action()

action() registers logic that can be called from HTML using @click.

action('save', () => {
  console.log('saved')
})

<button @click="save">Save</button>

each()

each() renders arrays safely into HTML strings.

const songs = [
  { title: 'Ocean', artist: 'Nova' },
  { title: 'Redline', artist: 'Vera' }
]

page('/music', () => `
  <main>
    ${each(songs, song => `
      <article>
        <h2>${song.title}</h2>
        <p>${song.artist}</p>
      </article>
    `)}
  </main>
`)

createApp()

createApp() connects the runtime to the browser root element. Most generated templates call it from src/main.js.

createApp('#app')

Read the full Runtime API when you need exact signatures.