Quick Start

@rankhiker/sdk

The @rankhiker/sdk package renders your published RankHiker articles on any website: React, Vue, Next.js, or plain JavaScript. It is a thin, typed wrapper around RankHiker's read-only Export API.

• —Dual ESM and CommonJS build
• —Zero runtime dependencies
• —Ships TypeScript types out of the box
• —Current version: v0.3.0

Three entry points

The package exposes three import paths. The core is framework-agnostic; the React and Vue adapters are optional and only pull in their framework as a peer dependency.

npm install @rankhiker/sdk

Get an Export API key

Open your dashboard and go to Settings → Platforms → Connect SDK → Generate API Key.

The key starts with rh_export_. It is read-only and only returns published articles, but treat it as a secret and store it in an environment variable.

baseUrl and browser apps

The SDK's default baseUrl is https://rankhiker.com, which serves the API directly. Use the default everywhere, including code that runs in the browser (React, Vue, or a vanilla SPA). No special configuration is needed:

const rh = createClient({
  apiKey: process.env.RANKHIKER_API_KEY!,
  // baseUrl defaults to https://rankhiker.com
});

Do not point baseUrl at the www host. https://www.rankhiker.com issues a 308 redirect to the apex, and browsers can drop the X-API-Key header across that cross-origin redirect, so the call fails with a 401.

First fetch (server-side)

import { createClient } from '@rankhiker/sdk';
const rh = createClient({ apiKey: process.env.RANKHIKER_API_KEY! });
const posts = await rh.listArticles();              // RankHikerArticleSummary[]
const post = await rh.getArticleBySlug('my-slug');  // RankHikerArticle | null

First fetch (browser)

In the browser, pin the www host:

import { createClient } from '@rankhiker/sdk';
const rh = createClient({
  apiKey: 'rh_export_...',
  baseUrl: 'https://rankhiker.com',
});
const posts = await rh.listArticles({ limit: 10 });

ESM and CommonJS

Both module systems are supported.

// ESM / TypeScript
import { createClient } from '@rankhiker/sdk';

// CommonJS
const { createClient } = require('@rankhiker/sdk');

That is the whole surface: a client with five methods plus optional React and Vue adapters. The rest of these pages cover configuration, filtering, data shapes, error handling, and the framework integrations.