Installation
Install the Wrytze TypeScript SDK and configure your API key.
This guide walks you through installing @wrytze/sdk, setting up your API key, and making a test request to verify everything works.
Prerequisites
- Node.js 18 or later (or any runtime with a global
fetch: Bun, Deno, Cloudflare Workers) - A Wrytze API key -- generate one from the Wrytze dashboard under Settings > API
Install the package
npm install @wrytze/sdkSet your API key
Store your API key in an environment variable. The exact mechanism depends on your framework, but the variable name WRYTZE_API_KEY is conventional.
WRYTZE_API_KEY=wrz_sk_abc123def456ghi789jkl012mnopqrsNever expose your API key in client-side code. The SDK should only be used in server-side environments such as API routes, server components, serverless functions, or build scripts. Always load the key from an environment variable -- never hard-code it.
Create a client
Import WrytzeClient and pass your API key:
import { WrytzeClient } from "@wrytze/sdk";
const wrytze = new WrytzeClient({
apiKey: process.env.WRYTZE_API_KEY!,
});Configuration options
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
apiKey | string | Yes | -- | Your organization's API key |
baseUrl | string | No | https://app.wrytze.com | Override the API base URL (useful for self-hosted or staging environments) |
websiteId | string | No | -- | Default website ID to use for all API calls. Individual method calls can override this value. |
Example with a custom base URL:
const wrytze = new WrytzeClient({
apiKey: process.env.WRYTZE_API_KEY!,
baseUrl: "https://staging.wrytze.com",
});Verify the connection
Make a quick request to confirm your key is valid and the client is configured correctly:
import { WrytzeClient, WrytzeError } from "@wrytze/sdk";
const wrytze = new WrytzeClient({
apiKey: process.env.WRYTZE_API_KEY!,
});
try {
const { data, pagination } = await wrytze.blogs.list({ limit: 1 });
if (data.length > 0) {
console.log(`Connected! First blog: "${data[0].title}"`);
} else {
console.log("Connected! No published blogs found yet.");
}
console.log(`Total blogs: ${pagination.total}`);
} catch (error) {
if (error instanceof WrytzeError) {
console.error(`API error (${error.status}): ${error.message}`);
} else {
throw error;
}
}If you see the blog title or "No published blogs found yet." printed, the SDK is installed and working correctly.
React components
If you are building a React or Next.js application, install the companion @wrytze/react package for ready-to-use blog components:
npm install @wrytze/react@wrytze/react provides 14 pre-built components (BlogList, BlogArticle, BlogCard, etc.) with built-in data fetching, loading skeletons, and dark mode support. A /next subpath adds automatic next/image optimization and URL sync.
After installing, add the component styles to your CSS entry point so Tailwind v4 generates the correct classes:
@import "tailwindcss";
@import "@wrytze/react/tailwind.css";
@plugin "@tailwindcss/typography";See the Next.js guide for a full walkthrough.