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