Svelte x Python

A Svelte frontend talking to a Python/FastAPI backend that records audit events via sdk-python and serves the Svelte bundle on the same port. Comes in single-tenant and multi-tenant variants.

Source: https://github.com/everscribe/examples/tree/main/svelte-fe-with-python-be

Stack

Layer What it is
Frontend Svelte 5, Vite, @everscribe/components-element
Backend Python 3.10+, FastAPI, uvicorn, everscribe
Domain In-memory secrets vault
Audit panel <audit-trail> custom element

Run it

git clone https://github.com/everscribe/examples
cd examples/svelte-fe-with-python-be/single-tenant   # or .../multi-tenant

cp .env.example .env   # EVERSCRIBE_PROJECT_ID + EVERSCRIBE_API_KEY
python3 -m venv .venv && . .venv/bin/activate
pip install -r requirements.txt
(cd frontend && npm install && npm run build)

python backend/app.py

Server on :9000 serves the Svelte bundle and the API.

Backend integration

Identical to the React + Python backend. The SDK doesn't know which frontend is on the other side:

import everscribe
from everscribe.asgi import EverscribeMiddleware

es = everscribe.new(project_id, api_key)
rec = es.new_recorder(flush_interval=2.0)
minter = es.new_minter()

app.add_middleware(EverscribeMiddleware, recorder=rec, resolve_actor=resolve_actor)

Recording from a route handler enriches current_event() and lets the middleware record on response finish. See React + Python → Backend integration for the full reveal + mint handlers.

Frontend integration

Custom elements are first-class in Svelte:

<script>
    import "@everscribe/components-element";
    import "@everscribe/components-styles/default.css";
</script>

<audit-trail token-endpoint="/api/embed-token"
             on:audit-trail-error={(e) => console.error(e.detail.error)} />

For the multi-tenant customer view, attach the X-Demo-Actor header via the JS-only onTokenExpired property:

<script>
    let el;
    $: if (el) {
        el.onTokenExpired = async () => {
            const res = await fetch("/api/embed-token/customer", {
                method: "POST",
                credentials: "include",
                headers: { "X-Demo-Actor": currentUser.id },
            });
            return (await res.json()).token;
        };
    }
</script>

<audit-trail bind:this={el} />

Real apps swap X-Demo-Actor for whatever auth your backend expects.

Single-Tenant vs Multi-Tenant

Single-tenant Multi-tenant
Token endpoint One. /api/embed-token Two. /api/embed-token/customer, /api/embed-token/admin
UI One vault view Tab strip: Customer view · Admin view
Seeded data One implicit tenant Acme, Initech
Audit-panel scope Whole project Customer: tenant-scoped · Admin: unscoped

What to take away

  • The uvicorn server and the Svelte build share one port. FastAPI serves frontend/dist alongside the API.
  • Custom elements work without a wrapper. Svelte's attribute / event-listener syntax flows through cleanly.
  • Backend code is identical to the React variant. Frontend choice is local.

What next