Canvas – an easier way to create and deliver long-form content

Headless CMS platforms are a game changer in many ways. Storing content as highly structured data broken down into many individual fields unlocks almost endless possibilities for organising, reusing, and distributing your content. All those neat little pieces of data are perfect for developers looking to deliver them to just the right place in a website, app, or search.

Unfortunately, when the time comes to create long-form content, the writing experience provided by most headless CMS platforms just doesn’t match up to content authors’ expectations. It makes sense to store content such as product records, event details, or person profiles as sets of fields containing information that can be reused in a multitude of locations. But a piece of long-form content such as a blog, news article, or policy is intended to be read in its entirety – it's not likely to be broken up and reused in different ways on different platforms or channels. When you're authoring this content, it doesn't make sense to spend unnecessary time breaking the content down into individual fields when you will never use it in that way – you need a single editor that allows you to write text and insert images, video, tables, and other rich content.

We previously tried to address this in Contensis with the composer field, which allows you to effectively create your own drag-and-drop editor using your own choice of field editors and custom components. However, it’s hard to stay in your flow when writing long-form content in a composer. Each time text is broken up by an image, quote, or table, you have to insert a new field editor of that type, add your content, then insert another text field to continue writing. Similarly, pasting anything other than uninterrupted text content into a composer involves splitting your content into individual fields as you paste it in.

Today we’re streamlining the authoring of long-form content with the release of our new rich-text editor – Canvas. Canvas is a modern block-based editor, built from the ground-up to provide a distraction-free interface for creating long-form structured content that can be delivered anywhere as clean JSON, making it easy for developers to style and render it as appropriate for each situation.

While composers are containers into which you can add other field editors, Canvas is a block-style text editor into which you can also add components and link to entries.

All content in Canvas is made up of blocks and decorators. Blocks determine how your content is stored. You can choose from blocks including headings, paragraphs, lead, code, panels, tables, images, lists, dividers and components.

Every paragraph, heading, table, image is its own individual block of content. You can drag and drop each one to reorder your content, add a HTML anchor to target that element with an anchor link, duplicate, or delete it.

Depending on the block you use you can also specify how your content should be styled using decorators. These include formatting options such as strong, emphasis, underline, variables and code.

If you write regularly, there are few better sensations than that feeling that the words are pouring from your fingertips onto the page or screen.

We’ve gone out of our way to make sure you can order, arrange, format and convert between different types of content using just your keyboard.

Familiar with Markdown? Format your content with standard Markdown tags and write without taking your fingers off the keyboard. Used to working in apps like Notion? Use slash commands to access the formatting menu. And, if you can’t remember the command you need, there’s an easy-to-use inline menu to fall back on.

Of course, content is more than text. Canvas makes it easy to add images, link to internal and external content, and even use existing components from your content model.

When you add a Canvas to a content type, as part of the configuration process you can specify whether authors can add managed images, external images, or both.

Managed images work in the same way as the image field editor you’re used to in Contensis. When you set up a Canvas you can specify which images should be displayed in the image gallery, whether authors should be allowed to upload images, and if so, where the images should be stored.

Reusable content, such as product entries, represents a significant investment in content, and choosing imagery for that content is an important design decision. Single-use content such as a blog post, on the other hand, doesn’t usually involve the same level of curation or sign-off. If you create long-form content such as blog posts, press releases, and similar articles, you probably use images more regularly, freely and creatively than when you’re creating more heavily structured and reusable content. To speed this up, if a Canvas is set to allow external images, you can paste in images, drag in images from your desktop, or insert a publicly hosted image’s file path using Markdown syntax. Externally referenced images won’t display in the image gallery, and so won’t be available for other authors to reuse.

Whether you use internal or external images, the image editor in Canvas the option to add captions and alt text.

Canvas allows far more sophisticated options for linking content than is possible in the current rich text field editor. Allow users to link to external URLs, entries, Site View nodes and in-page anchors.

The ability to link directly to in-page anchors is especially useful if you publish large pieces of content. Every heading in a Canvas has its own HTML anchor that is available as a target from the link window, allowing you easily create jump links between sections of a long article or blog. If you want to link to a content block other than a heading, such as a callout panel, you can do so by setting a HTML anchor from the options menu for that block.

As with images, all linking options can be enabled, disabled and configured from the validation settings panel for the Canvas in the content type builder.

You can extend Canvas by allowing authors to insert existing components from your content model into their Canvas content. If you enable components in a Canvas field, you can specify whether authors can add any component from your design system or only particular components.

This allows you to insert components into rich-content without having to break your content up like you would in a composer field. It is especially useful for marketing content where you could let authors use components such as an email newsletter sign-up component, related content banner, or curated product slider that already exist in your content model.

Canvas supports any component in Contensis, including those with nested components, and all components open in a flyout editor to preserve the Canvas editing experience.

We’ve designed Canvas to be the perfect place to create content. But, if you prefer to draft your content in another app before adding it to Contensis, you can paste in content from any source and Canvas will automatically convert it to use the right field types and decorators.

Write all of your documentation in Markdown? Just paste your document into a Canvas and Contensis will break it into the appropriate field types and style it accordingly. Create all of your content in Google Docs? Press CMD + V and Canvas will strip out all of Google’s extraneous markup. And when you have existing web pages you want to add to Contensis, simply paste the HTML straight into Canvas, images and all.

When you’re creating a content type, if you add a Canvas to a tab that doesn’t contain any other field editors, the entry editor will display the Canvas as a full-screen writing experience.

This gives content modellers the ability to provide a distraction-free editor to authors creating long-form content such as blog posts, documentation, newsletters, or text heavy pages such as terms and conditions.

Canvas isn’t only for long-form content. When you are modelling structured content, Canvas also offers a valuable alternative to the all-or-nothing choice between using a plain text field and the existing rich-text editor.

Let’s say you want to add a field to a content type to allow authors to add text that can contain a link but not any other formatting. As plain-text fields don’t support inline links, before Canvas you’d have to use a rich-text field and trust authors not to add bold or italicised text. Now you can add a canvas field with just the link field type enabled and rest assured that your content is fully validated.

To ensure your Canvas content remains as future-proof and platform-agnostic as possible, it’s stored as JSON – an industry standard format that can be transferred anywhere and everywhere.

We’ve created our own Canvas schema that separates content and the styling, describing presentation rather than forcing a particular type of markup. So, if you add a strong decorator to a word or paragraph, we don’t specify that this should be marked up with a bold tag or a strong tag. Instead, we say that the emphasis is strong, and leave you to style that in your preferred way on your front-end site, whether that’s with a <bold> tag, a <strong> tag, or a <div> with a class of strong.

All content that's created in a Canvas and through the Management API is validated based on its field settings to prevent any erroneous data being stored, meaning we can strip out any markup or data that's not expected when you import content from other systems, ensuring that your content is stored ready for use.

And, to make it easier to get your content out of Contensis, we’ve developed a set of packages to render Canvas JSON as HTML in your front-end projects. These provide a default rendering of clean semantic HTML while giving you the ability to customise that render. So, whether you want to add personalised styling, additional classes, or extra wrappers around particular content in the components that you're going to render in your front-end site, you can save time by using our packages as a starting point.

If you’re an existing Contensis customer, request an upgrade to Contensis 16 today to get access to Canvas. If you aren't using Contensis yet, request an enterprise trial to try Canvas for yourself.