Cmssy vs Storyblok: Code-First Blocks vs UI Schemas
An honest comparison of two headless CMSs with visual editors. Where blocks are defined, what the API gives you, and what each plan actually includes.
Overview
Storyblok is one of the most established headless CMSs on the market, and it popularised the idea that a headless CMS can still have a proper visual editor. Cmssy is built on the same conviction. So let's get the easy part out of the way first.
Visual editing is a tie. Both products frame your live site in an iframe and let editors click a section and edit it in place. If you have read a comparison claiming that headless means giving up visual editing, it was not describing either of these tools. The interesting differences are elsewhere.
Where Your Blocks Live
This is the real fork in the road, and it is a genuine trade-off rather than a scoreboard.
Storyblok defines blocks in its Block Library - a schema editor inside the Storyblok app. You add a block, add fields to it, and save. Your frontend then writes a React (or Vue, or Astro) component that reads those fields. Two artefacts, in two places, that have to agree with each other by convention.
Cmssy defines blocks in your repository, as code:
import { defineBlock, fields } from "@cmssy/react";
import Hero from "./Hero";
export const heroProps = {
heading: fields.text({ label: "Heading", required: true }),
subheading: fields.textarea({ label: "Subheading" }),
image: fields.media({ label: "Background" }),
};
export const heroBlock = defineBlock({
type: "hero",
label: "Hero",
component: Hero,
props: heroProps,
});The component is typed from that schema, so the two cannot drift apart:
export default function Hero({ content }: BlockProps<typeof heroProps>) {
const { heading, subheading, image } = content;
// rename `heading` in the schema and this stops compiling
}What each approach actually buys you
The case for defining blocks in code comes down to one thing that turns out to matter a lot: the contract between the schema and the renderer is enforced. Rename a field in a UI-based schema editor and the component that reads it does not break - it silently renders nothing, and you find out when someone looks at the page. Rename a field in defineBlock and the build fails before it ships.
Everything else follows from the schema being a file. A structural change is a pull request, with a diff, a reviewer and a git revert if it was wrong. A feature branch gets its own set of blocks, so a preview deployment is genuinely isolated instead of sharing one schema with production.
The case for defining blocks in the UI is equally real, and we are not going to pretend otherwise: a new content structure does not need a deploy. If you are an agency running forty client sites, or a marketing team without a developer on retainer, "the marketer needs a testimonial variant today" is a requirement that a code-first CMS answers badly. That is a genuine cost of our approach, not a rounding error.
Our position, and where we don't take it
Cmssy does not put everything in code. We split it deliberately:
- Blocks live in code - because that is where the schema-to-renderer contract lives, and a broken contract there is a broken page.
- Content models live in the CMS - because an editor adding a field to a
productor anfaq-itemshould never wait for a deploy. - A relation field bridges them -
fields.relation({ model: "faq-item", mode: "all" })lets a code-defined block pull in CMS-defined records.
If your team has no developer, that first bullet is a cost you should not pay, and Storyblok is the more sensible tool. We would rather say so than win an argument and lose you three months later.
Multilingual
This is where the two products diverge most sharply on cost.
Storyblok meters locales by plan: the free Starter plan includes 2, the Growth plan at $99/month also includes 2, and Growth Plus at $349/month raises it to 10. A fourth market is a pricing conversation.
Cmssy does not meter languages. Every block is language-keyed at the content level on every plan, and AI can fill in the translations over MCP. This very article exists in five languages and that costs nothing extra.
Winner: Cmssy - decisively, if you sell in more than two markets.
The API
Storyblok ships a REST content delivery API on every plan. GraphQL is listed as a Premium/Elite feature - that is the tier with custom pricing, not a number on the page.
Cmssy is GraphQL from the bottom plan up. The SDK client is a thin gateway rather than a set of wrappers: anything you can express as a query is your own query, typed by codegen.
Winner: Cmssy on availability. Storyblok's REST API is perfectly good, but putting GraphQL behind a sales call is a real gate.
AI
Storyblok has added AI features, including AI SEO on the Premium and Elite tiers.
Cmssy exposes the whole workspace over an MCP server, so an agent like Claude creates pages, writes copy, fills translations and sets SEO fields through the same API the editor uses. It works on content and never on your code - your blocks stay yours. MCP access is on the Pro plan at $19/month.
Winner: Cmssy - agentic content operations, not a chat box bolted to a field.
Hosting and Ownership
Another tie worth stating plainly. Both are headless: neither hosts your site. You build a Next.js (or Nuxt, or Astro) app, deploy it where you like, and the CMS serves content over an API. Nobody is locking your frontend in.
Pricing
Storyblok: Starter free (1 seat, 1 space, 2 locales), Growth $99/month (5 seats, 2 locales), Growth Plus $349/month (15 seats, 10 locales), Premium and Elite on request. Extra seats are $15/month.
Cmssy: Hobby free (1 workspace, 5 pages, 3 custom blocks), Pro $19/month (5 workspaces, unlimited pages, 25 custom blocks, AI and MCP), Enterprise on request.
The gap between $19 and $99 is the headline, but the gates matter more than the number. Read what your plan excludes, not just what it costs. Storyblok figures checked 27 July 2026 - verify them before you decide.
Where Storyblok Wins
A comparison where the vendor wins every round is marketing, not information. Storyblok is genuinely ahead of us in several places:
- Maturity - years in production at large organisations, with the operational scar tissue that produces.
- Ecosystem - a large marketplace of integrations, field-type plugins and agency partners. Ours is young.
- Editorial workflow at scale - release management, custom roles and approval workflows are built for newsrooms and large marketing teams.
- Enterprise operations - SSO, SCIM and published uptime SLAs of 99.9% and 99.99%.
- Framework breadth - first-class SDKs across many frameworks. Cmssy is deliberately focused on React and Next.js.
If you need approval workflows across a thirty-person editorial team, or your procurement process starts with a SOC 2 questionnaire and an SSO requirement, Storyblok is a safer answer today.
Comparison
| Feature | Cmssy | Storyblok |
|---|---|---|
| Visual editor | Yes | Yes |
| Block schema | Code (typed, in your repo) | UI (Block Library) |
| Schema-renderer contract | Compiler-enforced | By convention |
| New structure without deploy | Content models only | Yes, any block |
| Locales | Not metered | 2 free, 2 on $99, 10 on $349 |
| GraphQL | All plans | Premium/Elite |
| AI over MCP | Pro ($19/mo) | AI SEO on Premium/Elite |
| You deploy & host | Yes | Yes |
| Release management | No | Premium/Elite |
| SSO / SCIM | Enterprise | Premium/Elite |
| Entry paid plan | $19/mo | $99/mo |
The Verdict
Pick Storyblok if your content team is large and needs approval workflows and release scheduling, if you need SSO and an SLA to get through procurement, or if you have no developers and need to add content structures yourself.
Pick Cmssy if you have a developer and want the block schema to live in your codebase where the compiler can defend it, if you sell in more than two languages, if you want GraphQL without a sales call, or if you want an AI agent operating your content through MCP.
The honest summary: Storyblok is the safer enterprise purchase, Cmssy is the better developer-owned stack. Both give your editors a visual editor - that argument is over.
Next Steps
- Follow the installation guide to wire
@cmssy/reactand@cmssy/nextinto a Next.js app - See how blocks are defined in code
- Read about the MCP server
- Compare headless CMS architecture more generally