Log In

Build your own frontend

Quickstart

This guide uses @scribe-atp/core — the framework-agnostic package. If you're using React, Angular, Vue, Next.js, Nuxt, or React Router, the framework guides wrap these same functions with framework-idiomatic APIs.

Note

The SDK calls the content container a Site, a section a Group, and a piece of writing an Article — the same things this guide otherwise calls a Publication, a Category, and a Document. See the table in SDK concepts.

1. Install the package

npm install @scribe-atp/core

2. Fetch a Site

A Site is identified by two things: the author's handle (or DID) and the site's canonical HTTPS URL.

import { fetchSite } from "@scribe-atp/core";

const author = "anthonycregan.dev";
const site = await fetchSite(author, "https://anthonycregan.co.uk");

console.log(site.title);
console.log(site.description);

// Published articles, organised into groups
for (const group of site.groups) {
  console.log(group.title);
  for (const article of group.articles) {
    console.log(article.title, article.slug);
  }
}

// Legacy field, always empty for current content — see SDK concepts
console.log(site.ungroupedArticles);

3. Fetch an Article

Once you have an article slug (from the Site's ArticleRef list or directly), fetch the full article including HTML content:

import { fetchArticle } from "@scribe-atp/core";

const article = await fetchArticle("anthonycregan.dev", "my-first-post");

console.log(article.title);
console.log(article.description);
console.log(article.content); // Full HTML — safe to render directly
console.log(article.createdAt);

The content field is sanitised HTML produced by the editor. You can render it with dangerouslySetInnerHTML in React, innerHTML in Vue, or [innerHTML] in Angular.

4. Build URLs for Articles

Use the Site's url and urlPrefix fields to construct canonical article URLs:

function articleUrl(
  site: Site,
  groupSlug: string,
  articleSlug: string,
): string {
  const base = site.urlPrefix
    ? `https://${site.url}/${site.urlPrefix}`
    : `https://${site.url}`;
  return `${base}/${groupSlug}/${articleSlug}`;
}

See Building URLs for the full rules.

5. Cancel in-flight requests

Both fetchSite and fetchArticle accept an optional AbortSignal as a third argument. Pass request.signal in server contexts, or an AbortController signal in client code:

const controller = new AbortController();

const site = await fetchSite(
  author,
  "https://anthonycregan.co.uk",
  controller.signal,
);

// Cancel the request if needed (e.g. component unmount, route change)
controller.abort();

Framework adapters wire this up automatically — you only manage the signal yourself when using @scribe-atp/core directly.

What's next?

Settings

Appearance