{"id":299541,"date":"2019-12-02T08:24:51","date_gmt":"2019-12-02T15:24:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=299541"},"modified":"2019-12-02T08:24:51","modified_gmt":"2019-12-02T15:24:51","slug":"headless-mode","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/headless-mode\/","title":{"rendered":"&#8220;Headless Mode&#8221;"},"content":{"rendered":"<p>A couple of months ago, we invited Marc Anton Dahmen to show off his database-less content management system (<abbr>CMS<\/abbr>) Automad. <a href=\"https:\/\/css-tricks.com\/developing-with-automad\/\">His post<\/a> is an interesting inside look at templating engines, including how they work, how CMSs use them, and how they impact the way we write things, such as loops.<\/p>\n<p>Well, Automad just released version 1.3.0 and it <a href=\"https:\/\/automad.org\/headless-mode\" rel=\"noopener\">introduces a &#8220;headless&#8221; mode<\/a> that brings it more in line with <a href=\"https:\/\/css-tricks.com\/jamstack-cmss-have-finally-grown-up\/\">where the <abbr>CMS<\/abbr> landscape seems to be <em>headed<\/em><\/a> (pun intended).<\/p>\n<p><!--more--><\/p>\n<p>And what the heck is a &#8220;headless&#8221; <abbr>CMS<\/abbr>? I always find that name to be a little weird, but the idea is that the engine for content creation is fully separated from the front-end display and instead stitched together by <abbr>API<\/abbr>s. This means we&#8217;re able to get all the wonderful benefits of creating content in a <abbr>CMS<\/abbr> without being locked into its templating requirements. Chris has a <a href=\"https:\/\/css-tricks.com\/what-is-a-headless-cms\/\">more thorough explanation<\/a> of the concept from a few years back.<\/p>\n<p>A good example is <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" rel=\"noopener\">WordPress and its REST <abbr>API<\/abbr><\/a>. We still enjoy the easy UI and extensible administrative features of WordPress, but can send the data anywhere via <abbr>API<\/abbr> to create the front end. Rather write your templates in JavaScript instead of PHP? <a href=\"https:\/\/css-tricks.com\/wordpress-react\/\">Go for it!<\/a><\/p>\n<p>If the <abbr>CMS<\/abbr> is a body and the front-end view is the head, then the body can unscrew its head and replace it with another. Weird, right?<\/p>\n<p>In any case, whether it&#8217;s Automad, WordPress, Sanity, Contentful, Ghost, Netlify <abbr>CMS<\/abbr>, or any others in the growing number of <abbr>API<\/abbr>-first options out there, the move toward headless is a space to watch. <a href=\"https:\/\/headlesscms.org\" rel=\"noopener\">HeadlessCMS.org<\/a> is a good place to do that. We could see vast changes that lead to both better content and developer experiences, which is what all of this is trying to accomplish.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A couple of months ago, we invited Marc Anton Dahmen to show off his database-less content management system (CMS) Automad. His post is an interesting inside look at templating engines, including how they work, how CMSs use them, and how they impact the way we write things, such as loops. Well, Automad just released version [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":299546,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[920],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/cubes-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":302760,"url":"https:\/\/css-tricks.com\/a-headless-cms-for-you-and-your-web-development-agency\/","url_meta":{"origin":299541,"position":0},"title":"A Headless CMS for You and Your Web Development Agency","date":"February 13, 2020","format":false,"excerpt":"Storyblok is a headless but component-based CMS with a built-in live-preview. You can use it for building fast and reliable websites and power native apps with your favorite technology. Let us start with the basics and\u00a0what a headless CMS is: A headless content management system is a back-end only content\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/storyblok-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":274014,"url":"https:\/\/css-tricks.com\/state-of-headless-cms-market\/","url_meta":{"origin":299541,"position":1},"title":"\u200bThe State of Headless CMS Market","date":"July 19, 2018","format":false,"excerpt":"In March and April 2018, Kentico conducted the first global report about the state of headless CMS market. We surveyed 986 CMS practitioners in 85 countries about their opinions, adoption, and plans for using headless CMS. The survey contains valuable industry insights into topics such headless CMS awareness, preferred headless\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/kentico-css-tricks-header-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265511,"url":"https:\/\/css-tricks.com\/ultimate-guide-headless-cms\/","url_meta":{"origin":299541,"position":2},"title":"The Ultimate Guide to Headless CMS","date":"January 18, 2018","format":false,"excerpt":"The World Has Changed\u2014So Must the CMS Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices\u2014the age of headless technology is coming. Headless CMS is the next generation in content management for brands that want to stay ahead\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/book-mockup-1_t.png?fit=1200%2C768&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271098,"url":"https:\/\/css-tricks.com\/the-ultimate-guide-to-headless-cms\/","url_meta":{"origin":299541,"position":3},"title":"The Ultimate Guide to Headless CMS","date":"May 17, 2018","format":false,"excerpt":"The World Has Changed\u2014So Must the CMS Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices\u2014the age of headless technology is coming. Headless CMS is the next generation in content management for brands that want to stay ahead\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/book-mockup-1_t.png?fit=1200%2C768&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275713,"url":"https:\/\/css-tricks.com\/ultimate-guide-to-headless-cms\/","url_meta":{"origin":299541,"position":4},"title":"\u200bThe Ultimate Guide to Headless CMS","date":"August 30, 2018","format":false,"excerpt":"Struggling to engage your customers with seamless omnichannel digital experiences? Then headless CMS is the technology you\u2019ve been waiting for. But with all the buzz around this new technology, you might be feeling a bit lost. Download our free headless CMS guide and get all the information you need to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/headless-cms-e-book-social-media-banner-2.png?fit=1024%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":272028,"url":"https:\/\/css-tricks.com\/headless-cms-fresh-air-for-developers\/","url_meta":{"origin":299541,"position":5},"title":"Headless CMS: The Developers\u2019 Best Friend","date":"June 7, 2018","format":false,"excerpt":"Your current CMS sucks! You know that for some time already but have not decided yet what your next solution should be. You've noticed all the buzz around headless CMS but you're still not sure what is in it for you and how it can solve all your woes. What\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/display-content-1200x600.ai_.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/cubes-pattern.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299541"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=299541"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299541\/revisions"}],"predecessor-version":[{"id":299590,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299541\/revisions\/299590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/299546"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=299541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=299541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=299541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}