Introduction

Butter can be used in a variety of ways — spreads, sauces, baking etc. And we’re the same way.

Our most common use case is to power websites. But we power more than just websites. We work with clients who use Butter to power their internal tooling and documentation, content repositories/backends, multi-tenancy platforms, eCommerce sites, customer lead generation tooling, and web and mobile applications.

Using a CMS as a mobile app builder

In this article, we want to move the focus away from websites to mobile apps.

Screen type vs. Screens

Our documentation uses the term “Page Type” to explain the content modeling schema for “Pages” and “Pages” as the area where content lives. Here, we’ll replace that terminology with “Screens” to be synonymous with mobile apps.

The Read API

Although our documentation is synonymous with websites, our API is not. You can use our flexible API to grab any content you want; whether that is from a Collection or a Screen. Some of our customers like to use the Read API to allow user-generated content within their applications and pick and choose where that content will be populated. Others enjoy the flexibility of allowing teams to drag and drop components within Butter and have those components rendered on their frontend, regardless of it being a website, web app, or mobile app.

You can easily do the same as well!

Take a look at the response from a simple landing page example:

{
  "slug": "landing-page-with-components",
  "name": "Landing Page with Components",
  "published": "2024-07-19T19:21:14.928092Z",
  "updated": "2024-07-19T19:21:14.981925Z",
  "page_type": "landing-page",
  "fields": {
    "seo": {
      "title": "Sample Landing Page with Components - powered by ButterCMS",
      "description": "Sample Landing Page with Components - powered by ButterCMS"
    },
    "body": [
      {
        "type": "hero",
        "fields": {
          "headline": "Welcome to your ButterCMS Proof of Concept",
          "subheadline": "Use this app as your own proof of concept to explore Butter's capabilities for yourself. When you're ready, host this app and invite your team to try it out all well!",
          "image": "https://cdn.buttercms.com/KYDhykkHTLGeGlRFr3wF",
          "button_label": "Update this Page in Butter",
          "button_url": "https://buttercms.com/pages/",
          "scroll_anchor_id": "home"
        }
      },
      {
        "type": "two_column_with_image",
        "fields": {
          "headline": "ButterCMS is your content backend",
          "subheadline": "Butter has three core content solutions: Pages, Posts, and Collections. Combine this with advanced capabilities like localization, Write API, multi-site + multi-env and Butter is your centralized content backend no matter how much content you're managing.",
          "image": "https://cdn.buttercms.com/rRxBvsDeQNdUK8uEb2qt",
          "image_position": "left",
          "button_label": "Update this Page in Butter",
          "button_url": "https://buttercms.com/pages/",
          "scroll_anchor_id": "about"
        }
      },
      {
        "type": "features",
        "fields": {
          "headline": "This page is built using ButterCMS Components",
          "subheadline": "This page is an example of utilizing Butter Components which allow you to build dynamic landing pages by choosing Components from a Component Library. Reuse and reorder Components in any way you want!",
          "scroll_anchor_id": "features",
          "features": [
            {
              "headline": "Components on this page",
              "description": "This sample page has four component types: hero, two column with image, features, and testimonials.",
              "icon": "https://cdn.buttercms.com/DxsEwBXzSmC1HDvPAFGI"
            },
            {
              "headline": "Build your own",
              "description": "This page is just an example set of Components. You can build your own custom Component library!",
              "icon": "https://cdn.buttercms.com/WMFFqK49RzWufEq50e3o"
            },
            {
              "headline": "Reorder them",
              "description": "Components are great because you can reorder them from your Butter dashboard",
              "icon": "https://cdn.buttercms.com/WMlrikbUTXCHjpfEVlEf"
            },
            {
              "headline": "Infinite possibilities",
              "description": "Build carousels, call to actions, testimonials, and much more. There's infinite flexbility.",
              "icon": "https://cdn.buttercms.com/0TAmtlhQkOm3xlQ2uF8B"
            }
          ]
        }
      },
      {
        "type": "two_column_with_image",
        "fields": {
          "headline": "Customize this page",
          "subheadline": "<p>Try updating the content of this page to reflect your own. You can also explore modifying these components or creating your own in your Butter dashboard.  Learn more about <a href=\"https://buttercms.com/kb/creating-editing-and-deleting-pages-and-page-types\">Page Types</a> and <a href=\"https://buttercms.com/kb/how-to-modify-components\">Components</a>.</p>",
          "image": "https://cdn.buttercms.com/WF0yFOVzSqyuE4gNJaZ5",
          "image_position": "right",
          "button_label": "Update this Page in Butter",
          "button_url": "https://buttercms.com/pages/",
          "scroll_anchor_id": "tryit"
        }
      },
      {
        "type": "testimonials",
        "fields": {
          "headline": "What our customers say",
          "scroll_anchor_id": "testimonials",
          "testimonial": [
            {
              "quote": "Super Flexible CMS Solution",
              "name": "Hampton Catlin",
              "title": "Creator of Sass and Haml"
            },
            {
              "quote": "A breath of fresh air in the CMS world, once you go headless with butter you'll never go back.",
              "name": "Bryan MacMillan",
              "title": "IT Admin"
            },
            {
              "quote": "I was able to quickly draft new pages, circulate them to the team, edit them, and then ultimately publish intuitively.",
              "name": "Kim Kohatsu",
              "title": "CMO"
            }
          ]
        }
      }
    ]
  }
}

Our flexible and consumable API produces JSON responses like the one above allows developers to map it to code and use it within your mobile app or in any project you’re working on.

Conclusion

The terms “page” or “screen” shouldn’t get lost in translation. They mean the same thing and you can use our Read API to retrieve data from Butter and display the content anywhere you would like.

Butter streamlines content workflows for marketers and non-developer teammates to quickly create, edit, and delete content without the need to go through your company’s development process. Also, depending on what changes to content you want to make, you can update your content without having to go resubmit your app to any app stores!

Take a peek at our documentation and starter projects for mobile app development with Android, Kotlin, React Native, iOS, Swift, Flutter, and Ionic!