Quick Start

Vanilla JavaScript / TypeScript

1. Create a client

TypeScriptCopy
import { Keyset } from "keysetapp";

const client = new Keyset({
  apiKey: "pkey_your_public_key",
  cacheTTL: 60000, // required field (milliseconds)
  cache: { enabled: true, ttl: 60000 }, // optional in-memory cache
});

2. Fetch all remote config entries

TypeScriptCopy
const config = await client.content.getAll();

console.log(config);
// { hero_title: "Welcome", show_banner: true, max_retries: 3 }

3. Read typed values

TypeScriptCopy
const title   = await client.content.getString("hero_title", "Default Title");
const retries = await client.content.getNumber("max_retries", 3);
const enabled = await client.content.getBoolean("show_banner", false);
const links   = await client.content.getJSON<string[]>("nav_links", []);
const logo    = await client.content.getImage("logo_url", "");
const docs    = await client.content.getURL("docs_url", "");

Each method falls back to defaultValue if the key does not exist or has the wrong type.

---

React

1. Wrap your app with KeysetProvider

TypeScript JSXCopy
import { KeysetProvider } from "keysetapp/react";

const config = {
  apiKey: "pkey_your_public_key",
  cacheTTL: 60000,
  cache: { enabled: true, ttl: 60000 },
};

export default function App() {
  return (
    <KeysetProvider config={config}>
      <YourApp />
    </KeysetProvider>
  );
}

2. Use a typed hook in any component

TypeScript JSXCopy
import { useKeysetBoolean, useKeysetString } from "keysetapp/react";

export function Banner() {
  const { value: isEnabled, loading } = useKeysetBoolean("show_banner", false);
  const { value: message }            = useKeysetString("banner_message", "");

  if (loading) return null;
  if (!isEnabled) return null;

  return <div className="banner">{message}</div>;
}

3. Fetch all entries at once

TypeScript JSXCopy
import { useContent } from "keysetapp/react";

export function ConfigDebug() {
  const { data, loading, error, refetch } = useContent();

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Error: {error}</p>;

  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  );
}

---

Write operations (server-side only)

Use a secret key (skey_…) on the server to create or update entries:

TypeScriptCopy
import { Keyset } from "keysetapp";

const admin = new Keyset({ apiKey: "skey_your_secret_key", cacheTTL: 0 });

// Create
await admin.content.create({ key: "site_name", value: "Acme", type: "string" });

// Update
await admin.content.update("site_name", { value: "Acme Corp", type: "string" });

// Delete
await admin.content.delete("site_name");

---

Next steps

• Configuration — all options available on KeysetConfig
• Content API — full method reference
• React Integration — all hooks and provider props
• Error Handling — how to handle failures gracefully