Nightshift Fiber

The typed API for data apps.

Fiber is the typed React API for building data apps on Nightshift. Write parameterized SQL, get types for free, bind it to charts, and ship a hosted dashboard. Params bind server-side, and the browser never holds a credential.

Get started freeTalk to sales

app/Revenue.tsx@nightshift/fiber

import { useQuery, Metric, LineChart, Grid } from '@nightshift/fiber'
import { revenueByMonth } from './queries'

export function Revenue() {
  const rows = useQuery(revenueByMonth, { region: 'all' })

  return (
    <Grid cols={2}>
      <Metric query={rows} value="total" label="Revenue" />
      <LineChart query={rows} x="month" y="revenue" />
    </Grid>
  )
}

Typed by default

Queries that know their own shape.

Write queries with defineQuery and Fiber generates the result and parameter types, so your charts, tables, and filters are checked end to end.

Result rows and params are fully typed from the SQL
Persistent queries at build time, so raw SQL is never shipped to the browser
Refactor a query and the type errors show you every caller

queries.ts@nightshift/fiber

// types are generated from the SQL
export const revenueByMonth = defineQuery(`
  SELECT month, sum(amount) AS revenue
  FROM orders
  WHERE region = $region
`)

const rows = useQuery(revenueByMonthconst revenueByMonth: Query<{
    month: string;
    revenue: number;
}, { region: string }>, { region })

Compose the dashboard

Filters, charts, and tables that stay in sync.

Shared state drives the whole page. Move a filter and every chart, metric, and table follows, with the selection written to the URL. Real time data hitting your warehouse appears in the app.

useAppState keeps filters in one place, synced to the URL
Charts and tables bind directly to a query result
Three built-in themes, or bring your own tokens

Revenue by regionLiveshared

Net revenue · 24h

€4.28M

EMEAAmericas

Customers

1,284

EMEA share

38%

Avg contract

€61k

A data app on one governed endpoint · hosted, shareable, recorded

Safe by construction

Governed access, credentials kept off the browser.

Every request runs through the same policy as the rest of Nightshift. Members and app tokens read only what they are granted, params bind as typed literals on the server, and a small proxy injects the org token so secrets never ship to the client.

Read-only, grant-scoped queries for members and app tokens
Server-side param binding, so there is no injection surface
Token-injecting proxy keeps credentials out of the browser

app/api/nightshift/route.ts

// Params bind server-side as typed literals. No string building,
// no injection, and members only read what they are granted.
const rows = useQuery(topCustomers, { region, limit: 10 })

// In production, a tiny proxy injects the org token server-side,
// so the browser never holds a credential.
import { handler } from '@nightshift/proxy'
export const POST = handler({ token: process.env.NIGHTSHIFT_TOKEN })

Everything in the box

An API for answers in real time.

Fiber lets you wrangle data and visualize it in a few lines of React code.

Typed queries

defineQuery plus codegen turns your SQL into result and parameter types. Your editor knows the columns before you run it.

Shared URL state

useAppState is one source of truth for filters. Every chart reacts to it, and the URL carries it, so a view is shareable by link.

Charts and tables

BarChart, LineChart, AreaChart, Metric, and DataTable bind straight to a query. No glue, no charting library to wire up.

Writable tables

defineTable gives you ensure, insert, update, and delete over managed tables, mapped to structured endpoints. No raw write SQL.

Live revalidation

A write refetches every mounted query on success, so the dashboard stays in step with the data without a manual reload.

Hosted apps

Publish locks the app to a manifest of vetted queries. An app token can only run what you shipped, nothing else.

Quickstart

From install to live dashboard in a few lines of code.

Add Fiber to any React app, wrap it in the provider, and write your first query. The CLI generates types as you go.

$ npm i @nightshift/fiber

Get started free

main.tsx

import { NightshiftProvider } from '@nightshift/fiber'
import { App } from './App'

createRoot(document.getElementById('root')).render(
  <NightshiftProvider config={{ baseUrl: '/api/nightshift' }}>
    <App />
  </NightshiftProvider>,
)

Ship a governed data app this afternoon.

Spin up a free workspace, connect a source, and build your first dashboard on Fiber in minutes.

Get started free Talk to sales

Want to look first? Take the product tour