Phasebook
Developer Docs

Phasebook SDK

Integrate your beautiful, interactive Phasebook journals directly into your own applications. We provide two uncompromising methods to suit your architecture.

Live Preview

Interact with the actual 3D component below

Phasebook Demo

Phasebook SDK

July 3, 2026

MoodEXCITED
LocationPhasebook
1
The pages cast realistic shadows onto the spine as they turn. This is the exact component your users will interact with. Whether you use the Smart SDK or the Dumb UI, the result looks perfectly identical to this.
Turn Page
2

July 2, 2026

MoodFOCUSED
LocationDOCUMENTATION
Turn Back
3
This is a live, interactive demo of the Phasebook component embedded directly in this documentation! Notice the crisp typography and the beautifully aligned layout. Click the right margin to turn the page!
Turn Page
4
4
Turn Back

The End

Click to Open

Method 1: The Smart SDK

For Next.js 13+ App Router (Server Components)

The absolute easiest way to embed your journal. This server component takes your API Key, automatically fetches your public journal entries from our edge network, and renders the beautiful 3D book entirely on the server. Zero client-side fetching.

Installation
npm install phasebook
Usage
import { HyperspaceJournal } from "phasebook/server";
import "phasebook/styles.css";

export default function MyBlog() {
  return (
    <div className="my-layout">
      {/* Fetches and renders instantly */}
      <HyperspaceJournal 
        apiKey={process.env.PHASEBOOK_API_KEY} 
        coverImage="https://example.com/cover.jpg"
        bookTitle="Phasebook SDK"
        bookAuthor="John Doe"
      />
    </div>
  );
}

Method 2: The Dumb UI

For React, Vite, Vue, or Custom Backends

If you are not using Next.js Server Components, or if you want to fetch the data from your own custom backend, you can use the pure UI wrapper. You provide the raw data array, and we do the beautiful 3D styling.

Usage
import { useEffect, useState } from "react";
import { JournalBook } from "phasebook";
import "phasebook/styles.css";

export default function MyReactApp() {
  const [entries, setEntries] = useState([]);

  useEffect(() => {
    // 1. Fetch the data from your own API or Phasebook API
    fetch("https://phasebook-api.com/entries").then(r => r.json()).then(setEntries);
  }, []);

  return (
    // 2. Pass the raw array directly to JournalBook
    <JournalBook 
      entries={entries} 
      coverImage="https://example.com/cover.jpg"
      bookTitle="Offline Journal"
    />
  );
}

Method 3: Raw Engine

For Custom Layouts, Photo Albums, and Recipes

Need total control? Import the core InteractiveBook engine directly. You pass an array of pages containing raw React nodes for the right-side content and left-side back content. This allows you to build anything imaginable.

Usage
import { InteractiveBook } from "phasebook";
import "phasebook/styles.css";

export default function CustomBook() {
  const pages = [
    {
      title: "My Recipe",
      content: <div><h2>Ingredients</h2><ul><li>Flour</li></ul></div>,
      backContent: <img src="/flour.jpg" />
    },
    {
      content: <p>Mix it all together...</p>
    }
  ];

  return (
    <InteractiveBook 
      pages={pages} 
      coverImage="https://example.com/cookbook.jpg"
      bookTitle="My Recipes"
    />
  );
}