[ { "id": "home-de", "_id": "home-de", "active": true, "type": "page", "lang": "de", "translationKey": "home", "name": "Startseite", "path": "/", "blocks": [ { "type": "hero", "headline": "Moderne Webprojekte. Blitzschnell umgesetzt.", "headlineH1": true, "subline": "Tibi CMS Starter — Svelte 5, Tailwind CSS 4, SSR und eine API, die einfach funktioniert.", "containerWidth": "full", "callToAction": { "buttonText": "Features entdecken", "buttonLink": "#features", "buttonTarget": "" }, "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80" } }, { "type": "features", "headline": "Was dieses Template kann", "tagline": "Features", "anchorId": "features", "padding": { "top": "lg", "bottom": "lg" }, "text": "

Svelte 5 Runes

Reaktives UI mit $state, $derived und $effect — kein Boilerplate, maximale Performance.

Tailwind CSS 4

Utility-first Styling mit Custom-Theme, Dark-Mode-ready und blitzschnellen Builds.

Tibi CMS API

Collections, Hooks, Medialib — alles über eine REST-API. Mit Mock-Modus für offline-Entwicklung.

i18n Built-in

Mehrsprachigkeit aus der Box: URL-basierte Sprachauswahl, Lazy-Loaded Locales, SSR-kompatibel.

SSR via goja

Server-Side Rendering in Go — schnelle Erstauslieferung, SEO-freundlich, mit Cache-Invalidierung.

Playwright Tests

E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go.

" }, { "type": "richtext", "headline": "So funktioniert's", "tagline": "Workflow", "anchorId": "workflow", "padding": { "top": "lg", "bottom": "sm" }, "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80", "imagePosition": "right", "text": "

Starte die Entwicklungsumgebung mit make docker-up && make docker-start. Der esbuild-Watcher kompiliert Änderungen in Echtzeit, BrowserSync lädt den Browser automatisch neu.

Für Offline-Entwicklung aktiviere den Mock-Modus mit MOCK=1 in der .env. Content wird über die Tibi-API geladen und mit dem BlockRenderer dargestellt.

Jeder Block-Typ (Hero, Richtext, Accordion, Features) ist eine eigene Svelte-Komponente — erweiterbar und austauschbar.

" }, { "type": "accordion", "headline": "Häufige Fragen", "tagline": "FAQ", "anchorId": "faq", "padding": { "top": "sm", "bottom": "lg" }, "accordionItems": [ { "question": "Wie starte ich ein neues Projekt mit diesem Template?", "answer": "

Klone das Repository, passe .env an und starte mit make docker-up && make docker-start. Die Demo-Inhalte kannst du einfach durch echte Inhalte ersetzen.

", "open": true }, { "question": "Brauche ich einen laufenden Tibi-Server für die Entwicklung?", "answer": "

Nein! Mit MOCK=1 in der .env werden API-Aufrufe gegen lokale JSON-Dateien aufgelöst. So kannst du Frontend-Features ohne Backend entwickeln.

" }, { "question": "Wie füge ich eine neue Seite hinzu?", "answer": "

Erstelle einen neuen Content-Eintrag in der Collection (oder in mocking/content.json für Mock-Modus) mit dem gewünschten Pfad und Blöcken. Die App rendert ihn automatisch über den BlockRenderer.

" }, { "question": "Kann ich eigene Block-Typen erstellen?", "answer": "

Ja! Erstelle eine neue Svelte-Komponente und registriere den Typ im BlockRenderer. Das Type-Interface ContentBlockEntry in global.d.ts kannst du entsprechend erweitern.

" } ] } ], "meta": { "title": "Tibi Svelte Starter — Modernes CMS-Template", "description": "Svelte 5, Tailwind CSS 4, SSR, i18n und Playwright-Tests — das perfekte Starterkit.", "keywords": "svelte, tibi, cms, starter, template" } }, { "id": "home-en", "_id": "home-en", "active": true, "type": "page", "lang": "en", "translationKey": "home", "name": "Home", "path": "/", "blocks": [ { "type": "hero", "headline": "Modern web projects. Lightning fast.", "headlineH1": true, "subline": "Tibi CMS Starter — Svelte 5, Tailwind CSS 4, SSR and an API that just works.", "containerWidth": "full", "callToAction": { "buttonText": "Explore features", "buttonLink": "#features", "buttonTarget": "" }, "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80" } }, { "type": "features", "headline": "What this template offers", "tagline": "Features", "anchorId": "features", "padding": { "top": "lg", "bottom": "lg" }, "text": "

Svelte 5 Runes

Reactive UI with $state, $derived and $effect — no boilerplate, maximum performance.

Tailwind CSS 4

Utility-first styling with custom theme, dark-mode-ready and blazing fast builds.

Tibi CMS API

Collections, hooks, media library — all via REST API. With mock mode for offline development.

Built-in i18n

Multi-language out of the box: URL-based language selection, lazy-loaded locales, SSR-compatible.

SSR via goja

Server-side rendering in Go — fast initial delivery, SEO-friendly, with cache invalidation.

Playwright Tests

E2E, API, visual regression and video tours — all preconfigured and ready to go.

" }, { "type": "richtext", "headline": "How it works", "tagline": "Workflow", "anchorId": "workflow", "padding": { "top": "lg", "bottom": "sm" }, "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80", "imagePosition": "right", "text": "

Start the dev environment with make docker-up && make docker-start. The esbuild watcher compiles changes in real-time, BrowserSync auto-reloads the browser.

For offline development, enable mock mode with MOCK=1 in .env. Content is loaded via the Tibi API and rendered with the BlockRenderer.

Each block type (Hero, Richtext, Accordion, Features) is its own Svelte component — extensible and swappable.

" }, { "type": "accordion", "headline": "Frequently Asked Questions", "tagline": "FAQ", "anchorId": "faq", "padding": { "top": "sm", "bottom": "lg" }, "accordionItems": [ { "question": "How do I start a new project with this template?", "answer": "

Clone the repository, adjust .env and start with make docker-up && make docker-start. Simply replace the demo content with your real content.

", "open": true }, { "question": "Do I need a running Tibi server for development?", "answer": "

No! With MOCK=1 in .env, API calls are resolved against local JSON files. This lets you develop frontend features without a backend.

" }, { "question": "How do I add a new page?", "answer": "

Create a new content entry in the collection (or in mocking/content.json for mock mode) with the desired path and blocks. The app renders it automatically via the BlockRenderer.

" }, { "question": "Can I create custom block types?", "answer": "

Yes! Create a new Svelte component and register the type in BlockRenderer. You can extend the ContentBlockEntry type interface in global.d.ts accordingly.

" } ] } ], "meta": { "title": "Tibi Svelte Starter — Modern CMS Template", "description": "Svelte 5, Tailwind CSS 4, SSR, i18n and Playwright tests — the perfect starter kit.", "keywords": "svelte, tibi, cms, starter, template" } }, { "id": "about-de", "_id": "about-de", "active": true, "type": "page", "lang": "de", "translationKey": "about", "name": "Über das Template", "path": "/ueber-uns", "blocks": [ { "type": "hero", "headline": "Über das Template", "headlineH1": true, "subline": "Gebaut für Teams, die schnell professionelle Webprojekte umsetzen wollen.", "containerWidth": "full", "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80" } }, { "type": "richtext", "headline": "Warum dieses Template?", "padding": { "top": "lg", "bottom": "md" }, "text": "

Das Tibi Svelte Starter vereint bewährte Patterns aus dutzenden Projekten in einem sofort einsetzbaren Fundament:

" }, { "type": "richtext", "headline": "Technologie-Stack", "padding": { "top": "md", "bottom": "lg" }, "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80", "imagePosition": "left", "text": "

Jede Komponente wurde sorgfältig ausgewählt:

" } ], "meta": { "title": "Über das Template — Tibi Svelte Starter", "description": "Architektur und Tech-Stack des Tibi Svelte Starter Templates.", "keywords": "svelte, über uns, template, architektur" } }, { "id": "about-en", "_id": "about-en", "active": true, "type": "page", "lang": "en", "translationKey": "about", "name": "About the Template", "path": "/about", "blocks": [ { "type": "hero", "headline": "About the Template", "headlineH1": true, "subline": "Built for teams who want to ship professional web projects fast.", "containerWidth": "full", "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80" } }, { "type": "richtext", "headline": "Why this template?", "padding": { "top": "lg", "bottom": "md" }, "text": "

The Tibi Svelte Starter combines proven patterns from dozens of projects into an immediately usable foundation:

" }, { "type": "richtext", "headline": "Technology Stack", "padding": { "top": "md", "bottom": "lg" }, "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80", "imagePosition": "left", "text": "

Every component was carefully chosen:

" } ], "meta": { "title": "About the Template — Tibi Svelte Starter", "description": "Architecture and tech stack of the Tibi Svelte Starter Template.", "keywords": "svelte, about, template, architecture" } }, { "id": "contact-de", "_id": "contact-de", "active": true, "type": "page", "lang": "de", "translationKey": "contact", "name": "Kontakt", "path": "/kontakt", "blocks": [ { "type": "hero", "headline": "Kontakt", "headlineH1": true, "subline": "Fragen, Feedback oder Projektanfragen? Schreib uns!", "containerWidth": "full", "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80" } }, { "type": "contact-form", "headline": "Nachricht senden", "padding": { "top": "lg", "bottom": "lg" } } ], "meta": { "title": "Kontakt — Tibi Svelte Starter", "description": "Nimm Kontakt mit uns auf.", "keywords": "kontakt, anfrage" } }, { "id": "contact-en", "_id": "contact-en", "active": true, "type": "page", "lang": "en", "translationKey": "contact", "name": "Contact", "path": "/contact", "blocks": [ { "type": "hero", "headline": "Contact", "headlineH1": true, "subline": "Questions, feedback or project inquiries? Get in touch!", "containerWidth": "full", "heroImage": { "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80" } }, { "type": "contact-form", "headline": "Send a message", "padding": { "top": "lg", "bottom": "lg" } } ], "meta": { "title": "Contact — Tibi Svelte Starter", "description": "Get in touch with us.", "keywords": "contact, inquiry" } } ]