Non-Next.js Integration

// Web-standard handlers (no framework dependency)
import {
  createBlocksHandler,
  createPagesHandler,
  createPublishHandler,
} from "@ai-site-editor/site-sdk/routes"

// Draft Mode handlers (need an adapter — see below)
import {
  createDraftEnableHandlerCore,
  createDraftDisableHandlerCore,
  type DraftRouteAdapter,
} from "@ai-site-editor/site-sdk/routes/core"

// Draft context resolver (for your page render path — also needs an adapter)
import {
  resolveDraftContextCore,
  type DraftModeAdapter,
} from "@ai-site-editor/site-sdk/draft/core"

// Server-side draft fetching (no framework dependency — just fetch())
import { fetchEditorPage, fetchEditorSlugs } from "@ai-site-editor/site-sdk/draft"

// src/pages/api/editor/blocks.ts
import {
  createBlocksHandler,
  createPagesHandler,
  createPublishHandler,
} from "@ai-site-editor/site-sdk/routes"
import { getMyPages, publishMyPages } from "../../../lib/my-cms"

const blocks = createBlocksHandler()
const pages = createPagesHandler(() => getMyPages())
const publish = createPublishHandler(
  async (pages, config) => { await publishMyPages(pages, config); return { ok: true } },
  { publishSecret: import.meta.env.PUBLISH_TOKEN }
)

// Astro endpoint signature
export const GET = ({ request }: { request: Request }) => {
  const url = new URL(request.url)
  if (url.pathname.endsWith("/blocks")) return blocks.GET(request)
  if (url.pathname.endsWith("/pages")) return pages.GET(request)
  return new Response("Not found", { status: 404 })
}
export const POST = ({ request }: { request: Request }) => publish.POST(request)
export const OPTIONS = ({ request }: { request: Request }) => blocks.OPTIONS(request)

import { Hono } from "hono"
import {
  createBlocksHandler,
  createPagesHandler,
  createPublishHandler,
} from "@ai-site-editor/site-sdk/routes"
import { getMyPages, publishMyPages } from "./lib/my-cms"

const blocks = createBlocksHandler()
const pages = createPagesHandler(() => getMyPages())
const publish = createPublishHandler(
  async (pages, config) => { await publishMyPages(pages, config); return { ok: true } }
)

const app = new Hono()
app.get("/api/editor/blocks", (c) => blocks.GET(c.req.raw))
app.get("/api/editor/pages", (c) => pages.GET(c.req.raw))
app.post("/api/editor/publish", (c) => publish.POST(c.req.raw))
app.options("/api/editor/blocks", (c) => blocks.OPTIONS(c.req.raw))

import type { DraftRouteAdapter } from "@ai-site-editor/site-sdk/routes/core"

const adapter: DraftRouteAdapter = {
  // Called when the user is entering Draft Mode after a valid secret check.
  // On Next.js this is `(await draftMode()).enable()`. On other frameworks, this
  // is usually a no-op — the cookie set in `createRedirect` is what enables draft
  // mode in your page handlers (see section 3 below).
  enableDraftMode: async () => { /* usually nothing here */ },

  // Same shape, called by the /draft/disable route.
  disableDraftMode: async () => { /* usually nothing here */ },

  // Build a redirect response with the given cookies attached.
  // The SDK already validated the secret and resolved a safe internal redirect URL.
  createRedirect: (url: URL, cookies) => {
    // ... your framework's redirect builder, with the cookies attached
  },
}

// src/routes/api/editor/draft/+server.ts
import {
  createDraftEnableHandlerCore,
  type DraftRouteAdapter,
} from "@ai-site-editor/site-sdk/routes/core"

export function svelteKitAdapter(): DraftRouteAdapter {
  return {
    // SvelteKit has no built-in "draft mode" toggle. The cookies set by createRedirect
    // are what tell our render path to fetch draft content (see section 3).
    enableDraftMode: async () => {},
    disableDraftMode: async () => {},

    createRedirect: (url, cookies) => {
      const headers = new Headers({ Location: url.toString() })
      // We also add a "draft mode" cookie ourselves so our +page.server.ts files
      // can branch on it. The cookies the SDK passes are the editor session/siteId
      // cookies — we add our own draft-enabled flag alongside.
      const cookieParts: string[] = ["__draft_enabled=1; Path=/; SameSite=Lax"]
      for (const c of cookies ?? []) {
        if (c.delete) {
          cookieParts.push(`${c.name}=; Path=/; Max-Age=0`)
        } else {
          cookieParts.push(`${c.name}=${c.value}; Path=/; SameSite=Lax`)
        }
      }
      headers.set("Set-Cookie", cookieParts.join(", "))
      return new Response(null, { status: 307, headers })
    },
  }
}

export const GET = async ({ request }) => {
  return createDraftEnableHandlerCore(svelteKitAdapter())(request)
}

// src/routes/api/editor/draft/disable/+server.ts
import { createDraftDisableHandlerCore } from "@ai-site-editor/site-sdk/routes/core"
import { svelteKitAdapter } from "../+server"

export const GET = async ({ request }) => {
  // The exit handler will pass `delete: true` cookies — make sure your
  // adapter's createRedirect handles those (the example above does).
  return createDraftDisableHandlerCore(svelteKitAdapter())(request)
}

import { fetchEditorPage, fetchEditorSlugs } from "@ai-site-editor/site-sdk/draft"

// In your page handler, after detecting draft mode:
const page = await fetchEditorPage(slug, session, siteId)
if (page) {
  // Render `page.blocks` using your block renderer
}

import {
  resolveDraftContextCore,
  type DraftModeAdapter,
} from "@ai-site-editor/site-sdk/draft/core"

// SvelteKit example:
async function getDraftContext(event) {
  const adapter: DraftModeAdapter = {
    isDraftMode: event.cookies.get("__draft_enabled") === "1",
    getCookie: (name) => event.cookies.get(name) ?? undefined,
  }
  const searchParams = Object.fromEntries(event.url.searchParams)
  return resolveDraftContextCore(searchParams, adapter, {
    defaultSession: "dev",
    defaultSiteId: "my-site",
  })
}

// src/routes/[...slug]/+page.server.ts
import { fetchEditorPage } from "@ai-site-editor/site-sdk/draft"
import { getMyCmsPage } from "$lib/my-cms"
import { getDraftContext } from "$lib/draft"

export async function load(event) {
  const slug = event.params.slug || "/"
  const draft = await getDraftContext(event)

  const page = draft
    ? (await fetchEditorPage(slug, draft.session, draft.siteId)) ?? (await getMyCmsPage(slug))
    : await getMyCmsPage(slug)

  return { page, isDraft: !!draft }
}

npx avocado-register --name "My Site" --port <your-dev-server-port>