Academy

Want to learn the essentials of WeWeb? Check out our Build a Proof of Concept course for an introduction to the WeWeb editor and how to work with data effectively.

Intro to variables

Variables are containers that store information in your WeWeb application. Think of them like labeled boxes where you can keep different types of data - text, numbers, lists, or even yes/no values. Just like how you'd label a box "Kitchen Items" to know what's inside, you give each variable a name to easily find and use its contents anywhere in your application.

For example, if you store the name "John Doe" in a variable called userName, you can display or use "John Doe" anywhere you need it on your website.

Check out this video to learn more about variables in WeWeb:

Create a variable

Let's take a look at each step:

1. Click on the Variables tab in the Interface section
2. Click Add Variable to create a new variable
3. Name your variable
4. Choose the variable type from the dropdown menu (e.g., Text, Number, Boolean, Query, etc.)
5. Optionally, you can set a default value for the variable in the Default value field
6. Decide if you want the variable to be preserved on navigation and/or saved in local storage
7. Click Save to create the variable

Now, you can use this variable throughout your website by binding it to UI components or using it in workflows.

Preserve on navigation and save in local storage

When you create a variable, you can decide how long WeWeb should keep its value.

• Preserve on navigation Keeps the value while the user moves from one page to another during the current session.
• Save in local storage Keeps the value in the browser, so it can still be there when the user refreshes the page or comes back later on the same device.

These two settings solve different problems, so it helps to choose them on purpose.

Preserve on navigation

Turn this on when the value should follow the user as they move through your app.

Good use cases:

• Keeping filter values while a user moves between a list page and a details page.
• Remembering which tab, step, or panel a user last opened during the current visit.
• Keeping temporary interface state without having to rebuild it on every page.

Watch out for:

• Showing stale information for a moment before a page loads fresh data.
• Carrying over a value that only made sense on the previous page.
• Keeping private information in memory longer than needed on a shared device.

Examples:

• Good fit: A user opens an orders list, chooses a date filter, then clicks into one order and goes back. Preserve on navigation helps keep the same filter in place.
• Use with caution: A user opens customer A, then customer B. If you preserve a variable that stores the previously selected customer, the page may briefly show customer A's information before customer B's data finishes loading.

Save in local storage

Turn this on when the value should still be there after a refresh or when the user comes back later in the same browser.

Good use cases:

• Saving interface preferences like theme, language, or dismissed banners.
• Remembering search filters that users expect to keep using across sessions.
• Storing draft values for a non-sensitive form that a user may finish later.

Watch out for:

• Old values sticking around longer than expected and confusing the user.
• Different people using the same browser seeing the previous user's preferences or draft values.
• Saving sensitive information like private profile details, tokens, or anything you would not want left on the device.

Examples:

• Good fit: A user hides some columns in a table and wants that layout to stay the same next time they open the app. Save in local storage is a good fit.
• Avoid this: A user enters personal details into a form on a shared computer. Saving those values in local storage could leave them behind for the next person using that browser.

Which option should you choose?

• Use neither option when the value should reset naturally on each page load.
• Use Preserve on navigation when the value only matters during the current visit.
• Use Save in local storage when the value should survive refreshes and return visits.

In most cases, you will choose one or the other, not both.

Save in local storage is the stronger option because it keeps the value beyond the current visit, so it also covers the common "keep this while the user moves around the app" need.

Use Preserve on navigation when you want session-only behavior. Use Save in local storage when you want the value to still be there after a refresh or when the user comes back later.

Variables types

In programming, variables are helpful to store, send, and display information. For example, you can store the name of a user in a Text variable (also called a string) or a list of users in an Array variable in your interface before sending the information to the Data & API tab.

However, if you try to send the value of a Text variable to a column that expects an Array, you'll get an error.

That's why it's important to understand the different data types you may encounter in web development.

Text

A text variable is a variable that stores text. You can use text variables to store text values, such as names, addresses, or any other text data. It's equivalent to a string in JavaScript.

Number

A number variable is a variable that stores numbers. You can use number variables to store numeric values, such as prices, quantities, or any other numeric data. It's equivalent to a number in JavaScript.

Boolean

A boolean variable is a variable that stores a boolean value (true or false). You can use boolean variables to store boolean values, such as a flag that indicates whether a user is logged in or not. It's equivalent to a boolean in JavaScript.

Object

An object variable is a variable that stores an object. You can use object variables to store complex data, such as a user profile, a product, or any other data that has multiple properties. It's equivalent to an object in JavaScript.

Array

An array variable is a variable that stores an array. You can use array variables to store a list of values, such as a list of products, a list of users, or any other data that has multiple values. It's equivalent to an array in JavaScript.

Query

You can use query variables to store the value of a query string parameter in an URL.

For example, you can use them to:

• Customize what a user sees based on how they got to your site (like showing different content when they click an email link)
• Remember which product someone wants to view (like going directly to a specific item when sharing a link)
• Keep track of where visitors came from (like knowing if they clicked an Instagram ad)
• Show personalized messages (like displaying "Welcome back!" when someone returns through a special link)

Inspect current value of variables

You can view and edit the current values of all your variables in real-time using the Variables tab in the Debug panel. This is especially useful for testing different scenarios and troubleshooting your application.

Learn more about viewing and editing variables in the Debug panel →

Utilizing variables in logic

CONTINUE LEARNING

The real power of variables comes in the ability to use them in bindings to create custom logic in your project:

Learn about binding →