Getting Started

This guide gets you up and running with Zynq in a few steps. Choose your framework below.

Installation

Install the package for your framework. For Vue, @zynq/vue includes @zynq/core as a dependency, so you only need one package.

Vue

pnpm add @zynq/vue

React - planned

pnpm add @zynq/core @zynq/react

Angular - planned

pnpm add @zynq/core @zynq/angular

Vue (available)

Requirements: Vue 3, Vue Router 4+.

1. Define a schema (you can import s from @zynq/vue):

import { s } from '@zynq/vue'

export const urlSchema = {
  page: s.number(1),
  search: s.string(''),
  filters: s.array(s.string(), []),
}

2. Use the composable in a component:

<script setup lang="ts">
import { useZynq } from '@zynq/vue'
import { urlSchema } from './urlSchema'

const { state } = useZynq(urlSchema)
</script>

<template>
  <input v-model="state.search" placeholder="Search" />
  <button @click="state.page = state.page + 1">Next page</button>
</template>

state is reactive and stays in sync with the URL. Changing state.search or state.page updates the query string; using the browser back/forward or opening a link with query params updates state.

See Vue integration for details (adapter, engine, and advanced usage).

React (planned)

Planned: A useZynq(schema) hook that works with React Router. Same @zynq/core schema; state will be synced with the URL via a React Router adapter.

Angular (planned)

Planned: A service or facade that works with Angular Router. Same @zynq/core schema; state will be synced with the URL via an Angular Router adapter.

Core-only usage

If you are not using Vue (and React/Angular bindings are not ready), you can use @zynq/core alone:

• Schema: Use s to define the shape of your URL state (Schema & Codecs).
• Engine: Use ZynqEngine with a custom Router implementation (Engine & Router).

You provide an object that implements Router: getParams(), push(params), replace(params). Then you call engine.parse(), engine.serialize(), and engine.commit() from your app (e.g. in a store or subscription to the router).

Next steps

• Schema & Codecs — Define URL state and available types.
• Engine & Router — How the core syncs state with the URL.
• Vue — Vue 3 integration in detail.