I need a CMS that allows for visual editing but does not produce bloated code.

If your priority is visual editing + genuinely clean HTML, I’d look beyond the typical all-in-one visual builders.

My shortlist

• Pinegrow + Pinegrow CMS — probably the closest match if clean, developer-controlled HTML is the top priority. Pinegrow edits real HTML/CSS visually rather than hiding the site behind a proprietary page-builder abstraction. Its CMS mode lets editors change defined areas of a static HTML site, while the underlying site remains plain HTML. Pinegrow Pinegrow Best for: developers/designers who want visual editing without surrendering control of markup.
• Kirby CMS — my pick if you want a proper CMS rather than a visual website builder. Kirby's Blocks field provides a visual, modular editing experience, while the developer controls the actual HTML through templates/snippets. That makes it possible to produce very lean, semantic markup. Kirby CMS Kirby CMS Best for: content-heavy sites where editors need a pleasant visual-ish authoring experience but developers care deeply about output.
• Webflow — excellent visual editing, but I'd put it behind the two above if code cleanliness is a hard requirement. Webflow provides a visual canvas and structured CMS, and describes its output as clean code, but you're still working within a visual site-builder ecosystem. Webflow Best for: teams where visual design freedom matters more than having complete control over the generated architecture.

The distinction I'd make

If by "visual editing" you mean:

I want the client to see the page and visually change text, images, sections, etc. then Pinegrow CMS is particularly interesting. It lets you define exactly which portions of your existing HTML are editable; its CMS metadata is stored directly in the HTML and adds only a small amount of markup.Pinegrow

If you mean:

I want a WordPress-like CMS where editors can construct pages from visual blocks. then Kirby is probably the more natural choice. Its block system lets you define precisely how each block is rendered, rather than having the editor generate arbitrary nested markup.Kirby CMS+1

My overall recommendation: Kirby for a conventional CMS; Pinegrow CMS if your overriding goal is "give editors visual editing while keeping my HTML as close to hand-written HTML as possible."

If you tell me whether you're building a marketing site, blog, documentation site, or ecommerce site, I can narrow this down to 2–3 options and compare their HTML output, editor experience, hosting, pricing, and developer workflow.

If your priority is visual editing without generating bloated code, I would narrow the field considerably. Many drag-and-drop builders achieve visual flexibility by adding layers of unnecessary markup, scripts, and wrapper elements. The better choices are platforms where the visual editor maps more directly to semantic HTML/CSS structures.SaaSVersus+1

Best options

1. Webflow — best overall fit

Best for: marketing sites, agency sites, SaaS sites, professional websites

Why it fits:

• Visual editor works closer to how a front-end developer builds: containers, classes, flexbox, grid, breakpoints.
• Produces relatively clean HTML/CSS compared with traditional page builders.
• Strong CMS for structured content (blogs, case studies, team pages, directories).
• Lets designers control layout without relying on plugin stacks.SaaSVersus+1

Tradeoffs:

• Has a learning curve; it is closer to a visual development tool than a simple website editor.
• You are somewhat tied to Webflow hosting/CMS features.Framer → Next.js Optimizer

My default recommendation for your requirement: Webflow.

2. Framer — clean and fast for simpler sites

Best for: startups, portfolios, landing pages, design-heavy marketing sites

Strengths:

• Very fast visual workflow.
• Modern component-based approach.
• Generally lean output and good performance for smaller sites.Framer+1

Tradeoffs:

• CMS and content modeling are not as deep as Webflow or WordPress.
• Less suitable for large editorial sites with complex content relationships.Framer Websites

Choose Framer if your site is mostly:

• Home
• About
• Services
• Portfolio
• Blog/news (small to medium)

3. WordPress + a lean theme/block system — best ownership option

Best for: content-heavy sites, publishing, memberships, complex functionality

WordPress itself does not have to be bloated. The bloat usually comes from:

• Heavy multipurpose themes
• Excessive plugins
• Visual builders that generate lots of wrapper markup

A carefully built WordPress site using native blocks or a lightweight theme can be very efficient. The advantage is flexibility and ownership.SaaSVersus+1

Platforms I would be cautious about for your goal

• Elementor-heavy WordPress builds: easy editing, but often produce unnecessary DOM complexity and performance issues.
• Wix/Squarespace-style builders: excellent for convenience, but less appealing if clean output and developer control matter.
• Overly automated AI site builders: fast, but often sacrifice structure and maintainability.

My shortlist

If you are building a marketing website, I would choose Webflow. If it is a portfolio/startup landing site, I would seriously consider Framer. If it is a publication, documentation site, or content business, I would lean toward WordPress.tooldecisionengine.com+1

Yes. If your priority is visual editing without the CMS dictating a bloated frontend, I’d focus on headless CMSs with visual editing, rather than traditional visual site builders.

My shortlist

