The visual headless CMS

Get the benefits of a headless CMS in 10x less time, with no server tools needed, and using a drag and drop interface with complete design flexibility.

Illustration of a component and its content shown as data

The benefits of static output

A headless CMS that generates static HTML/CSS content doesn't require a backend system to run, so you get:

Better performance - pre-built pages load much faster than server-rendered sites

More secure - no database vulnerabilities or server-side exploits that come with other CMS's

Less overhead - no added server software to manage regular updates and maintenance for

Scalability - handle traffic spikes easily with the minimal infrastructure needed

Better SEO - pre-rendered content ensures faster indexing by search engines

The downside of headless CMS's

With great power comes... a lot of tooling and programming. Headless CMS's are based on modern web development principles: component based design, and decoupling of site architecture from content. These concepts come out of years of developing web apps.

While they are good models in theory, in practice, they go too far on the tech side and you end up editing content using the complexity of programming an app. Often this translates to specialized server requirements, and layers of Javascript frameworks that lead to bloated code and technical debt, with a hefty dose of maintenance over time. And this added complexity can limit your design and makes accessibility practices more difficult to implement.

Headless CMS without the complexity

Blocks Edit uses headless CMS principles of component design and decoupling of content from structure, but only requires HTML code to set up. Code your HTML using best practices and set editing guidelines around placeholder content and all the processing details happen in the background.

This is all the template code that's needed for a component:


        <section class="block-section" data-group="feature-section" data-title="Feature section">

          <h1 class="block-edit" data-block="feature-title">Collaborate with your team</h1>

          <p class="block-edit" data-block="feature-description">Use Milanote as your online whiteboard to brainstorm ideas and work with your team, wherever they're located.</p>

          <img class="block-edit" data-block="feature-screenshot" src="illustration-example.png" width="800" height="400">

        </section>

There's no backend code, or Javascript frameworks that you need to run and code in. You don't even have to add code to your HTML to setup your editing options, you can use the visual theme editor to do it.

Your component is made available in the left sidebar to drag and drop, with inline editing for your placeholder content. All content is stored as accessible data. And pages are output to static HTML, ready to publish to any host.