Tide Playground

Explore Tide features interactively — pick a scenario, run it, and see the results live.

import { createTide } from "@uikode/tide"

const users = createTide<User[]>({
  key: "users",
  fetcher: () => fetch("/api/users").then(r => r.json()),
  persist: true,       // sessionStorage (default)
  staleTime: 30_000,  // fresh for 30s
})

// First visit: fetches from network
// Revisit within 30s: instant from cache!

import { createTide } from "@uikode/tide"

// v1.1: URL shorthand — no fetcher needed!
const posts = createTide<Post[]>({
  key: "posts",
  url: "/api/posts",          // auto-creates fetcher
  transform: (raw) => raw.data,  // optional transform
  cacheTime: 300_000,
  etag: true,            // 304 Not Modified support
})

// posts.data()       // Post[] | null
// posts.loading()    // true during fetch
// posts.error()      // error message if failed

import { createTide } from "@uikode/tide"

const ticker = createTide<StockPrice>({
  key: "stock-AAPL",
  url: "/api/stock/AAPL",
  wsPath: "price.current",   // v1.1: dot-notation extraction
  hashCompare: true,         // skip if data unchanged
  staleTime: 5_000,
})

// HTTP fetches initial data
// WebSocket pushes live via wsPath
// Auto-reconnect: exponential backoff 1s→30s
// Heartbeat ping every 25s keeps connection alive

import { createTide, prefetch } from "@uikode/tide"

// Warm cache before navigation
function NavLink(props: { href: string; key: string }) {
  return (
    <a
      href={props.href}
      onMouseEnter={() => prefetch(props.key)}
    >
      {props.children}
    </a>
  )
}

// By the time user clicks, data is already cached.

import { createTide } from "@uikode/tide"

const dashboard = createTide<DashboardData>({
  key: "dashboard",
  url: "/api/dashboard",
  staleTime: 15_000,
  cacheTime: 300_000,
  hashCompare: true,   // v1.1: skip re-render if unchanged
  etag: true,          // v1.1: 304 Not Modified
  enabled: () => isLoggedIn(),  // v1.1: reactive toggle
})

// After staleTime: shows cached + revalidates background
dashboard.stale()       // true when showing stale data
dashboard.refreshing()  // true during background refresh

Instant data from sessionStorage (0ms)

tide-example.ts

output

Click "Run" to start the demo

Back to Tide GitHub