Search code examples
cssformattingformatcontent-management-systemheadless-cms

How to style content coming from a Headless CMS?


Last month I read about Headless CMS for the first time, and I just felt in loved with that approach.

But just right after, I wondered how could I format and/or add style to the content if some day I worked with this technology.

By styling the content, I mean words within a title, paragraph and so on; not a whole paragraph, which is quite obvious it can be done.

It seems to me that it is impossible, since you only get a JSON with no HTML whatsoever; just raw texts. So it looks like this is the major downside of consuming content through a Headless CMS from a Front End perspective.

Formatting text is just fundamental, specially when dealing with large content. And I am sure I cannot be the first one concerned about not being able to add some bold and/or italics to a text to emphasize the important parts of it.

But I can't find any website discussing this topic, just "how to model the content" and whatnot.

Does really no one care about it?

I would appreciate if anyone could shed some light about this question.


Solution

  • TLDR: Markdown.

    The company I work for uses DatoCMS. We have a blog, and each blog post is created in our CMS by our copywriting team. DatoCMS allows us (the developers) to create "blocks" that make up the blog post. We have image blocks and content blocks that are rendered by a template file on our frontend. The content blocks support Markdown, so italics, bold, and links work. When our copywriting/marketing team want to make a new blog post, they go to the CMS, create a new post, add a title, slug, and blocks, and then save.

    I don't have much experience with other Headless CMS', so not sure if Markdown will work there, but I don't know why it wouldn't, Markdown is all over the internet. (In fact, this answer is Markdown XD)