Modulaire blokarchitectuur

Content als componenten. Structuur die schaalbaar is.

b10cks is opgebouwd rond een modulaire blokarchitectuur die aansluit bij hoe moderne frontendteams al over UI denken. Bouw je contentmodel op uit atomaire, herbruikbare en samen te stellen blokken — en zet die daarna in elkaar tot wat je maar wilt.

Gratis starten

Het mismatchprobleem

Jouw frontend gebruikt componenten. Waarom je CMS dan niet?

Moderne frontendontwikkeling is gebouwd op de principes van atomic design — atomen, moleculen, organismen, templates, pagina's. Componenten worden samengesteld uit kleinere componenten. De structuur is herbruikbaar, voorspelbaar en onderhoudbaar.

Dan open je je CMS en zie je een platte lijst met tekstvelden.

b10cks overbrugt die kloof. Je contentmodel is opgebouwd uit blokken — precies zoals je UI-componenten — zodat de structuur van je CMS de structuur van je product weerspiegelt. Geen vertaallaag meer. Geen giswerk meer over waar een veld naartoe gaat.

Wat is een blok?

De fundamentele inhoudseenheid in b10cks.

Een blok is een benoemde, getypeerde en herbruikbare contentstructuur. Zie het als een contentcomponent: het heeft een naam, een set getypeerde velden en een duidelijk doel binnen je contentmodel.

Voorbeelden:

  • 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

Definieer het één keer. Gebruik het overal.

Atomic design, native ondersteund

Atomen → Moleculen → Organismen → Content.

b10cks ondersteunt volledige nesting van blokken. Een blok kan velden bevatten, verwijzingen naar andere blokken of arrays van blokken — zodat je contenthiërarchieën kunt bouwen die exact aansluiten op je atomic design-systeem.

Blokken in de visuele editor

Wat jij modelleert, zien editors.

Elk bloktype dat je op het canvas definieert, wordt direct gemapt naar een component in de visuele contenteditor. Content editors zien de blokken als benoemde, gestructureerde formulieren — niet als een muur van identieke tekstvelden.

  • Bloktypes worden gelabeld met hun naam en icoon
  • Geneste blokken worden weergegeven als inklapbare secties
  • Slepen om de volgorde te wijzigen bij lijsten met blokken in arrayvorm
  • Inline een blok aanmaken zonder de context van de pagina te verlaten

Jouw developers bepalen de structuur. Jouw editors vullen die intuïtief in, zonder training.

Blokschema's als code

Voor teams die liever config-as-code gebruiken.

Definieer je blokschema's programmatisch met het b10cks-schemaformaat — versiebeheer in je repository, naast je frontendcode.

Voer schemawijzigingen via CI/CD door zoals elke andere codewijziging. Het canvas toont ze automatisch.

Migratie & evolutie

Contentmodellen veranderen. b10cks houdt dat veilig.

Echte contentarchitecturen evolueren. Je voegt velden toe, hernoemt types en herschikt hiërarchieën naarmate je product groeit. b10cks maakt die veranderingen beheersbaar:

  • Velden toevoegen — veilig toegevoegd; bestaande items krijgen standaard null of een opgegeven standaardwaarde
  • Velden hernoemen — bijgehouden met migratiegeschiedenis zodat verwijzingen niet breken
  • Blok afschrijven — markeer een bloktype als verouderd zonder het te verwijderen; editors zien een waarschuwing, bestaande content blijft behouden
  • Versiegeschiedenis — elke schemawijziging wordt vastgelegd, met mogelijkheid tot terugzetten

Bouw content zoals je UI bouwt.

De kloof tussen je design system en je CMS hoeft niet te bestaan. Begin met bouwen met b10cks-blokken — gratis, open source en vandaag al klaar voor gebruik.