How to work with real dynamic data

⚠️ If you are looking to build a "real app" that creates, updates and lists dynamic data, a simple React application might be a better option for you, or a no-code app builder if you don't know code.

Framer is really good a working with different types of data to turn a layout into a template that you can use with different inputs. This page provides an overview of your different options:

Content Management System

The CMS is the easiest and most powerful way by far. It allows you to add collections of items with properties you can define yourself. You can then easily add date in special sheet like interface and render the items on separate pages or in a repeating element like Stack or Grid.

One thing the CMS cannot do (yet) is to work with external data (like an api).

Dynamic Content from an API (Code)

Because Framer has a code escape hatch, you can easily create a simple code component that fetches a data source and displays the results in a way you like.

You can import both Smart Components and other Code components into your code by clicking the “Import” button on the top left of the tools bar. This way, you can use components from your canvas in code again to mix and match for dynamic results.

Application State (Code)

Application state is what data flows inside your app; basically elements talking to each other. In this example we'll use overrides to hook a button up to a counter. Create an override file with the following code and draw a similar setup:

https://gist.github.com/koenbok/09785fd0aa6c7449561bc5927ef7aaeb

Now hook up the two overrides; the withIncrement to the button and withCount to the text field of the counter. Then preview and things will start to work.