CMS	Visual editing	Frontend control	Code-bloat risk	Best for
Storyblok	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Low	Best overall fit
Sanity	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Very low	Developer-led teams
Builder.io	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Low–medium	Marketing teams + component systems
Payload	⭐⭐⭐/⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Very low	Code-first Next.js projects
Prismic	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Low	Marketing sites

1. Storyblok — probably your best match

Storyblok is particularly interesting because its visual editor operates on top of your existing frontend, rather than generating an entire website-builder-style DOM/CSS system.

Its Visual Editor lets editors click components in a rendered preview, rearrange blocks, and see changes in real time. Importantly, the visual editing functionality doesn't alter your production HTML structure.Storyblok+1

That makes a stack like:

Next.js/Astro + Tailwind + your components + Storyblok

quite clean.

storyblok.com

2. Sanity — best if developers are in charge

Sanity is another strong choice if you want the frontend to remain completely yours.

Its visual editing approach essentially connects the CMS to your rendered application rather than asking the CMS to generate the application. That's a good architecture if your definition of "no bloat" is semantic HTML + your own React/Astro/etc. components + minimal CMS runtime overhead.

3. Builder.io — best if visual composition is the priority

Builder.io gives editors an exceptionally powerful visual canvas while allowing developers to register their own components and design system.Builder.io

It can also generate code using Tailwind and claims to produce semantic, contextual code.Builder.io

I'd choose Builder if nontechnical marketers need to construct pages, but I'd choose Storyblok/Sanity if developers care more about keeping the architecture pristine.

4. Payload — worth watching

Payload is particularly attractive if you're building a Next.js/TypeScript application and don't want your CMS to become a separate architectural universe.

Its visual editor is currently described by Payload as "coming soon," so I wouldn't choose it specifically for visual editing today unless you're comfortable with its current/enterprise offering and roadmap.Payload

What I'd choose

If your requirement is:

"Give marketers a visual editor, but when I inspect the website I want clean HTML, my own components, my own CSS, and minimal JavaScript." I'd rank them:

1. Storyblok → 2. Sanity → 3. Builder.io → 4. Prismic → 5. Payload

The important distinction is that visual editing doesn't have to mean visual site-builder-generated code. Storyblok and Sanity can give editors a visual representation of the actual application, while your development team retains control of the underlying markup and component architecture.Storyblok+1

If you tell me whether you're using Next.js, Astro, plain HTML, WordPress, or something else, I can narrow this down to the 2–3 CMSs that will produce the cleanest possible output for your stack.

If your priority is visual editing + clean/lightweight frontend code, I’d narrow the field to these:

CMS	Visual editing	Code bloat	Best for
Storyblok	Excellent	Very low	Developer-built sites where editors need WYSIWYG
Builder.io	Excellent	Low	Component-based React/Next.js sites
Webflow	Excellent	Moderate	All-in-one visual site building
Framer	Excellent	Low/moderate	Marketing sites where designers lead

My pick: Storyblok

Storyblok is probably the closest match if by "does not produce bloated code" you mean I want the frontend codebase to remain under my control.

It's a headless CMS: your developers create actual frontend components, while editors arrange and edit those components through a visual interface. The visual editor renders your real site, rather than generating an entire website-builder DOM structure.Storyblok+1

That means you can have something like:

Next.js
  ├── Hero
  ├── Features
  ├── Testimonials
  └── CTA

        ↑

    Storyblok CMS
    (visual editing)

The CMS supplies content and component composition; your frontend determines the HTML, CSS, JavaScript, accessibility, and performance. Storyblok specifically uses component-based content structures and supports frameworks such as React, Next.js, Vue, Nuxt, and Svelte.Storyblok+1

Builder.io is the other one I'd seriously consider

Builder.io takes a similar approach but puts more emphasis on visual page composition. You register your existing code components, and marketers can drag those components around in the visual editor.Builder.io

That's particularly attractive if you already have a React/Next.js design system and want non-developers to build pages without introducing arbitrary HTML/CSS everywhere.

What about Webflow?

Webflow is excellent if you want the whole website-building experience rather than a headless CMS. It generates semantic, standards-compliant HTML/CSS and offers code export.Webflow

But I'd put it behind Storyblok/Builder if code cleanliness and architectural control are your primary requirements. Webflow's exported site also has its own framework/base CSS and JavaScript, and CMS functionality doesn't come along with a code export.Webflow Help Center

Bottom line

If I were choosing specifically for your requirement:

1. Storyblok — best balance of visual editing and clean custom frontend 2. Builder.io — best if you want powerful visual page composition on top of React components 3. Webflow — best if you want an all-in-one visual builder and don't mind its generated architecture 4. Framer — great for design-heavy marketing sites, but less attractive if maximum control over the underlying code is the goal

The key distinction is "visual editing of my components" vs. "visual generation of my website." If you want the former, I'd start with Storyblok or Builder.io.Builder.io+1

If you tell me your stack (e.g. Next.js, Astro, WordPress/PHP, plain HTML, etc.), I can recommend the best 2–3 options specifically for it.