Modulare Block-Architektur

Inhalte als Komponenten. Struktur, die mitwächst.

b10cks basiert auf einer modularen Block-Architektur, die so denkt wie moderne Frontend-Teams, wenn sie über UI nachdenken. Baue dein Content-Modell aus atomaren, wiederverwendbaren, komponierbaren Blöcken auf — und setze sie dann zu allem zusammen.

Kostenlos starten

Das Mismatch-Problem

Dein Frontend nutzt Komponenten. Warum dein CMS nicht?

Moderne Frontend-Entwicklung basiert auf den Prinzipien des Atomic Design — Atome, Moleküle, Organismen, Templates, Seiten. Komponenten werden aus kleineren Komponenten zusammengesetzt. Die Struktur ist wiederverwendbar, vorhersehbar und wartbar.

Dann öffnest du dein CMS und findest eine flache Liste von Textfeldern.

b10cks schließt diese Lücke. Dein Content-Modell besteht aus Blöcken — genau wie deine UI-Komponenten — sodass die Struktur deines CMS die Struktur deines Produkts widerspiegelt. Keine Übersetzungsschicht mehr. Kein Rätselraten mehr, welchem Feld was zugeordnet ist.

Was ist ein Block?

Die grundlegende Inhaltseinheit in b10cks.

Ein Block ist eine benannte, typisierte, wiederverwendbare Inhaltsstruktur. Stell ihn dir wie eine Content-Komponente vor: Er hat einen Namen, eine Menge typisierter Felder und einen klar definierten Zweck in deinem Content-Modell.

Beispiele:

  • HeroSection — title: Text, subtitle: Text, cta: Link, background: Image
  • FeatureCard — icon: Text, heading: Text, body: RichText
  • TestimonialBlock — quote: Text, author: Reference(TeamMember), company: Text
  • PricingTier — name: Text, price: Number, features: Array(Text), highlighted: Boolean

Einmal definieren. Überall verwenden.

Atomic Design, nativ unterstützt

Atome → Moleküle → Organismen → Content.

b10cks unterstützt vollständige Verschachtelung von Blöcken. Ein Block kann Felder, Verweise auf andere Blöcke oder Block-Arrays enthalten — so kannst du Inhaltshierarchien bauen, die exakt zu deinem Atomic-Design-System passen.

Blöcke im visuellen Editor

Was du modellierst, sehen auch die Redakteure.

Jeder Blocktyp, den du auf der Canvas definierst, wird direkt auf eine Komponente im visuellen Content-Editor abgebildet. Content-Editoren sehen die Blöcke als benannte, strukturierte Formulare — nicht als Wand aus identischen Textfeldern.

  • Blocktypen sind mit Namen und Icon gekennzeichnet
  • Verschachtelte Blöcke werden als einklappbare Bereiche dargestellt
  • Drag-and-drop zum Umordnen von Blocklisten in Arrays
  • Inline-Erstellung von Blöcken, ohne den Seitenkontext zu verlassen

Deine Entwickler definieren die Struktur. Deine Redakteure füllen sie intuitiv aus — ganz ohne Schulung.

Block-Schemata als Code

Für Teams, die Config-as-Code bevorzugen.

Definiere deine Block-Schemata programmatisch mit dem b10cks-Schemaformat — versioniert in deinem Repository direkt neben deinem Frontend-Code.

Schiebe Schema-Änderungen wie jede andere Code-Änderung durch CI/CD. Die Canvas spiegelt sie automatisch wider.

Migration & Weiterentwicklung

Content-Modelle ändern sich. b10cks macht das sicher.

Echte Content-Architekturen entwickeln sich weiter. Du wirst Felder hinzufügen, Typen umbenennen und Hierarchien neu strukturieren, während dein Produkt wächst. b10cks macht solche Änderungen beherrschbar:

  • Feldergänzungen — sicher hinzugefügt; bestehende Einträge erhalten standardmäßig null oder einen festgelegten Standardwert
  • Feldumbenennungen — mit Migrationshistorie nachverfolgt, damit Verweise nicht brechen
  • Block-Deklarierung als veraltet — markiere einen Blocktyp als veraltet, ohne ihn zu entfernen; Redakteure sehen eine Warnung, bestehender Content bleibt erhalten
  • Versionshistorie — jede Schema-Änderung wird protokolliert, ein Rollback ist möglich

Baue Content so, wie du UI baust.

Die Lücke zwischen deinem Designsystem und deinem CMS muss nicht existieren. Fang an, mit b10cks-Blöcken zu bauen — kostenlos, Open Source und sofort einsatzbereit.