Build custom apps with the Contentful App Framework

What is the App Framework?

Contentful’s market-leading App Framework is an agile way to assemble integrations between Contentful and your digital tools. It provides the tools you need to quickly build apps that customize Contentful to fit your business needs.

The possibilities are endless. You can customize workflows to minimize manual steps, tailor user interfaces for specific teams, connect your favorite tools and frameworks to the content platform, and extend the platform's capabilities to create unique solutions. 

The App Framework has proven popular with our customers. More than half of our Premium customers use apps on a regular basis and Free tier users are building hundreds of apps every month. We’ve also seen steady adoption among our partners, with many great additions to the App Marketplace. 

What makes the App Framework so useful?

We built the App Framework with developers in mind and included some unique features to make it as friendly and flexible as possible.

• We offer a design system so you don’t need a designer. Contentful’s open-source design system, Forma36, offers ready-to-use visual components, so developers can focus on writing the business logic and still produce apps that fit seamlessly into the user interface.

• You can host your app with us to reduce external dependencies. Whereas others ask you to host your apps/integrations somewhere, Contentful allows you to host your app with us. This means you don't have additional dependencies like AWS, Azure, Heroku, Netlify, and you have one less bill to pay.

• Built-in app versioning lets you revert to the previous version if something goes wrong. This might be flying under the radar. As you upload newer versions of your app bundle, we preserve the older versions giving you, in effect, a built-in way to version your apps.

• We make it easy to distribute your app so others can use it. If you choose to share your app with the rest of the world (something you configure in the app definition) it becomes installable with a single click from a public URL. This obviously makes it very easy for other users to start using your app.

• Full automation capability means you can do more stuff with apps. Our app framework allows you to touch any content management API endpoint, which means apps can be used to automate any step of creating, managing, and publishing content. Not just a few select tasks, but the entire content creation lifecycle. You can build apps to create content but also to set up and manage adjacent things like setting up webhooks, adding users, installing apps, configuring preview environments, and so on.

What exactly are customers building with the App Framework?

The App Framework gives developers an incredible amount of power and flexibility to build a wide variety of apps.

For this post, we’ll focus on examples from three broad-use cases: editorial user experience, omnichannel experiences, and content factory.

If you’d like more details on any of these examples, check out our dedicated webinar on growing your CMS with the App Framework.

1. Editorial user experience

What we’re talking about here is customizing the content creation and management processes to empower editors to do more, in less time, with fewer developer dependencies.

Typically this increases happiness and productivity for both teams. Editors get the tools they need to do their jobs well and developers can focus on bigger projects instead of editorial requests.

Let’s look at some real-world examples.

Stock and inventory dashboard for retail editors

This handy app developed by a direct-to-consumer retailer allows editors to see inventory across different countries and national markets without leaving the web editor. The information is right where they need it to be when they’re making decisions about what gets promoted on the frontend that day.

Campaign dashboard for marketers with a Slack integration

This app developed by another ecommerce customer gives marketers a single place where they can see what campaigns are running. Custom fields provide exactly the information the team needs to avoid conflicting campaigns and better manage efforts in different markets.

The icing on the cake is a Slack integration that automatically notifies the team — even members who aren’t actively involved in content creation — whenever a new campaign goes live so everybody is in the know.

Custom interface for draft coverage

Sports teams and leagues have very unique editorial needs that aren’t easily met by an out-of-the box solution. Some of our sports customers have built custom apps that make it easier and more intuitive for their editors to assemble content for specific needs like a basketball draft. 

2. Omnichannel experiences

Customers want to enjoy the same experiences and access the same information regardless of whether they’re on your website, an app, or reading an email. Our content platform does a great job in helping teams deliver more consistent digital experiences, but managing omnichannel content can still pose unexpected challenges.

With the App Framework, customers can smooth those challenges out in ways that fit seamlessly into their existing workflows. Let’s look at some of those challenges and the solutions.

Optimizing video content for mobile

Video content is rising in popularity and is critical if you're in the education, fitness, or culinary industries.

With a majority of consumers accessing content on mobile devices, how do you ensure that videos are not just available across channels, but also optimized for them? One solution available in the App Marketplace is an app developed by Mux, a company that focuses on video management and streaming, and is really good at it.

Integrating this app with Contentful allows editors to pull videos into an entry, see them, and publish them as part of a smooth editorial flow. Behind the scenes, Mux does all the encoding, transformation, optimization, and tracking to ensure that video plays well on mobile and editors get the analytics they need.

Previewing content on a mobile device

Contentful makes it easy for editors to create multi-channel content, but how do you preview content on a mobile device when you’re sitting in front of your computer or laptop? There’s an app for that and it’s pretty cool. The app creates a QR code that displays in the entry sidebar where editors can scan it to preview content on their smartphone. It's a simple fix that makes editors very happy.

Using existing content to populate digital signage

Reuse is critical to efficient content operations, but how do you reuse content when the new format is very different? In the case of digital signage, we teamed up with ScreenCloud to build an app that enables you to map content to the new format and deliver it to in-store digital screens. This extends the reach of your content without the problems of a cut-and-paste approach.

3. Content factory

The content factory or digital factory is something we see among our biggest customers — companies that are managing multiple brands in multiple markets. As you can imagine, they are working with an enormous amount of content and other digital assets that need to be coordinated and surfaced in the right places. Let’s see how they do it.

Custom asset picker for homegrown digital asset management (DAM)

A leading video game company in North America built a custom asset picker to reduce the workload for editors and ensure consistency when managing different assets for different games. Editors can simply pick the asset and game from an internal database and the app provides all the meta data, descriptions, featured images, and other information they need. With one click they can fill out those fields accurately every time.

Apps for tracking content changes

You need to keep track of how your content is changing, where it's used and what versions you’re looking at in different environments. Forget the spreadsheets. Many of our customers are using  a simple diffing app to track changes to the content and the content model. This app is handy when working in Contentful environments. 

Our environments offer a great way to test new features in isolation, using a carbon copy of your production content. Once you’re happy with the changes, you can promote your sandbox environment to become THE environment powering your actual website.

But before you do, it's important to identify all the changes that have been made and ensure that no important content is omitted. A diffing app offers exactly this: it allows you to look at content from two environments side by side and quickly zero in on all the changes in your content.

AI-generated image descriptions

Using AI to autogenerate and autocomplete tasks can be a huge timesaver. One example we like is tagging images. Image descriptions are important for accessibility, but crafting those descriptions can be tedious. Using artificial intelligence, this image-tagging app generates descriptions that editors can accept or refine. 

How to start building apps with Contentful

When you’re ready to build your own app, we provide tools to help you get up and running really quickly.

One of these tools is the Create Contentful App, a command-line tool that builds out an entire directory structure with all the components you need to start building an app in Contentful.

The Create Contentful App is built on top of the Create React App, so the experience will be familiar if you’ve used that before. We’ve just added the Contentful flavor and connectors for you automatically.

Of course, you can work in a different framework if you choose. You will just need to connect the JavaScript SDK manually. We provide documentation for how to do that with any frontend project.

Regardless of where you start, we have tools and documentation to support you, including some great resources that let you dive in for free and get your hands dirty. Check out some of my previous App Framework tutorials or this App Framework course. 

Ready to go? Sign up to start building with Contentful, no credit card required. Use your favorite tech stack in a fully featured content platform that's open and extensible.