Dokumentation

Erste Schritte

1. Registrieren, Plan wählen, Wunsch-Subdomain sichern.
2. Im Admin (deine-site.mysitepuls.com/admin) anmelden.
3. Unter Seiten die Startseite öffnen oder eine neue Seite aus einem Template erstellen.
4. Im Builder Inhalte bearbeiten, Speichern, Veröffentlichen – fertig.

Der Builder

Drei Bereiche, ein Prinzip: links die Struktur deiner Seite (Header, Abschnitte, Footer – inklusive verschachtelter Elemente), in der Mitte die Live-Vorschau im Browser-Rahmen, rechts die Konfiguration des ausgewählten Elements.

• Verschieben: Abschnitte mit gedrückter Maustaste ziehen – im Baum oder direkt in der Vorschau.
• Einfügen: Plus-Punkte erscheinen beim Hover zwischen Abschnitten (Baum und Vorschau).
• Drill-in: Listeneinträge (z. B. einzelne Features) rechts anklicken → Detailansicht, zurück mit ←.
• Sprachen: oben umschalten; leere Sprachen übernehmen den Inhalt automatisch als Kopie.
• Header & Footer sind global: einmal ändern, gilt auf allen Seiten.

Blöcke & Templates

Ein Block besteht aus Feldern (was Redakteure ausfüllen) und einem HTML-Template (wie es aussieht). Eigene Blöcke erstellst du unter Blöcke → Neuer Block – mit Live-Vorschau beim Bearbeiten.

<section class="sp-section">
  <div class="sp-container">
    <h2 class="sp-h2">{{titel}}</h2>
    {{#if untertitel}}<p class="sp-muted">{{untertitel}}</p>{{/if}}
    {{#each punkte}}<li>{{text}}</li>{{/each}}
  </div>
</section>

Templates (Menüpunkt Templates) sind vordefinierte Block-Zusammenstellungen für neue Seiten.

Sprachen & URLs

Inhalte, Slugs und Navigations-Beschriftungen werden pro Sprache gepflegt. Das URL-Muster ist /{sprache}/{slug}; die Standardsprache kann optional ohne Präfix ausgeliefert werden.

Beim Veröffentlichen werden Sprachen ohne Inhalt automatisch aus der Standardsprache befüllt – die Seite ist immer in allen Sprachen live.

Ordner

Seiten lassen sich in Ordner mit eigenem (übersetzbarem) Slug organisieren. Ein Ordner „Rechtliches" (rechtliches, EN: legal) mit der Seite „Datenschutz" ergibt automatisch:

/de/rechtliches/datenschutz
/en/legal/privacy

Apps entwickeln

Eine sitepuls-App ist ein npm-Paket mit einem "sitepuls"-Feld in der package.json. Nach npm install wird sie automatisch erkannt – keine Kommandos, kein Build-Schritt.

{
  "name": "sitepuls-plugin-meine-app",
  "version": "1.0.0",
  "type": "module",
  "sitepuls": {
    "displayName": "Meine App",
    "icon": "zap",
    "description": "Was die App kann.",
    "server": "server.js",
    "blocks": [{ "slug": "…", "name": "…", "fields": […], "template": "…" }]
  }
}

Server-Controller

Apps können eigene API-Endpoints registrieren – z. B. für Formulare. Die Datei aus "server" exportiert eine Funktion und bekommt alles Nötige übergeben. Wichtig: db ist automatisch tenant-aware – jede Website hat ihre eigenen Daten.

// server.js
export default function register({ router, db, uid, now }) {
  router.post('/meine-app/aktion', (req, res) => {
    db.prepare('CREATE TABLE IF NOT EXISTS app_meine_daten (…)').run();
    // …
    res.json({ ok: true });
  });
}

Der Endpoint ist dann unter /api/apps/meine-app/aktion erreichbar. Für geschützte Admin-Endpoints steht requireAuth bereit. Beispiel in echt: die Newsletter-App (sitepuls-plugin-newsletter) speichert Anmeldungen pro Website.

Eigene Admin-Oberfläche (wie Shopify-Apps)

Apps können im Manifest einen "admin"-Abschnitt deklarieren – sitepuls rendert daraus eine native Backend-Seite mit Statistik-Karten und Datentabellen (inkl. CSV-Export und Zeilen-Aktionen). Kein eigenes Frontend nötig.

"admin": {
  "label": "Newsletter",
  "views": [
    { "type": "stats", "source": "/newsletter/stats",
      "items": [{ "key": "subscribers", "label": "Abonnenten", "icon": "users" }] },
    { "type": "table", "title": "Abonnenten",
      "source": "/newsletter/subscribers",
      "columns": [
        { "key": "email", "label": "E-Mail" },
        { "key": "created_at", "label": "Angemeldet am", "format": "datetime" }
      ],
      "export": true,
      "rowActions": [{ "icon": "trash", "label": "Austragen",
        "method": "DELETE", "path": "/newsletter/subscribers/:id",
        "confirm": "Wirklich austragen?" }] }
  ]
}

source und path zeigen auf die Endpoints deines Server-Controllers. Die App erscheint im App Store mit einem „Öffnen"-Button.

AI Theme Creator (Addon)

Mit dem Addon beschreibst du dein Wunschdesign in einem Satz – sitepuls generiert Farbwelt und maßgeschneiderte Blöcke, ohne dass du eine Zeile Code schreibst. Zu finden unter AI Studio im Admin. Generierte Blöcke landen in der Kategorie „AI" und sind sofort im Builder nutzbar.

Headless Content-API

Alle Inhalte per REST – für eigene Frontends (Next.js, Astro, Apps …). Token unter Einstellungen → API-Tokens erstellen.

# Alle veröffentlichten Seiten
curl https://deine-site.mysitepuls.com/api/v1/pages \
  -H "Authorization: Bearer sp_…"

# Eine Seite mit Block-Baum (pro Sprache)
curl "https://deine-site.mysitepuls.com/api/v1/pages/home?lang=de" \
  -H "Authorization: Bearer sp_…"

Antwort: { title, slug, seo, blocks: [{ block: "hero", values: {…} }, …] } – du renderst die Blöcke in deinem Frontend mit eigenen Komponenten.

Visual-Editor-Bridge

Damit Redakteure auch mit Headless-Frontend den visuellen Builder nutzen können, gibt es die Bridge: Der Builder lädt dein Frontend als Vorschau und schickt ihm ungespeicherte Änderungen live per postMessage.

1. Bridge einbinden

<script src="https://deine-site.mysitepuls.com/bridge.js"></script>

2. Auf Updates reagieren

window.sitepuls.on(function (data) {
  // data.blocks = aktueller Draft-Blockbaum, data.lang, data.page
  renderPage(data.blocks);
});

3. Preview-URL hinterlegen

Im Admin unter Einstellungen → Headless / Visual Editor die URL deines Frontends eintragen. Im Builder erscheint dann der Schalter „Frontend" – die Vorschau zeigt deine echte App, live aktualisiert bei jeder Eingabe.

Webhooks & Events

sitepuls feuert Events wie page.published, page.updated, user.created, plugin.installed. Unter Webhooks abonnierst du sie für externe Systeme (mit Zustellprotokoll und optionalem Secret-Header), unter Automationen baust du Wenn-Dann-Abläufe direkt in sitepuls.

Eigene Domain

Unter Verwaltung → Domain: Domain eintragen → sitepuls zeigt dir die exakten DNS-Einträge (TXT-Verifizierung + A/CNAME) mit Kopier-Buttons → „DNS prüfen" → bei grünem Check „Fertigstellen". Das Zertifikat wird automatisch ausgestellt.