How to retrieve a CMS value in a custom code component?

To illustrate this, let's implement a way to refresh a page automatically every X seconds, where X is a value controlled by a CMS field.

In Framer, you can easily create a small code override that will refresh the page after a specific value – 10 seconds for example.

In order to link this value to a CMS field, we’re gonna need to:

1. Create the CMS field

2. Insert the value on the canvas

3. Retrieve this value via code

4. Store this value in a global variable (also named the Store¹)

5. Set a timer with this value

Let’s dive in, step by step. And remember to leave a comment if you’re facing any issue with it.

1. Create the CMS field

This part should be easy. Just make sure you create a new CMS collection and create a field with the type Number.

2. Insert the value on the canvas

Create a CMS entry with the desired number value, then insert the whole collection on the canvas.

Trim all unnecessary layers to leave only the field we’re interested in (the number).

3. Retrieve this value with a code override

3.1. Create a new code override

Head to the assets tab and create a new code override named withStore.

3.2. Insert new code

Remove the default piece of code inserted by Framer, and insert the following code instead:

---