The typed frontend surface

​

Endpoint names, path params, and encoding

• URL path params → name the endpoint with {param} segments and declare an input per segment. getPath({ params }) fills them, with the keys typed from the name itself:
  const getPost = query({
    name: "blog/{slug}/review/{review_id}",       // segments chain; no wildcards
    verb: "GET",
    apiGroup: api,
    input: { slug: input.text(), review_id: input.int(), verbose: input.bool() },
    stack: [s.db.get({ table: post, fieldName: "slug", fieldValue: inp("slug"), as: "row" })],
    response: ref("row"),
  });
  
  getPost.getPath({ params: { slug: "hello", review_id: 7 } });
  // → "/api:<canonical>/blog/hello/review/7"
  getPost.toSearchParams({ verbose: true });      // → "verbose=true" (path params dropped)
  
  Every {param} must have a matching input or query() throws — Xano treats an unbound marker as inert route text, so the endpoint would answer on the path and see nothing. Inputs that aren’t in the path (verbose) stay ordinary query-string params. Never interpolate the path by hand: getPath percent-encodes each value, so a ?, # or space stays inside its segment instead of restructuring the URL, and it throws on the two values encoding can’t contain — one holding /, and one that is . or .. (a URL parser drops those before routing, addressing a different endpoint). realtimeChannel() paths work identically, minus the encoding: a channel address is matched literally, not parsed as a URL.
• InferRow<typeof post> → the table’s row type. Rename or retype a column and every consumer breaks at compile time — exactly where you want it.
• InferResponse<typeof someQuery> → the endpoint’s response type, closing the round trip. It auto-derives the common shapes with no codegen: an object-literal response yields those keys, and a query that returns a variable filled by a db op derives that op’s result — the full row for db.add/db.edit/db.patch/db.add_or_edit (→ Row — each binds the full written row rather than null, so it stays non-nullable; a genuine miss throws instead of yielding null — NotFound/404 for edit/patch, a unique-constraint error for add, while add_or_edit upserts and never misses), Row | null for db.get (it binds null on a miss rather than throwing — handle the not-found path), a row list for

​

Inferring the response type

import { listPosts, getPost } from "../xano/index.js";
import type { InferResponse } from "@xanots/sdk";

type Posts = InferResponse<typeof listPosts>;   // Post[]      — derived from the db.query it returns
type Post  = InferResponse<typeof getPost>;      // Post | null — a db.get misses to null

const getPost = query({
  verb: "GET", apiGroup: blog, name: "get_post/{id}",   // one row → address it in the path
  input: { id: input.int({ required: true }) },
  stack: [s.db.query({ table: post, where: expr(col("id"), "=", inp("id")), as: "rows" })],
  // A filtered response is opaque to the static walk, so derivation is `unknown`.
  response: withFilters(ref("rows"), fl.first()),
  responseShape: null as InferRow<typeof post> | null,   // declare the real shape once
});
type MaybePost = InferResponse<typeof getPost>;           // InferRow<typeof post> | null

import { statements } from "@xanots/sdk";

function assertOk(v: string) {                 // no `: Statement[]` annotation
  return statements(s.lambda({ ... }), s.precondition({ ... }));
}

stack: [...assertOk("res"), s.db.add({ table: post, row, as: "created" })],
response: ref("created"),                      // still traced

import { getSnippet } from "../xano/index.js";
import { query, type InferInput } from "@xanots/sdk";

const BASE = "https://your-instance.xano.io";

async function fetchSnippet(id: number) {
  const params = { id } satisfies InferInput<typeof getSnippet>;   // { id: number }
  const res = await fetch(`${BASE}${getSnippet.getPath()}?${query.toSearchParams(params)}`);
  return res.json();
}

​

Bundle size, and the route manifest

xanots routes ./xano/index.ts --emit xano/routes.gen.ts

import { routePath, ROUTES } from "../xano/routes.gen";

fetch(BASE + routePath("GET blog/{slug}", { slug }), {
  method: ROUTES["GET blog/{slug}"].verb,
});

routePath("GET listings");                  // list
routePath("POST listings");                 // create
routePath("PATCH listings/{id}", { id });   // update

import { socketUrl, channelPath } from "../xano/routes.gen";

const ws = new WebSocket(socketUrl("chat", window.XANO_HOST), token);
ws.send(JSON.stringify({ action: "join", channel: channelPath("rooms/{room_id}", { room_id }) }));