Modular Block Architecture

Content as Components. Structure That Scales.

b10cks is built around a modular block architecture that mirrors how modern frontend teams already think about UI. Build your content model from atomic, reusable, composable blocks — then assemble them into anything.

Start for Free

The Mismatch Problem

Your frontend uses components. Why doesn't your CMS?

Modern frontend development is built on atomic design principles — atoms, molecules, organisms, templates, pages. Components are composed from smaller components. Structure is reusable, predictable, and maintainable.

Then you open your CMS and find a flat list of text fields.

b10cks bridges this gap. Your content model is built from blocks — exactly like your UI components — so the structure of your CMS reflects the structure of your product. No more translation layer. No more guessing what a field maps to.

What Is a Block?

The fundamental unit of content in b10cks.

A block is a named, typed, reusable content structure. Think of it like a content component: it has a name, a set of typed fields, and a defined purpose in your content model.

Examples:

  • 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

Define it once. Use it anywhere.

Atomic Design, Natively Supported

Atoms → Molecules → Organisms → Content.

b10cks supports full block nesting. A block can contain fields, references to other blocks, or arrays of blocks — letting you build content hierarchies that match your atomic design system exactly.

Blocks in the Visual Editor

What you model is what editors see.

Every block type you define on the canvas maps directly to a component in the visual content editor. Content editors see the blocks as named, structured forms — not a wall of identical text fields.

  • Block types are labeled with their name and icon
  • Nested blocks are visualized as collapsible sections
  • Drag-to-reorder for array-type block lists
  • Inline block creation without leaving the page context

Your developers define the structure. Your editors fill it in — intuitively, without training.

Block Schemas as Code

For teams who prefer config-as-code.

Define your block schemas programmatically using the b10cks schema format — version-controlled in your repository alongside your frontend code.

Push schema changes through CI/CD like any other code change. The canvas reflects them automatically.

Migration & Evolution

Content models change. b10cks makes that safe.

Real content architectures evolve. You'll add fields, rename types, and restructure hierarchies as your product grows. b10cks makes those changes manageable:

  • Field additions — safely added; existing entries default to null or a specified default
  • Field renames — tracked with migration history so references don't break
  • Block deprecation — mark a block type as deprecated without removing it; editors see a warning, existing content is preserved
  • Version history — every schema change is recorded, with rollback available

Build content the way you build UI.

The gap between your design system and your CMS doesn't have to exist. Start building with b10cks blocks — free, open source, and ready today.