LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Variable scope
  • Variables
  • System
  • String
  • Number
  • Boolean
  • JSON
  • Resource
  • GraphQL
  • System Resource

Was this helpful?

Edit on GitHub
  1. university
  2. Foundations

Data Variables

Data Variables enable the definition and use of a value throughout the page.

PreviousDesign TokensNextExpression Editor

Last updated 3 months ago

Was this helpful?

Hint: CSS Variables are different than Data Variables. They enable the reuse of values in the Style Panel.

Data Variables are defined on any instance in the navigator such as Global Root, Body, or Heading. Variables can be found on the right panel in the settings tab.

Variable scope

Variables are available within the instance they are defined on and any of its children. They are not available in the parent.

If you define a variable on the Global Root, it will be available on all pages and can be used within Slots.

To access variables in the Page Settings, the variable must be defined on the Body of the page.

Variables

System

System variable is a unique variable in that it exists by default, while all other variables are added by the user.

System variable contains the following:

  • Params – Key/value pairs that are defined in Dynamic Page URLs.

  • Search – Key/value pairs of query parameters that may exist in the URL.

  • Origin – The URL of the current site. It will display whatever the actual URL is, so in the builder, it will be the internal wstd.io domain, but on the published site, it will be the current origin, likely a custom domain.

String

A String variable holds text data, which can be used for content like titles, descriptions, and labels.

Number

A Number variable stores numeric values, including integers and decimals. It's useful for calculations, counters, and any numeric data that components might need to display or use in logic.

Boolean

A Boolean variable represents a true or false value. It is ideal for toggling states, such as visibility.

JSON

A JSON variable allows for structured data in JSON format. It is ideal for creating simple data structures used with Collections to iterate over each item, such as creating a dynamic gallery.

Resource

A Resource variable gets its value from a fetch request, allowing data from a remote system to be used within Webstudio. For example, Resource can be used to interact with a REST API. While it can also be used to interact with a GraphQL API, it’s recommended to use the GraphQL Resource instead.

The are several fields available to configure the fetch request.

Shortcut: The URL field supports pasting in a cURL command. Doing so will automatically populate the various fields within the Resource. Many API docs will provide you with a cURL command, so look out for it to save time.

  • URL – Where the resource is located.

  • Method – A request method. Refer to the third-party API docs to find the suitable method.

  • Headers – Key/value pairs such Content-Type application/json. Refer to Request Headers for more info.

Response

Once the Resource fetches data, you'll use the Expression Editor to bind data from the response to your website. See Binding for more information.

Caching

You may be wondering whether every visit to your blog results in an API call to your CMS or if the content is cached in Webstudio.

When you configure a Resource, the data is fetched using Cloudflare Workers, which has a built-in caching system.

Several factors determine what gets cached and for how long, but one of the primary factors is what the origin system instructs the requesting entity to cache. In other words, the headless CMS tells Cloudflare Workers what can be cached, if anything, and for how long.

This feature request would allow users to override the origin’s cache rules easily. Subscribe and vote if you are interested.

Webstudio sees approximately 45% of sub-requests (i.e., fetches from Cloudflare Workers) served from the cache. This means that, on average, roughly half of the time someone visits a page that uses Resources, such as a blog post, the request will go through to the origin/CMS.

GraphQL

A GraphQL Resource variable gets its value from a GraphQL API, allowing data from a remote system to be used within Webstudio. While similar to Resource, it’s unique in that the available fields are specifically designed for interacting with GraphQL APIs.

The are several fields available to configure the fetch request.

  • URL – Where the resource is located.

  • Query – A GraphQL query.

  • Variables – A JavaScript object containing variables that will be passed into the request. This is commonly used to pass in parameters in a URL within a Dynamic Page. For example { slug: system.params.slug } See System Variable for more info.

System Resource

A System Resource variable gets its value from internal data.

For example, there is a Sitemap inside the System Resource. It contains the data about the static pages on the website, which is commonly used to build a custom sitemap that combines dynamic data with static data. Refer to the XML Node component for more info.

⚛️
🔡
Variables in the builder

The requests, including any sensitive secrets like API keys, are handled on the backend and are never exposed to the client.

The requests, including any sensitive secrets like API keys, are handled on the backend and are never exposed to the client.