Add E-Signatures to SvelteKit

Quick start

1. Get an API key from signb.ee (free, no credit card)
2. Set SIGNBEE_API_KEY in your environment
3. Add the code below to your app

SvelteKit example

// src/routes/api/send/+server.ts
import { json } from '@sveltejs/kit';
import { SIGNBEE_API_KEY } from '$env/static/private';

export async function POST({ request }) {
  const body = await request.json();
  const res = await fetch('https://signb.ee/api/send', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${SIGNBEE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
  });
  return json(await res.json());
}

What happens

1. Your app sends markdown or a PDF URL to Signbee
2. Signbee generates a PDF (if markdown) and emails the recipient a signing link
3. Recipient signs — both parties receive the signed PDF with SHA-256 certificate

Also works with AI agents

Install the MCP server to let Claude, Cursor, or Windsurf send documents directly:

npx -y signbee-mcp

Integration details

SvelteKit is Svelte's full-stack framework with server-side rendering, API routes, and file-based routing. Adding e-signatures uses SvelteKit's server-only modules to keep your API key secure.

Server-only modules: SvelteKit's +server.ts files (shown above) run exclusively on the server. The SIGNBEE_API_KEY imported from $env/static/private is never exposed to the client. This is SvelteKit's built-in security for sensitive configuration.

Form actions: Alternative to API routes, use SvelteKit form actions (+page.server.ts) for progressive enhancement. The contract-sending form works with and without JavaScript, and the API key stays server-side.

Environment variables: SvelteKit distinguishes between public ($env/static/public) and private ($env/static/private) environment variables. Always import SIGNBEE_API_KEY from the private module. Attempting to import it in client code produces a build error.

Adapters: SvelteKit deploys to any platform via adapters — Node.js, Vercel, Netlify, Cloudflare Pages, Deno, and more. Your signing endpoint works identically across all adapters. Set SIGNBEE_API_KEY via your deployment platform's environment configuration.

Load functions: Use SvelteKit's load functions to fetch signing status or document data on page load. Combined with server-side rendering, this provides fast initial page loads with up-to-date contract status.

FAQs