# Table of Contents - [Welcome | Webstudio Documentation](#welcome-webstudio-documentation) - [Intro | Webstudio Documentation](#intro-webstudio-documentation) - [Building your first site | Webstudio Documentation](#building-your-first-site-webstudio-documentation) - [FAQs | Webstudio Documentation](#faqs-webstudio-documentation) - [Courses | Webstudio Documentation](#courses-webstudio-documentation) - [Roadmap & Links | Webstudio Documentation](#roadmap-links-webstudio-documentation) - [Copy-Paste | Webstudio Documentation](#copy-paste-webstudio-documentation) - [Foundations | Webstudio Documentation](#foundations-webstudio-documentation) - [Animations | Webstudio Documentation](#animations-webstudio-documentation) - [Design Tokens | Webstudio Documentation](#design-tokens-webstudio-documentation) - [CSS Variables | Webstudio Documentation](#css-variables-webstudio-documentation) - [Data Variables | Webstudio Documentation](#data-variables-webstudio-documentation) - [CSS | Webstudio Documentation](#css-webstudio-documentation) - [Markdown | Webstudio Documentation](#markdown-webstudio-documentation) - [Core Components | Webstudio Documentation](#core-components-webstudio-documentation) - [Commands & Search | Webstudio Documentation](#commands-search-webstudio-documentation) - [SEO Settings | Webstudio Documentation](#seo-settings-webstudio-documentation) - [Expression Editor | Webstudio Documentation](#expression-editor-webstudio-documentation) - [List | Webstudio Documentation](#list-webstudio-documentation) - [Shortcuts | Webstudio Documentation](#shortcuts-webstudio-documentation) - [Project Settings | Webstudio Documentation](#project-settings-webstudio-documentation) - [Image | Webstudio Documentation](#image-webstudio-documentation) - [Link | Webstudio Documentation](#link-webstudio-documentation) - [CMS | Webstudio Documentation](#cms-webstudio-documentation) - [Element | Webstudio Documentation](#element-webstudio-documentation) - [Share Links & Transferring Projects | Webstudio Documentation](#share-links-transferring-projects-webstudio-documentation) - [Webflow | Webstudio Documentation](#webflow-webstudio-documentation) - [Button | Webstudio Documentation](#button-webstudio-documentation) - [Vimeo | Webstudio Documentation](#vimeo-webstudio-documentation) - [YouTube | Webstudio Documentation](#youtube-webstudio-documentation) - [Text Animation | Webstudio Documentation](#text-animation-webstudio-documentation) - [HTML Embed | Webstudio Documentation](#html-embed-webstudio-documentation) - [Code Text | Webstudio Documentation](#code-text-webstudio-documentation) - [Separator | Webstudio Documentation](#separator-webstudio-documentation) - [Dialog | Webstudio Documentation](#dialog-webstudio-documentation) - [Publishing & Custom Domains | Webstudio Documentation](#publishing-custom-domains-webstudio-documentation) - [Blockquote | Webstudio Documentation](#blockquote-webstudio-documentation) - [Stagger Animation | Webstudio Documentation](#stagger-animation-webstudio-documentation) - [Radix UI Components | Webstudio Documentation](#radix-ui-components-webstudio-documentation) - [Video Animation | Webstudio Documentation](#video-animation-webstudio-documentation) - [Sheet | Webstudio Documentation](#sheet-webstudio-documentation) - [Radio Group | Webstudio Documentation](#radio-group-webstudio-documentation) - [Accordion | Webstudio Documentation](#accordion-webstudio-documentation) - [Webstudio AI | Webstudio Documentation](#webstudio-ai-webstudio-documentation) - [Vimeo Background Video | Webstudio Documentation](#vimeo-background-video-webstudio-documentation) - [Modes | Webstudio Documentation](#modes-webstudio-documentation) - [Time | Webstudio Documentation](#time-webstudio-documentation) - [Switch | Webstudio Documentation](#switch-webstudio-documentation) - [Form | Webstudio Documentation](#form-webstudio-documentation) - [How-Tos | Webstudio Documentation](#how-tos-webstudio-documentation) - [Head Slot | Webstudio Documentation](#head-slot-webstudio-documentation) - [Slot | Webstudio Documentation](#slot-webstudio-documentation) - [Tooltip | Webstudio Documentation](#tooltip-webstudio-documentation) - [Cloudflare Pages | Webstudio Documentation](#cloudflare-pages-webstudio-documentation) - [Using filters to dynamically display content (Airtable example) | Webstudio Documentation](#using-filters-to-dynamically-display-content-airtable-example-webstudio-documentation) - [Navigation Menu | Webstudio Documentation](#navigation-menu-webstudio-documentation) - [XML Node | Webstudio Documentation](#xml-node-webstudio-documentation) - [Collapsible | Webstudio Documentation](#collapsible-webstudio-documentation) - [Webhook Form | Webstudio Documentation](#webhook-form-webstudio-documentation) - [Tabs | Webstudio Documentation](#tabs-webstudio-documentation) - [Marketplace | Webstudio Documentation](#marketplace-webstudio-documentation) - [Animation Group | Webstudio Documentation](#animation-group-webstudio-documentation) - [Markdown Embed | Webstudio Documentation](#markdown-embed-webstudio-documentation) - [Content Block | Webstudio Documentation](#content-block-webstudio-documentation) - [How to create fluid video backgrounds with Vimeo | Webstudio Documentation](#how-to-create-fluid-video-backgrounds-with-vimeo-webstudio-documentation) - [Popover | Webstudio Documentation](#popover-webstudio-documentation) - [How to crop an image with out cropping the original image | Webstudio Documentation](#how-to-crop-an-image-with-out-cropping-the-original-image-webstudio-documentation) - [Vercel | Webstudio Documentation](#vercel-webstudio-documentation) - [Select | Webstudio Documentation](#select-webstudio-documentation) - [How to create a countdown | Webstudio Documentation](#how-to-create-a-countdown-webstudio-documentation) - [CLI | Webstudio Documentation](#cli-webstudio-documentation) - [Integrations | Webstudio Documentation](#integrations-webstudio-documentation) - [Download | Webstudio Documentation](#download-webstudio-documentation) - [How to add icons | Webstudio Documentation](#how-to-add-icons-webstudio-documentation) - [Errors | Webstudio Documentation](#errors-webstudio-documentation) - [Netlify | Webstudio Documentation](#netlify-webstudio-documentation) - [Content Embed | Webstudio Documentation](#content-embed-webstudio-documentation) - [GitHub Pages | Webstudio Documentation](#github-pages-webstudio-documentation) - [Self-Hosting | Webstudio Documentation](#self-hosting-webstudio-documentation) - [Worker not found | Webstudio Documentation](#worker-not-found-webstudio-documentation) - [How to integrate Webhook Form with Zappier | Webstudio Documentation](#how-to-integrate-webhook-form-with-zappier-webstudio-documentation) - [Build Your Own Directory Website with Airtable | Webstudio Documentation](#build-your-own-directory-website-with-airtable-webstudio-documentation) - [Contributing for Designers | Webstudio Documentation](#contributing-for-designers-webstudio-documentation) - [Connecting your Hostinger Domain to Webstudio | Webstudio Documentation](#connecting-your-hostinger-domain-to-webstudio-webstudio-documentation) - [Misc | Webstudio Documentation](#misc-webstudio-documentation) - [AWS with Flightcontrol (Docker) | Webstudio Documentation](#aws-with-flightcontrol-docker-webstudio-documentation) - [Contributing to the Marketplace | Webstudio Documentation](#contributing-to-the-marketplace-webstudio-documentation) - [Webstudio Support Process | Webstudio Documentation](#webstudio-support-process-webstudio-documentation) - [How to build a frontend for Hygraph using Webstudio | Webstudio Documentation](#how-to-build-a-frontend-for-hygraph-using-webstudio-webstudio-documentation) - [Account Limits | Webstudio Documentation](#account-limits-webstudio-documentation) - [Collection | Webstudio Documentation](#collection-webstudio-documentation) - [How to integrate Webhook Form with Pabbly | Webstudio Documentation](#how-to-integrate-webhook-form-with-pabbly-webstudio-documentation) - [AppSumo redemption failed | Webstudio Documentation](#appsumo-redemption-failed-webstudio-documentation) - [Fixing overflow issues | Webstudio Documentation](#fixing-overflow-issues-webstudio-documentation) - [Hetzner with Coolify (Docker) | Webstudio Documentation](#hetzner-with-coolify-docker-webstudio-documentation) - [Contributing for Developers | Webstudio Documentation](#contributing-for-developers-webstudio-documentation) - [Digital Ocean with Coolify (Docker) | Webstudio Documentation](#digital-ocean-with-coolify-docker-webstudio-documentation) - [How to build a frontend for Airtable using Webstudio | Webstudio Documentation](#how-to-build-a-frontend-for-airtable-using-webstudio-webstudio-documentation) - [How to integrate Webhook Form with N8N | Webstudio Documentation](#how-to-integrate-webhook-form-with-n8n-webstudio-documentation) - [How to add a GSAP animation | Webstudio Documentation](#how-to-add-a-gsap-animation-webstudio-documentation) - [How to integrate a Webhook Form with Airtable | Webstudio Documentation](#how-to-integrate-a-webhook-form-with-airtable-webstudio-documentation) - [How to build a frontend for Supabase using Webstudio | Webstudio Documentation](#how-to-build-a-frontend-for-supabase-using-webstudio-webstudio-documentation) - [How to integrate a Notion database with Webstudio | Webstudio Documentation](#how-to-integrate-a-notion-database-with-webstudio-webstudio-documentation) - [How to integrate Flotiq with Webstudio | Webstudio Documentation](#how-to-integrate-flotiq-with-webstudio-webstudio-documentation) - [How to build a WordPress frontend using Webstudio (no-code builder) | Webstudio Documentation](#how-to-build-a-wordpress-frontend-using-webstudio-no-code-builder-webstudio-documentation) - [Craft | Webstudio Documentation](#craft-webstudio-documentation) - [Email Protection | Cloudflare](#email-protection-cloudflare) --- # Welcome | Webstudio Documentation Our getting started guide will help you navigate through building your first Webstudio website. It covers the essentials of creating web designs and integrating third-party tools. You'll learn how to utilize Webstudio's unique features like Design Tokens and Components, and how to contribute to the project. [**Get started**](https://docs.webstudio.is/basics/building-your-first-site) * * * [🎓Building your first site](https://docs.webstudio.is/basics/building-your-first-site) [⚛️Foundations](https://docs.webstudio.is/university/foundations) [🧩Core Components](https://docs.webstudio.is/university/core-components) [▫️Radix UI Components](https://docs.webstudio.is/university/radix) [Marketplace](https://docs.webstudio.is/university/marketplace) [📤Self-Hosting](https://docs.webstudio.is/university/self-hosting) [🧑‍🏫How-Tos](https://docs.webstudio.is/university/how-tos) [🔗Integrations](https://docs.webstudio.is/university/integrations) [Craft](https://docs.webstudio.is/university/craft) [❓FAQs](https://docs.webstudio.is/basics/faq) ### [](https://docs.webstudio.is/#looking-to-contribute-to-webstudio) Looking to contribute to Webstudio? [🧑‍🎨Contributing for Designers](https://docs.webstudio.is/contributing/contributing-for-designers) [🧑‍💻Contributing for Developers](https://docs.webstudio.is/contributing/contributing-for-developers) [Contributing to the Marketplace](https://docs.webstudio.is/contributing/marketplace) [NextIntro](https://docs.webstudio.is/basics/intro) Last updated 11 months ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://webstudio.is/privacy) . AcceptReject --- # Intro | Webstudio Documentation Webstudio is an open-source visual development platform that empowers designers and developers to create responsive web designs with ease. Bridging the gap between design and code, it allows users to visually build while maintaining control over the underlying HTML, CSS, and JavaScript. ### [](https://docs.webstudio.is/basics/intro#for-designers) 🧑‍🎨 For Designers Webstudio offers a powerful platform for designers to bring their creative visions to life, without needing extensive coding knowledge. Its intuitive visual interface enables the construction of layouts, styling of components, and animation of elements in real-time on a live canvas. This direct manipulation of design elements facilitates immediate feedback and accelerates iteration cycles. ### [](https://docs.webstudio.is/basics/intro#for-developers) 🧑‍💻 For Developers Developers will appreciate Webstudio's flexibility and extensibility. It simplifies web development with its visual interface, yet provides full access to the underlying code. Developers can create custom components with complex logic or specific integrations, harnessing the power of coding while benefiting from Webstudio's streamlined visual workflows. As an open-source tool, Webstudio offers the freedom to extend functionality as needed and contribute to the enhancement of its features. [PreviousWelcome](https://docs.webstudio.is/) [NextBuilding your first site](https://docs.webstudio.is/basics/building-your-first-site) Last updated 1 year ago Was this helpful? --- # Building your first site | Webstudio Documentation Webstudio 101 Playlist This video series is a quick overview of the most important parts of the builder to get you up to speed. ### [](https://docs.webstudio.is/basics/building-your-first-site#signup-to-webstudio) 🚀 Signup to Webstudio 1. Visit [Webstudio](https://webstudio.is/) and click on the "start building" or "sign in" button. 2. Create an account using either Google or Github. ### [](https://docs.webstudio.is/basics/building-your-first-site#create-a-new-project-or-import-a-template) 🌟 Create a New Project or Import a Template Once logged in, you'll be taken to your dashboard. Here, you can view your existing projects and have the option to create a new blank project or start with a premade template. ### [](https://docs.webstudio.is/basics/building-your-first-site#understand-the-builder-interface) 🖥 Understand the Builder Interface Understanding the interface is key to effectively using any new tool. Familiarize yourself with Webstudio's builder – the heart of your website creation. The Components panel houses elements like text, images, links, and more, which you can drag onto your canvas. For an in-depth guide, read our [Intro to the Anatomy of the Webstudio Builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) . ### [](https://docs.webstudio.is/basics/building-your-first-site#use-design-tokens) 🎨 Use Design Tokens Webstudio utilizes Design Tokens for styling, offering consistency across platforms. These reusable styles help avoid naming conflicts and dependency issues common in large projects. Learn more about [Design Tokens in WebStudio](https://docs.webstudio.is/university/foundations/design-tokens) . ### [](https://docs.webstudio.is/basics/building-your-first-site#experiment-with-components) 🔧 Experiment With Components Components are the building blocks of your website. Experiment with basic ones like Text and Image, or delve into advanced components like HTML Embeds or Radix. Customize each component’s properties under "Settings." ### [](https://docs.webstudio.is/basics/building-your-first-site#preview-and-publish) 🌐 Preview & Publish Once you're satisfied with your creation, use the 'Preview' button at the top right corner before publishing it live on the internet! For more details, check our [Publishing and Custom Domains Guide](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains) . ### [](https://docs.webstudio.is/basics/building-your-first-site#join-the-community) 💬 Join the Community Learning a new tool takes time, so don't be discouraged by initial challenges. Keep exploring, experimenting, and [join the Webstudio community](https://wstd.us/community) for support and inspiration. [PreviousIntro](https://docs.webstudio.is/basics/intro) [NextCourses](https://docs.webstudio.is/basics/courses) Last updated 1 year ago Was this helpful? --- # FAQs | Webstudio Documentation 🌐 What is open source?[](https://docs.webstudio.is/basics/faq#what-is-open-source) Open source software stems from the free software movement, emphasizing freedom in software usage, modification, and distribution. While terms like _open source_, _free_, _libre_, and _open core_ have subtle differences, they share many principles. Key differentiators include licensing terms and the level of permissiveness. The Open Source Initiative defines criteria for open source software, including free redistribution, access to source code, and allowance for modified/derived works. Licenses must not discriminate against any groups or use cases and must permit bundling with other software. Some products blend open source and proprietary components, leading to the "open core" label, where the core functionality is open source but excludes proprietary parts. A well-known example is Android's use on Pixel phones: powered by the open source Android Open Source Project (AOSP), yet the phone's software remains proprietary. 🔑 How is Webstudio licensed?[](https://docs.webstudio.is/basics/faq#how-is-webstudio-licensed) Webstudio Builder is distributed under the AGPL license. The AGPL (Affero General Public License) is a copyleft license that requires any modified versions of the software to be released under the same license when it is used to provide services. Usage without modifications is free. 🔓 Is Webstudio Builder open source?[](https://docs.webstudio.is/basics/faq#is-webstudio-builder-open-source) Webstudio Builder is an open source, while the overall Webstudio Platform adopts an Open Core model. [Open Source Definition](https://opensource.org/osd) , [AGPL License](https://www.gnu.org/licenses/agpl-3.0.en.html) 💾 Can I use the CMS Integration when self-hosting?[](https://docs.webstudio.is/basics/faq#can-i-use-the-cms-integration-when-self-hosting) **Yes**. [CMS](https://docs.webstudio.is/university/foundations/cms) and [Resources](https://docs.webstudio.is/university/foundations/cms#resources) are available when self-hosting the builder and exporting the projects. The speed at which remote data is fetched will depend on your hosting. 🌍 What is Cloudflare Workers edge deployment, and how does it work?[](https://docs.webstudio.is/basics/faq#what-is-cloudflare-workers-edge-deployment-and-how-does-it-work) Cloudflare Workers are like small programs that run on Cloudflare's global network of servers. They allow you to customize and control how your website or application behaves, all without needing to manage your own server infrastructure. This global and distributed nature means that your code executes closer to your users, resulting in faster response times and improved reliability, regardless of where your users are located around the world. Plus, you can easily scale your application without worrying about provisioning or managing servers in different regions. [Cloudflare Workers](https://workers.cloudflare.com/) , [Cloudflare's open source workerd technology](https://blog.cloudflare.com/workerd-open-source-workers-runtime/) 🎨 What are design tokens?[](https://docs.webstudio.is/basics/faq#what-are-design-tokens) Design Tokens provide a unified system for managing styles like colors, spacing, and font sizes. They serve as a single source of truth for both designers and developers, housed in accessible formats like JSON files. This system ensures consistency across a project and simplifies design maintenance. A common application of design tokens is in semantic color naming, where names correspond to usage rather than color values. The flexibility of design tokens allows for referencing, condition-specific alterations, and mathematical manipulations. [WC3 Design Tokens Format](https://tr.designtokens.org/format/) , [Tokens Studio Plugin documentation](https://docs.tokens.studio/) 🛡️ What is GDPR, and how does it protect data? (What counts as GDPR compliant?)[](https://docs.webstudio.is/basics/faq#what-is-gdpr-and-how-does-it-protect-data-what-counts-as-gdpr-compliant) The GDPR is a stringent data privacy law applicable globally to organizations handling EU citizens' data. It grants EU citizens rights such as access, rectification, erasure, and objection to automated decision-making. Organizations must adhere to principles like lawfulness, fairness, transparency, and accountability. Violations can result in significant fines. Webstudio ensures its compliance with GDPR, although users must ensure their added functionalities on Webstudio sites also comply. [What is GDPR?](https://gdpr.eu/what-is-gdpr/) , [Who must comply with GDPR](https://gdpr.eu/companies-outside-of-europe/) 🖼️ How does Webstudio optimize images?[](https://docs.webstudio.is/basics/faq#how-does-webstudio-optimize-images) Images significantly impact web page sizes and loading times. Google's WebP format, supporting both lossless and lossy compression, alpha channels, and animation, helps reduce image sizes by about 30% compared to traditional formats. Webstudio automatically converts images to WebP and resizes them to fit webpage dimensions, ensuring optimal sizes without compromising quality. [WebP FAQ](https://developers.google.com/speed/webp/faq) 🚀 How can I use Webstudio today, and how will it evolve?[](https://docs.webstudio.is/basics/faq#how-can-i-use-webstudio-today-and-how-will-it-evolve) Currently, Webstudio excels in building super fast, responsive, dynamic websites. Future enhancements include linked CSS editors, animations engine, and real-time collaboration. Its open-source nature and API integration capabilities allow for extensive customization and connectivity with various services. [Webstudio Vision Document](https://webstudiois.notion.site/Vision-f52ed097ccaa410eb05076981d446c2f) 🆘 How to get additional support for my Webstudio purchase?[](https://docs.webstudio.is/basics/faq#how-to-get-additional-support-for-my-webstudio-purchase) Please [read this article](https://docs.webstudio.is/misc/webstudio-support-process) on where and how to get support. [PreviousRoadmap & Links](https://docs.webstudio.is/basics/roadmap-and-links) [NextFoundations](https://docs.webstudio.is/university/foundations) Last updated 1 year ago Was this helpful? --- # Courses | Webstudio Documentation ### [](https://docs.webstudio.is/basics/courses#webstudio-essentials-0-to-complete-website-with-seo) [Webstudio Essentials: 0 to Complete Website With SEO](https://shop.createtoday.io/l/webstudio-essentials) ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FXvjpMHqAa4cq56Gs3t5E%252Fimage.png%3Falt%3Dmedia%26token%3Def80c374-a72e-475a-833a-0d289017eb23&width=768&dpr=4&quality=100&sign=b17fefb8&sv=2) [PreviousBuilding your first site](https://docs.webstudio.is/basics/building-your-first-site) [NextRoadmap & Links](https://docs.webstudio.is/basics/roadmap-and-links) Last updated 1 year ago Was this helpful? --- # Roadmap & Links | Webstudio Documentation [](https://docs.webstudio.is/basics/roadmap-and-links#what-is-the-team-working-on) What is the team working on? -------------------------------------------------------------------------------------------------------------------- Despite being a small team, we're incredibly agile and committed to delivering a steady stream of fresh and exciting features to our users. We operate on a fortnightly release cycle for substantial feature updates, ensuring that Webstudio is always evolving and improving. Transparency is one of our core values, and we believe in sharing our development journey with our community. Follow along with the design, development, marketing, and operations behind the scenes at Webstudio. [![Logo](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fgithub.com%2Ffluidicon.png&width=20&dpr=4&quality=100&sign=4b52f218&sv=2)🚀 Roadmap • webstudio-isGitHub](https://wstd.us/roadmap) Roadmap at [https://wstd.us/roadmap](https://wstd.us/roadmap) Here you will find real-time updates and can see exactly what our team is working on, how far we've come, and what's coming up next. This open-door approach is part of our commitment to building a product that is as much a vision of our community as it is of our team. ### [](https://docs.webstudio.is/basics/roadmap-and-links#other-important-links) **Other Important Links:** * **Website:** [Webstudio](https://webstudio.is/) * **Discord:** [Join our community](https://wstd.us/community) * **GitHub:** [Webstudio Repository](https://github.com/webstudio-is/webstudio-community/discussions) * **Product Hunt:** [Webstudio on Product Hunt](https://www.producthunt.com/products/webstudio) ### [](https://docs.webstudio.is/basics/roadmap-and-links#social-media) Social Media * **YouTube:** [Subscribe on YouTube](https://www.youtube.com/@getwebstudio?sub_confirmation=1) * **Twitter:** [Follow us on Twitter](https://twitter.com/getwebstudio) * **LinkedIn:** [Connect on LinkedIn](https://www.linkedin.com/company/webstudio-inc/) [PreviousCourses](https://docs.webstudio.is/basics/courses) [NextFAQs](https://docs.webstudio.is/basics/faq) Last updated 1 year ago Was this helpful? --- # Copy-Paste | Webstudio Documentation [](https://docs.webstudio.is/university/foundations/copy-paste#supported-external-sources) Supported External Sources -------------------------------------------------------------------------------------------------------------------------- [↔️CSS](https://docs.webstudio.is/university/foundations/copy-paste/css) [↔️Markdown](https://docs.webstudio.is/university/foundations/copy-paste/markdown) [↔️Webflow](https://docs.webstudio.is/university/foundations/copy-paste/webflow) [PreviousCMS](https://docs.webstudio.is/university/foundations/cms) [NextCSS](https://docs.webstudio.is/university/foundations/copy-paste/css) Last updated 11 months ago Was this helpful? --- # Foundations | Webstudio Documentation [🛠️Anatomy of the Webstudio Builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) [🧱CSS Variables](https://docs.webstudio.is/university/foundations/css-variables) [🖌️Design Tokens](https://docs.webstudio.is/university/foundations/design-tokens) [🔡Data Variables](https://docs.webstudio.is/university/foundations/variables) [➕Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) [Animations](https://docs.webstudio.is/university/foundations/animations) [💾CMS](https://docs.webstudio.is/university/foundations/cms) [↔️Copy-Paste](https://docs.webstudio.is/university/foundations/copy-paste) [Commands & Search](https://docs.webstudio.is/university/foundations/commands-and-search) [🎯SEO Settings](https://docs.webstudio.is/university/foundations/seo-settings) [Shortcuts](https://docs.webstudio.is/university/foundations/shortcuts) [⚙️Project Settings](https://docs.webstudio.is/university/foundations/project-settings) [Modes](https://docs.webstudio.is/university/foundations/modes) [Share Links & Transferring Projects](https://docs.webstudio.is/university/foundations/share-links) [🌐Publishing & Custom Domains](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains) [PreviousFAQs](https://docs.webstudio.is/basics/faq) [NextAnatomy of the Webstudio Builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) Last updated 5 months ago Was this helpful? --- # Animations | Webstudio Documentation The Webstudio Animation Engine is a powerful, performant, and highly customizable system built on the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) , with lightweight [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) to ensure broad browser compatibility. It empowers designers and developers to create sophisticated animations with ease, offering scalability and flexibility for projects of any complexity. Whether you're animating simple transitions or orchestrating intricate, multi-layered effects, this engine provides the tools to bring your vision to life. If you want to learn the lower-level technical foundation behind Scroll-Driven animations, check out [https://scroll-driven-animations.style/](https://scroll-driven-animations.style/) . [](https://docs.webstudio.is/university/foundations/animations#core-features) Core Features ------------------------------------------------------------------------------------------------ * **Extreme Performance** – Optimized for smooth playback, even with complex animations and large-scale projects. * **Scalability** – Seamlessly handles everything from single-element transitions to nested, multi-group sequences. * **Full Customization** – Animate any CSS property and stack unlimited Animation Groups for intricate effects. * **Cross-Browser Support** – Built on the Web Animations API with polyfills to ensure consistent behavior across browsers. [](https://docs.webstudio.is/university/foundations/animations#key-components) Key Components -------------------------------------------------------------------------------------------------- The engine’s user interface is composed of three main components, each designed to work together for a cohesive animation workflow: 1. [**Animation Group**](https://docs.webstudio.is/university/core-components/animation-group) – The cornerstone of the system, Animation Groups serve as containers that define how their contents animate. They support two trigger types—view-based (scrollport entry/exit) and scroll-based (scroll position)—and offer extensive configuration options like axis, scroll source, insets, and debug tools. You can nest Animation Groups infinitely to craft complex, layered animations. 2. [**Text Animation**](https://docs.webstudio.is/university/core-components/text-animation) – Simplifies animating text by automatically splitting it into individual words or characters, allowing for dynamic effects without manual wrapping. 3. [**Video Animation**](https://docs.webstudio.is/university/core-components/video-animation) - allows video playback when video enters the scrollport. 4. [**Stagger Animation**](https://docs.webstudio.is/university/core-components/stagger-animation) – Creates a cascading effect by animating child elements sequentially. [](https://docs.webstudio.is/university/foundations/animations#hover-animations) Hover Animations ------------------------------------------------------------------------------------------------------ For interactive effects like hover animations, Webstudio leverages [CSS variables](https://docs.webstudio.is/university/foundations/css-variables) with a "parent interaction modifies children" approach. Define hover states on a parent element, then use CSS variables to adjust child element properties dynamically. For more information, see [CSS Variables – Parent-Child Interactions](https://docs.webstudio.is/university/foundations/css-variables#parent-child-interactions) . * * * The Webstudio Animation Engine is designed to make animations accessible yet powerful, bridging the gap between simplicity and sophistication. Whether you’re building subtle scroll-driven effects or elaborate interactive sequences, it delivers the performance and versatility to match your ambition. [PreviousExpression Editor](https://docs.webstudio.is/university/foundations/expression-editor) [NextCMS](https://docs.webstudio.is/university/foundations/cms) Last updated 4 months ago Was this helpful? --- # Design Tokens | Webstudio Documentation [](https://docs.webstudio.is/university/foundations/design-tokens#introduction) Why Tokens instead of classes? ------------------------------------------------------------------------------------------------------------------- If you’ve ever made a website with CSS or with Webflow, you’ve used “classes” to manage your website’s layout and visual styles. Sometimes we love classes. They give us a way to re-use styles which saves us valuable time. However, they have some limitations that make classes very frustrating to use in the context of visual development tools. Scenario: You’re building a website with Webflow. You have two separate elements, a button, and a card, and you want to give them the same box shadow. Buttons and cards have unique styles so they each already have a unique class. What do you do? * A: Manually configure the box shadow on the existing Button and Card classes individually. With this option you’re doing the same thing twice. It would save time if we could reuse the box shadow styles. * B: Apply the Box Shadow class on top of the existing Button and Card classes, making a combo class. Now you can’t edit the styles on Button or Card without first removing the Box Shadow class. Don’t forget to re-apply it! And good luck managing the classes on a different breakpoint. To edit the Button or Card classes you must first remove the Box Shadow combo class, then Webflow will kick you back to the desktop breakpoint, then you select the intended breakpoint again, then make your style changes, then re-apply the combo class. Experienced Webflowers know the pain. There’s a better way. It’s Design Tokens. [](https://docs.webstudio.is/university/foundations/design-tokens#what-are-design-tokens) What are Design Tokens? ---------------------------------------------------------------------------------------------------------------------- Design Tokens are everything that you wish classes would be - a way to reuse styles without limitations. * **Mix-and-match Tokens freely**: You can apply as many Tokens as you want to an instance in any order. There is no combo class silliness and no limitations with breakpoints. * **Universal format:** We didn’t invent Design Tokens. There is an independent spec (by the [Design Tokens Community Group](https://design-tokens.github.io/community-group/format/) ) that defines a data format for Tokens, meaning you can potentially import and export tokens between multiple apps. Soon you’ll be able to sync tokens between Webstudio and Figma through the [Tokens Studio for Figma](https://tokens.studio/) plugin! [](https://docs.webstudio.is/university/foundations/design-tokens#how-to-use-tokens-in-webstudio) How to use Tokens ------------------------------------------------------------------------------------------------------------------------ The workflow for styling Tokens in Webstudio is nearly the same as styling classes in Webflow, except better. First, it's recommended to create [CSS variables](https://docs.webstudio.is/university/foundations/css-variables) to use within the Tokens. You can style your site using Local or Tokens like this: ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FXgrE8h4LIqv4KMp9c5mN%252Fstyle-sources.png%3Falt%3Dmedia%26token%3D9e751de0-54de-4b55-9420-34d863962872&width=300&dpr=4&quality=100&sign=71e720f4&sv=2) The top of the Style Panel contains Style Sources. Here is where you can add new Tokens, select existing ones, and switch to Local styling. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FeCdh0Z7H2iQCUUlRmcTI%252Fconvert-to-token.png%3Falt%3Dmedia%26token%3Dd0b75a84-a02b-4cef-b20e-55b79508081f&width=300&dpr=4&quality=100&sign=2f323334&sv=2) Want to style something immediately without making a Token? Use the Local Style Source. Styles applied on Local only impact that instance, but you can easily convert styles from Local to a new Token. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FnIuoyC0zYrltYekmDazx%252Fnew-token.png%3Falt%3Dmedia%26token%3D1884baf1-640f-4052-9af0-46bc3bf79280&width=300&dpr=4&quality=100&sign=6f2518e&sv=2) To make a new Token, click inside the Style Sources input, type a name, and hit enter. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F3Wb9yh4MsjKIzSjbAN5I%252Ftokens-added.png%3Falt%3Dmedia%26token%3D88eca5e3-3f75-4fba-8aaa-546a093dd3c6&width=300&dpr=4&quality=100&sign=47006f01&sv=2) The Token you’re currently styling will be blue in the Style Sources input, while others are gray. Simply click on another style source to select it. Any styling you do will be applied to the current Token and reflected across all instances of that Token. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FHGaAeTwNR2oPX4IwuW4I%252FDesign_Tokens_Article_Img_5_nCXu4ddgLu3uyiVu-UvTn.avif%3Falt%3Dmedia%26token%3D2513d116-f41a-41fc-b515-6b090ccb4904&width=300&dpr=4&quality=100&sign=714b2b61&sv=2) Hover the label for a helpful description of where the styles on this property come from. In this case, we see that the width value that we just applied is coming from the Base breakpoint, the “new token” token on the Body instance. See [Label Colors](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder#label-colors) to understand what the different colors mean. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FxvoPADDoXusLPBkqQYEa%252Fempty-circle.png%3Falt%3Dmedia%26token%3D88a536b2-0fb8-4a38-b090-6f75b7633e9f&width=300&dpr=4&quality=100&sign=9720c09f&sv=2) A circle in the Token indicates that there are no styles applied to the Token. This will go away as soon as you apply a style. For Local, a dot is added to the center of the circle when styles are added. [](https://docs.webstudio.is/university/foundations/design-tokens#exporting-human-readable-classes) Exporting human-readable classes ----------------------------------------------------------------------------------------------------------------------------------------- By default, Tokens are converted to atomic styles, significantly reducing the amount of CSS, ultimately leading to a faster-loading website. While the majority of users aren't concerned with how the classes are output and should use atomic styles, they can be optionally disabled. See [Atomic CSS](https://docs.webstudio.is/university/foundations/project-settings#atomic-css) for more info. [PreviousCSS Variables](https://docs.webstudio.is/university/foundations/css-variables) [NextData Variables](https://docs.webstudio.is/university/foundations/variables) Last updated 8 months ago Was this helpful? --- # CSS Variables | Webstudio Documentation **Hint:** [Data Variables](https://docs.webstudio.is/university/foundations/variables) are different than CSS Variables. They enable the reuse of data in the Settings tab. Why Use CSS variables? * **Consistency** – Define a value once, like a color, and access that variable in every style input field. * **Speed** – Design quickly by selecting predefined variables from autocomplete. * **Experimentation** – Arrow through autocomplete and get real-time rendering of that variable to see which value looks best in your design. * **Parent-child interactions** – Have full control over the styles of all child instances when interacting with the parent. [](https://docs.webstudio.is/university/foundations/css-variables#css-variables-vs.-tokens) CSS variables vs. Tokens ------------------------------------------------------------------------------------------------------------------------- The concept of “reusability” is present in both CSS variables and [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) , but they are different and complement each other exceptionally well. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FgL2taay3a3KCSINbHtPQ%252Fcss-vars-vs-tokens.png%3Falt%3Dmedia%26token%3D0e6f823f-3323-418b-b01f-62bd5f8bf388&width=768&dpr=4&quality=100&sign=467d192d&sv=2) CSS variables and Tokens Let’s think of these two concepts as layers or building blocks. ### [](https://docs.webstudio.is/university/foundations/css-variables#layer-1-css-variables) Layer 1: CSS Variables **CSS variables are the bottom layer. They comprise individual variable names and values** often used for sizes, colors, and other styles with many input options. For example, you can create one variable per color in your design system. Those colors are going to be used throughout your site and in Tokens. ### [](https://docs.webstudio.is/university/foundations/css-variables#layer-2-tokens) Layer 2: Tokens [**Tokens**](https://docs.webstudio.is/university/foundations/design-tokens) **are the next layer. They package up** _**multiple**_ **styles.** A `Card` Token may include padding, color, and gap styles, for example. The values you enter for each style should be defined as variables. This approach ensures consistent designs and allows you to update a value in one place, with the change automatically reflected wherever the variable is used. With CSS variables, Tokens now often take a more semantic approach, such as calling them `Card`, `Team Member`, or `Testimonial`. Without CSS variables, Tokens were a blend between semantic and utility, such as `padding-medium`, `font-size-small`, and `Card`. **Tip:** While some utility Tokens will still be present, the majority of Tokens should be semantic. [](https://docs.webstudio.is/university/foundations/css-variables#creating-variables) Creating variables ------------------------------------------------------------------------------------------------------------- Before you create custom variables, be sure to check out [Craft](https://docs.webstudio.is/university/craft) — the standard guideline for building with Webstudio. It contains a library of expertly crafted CSS variables. A CSS variable is defined in the Advanced section by using two dashes followed by the variable name, like this: Copy --gray-5 This syntax is not unique to Webstudio. It’s the official [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) syntax. Then, the variable's value can be anything such as a color, gradient, duration, size, or number. ![CSS variable](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F08IvrmdYAckxZ5bVFa1O%252Fcss-var-example.png%3Falt%3Dmedia%26token%3D9976db44-e332-43a6-a6e6-306908595676&width=768&dpr=4&quality=100&sign=4119ec99&sv=2) Creating a variable and assigning a value [](https://docs.webstudio.is/university/foundations/css-variables#using-variables) Using variables ------------------------------------------------------------------------------------------------------- Once the variable is defined, you can use it on the instance it was defined on and any of its children. The variables are available in the autocomplete, so you can access variables by typing them in. ![Using a CSS variable](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F3gdA44Rb9awTkBtv6zjv%252Fcss-var-usage.png%3Falt%3Dmedia%26token%3Ddd0c3498-8087-41d1-aada-6e1f858ce2c8&width=768&dpr=4&quality=100&sign=db1044f6&sv=2) The autocomplete search algorithm is very flexible, letting you search by any of the following: * `--` * `var` * `gray` (variable name) You can search any part of your variable, and autocomplete will show you the proper results. The syntax for _displaying_ a variable is`var(--my-var)`, though it's much faster to search using `--`. Webstudio automatically handles the conversion to ensure proper output. ### [](https://docs.webstudio.is/university/foundations/css-variables#scope) Scope CSS variables, by nature, are available in the current instance and any of the children. #### [](https://docs.webstudio.is/university/foundations/css-variables#global-variables) Global Variables ![Global Root in Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FeF4vPfwgsEm2HpJB7L9Y%252Fglobal-root.png%3Falt%3Dmedia%26token%3Daf3db48c-1ce6-4ee6-bfeb-767472bb4ded&width=768&dpr=4&quality=100&sign=9b66fc13&sv=2) Global Root Most variables should be defined on the Global Root, which is the highest level of the page and the same for every page. That way, you can define `--my-color`, and it's available on every instance on every page. ### [](https://docs.webstudio.is/university/foundations/css-variables#local-variables) Local variables Some variables are only needed on a specific section or page. You can define these variables on a common ancestor of where they need to be accessed, such as a Box/wrapper. Here are some use cases for local variables: * Changing a child's design when interacting with the parent (see [Parent-child interactions](https://docs.webstudio.is/university/foundations/css-variables#parent-child-interactions) for more info). * Doing an A/B test without modifying the entire design system * Running a seasonal promotion and modifying colors for a section [](https://docs.webstudio.is/university/foundations/css-variables#parent-child-interactions) Parent-child interactions --------------------------------------------------------------------------------------------------------------------------- With CSS variables, you can interact with the parent and modify the styles of any of the children. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FOhZoZ5MwXqi68Q7jiJ2U%252Fparent-child-demo.gif%3Falt%3Dmedia%26token%3Dcbbd325c-cd0f-482d-b8ec-a20d6bedc0c6&width=768&dpr=4&quality=100&sign=ad12fea3&sv=2) Hovering the link and the children change (icon color, icon bg, and arrow appears) Video tutorial Here are the high-level steps to accomplish this pattern: 1. Take note of the various properties you want to change such as color and background color. 2. Create a variable on the parent for each style property such as `--child-color` and `--child-bg`. Leave the values empty for now. 3. Add the variables to the various children's style inputs, such as setting background to `--child-bg` (no style changes will happen yet because the variables don't have values). 4. Go back to the parent, where the variables are defined, and give them values for the default state. 5. Switch to the other state, such as hover, and change the variables' values. 6. Interact with the parent and see the child change! For step 2, it's possible to define variables and assign values all at once, but it's better to add the variables to the children first. If the variables aren't added to the children, the assigned values won't render anywhere, which makes it difficult to determine things like which color to use. You can define as many variables as you want and use them on any children where they are defined to create more complex interactions. [PreviousAnatomy of the Webstudio Builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) [NextDesign Tokens](https://docs.webstudio.is/university/foundations/design-tokens) Last updated 11 months ago Was this helpful? --- # Data Variables | Webstudio Documentation **Hint:** [CSS Variables](https://docs.webstudio.is/university/foundations/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. ![Variables in the builder](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FgbTJ1ub2FEyO9gfYgA52%252FScreenshot%25202025-09-08%2520at%252020.28.15.png%3Falt%3Dmedia%26token%3D94c1c9b8-8076-4fc1-a780-2f859b91e18b&width=768&dpr=4&quality=100&sign=ab9e0de5&sv=2) [](https://docs.webstudio.is/university/foundations/variables#variable-scope) 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](https://docs.webstudio.is/university/core-components/slot) . To access variables in the Page Settings, the variable must be defined on the Body of the page. [](https://docs.webstudio.is/university/foundations/variables#variables) Variables --------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/foundations/variables#system) 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. ### [](https://docs.webstudio.is/university/foundations/variables#string) String A String variable holds text data, which can be used for content like titles, descriptions, and labels. ### [](https://docs.webstudio.is/university/foundations/variables#number) 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. ### [](https://docs.webstudio.is/university/foundations/variables#boolean) Boolean A Boolean variable represents a true or false value. It is ideal for toggling states, such as visibility. ### [](https://docs.webstudio.is/university/foundations/variables#json) 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. ### [](https://docs.webstudio.is/university/foundations/variables#resource) 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](https://docs.webstudio.is/university/foundations/variables#graphql) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) . Refer to the third-party API docs to find the suitable method. * Search Params - Key/value pairs used for providing additional parameters as part of the URL. Values can be bound to other variables. * Cache Max Age allows you to define your own cache lifetime. * Headers – Key/value pairs such `Content-Type application/json`. Refer to [Request Headers](https://developer.mozilla.org/en-US/docs/Glossary/Request_header) for more info. The requests, including any sensitive secrets like API keys, are handled on the backend and are never exposed to the client. #### [](https://docs.webstudio.is/university/foundations/variables#response) Response Once the Resource fetches data, you'll use the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) to bind data from the response to your website. See [Binding](https://docs.webstudio.is/university/foundations/expression-editor#binding) for more information. #### [](https://docs.webstudio.is/university/foundations/variables#caching) 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](https://developers.cloudflare.com/workers/reference/how-the-cache-works/) . By default, 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. If you set a custom **Cache Max Age** value, it will define your cache lifetime instead of relying on API response headers. 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. ### [](https://docs.webstudio.is/university/foundations/variables#graphql) 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](https://docs.webstudio.is/university/foundations/variables#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](https://docs.webstudio.is/university/foundations/variables#system) for more info. The requests, including any sensitive secrets like API keys, are handled on the backend and are never exposed to the client. ### [](https://docs.webstudio.is/university/foundations/variables#system-resource) 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](https://docs.webstudio.is/university/core-components/xml-node#including-the-static-sitemap) for more info. [PreviousDesign Tokens](https://docs.webstudio.is/university/foundations/design-tokens) [NextExpression Editor](https://docs.webstudio.is/university/foundations/expression-editor) Last updated 9 days ago Was this helpful? --- # CSS | Webstudio Documentation [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) is the design language of the internet. With this feature, you can copy CSS from anywhere and paste it into Webstudio, which will parse it and populate the various fields in the Style Panel. [](https://docs.webstudio.is/university/foundations/copy-paste/css#how-to-paste-css) How to paste CSS ---------------------------------------------------------------------------------------------------------- ![pasting css from Figma into Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FEyYGMVfMyo2eoZgOOHO3%252Fcss-paste.gif%3Falt%3Dmedia%26token%3D3c432d17-ea05-4c2f-8cfa-f036516616bf&width=768&dpr=4&quality=100&sign=3fad079d&sv=2) 1. Copy CSS declaration(s) such as `background: blue;`. 2. In Webstudio, go to the Style Panel > Advanced > and click "+". 3. Paste the CSS and press enter. That's it. The styles are parsed and displayed in their respective fields (they will also be shown in the Advanced section). [](https://docs.webstudio.is/university/foundations/copy-paste/css#use-cases) Use cases -------------------------------------------------------------------------------------------- 1. **Design tools like** [**Figma**](https://figma.com/) **and** [**Penpot**](https://penpot.app/) provide CSS, making copying and pasting individual layer styles into Webstudio easier. 2. **Third-party libraries like** [**Open Props**](https://open-props.style/) provide expertly crafted CSS variables, allowing you to import them via paste. 3. **Custom stylesheets** containing Design Systems and other declarations can be imported. 4. Inspect your website with [**DevTools**](https://developer.chrome.com/docs/devtools) and copy the CSS. 5. Online tutorials, [CodePen](https://codepen.io/) , ChatGPT, and many other sources provide CSS. [](https://docs.webstudio.is/university/foundations/copy-paste/css#css-declarations-only) CSS declarations only -------------------------------------------------------------------------------------------------------------------- Webstudio liberates website creators from CSS selectors so they don't have to worry about specificity, combo classes, and having an HTML structure tightly coupled with CSS. Therefore, Webstudio supports pasting CSS declarations, _not_ selectors. [PreviousCopy-Paste](https://docs.webstudio.is/university/foundations/copy-paste) [NextMarkdown](https://docs.webstudio.is/university/foundations/copy-paste/markdown) Last updated 11 months ago Was this helpful? --- # Markdown | Webstudio Documentation Copy Markdown and paste it into Webstudio, and it will automatically add all the components, such as headings, images, and links. Many tools use Markdown behind the scenes, letting you copy directly from the editor. Example sources: * Markdown * Notion * SurferSEO * Obsidian * Coda Want to embed Markdown? See [Markdown Embed](https://docs.webstudio.is/university/core-components/markdown-embed) . [PreviousCSS](https://docs.webstudio.is/university/foundations/copy-paste/css) [NextWebflow](https://docs.webstudio.is/university/foundations/copy-paste/webflow) Last updated 1 year ago Was this helpful? --- # Core Components | Webstudio Documentation [📦Element](https://docs.webstudio.is/university/core-components/element) [🔗Link](https://docs.webstudio.is/university/core-components/link) [🖼️Image](https://docs.webstudio.is/university/core-components/image) [📃List](https://docs.webstudio.is/university/core-components/list) [⌨️HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) [🎬Animation Group](https://docs.webstudio.is/university/core-components/animation-group) [Text Animation](https://docs.webstudio.is/university/core-components/text-animation) [🎥Video Animation](https://docs.webstudio.is/university/core-components/video-animation) [👨‍👨‍👦‍👦Stagger Animation](https://docs.webstudio.is/university/core-components/stagger-animation) [✍️Webhook Form](https://docs.webstudio.is/university/core-components/webhook-form) [✍️Form](https://docs.webstudio.is/university/core-components/form) [⏯️Vimeo](https://docs.webstudio.is/university/core-components/vimeo) [▶️Vimeo Background Video](https://docs.webstudio.is/university/core-components/vimeo-background-video) [YouTube](https://docs.webstudio.is/university/core-components/youtube) [💬Blockquote](https://docs.webstudio.is/university/core-components/blockquote) [🔲Slot](https://docs.webstudio.is/university/core-components/slot) [Head Slot](https://docs.webstudio.is/university/core-components/head-slot) [➖Separator](https://docs.webstudio.is/university/core-components/separator) [📄Code Text](https://docs.webstudio.is/university/core-components/code-text) [🔘Button](https://docs.webstudio.is/university/core-components/button) [💾Collection](https://docs.webstudio.is/university/core-components/collection) [🪜Content Embed](https://docs.webstudio.is/university/core-components/content-embed) [🪜Markdown Embed](https://docs.webstudio.is/university/core-components/markdown-embed) [Content Block](https://docs.webstudio.is/university/core-components/content-block) [📘XML Node](https://docs.webstudio.is/university/core-components/xml-node) [🕐Time](https://docs.webstudio.is/university/core-components/time) [PreviousPublishing & Custom Domains](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains) [NextElement](https://docs.webstudio.is/university/core-components/element) Last updated 3 months ago Was this helpful? --- # Commands & Search | Webstudio Documentation Commands & Search speeds up the building process and introduces new shortcuts. **Open Commands & Search with ⌘ + K (Control + K for Windows).** ### [](https://docs.webstudio.is/university/foundations/commands-and-search#actions) Actions * Add components * Switch breakpoints * Switch pages * Open page settings * Execute commands * Unwrap – Move the children out of the current instance and remove the current instance. * Wrap In Box – Wrap the current instance in a Box. * Wrap In Link – Wrap the current instance in a [Link](https://docs.webstudio.is/university/core-components/link) . * All other [keyboard shortcuts](https://docs.webstudio.is/university/foundations/shortcuts) [PreviousWebflow](https://docs.webstudio.is/university/foundations/copy-paste/webflow) [NextSEO Settings](https://docs.webstudio.is/university/foundations/seo-settings) Last updated 9 months ago Was this helpful? --- # SEO Settings | Webstudio Documentation [](https://docs.webstudio.is/university/foundations/seo-settings#seo-features) ✅ SEO Features -------------------------------------------------------------------------------------------------- * Meta title * Meta description * Open graph * Semantic tags * Image alt text * All meta fields * Sitemap * Custom sitemap * No index * Default canonical with the ability to [customize it](https://docs.webstudio.is/university/core-components/head-slot) * Customizable head (global and [per page](https://docs.webstudio.is/university/core-components/head-slot) ) * Auto exclude no index from sitemap * Robots.txt * SSL * 301 redirects * 302 redirects * Site * WebSite structured data * Href lang tag * Auto image conversion (performance) * Auto image compression (performance) * Auto set image width and height (CLS) * Image lazy & eager loading options (performance and LCP) * Aria labels * Link rel * Favicon * All attributes [](https://docs.webstudio.is/university/foundations/seo-settings#global-site-settings) 🌐 Global Site Settings ------------------------------------------------------------------------------------------------------------------- In '[Project Settings](https://docs.webstudio.is/university/foundations/project-settings) ' under the Webstudio menu, you'll find essential settings for your entire project: * **Site Name**: Used to output WebSite structured data to clearly define your website's identity. * **Favicon**: Output your logo in search engines, browser tabs, and more. * **Custom Header Code**: Global field to output scripts in the head. For modifying the head on a per-page basis, see [Head Slot](https://docs.webstudio.is/university/core-components/head-slot) . These settings ensure uniformity and brand coherence across all pages of your website. [](https://docs.webstudio.is/university/foundations/seo-settings#individual-page-seo-settings) 🔍 Individual Page SEO Settings ----------------------------------------------------------------------------------------------------------------------------------- Fine-tune SEO settings for each page through the 'Pages' tab: * **Title & Description**: Craft unique titles and descriptions for each page, enhancing search engine visibility. * **SEO Previews**: Visualize how your pages will display in search results and on social media. * **Exclude from Search Results**: Opt to hide (no index) specific pages from search engines. No indexing the content will also remove it from the sitemap. * **Social Sharing**: Set engaging images for social media sharing, complete with previews. The social image you add to your homepage will be used as the cover image for the project on the dashboard. * **Custom Meta Tags**: Add additional Meta Tags your page for further search and social customization. * **Custom Head**: Visually customize the head on a per-page basis with [Head Slot](https://docs.webstudio.is/university/core-components/head-slot) . [PreviousCommands & Search](https://docs.webstudio.is/university/foundations/commands-and-search) [NextShortcuts](https://docs.webstudio.is/university/foundations/shortcuts) Last updated 7 months ago Was this helpful? --- # Expression Editor | Webstudio Documentation ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FsaJvjLveGEMkDm7ueUSc%252Fwebstudio-expression-editor.png%3Falt%3Dmedia%26token%3Dc8181ca4-c976-489b-99ef-ff0cee99ca52&width=768&dpr=4&quality=100&sign=8cca8bc6&sv=2) Expression Editor is available on every field when clicking the “+” button. Most commonly used with [Resources](https://docs.webstudio.is/university/foundations/variables#resource) , Expression Editor has two primary features: 1. Binding (or “connecting”) external data to Webstudio fields. For example, connecting a blog’s featured image that exists in a headless CMS to the Image component in Webstudio. 2. Running logical expressions such as concatenating two or more values or conditionally displaying a section. Hint: Expand Expression Editor to work within a larger window. [](https://docs.webstudio.is/university/foundations/expression-editor#binding) Binding ------------------------------------------------------------------------------------------- Binding is when you “connect” or “map” various values to fields within Webstudio. For example, when creating a Dynamic Page for a blog, only one page exists in Webstudio, but the values within that page dynamically change based on the URL viewed. The dynamic aspect is enabled by _binding_ the various CMS fields to Webstudio components. You will see [Variables](https://docs.webstudio.is/university/foundations/variables) within the Expression Editor. You can click on the variable or type it in to bind its value to the field. But many times, the value you are looking for is a child within the variable. Take, for example, the value of a custom Variable called CMS Data: Copy { "title": "Hello World", "slug": "hello-world", "image": { "url": "", "alt": "I'm an image", } } If you wanted to bind the title of the post to a header component, you need to do more than click on the “CMS Data” Variable. You need to “drill down” or access the children of the variable. This is simply done by typing a `.` after the Variable, which will show the children in the autocomplete (i.e., title, slug, and image). For the title, you would enter `CMS Data.title`, and the value “Hello World” would display. When viewing a different post, that post’s title would display. For the image URL, you would type `CMS Data.image.url` . [](https://docs.webstudio.is/university/foundations/expression-editor#expressions) Expressions --------------------------------------------------------------------------------------------------- Expression Editor supports a simple subset of JavaScript, giving users a simple syntax without the footguns a complex programming language brings. The following JavaScript expressions are supported: * [Ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) – Useful for conditions such as “If the image is in my CMS, display it, otherwise hide it.” The actual expression for this would look something like `CMS Data.image ? true : false` and be bound to the “Show” field. * [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) – Useful for inserting dynamic values inside templated text. For example, if you wanted to have “Updated On ”, it would look like `` `Updated On ${CMS Data.updatedOn}` ``. Note the Expression starts and ends with backticks, and the dynamic values are within `${}`. * [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators) – Useful for concatenating two values (alternative solution to template literals). For example, `"Updated on " + CMS Data.updatedOn`. [](https://docs.webstudio.is/university/foundations/expression-editor#example-expressions) Example expressions ------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/foundations/expression-editor#schema) Schema You can create a schema and bind your [CMS](https://docs.webstudio.is/university/foundations/cms) data to it. The schema can go in the head or body. Add an [HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) , create a binding, and use the following expression. Be sure to change out the schema type and variables with your data. Copy `` ### [](https://docs.webstudio.is/university/foundations/expression-editor#conditional-collection-items) Conditional collection items Sometimes we need to conditionally hide some records in a Collection based on some context. For example, below a blog post we can have related blog posts, but we wouldn’t want to show the _current_ blog post in there. To do so, create an expression on the Show property in Settings. We need to turn this statement into code: “If the current page’s slug is the same as the current collection’s slug, then don’t show this post.” Here is the expression. Be sure to modify it with your variables. Copy system.params.slug === collectionItem.slug ? false : true Again, be sure to change `slug` to your dynamic path parameter and `collectionItem.slug` to your Collection variable and its data. This expression will now show “false” meaning “turn this off” if the related blog post is actually the same as the current blog post. ### [](https://docs.webstudio.is/university/foundations/expression-editor#id-404-status-code) 404 status code When working with a dynamic page, how do we determine if the page should return `404` (not found) or `200` (found/success)? After all, the content on the page is dependent on the response from the [Resource](https://docs.webstudio.is/university/foundations/variables#resource) . Therefore, we need to tell the page to return `404` when the Resource doesn’t return any data. To do so, go to the Page Settings > Status Code > and bind an expression to it. The goal is to look for some piece of data in the response and if it’s not there, output `404`. Copy cmsData.data[0].id ? 200 : 404 This example looks for the ID of a record. If it’s there, output `200` (we found something!) otherwise nothing was found therefore `404`. The exact key to look for will depend on your CMS, but think of something that will always be there if the post/record is found (slug, ID, title). [PreviousData Variables](https://docs.webstudio.is/university/foundations/variables) [NextAnimations](https://docs.webstudio.is/university/foundations/animations) Last updated 6 months ago Was this helpful? --- # List | Webstudio Documentation ### [](https://docs.webstudio.is/university/core-components/list#how-to-use-the-list-component) How to use the List Component The “List” component can be found in **Components > General**, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. Every List component comes with three “List Item” instances as bullet points by default. To add more list items, place a “List Item” component in your list from **Components > General**. Once the List Component is on your canvas, you can customize its appearance in the Style panel. For instance, you can change bullet point styles, numbering formats, spacing, and text properties. #### [](https://docs.webstudio.is/university/core-components/list#list-style-type) List Style Type You can customize the “List Style” for your List instance by going to “List Style Type” in the Style panel. There are several options, including Disc, Circle, Square and Decimal. Setting the List Style Type allows you to define the appearance of the bullet points or numbering for list items, depending on the content’s context and your design choices. For example, you might choose “Decimal” for an ordered list of steps, but for a more decorative list, you could pick Disc or Circle. * * * ### [](https://docs.webstudio.is/university/core-components/list#how-to-customize-a-link-instances-properties-in-webstudio) How to customize a Link instance's properties in Webstudio ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FlxOjEq2QZ2yLTA5bcGfo%252FList_Component_Article_Image_KbSE_DHwgNmwowMkgT7Sy.avif%3Falt%3Dmedia%26token%3Db4028752-ca32-4ccf-b2e4-1c49ea53658c&width=768&dpr=4&quality=100&sign=30550ee9&sv=2) You can customize a List’s properties by selecting it and going to Settings. Lists come with three base properties: Ordered, Reserved, and Start. To add additional properties, click the “+” next to Properties and add a new property. #### [](https://docs.webstudio.is/university/core-components/list#ordered) Ordered If you enable the Ordered property on your list, it will convert all list items to numbers and create an ordered list. Ordered lists are commonly used for procedures, step-by-step guides, or any content that requires a defined sequence. #### [](https://docs.webstudio.is/university/core-components/list#start) Start The Start property sets the initial numbering value for ordered lists. It allows you to begin the list at a specific number, which is useful for scenarios where numbering should start from a custom value. To use the Start property on your list, enable the ‘Ordered’ property first if your list items are in bullet points. #### [](https://docs.webstudio.is/university/core-components/list#reversed) Reversed The Reversed property reverses the order in which list items are numbered. This is effective for countdowns, rankings, or any content that benefits from a reverse order. To use the Reversed property on your list, enable the ‘Ordered’ property first if your list items are in bullet points. [PreviousImage](https://docs.webstudio.is/university/core-components/image) [NextHTML Embed](https://docs.webstudio.is/university/core-components/html-embed) Last updated 1 year ago Was this helpful? --- # Shortcuts | Webstudio Documentation [](https://docs.webstudio.is/university/foundations/shortcuts#operating-system-notes) Operating system notes ----------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/foundations/shortcuts#windows) Windows * Replace `⌘` (`command`) with `control` (`Ctrl`). ### [](https://docs.webstudio.is/university/foundations/shortcuts#mac) Mac * On Mac, `alt` and `option` are the same key (`⌥`). [](https://docs.webstudio.is/university/foundations/shortcuts#general) **General** --------------------------------------------------------------------------------------- * Undo: `⌘ + z` * Redo: `⌘ + shift + z` * Deselect/abort: `esc` * Open Commands & Search: `⌘ + k` * See [Commands & Search](https://docs.webstudio.is/university/foundations/commands-and-search) to perform the following actions: * Unwrap * Wrap In Box * Wrap In Link [](https://docs.webstudio.is/university/foundations/shortcuts#sidebar-left) **Sidebar Left** ------------------------------------------------------------------------------------------------- * Copy: `⌘ + c` * Cut: `⌘ + x` * Paste: `⌘ + v` * Duplicate: `⌘ + d` * Open Navigator: `z` * Open Add Components: `a` * Edit Component: `enter` * Rename instance label: `⌘ + e` * Expand Navigator item: `right arrow` * Collapse Navigator item: `left arrow` * Expand all Navigator item children: `alt + click` [](https://docs.webstudio.is/university/foundations/shortcuts#style-panel) **Style Panel** ----------------------------------------------------------------------------------------------- * Open Style Panel: `s` * Focus Style Sources: `⌘ + enter` * Reset style: `alt + click` * Reset style for all sides: `shift + alt + click` * Edit spacing on all sides (via drag): `shift + drag` * Edit spacing on all sides (via one input): add value then `shift + enter` * Edit spacing on two sides (via drag): `alt + drag` * Edit spacing on two sides (via one input): add value then `alt + enter` * Increment value by 10: `shift + up/down arrow` * Increment value by .1: `alt + up/down arrow` * View the computed CSS variable value in the tooltip: `hold alt` [](https://docs.webstudio.is/university/foundations/shortcuts#settings-panel) **Settings Panel** ----------------------------------------------------------------------------------------------------- * Open Settings Panel: `d` [](https://docs.webstudio.is/university/foundations/shortcuts#top-bar) **Top Bar** --------------------------------------------------------------------------------------- * Open the current page's settings: `alt + click page` * Switch [modes](https://docs.webstudio.is/university/foundations/modes) * Design: `⌘ + shift + d` * Content: `⌘ + shift + c` * Preview: `⌘ + shift + p` * Switch between current mode and Preview: `⌘ + shift + c|d` * For example, if you are in Design mode, you can press `⌘ + shift + d` and it’ll toggle Preview. You can use the same shortcut to exit Preview. * Switch breakpoints: `numbers` (e.g., `1` switches to the first one) [PreviousSEO Settings](https://docs.webstudio.is/university/foundations/seo-settings) [NextProject Settings](https://docs.webstudio.is/university/foundations/project-settings) Last updated 5 months ago Was this helpful? --- # Project Settings | Webstudio Documentation Project Settings are located in the top left by clicking the Webstudio logo > Project Settings. ![Project Settings located in top left](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fupyk5TFZ52nZfKheBbYN%252Fproject-settings.png%3Falt%3Dmedia%26token%3D3c144b17-3e5a-47b1-aead-ab5d55d63f87&width=768&dpr=4&quality=100&sign=f35742ac&sv=2) [](https://docs.webstudio.is/university/foundations/project-settings#general) General ------------------------------------------------------------------------------------------ * **Site Name** – Used to output [WebSite structured data](https://schema.org/WebSite) to clearly define your website's identity. * **Favicon** – Output your logo in search engines, browser tabs, and more. * **Custom Code** – Global field to output scripts in the head. Custom Code is often used to add analytics scripts such as Google Analytics, PostHog, Plausible, and any other scripts/code you want to output on every page. Please note that this code does _not_ output in the Builder, so your scripts aren't tracking Builder page views. For outputting a script in the body on every page, use a [Slot](https://docs.webstudio.is/university/core-components/slot) . For example, add [HTML Embed(s)](https://docs.webstudio.is/university/core-components/html-embed) to your Footer Slot so that it outputs on every page. * **Compiler** – Atomic CSS reduces the CSS file size by ~70% in many cases. See more below. [](https://docs.webstudio.is/university/foundations/project-settings#publishing) Publishing ------------------------------------------------------------------------------------------------ ### [](https://docs.webstudio.is/university/foundations/project-settings#atomic-css) Atomic CSS ![Atomic css setting](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FRLQyfV73V5vjeOzmAIH4%252Fatomic-css-setting.png%3Falt%3Dmedia%26token%3Da6d0e24a-b77c-4311-aa5b-17fd9e289518&width=768&dpr=4&quality=100&sign=c08fb1bc&sv=2) When enabled, the class and CSS structure under the hood contains one style per class. This algorithm allows classes to be reused, significantly reducing the amount of CSS, ultimately leading to a faster-loading website. For example, in the UI, you may create a Token called “Card” and give it a background color, padding, and a border-radius. With atomic CSS _enabled_, it will output like this: Copy .ceszdr { background-color: #fff; } .c1jykks9 { border-top-left-radius: 1rem; } .c31r7mo { border-top-right-radius: 1rem; } .cywm6f1 { border-bottom-left-radius: 1rem; } .c1q77ydo { border-bottom-right-radius: 1rem; } .cu6yur2 { padding: 20px; } Even though this seems to take up more space, its benefits become apparent as you style more parts of the website. Now, anytime you add 20px of padding, it’ll automatically reuse the `cu6yur2` class. Generally speaking, there are somewhat of a finite amount of styles you’ll use on your website, so as the website gets bigger, the CSS file does _not_ grow proportionally – in fact, its growth slows down as the site gets bigger as it doesn’t need to continue creating classes for styles you’ve already used. Pretty neat. #### [](https://docs.webstudio.is/university/foundations/project-settings#the-data) The data Let’s quantify the CSS file size savings when using atomic CSS on Webstudio. * 4-page brochure website * With atomic: 21 KB * Without atomic: 75 KB * 23-page SaaS website * With atomic: 23 KB * Without atomic: 83 KB **In both cases, enabling atomic CSS reduces the file size by around 72%!** #### [](https://docs.webstudio.is/university/foundations/project-settings#disabling-atomic-css) Disabling atomic CSS Even though atomic CSS improves website performance by reducing the CSS file size, there are use cases to disable it. When exporting your Project to [self-host](https://docs.webstudio.is/university/self-hosting) it, you _may_ want to modify CSS and classes _outside_ of Webstudio. By disabling atomic CSS, your classes are human-readable, instead of using an optimized algorithm. If you need classes to target but want to enable atomic CSS, you can add classes in the settings panel. These will always output exactly as they are entered. Watch [this short video](https://www.youtube.com/watch?v=_1QSWHOtk08) to learn more. When atomic CSS is disabled, your components will have two classes: 1. A default class, such as `w-box` 2. Your [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) and Local Styles merged into another class The same example from above looks like this when atomic is _disabled_: Copy .w-box-1 { background-color: rgb(255, 255, 255); border-radius: 1rem; padding: 20px; } [](https://docs.webstudio.is/university/foundations/project-settings#redirects) Redirects ---------------------------------------------------------------------------------------------- Redirects old URLs to new ones so that you don’t lose any traffic or search engine rankings. 301 and 302 status codes are available. [](https://docs.webstudio.is/university/foundations/project-settings#marketplace) Marketplace -------------------------------------------------------------------------------------------------- You can contribute free or paid templates by creating a Project and submitting it for review. Approved templates will appear in the [Marketplace](https://docs.webstudio.is/university/marketplace) . For more information, see [Contributing to the Marketplace](https://docs.webstudio.is/contributing/marketplace) . [PreviousShortcuts](https://docs.webstudio.is/university/foundations/shortcuts) [NextModes](https://docs.webstudio.is/university/foundations/modes) Last updated 11 months ago Was this helpful? --- # Image | Webstudio Documentation * * * ### [](https://docs.webstudio.is/university/core-components/image#how-to-use-the-image-component) How to use the Image component The "Image Component" can be found in Components > Media, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-aca1bef614c116755ebcd24f5d65d901b48cf98b%252FImage-Article-1.webp%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=b718e4b5&sv=2) #### [](https://docs.webstudio.is/university/core-components/image#responsive-images) Responsive Images Webstudio automatically generates responsive images for your website, so you don't have to worry about manually resizing and optimizing images for different devices. These responsive images automatically adjust their size based on the user's screen size, ensuring optimal resolution and quick loading whether the user is on a desktop monitor or a smartphone. #### [](https://docs.webstudio.is/university/core-components/image#supported-image-formats) Supported Image Formats All images in Webstudio are automatically optimized and served in WEBP or AVIF format, depending on the responsive image resolution and browser support. This eliminates the need for pre-optimization and extra tools to compress or convert images. WEBP is supported by all modern browsers, including Chrome, Edge, and Firefox, while AVIF offers better compression quality and smaller file sizes but lacks support in browsers like Edge and Internet Explorer. #### [](https://docs.webstudio.is/university/core-components/image#ensure-a-stable-layout-for-improved-performance) Ensure a Stable Layout for Improved Performance It is essential to ensure that your browser can calculate an image's width and height without waiting for it to load. You can do this by setting the image's width/height in the Style panel or directly in the Image instance's properties. When you set an image's width and aspect ratio, your browser can calculate its height. You can define the width, height, and aspect ratio in the parent element's Style panel, or it can be hinted at by the layout around the image. If a browser can't calculate an image's size, it continues rendering the page, but the image element remains collapsed. Once the browser figures out the size of the unhinted image, it renders that image and recalculates every component on the site. This can create a glitch-like effect on the live site and negatively impact site performance. > Note: You can assess page speed using tools like [Page Speed](https://pagespeed.web.dev/) > . For reference, an unhinted hero image can easily decrease the page speed score from 100 to 70! #### [](https://docs.webstudio.is/university/core-components/image#provide-aspect-ratio-upfront) Provide Aspect Ratio Upfront In Webstudio, every image has its aspect ratio set automatically. To prevent any layout shifts on your site, it's best to set the "width" property for each image you add. This ensures that the images fit smoothly into the overall design without causing any unexpected changes in layout. * * * ### [](https://docs.webstudio.is/university/core-components/image#how-to-customize-an-image-instances-properties) How to customize an Image instance's properties You can customize the properties of an Image instance by selecting it and going to "Settings." Here is an overview of each property: #### [](https://docs.webstudio.is/university/core-components/image#source) Source The Source property lets you link an image file from the Assets Panel to your image instance. To add an image to your instance, click "Choose source" and select an image from the Assets Panel. If your image is not in the Assets Panel, you can upload it from your computer files. #### [](https://docs.webstudio.is/university/core-components/image#width-height) Width/Height The "width" and "height" properties define your image's initial display size in pixels and its aspect ratio. However, the final rendered image size is subject to CSS rules and layout constraints. This means that if you set the width or height of an image in the Style panel or the layout limits the space for the image, the Width/Height properties for the Image instance will be ignored. The Width/Height properties are prioritized in some cases. For instance, if you only set the image's height in the Style panel, the width will be automatically determined from the Image Instance's "Width" property, and vice versa. This maintains the aspect ratio while adjusting the image's size with your specified values. #### [](https://docs.webstudio.is/university/core-components/image#alternative-text-alt) Alternative Text (alt) The "alt" property provides alternative text for the image. This text is vital for accessibility purposes, as it describes the image's content in case the image cannot be seen. #### [](https://docs.webstudio.is/university/core-components/image#loading) Loading The "Loading" property specifies how the browser handles image loading. You can set it to "Lazy" to load the image only when it comes into the viewport or "Eager" to load it immediately. Here's a helpful tip: If you have an image in the initial viewport, always set it to "Eager." This way, the image gets priority, and it loads quickly, improving your site's overall performance. #### [](https://docs.webstudio.is/university/core-components/image#optimize) Optimize The "optimize" property lets you control if the image will go through the image transformation process including resizing, converting, and compressing it. This setting works on first and third-party images (e.g., images that come from a headless CMS). In rare scenarios, the user may want to turn this off. [PreviousLink](https://docs.webstudio.is/university/core-components/link) [NextList](https://docs.webstudio.is/university/core-components/list) Last updated 1 year ago Was this helpful? --- # Link | Webstudio Documentation * * * [](https://docs.webstudio.is/university/core-components/link#how-to-use-the-link-component) How to use the Link component ------------------------------------------------------------------------------------------------------------------------------ The "Link Component" can be found in Components > General, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. You can convert anything into a link by wrapping it inside the Link component, including text and images. These links can direct users to different pages within your site or lead to external resources, including other websites, downloadable files, or email addresses. * * * [](https://docs.webstudio.is/university/core-components/link#how-to-customize-a-link-instances-properties) How to customize a Link instance's properties ------------------------------------------------------------------------------------------------------------------------------------------------------------- You can customize the properties of a Link instance by selecting it and going to "Settings." Here is an overview of each property: ### [](https://docs.webstudio.is/university/core-components/link#href) Href ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F1av20UT2gwLziIQQq18z%252FMask_group_IidxWSFrpfv1FljERzYHo.avif%3Falt%3Dmedia%26token%3D99f75f3b-d683-471b-a40e-83ef7380c396&width=768&dpr=4&quality=100&sign=8a2b0c83&sv=2) The "href" property determines what the Link instance will lead to, such as a URL, page, phone, attachment, or email address. 1. **URL**: In its most common form, the "href" property references a URL, linking to another website or page. 2. **Page**: You can link to all of your pages within your site here. You can also link to specific sections within those pages. To link to a section on a page, first go to the section and fill out the `ID` field in Settings. Then go back to the link, select the page, and then in the next dropdown select the `ID` you just created. Like this: ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FXKeIhYUlsF8vlmn9HBSf%252Fsection-id.png%3Falt%3Dmedia%26token%3D56bc9a08-4662-47f9-9a4d-a80f2af1fef5&width=768&dpr=4&quality=100&sign=1fd06020&sv=2) First add the ID to the section you want to link to ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FHJDcj4BjwYeFfxlyqryu%252Flink-to-section.png%3Falt%3Dmedia%26token%3D3b6d9f64-6afe-4156-80dd-17cec5402f60&width=768&dpr=4&quality=100&sign=c59346db&sv=2) Then add a page link and select the section. 3. **Email**: When you specify an email address as the 'href' value, the link opens the user's default email client (such as Gmail) with the designated email address pre-filled. 4. **Phone**: If you set the "href" property to a phone number, the link becomes a prompt for users to initiate phone calls directly from their devices. 5. **Attachment**: You can also link to downloadable attachments such as PDFs, documents, or media files, allowing users to initiate file downloads with one click. ### [](https://docs.webstudio.is/university/core-components/link#target) Target ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FnBitPpdxjLQjgcQHEcCz%252FMask_group-1_E-3k5yfSy8NojJjjkjPZl.avif%3Falt%3Dmedia%26token%3D826f1136-9ee2-4518-b054-774f06280467&width=768&dpr=4&quality=100&sign=2a4e0005&sv=2) You can use the "Target" property to modify a link instance's behavior and define how linked content is displayed. 1. **Self**: When you set "Target" to "Self," the linked content will open in the same window or tab. This is the default behavior for links, and it maintains the browsing context. 2. **Blank**: If you choose "Blank," the linked content will open in a new tab or window, providing a separate browsing context. 3. **Parent and Top**: For web pages involving nested frames, "Parent" will direct the linked content to open in the parent frame or window, maintaining the hierarchy of frames. On the other hand, selecting "Top" will open the link instance in the top-level window, replacing all frames if there are any. This is useful when you want to break out of any frames and provide a full-page experience. [](https://docs.webstudio.is/university/core-components/link#how-to-style-the-current-page-state) How to style the current page state ------------------------------------------------------------------------------------------------------------------------------------------ When using links for navigation and wanting to highlight the current page, the link component has a "Local Link" state in every style source. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FRlEsavjL7cAcBfOjfSlp%252FScreenshot%25202025-08-22%2520at%252011.36.02.png%3Falt%3Dmedia%26token%3D064214b0-f46f-4b7d-8bba-0cbb76ae468d&width=768&dpr=4&quality=100&sign=3bcf0c67&sv=2) [PreviousElement](https://docs.webstudio.is/university/core-components/element) [NextImage](https://docs.webstudio.is/university/core-components/image) Last updated 27 days ago Was this helpful? --- # CMS | Webstudio Documentation Webstudio is backend-agnostic, meaning it enables you to connect to any backend as long as it provides an HTTP API (see [compatible CMSs and features](https://docs.webstudio.is/university/foundations/cms#compatible-cmss) for more info). While some users may be used to seeing a CMS tab within their platform, Webstudio is different. It’s approached CMS by providing a flexible way to interact with third-party systems such as CMSs, CRMs, and databases. Need help finding a CMS? Use the [Headless CMS Finder](https://wstd.us/cms-finder) . The building blocks of Webstudio CMS are: 1. [**Dynamic pages**](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) – In their simplest form, they are essentially blog templates – one page that dynamically displays data depending on the URL viewed. 2. [**Resources**](https://docs.webstudio.is/university/foundations/variables#resource) – A way to fetch data from an API, whether it's a simple blog post or a complex data model. 3. [**Bindings**](https://docs.webstudio.is/university/foundations/expression-editor#binding) – Enabling connecting or mapping the CMS data to Webstudio components. You can bind external data to any component and field within Webstudio, from rich text to meta titles. CMS 101 [](https://docs.webstudio.is/university/foundations/cms#tab-cms-101) CMS Full Tutorial [](https://docs.webstudio.is/university/foundations/cms#tab-cms-full-tutorial) CMS Playlist [](https://docs.webstudio.is/university/foundations/cms#tab-cms-playlist) 3 minutes to get you acclimated with how CMS works in Webstudio. A 20-minute full tutorial on setting up a CMS integration. A collection of all our CMS content on YouTube. [](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) Dynamic Pages ----------------------------------------------------------------------------------------- Similar to a static page, the path includes dynamic parameters, like a post slug. This enables the page contents to change dynamically based on the requested page. Adding parameters to a page path will automatically turn the page into a Dynamic Page. The path can include dynamic parameters like `:name`, which could be made optional using `:name?`, or have a wildcard such as `/*` or `/:name*` to store the whole remaining part at the end of the URL. The value of the parameter comes from whatever is in the URL. If the path is `/post/:slug` and somebody views `/post/hello-world` then `hello-world` is the value used in your Resource. ### [](https://docs.webstudio.is/university/foundations/cms#address-bar) **Address Bar** The Address Bar enables previewing Dynamic Pages in the editor by entering parameter value(s). For the Dynamic Path `/post/:slug`, you would enter a slug value that exists in the CMS, such as `hello-world`. ![Address Bar with hello-world](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F26ZChzHYeZ9GnRnrd3f5%252Faddress-bar.png%3Falt%3Dmedia%26token%3Df0344b6b-16c1-45a7-9632-230fa4d2f96b&width=768&dpr=4&quality=100&sign=5b2160e0&sv=2) Entering "hello-world" as a test value The static part of the URL (in this case, `/post/`) is already in the Address Bar and should not be included when adding the test value. Address Bar values are saved in the editor by: * Manually entering values * Navigating links that lead to the Dynamic Page, such as clicking on `/post/hello-world` [](https://docs.webstudio.is/university/foundations/cms#resources) Resources --------------------------------------------------------------------------------- A Resource variable gets its value from a fetch request, allowing data from a remote system to be used within Webstudio. In the context of Dynamic Pages, Resources are used to fetch specific information determined by the URL, or more specifically, the value of the parameter(s) in the URL. For example, the Resource will dynamically fetch posts from the CMS whose slug value equals the slug being viewed. The query may look something like this `posts(slug: system.params.slug)`, and when `/post/hello-world` is viewed, the query will translate to `posts(slug: "hello-world")` (i.e., “get posts where the slug value is “hello world”). Dynamic pages may have multiple parameters, enabling the query to become even more dynamic. For example, in addition to `:slug`, you can also add `:lang` to fetch and display localized content. If interacting with a GraphQL API, use the [GraphQL resource](https://docs.webstudio.is/university/foundations/variables#graphql) . [](https://docs.webstudio.is/university/foundations/cms#binding-data) Binding Data --------------------------------------------------------------------------------------- At this point, the Resource Variable has the CMS Data, and now you need to bind or connect that data to the components and fields. Binding data is done with the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) . For example, go to a Header component > Settings > Text Content > and the “+” button. Within the Expression Editor, add the Resource Variable that contains the CMS data and the title value within it. This may look like `CMS Data.title`. For more information, see the [Expression Editor documentation](https://docs.webstudio.is/university/foundations/expression-editor) . [](https://docs.webstudio.is/university/foundations/cms#compatible-cmss) Compatible CMSs --------------------------------------------------------------------------------------------- Webstudio CMS supports any content management system (CMS) that provides an HTTP API. This feature enables users to use their existing CMS or the one that works best for them. Below is a non-comprehensive list of CMSs, whether or not they provide an HTTP API (i.e., compatible with Webstudio), and the compatibility of specific CMS features. You can also use the [Headless CMS Finder](https://wstd.us/cms-finder) to compare and filter headless CMS options based on key features and pricing. CMS Compatible Rich text Tutorial Template Known issues [Hygraph](https://hygraph.com/) ✅ ✅ Must request HTML [Tutorial](https://docs.webstudio.is/university/integrations/hygraph) [Template](https://wstd.us/hygraph-template) [Sanity](https://www.sanity.io/) ✅ ❌ [Strapi](https://strapi.io/) ✅ ✅ Must use the [CKEditor 5 integration](https://market.strapi.io/plugins/@ckeditor-strapi-plugin-ckeditor) and field as it outputs HTML. Not compatible with the default rich text field. [Contentful](https://www.contentful.com/) ✅ ✅ Using Markdown field [WordPress](https://wordpress.org/) ✅ ✅ [Tutorial](https://docs.webstudio.is/university/integrations/wordpress) [Template](https://wstd.us/wordpress-template) [Drupal](https://www.drupal.org/) ✅ ✅ [Directus](https://directus.io/) ✅ ✅ [Hashnode](https://hashnode.com/headless) ✅ ✅ [Payload](https://payloadcms.com/) ✅ ✅ Need to create a field and hook that auto converts rich text from field A and saves HTML in field B ([src](https://payloadcms.com/docs/rich-text/lexical#outputting-html-from-the-collection) ) [Airtable](https://www.airtable.com/) ✅ ✅ [Tutorial](https://docs.webstudio.is/university/integrations/airtable) [Template](https://wstd.us/airtable-template) [Baserow](https://baserow.io/) ✅ ✅ [Notion](https://www.notion.so/) ✅ ❌ [Tutorial](https://docs.webstudio.is/university/integrations/notion) [Template](https://wstd.us/notion-template) [Can't use pages](https://github.com/webstudio-is/webstudio/issues/3709) [Flotiq](https://flotiq.com/) ✅ ✅ [Tutorial](https://docs.webstudio.is/university/integrations/flotiq) [Ghost](https://ghost.org/) ✅ ✅ [Template](https://wstd.us/ghost-template) [Coda](https://coda.io/) ✅ ✅ [Multiple](https://github.com/webstudio-is/webstudio/issues/3708) [Hyvor Blogs](https://blogs.hyvor.com/) ✅ ✅ [Template](https://wstd.us/template-hyvor) While we do our best to verify the supported features, we may make mistakes in our research. ### [](https://docs.webstudio.is/university/foundations/cms#rich-text-support) Rich text support While most CMS field types seamlessly map to Webstudio components (e.g., Plain Text → Heading), rich text may not, depending on how the CMS stores/delivers it. **Currently, Webstudio supports rich text if it's delivered in HTML or Markdown format.** In the future, we will support rich text regardless of the format delivered by adding conversion libraries for each CMS's flavor of rich text. For example, we'll automatically convert AST to HTML. Refer to [this issue](https://github.com/webstudio-is/webstudio/issues/3398) for more information. In the meantime, advanced users can set up a proxy on Cloudflare Workers to convert rich text to HTML. However, this is outside the scope of Webstudio's support. Rich text in the form of HTML can be bound to the [Content Embed Component](https://docs.webstudio.is/university/core-components/content-embed) , and Markdown can be bound to the [Markdown Embed Component](https://docs.webstudio.is/university/core-components/markdown-embed) . [PreviousAnimations](https://docs.webstudio.is/university/foundations/animations) [NextCopy-Paste](https://docs.webstudio.is/university/foundations/copy-paste) Last updated 9 months ago Was this helpful? --- # Element | Webstudio Documentation ### [](https://docs.webstudio.is/university/core-components/element#how-to-use-the-element-component) How to use the Element component The "Element Component" can be found in Components > General, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FvInW1GrbNONp53TVoYtL%252Fimage.png%3Falt%3Dmedia%26token%3D654111b2-c40e-4bdb-9707-1ddfdf08ef07&width=768&dpr=4&quality=100&sign=adf9acf9&sv=2) Components panel The element component can be any HTML element. By default, it is a DIV, but the tag can be changed in the settings. This component will be widely used in your project. It can wrap your entire page contents or individual instances. ### [](https://docs.webstudio.is/university/core-components/element#how-to-customize-the-element-properties) How to customize the Element properties You can change the HTML tag of the element by opening the "Settings Panel" located on the right side of Webstudio. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fi67FkoqwV4jfIcMz9sQ3%252Fimage.png%3Falt%3Dmedia%26token%3D3137d287-8007-46ce-8d43-5e2350f8fb72&width=768&dpr=4&quality=100&sign=ad432e19&sv=2) Settings panel [PreviousCore Components](https://docs.webstudio.is/university/core-components) [NextLink](https://docs.webstudio.is/university/core-components/link) Last updated 3 months ago Was this helpful? --- # Share Links & Transferring Projects | Webstudio Documentation **Use cases:** * Providing team members or clients the ability to modify a site * Cloning the Project to another Webstudio account * Sharing your Project to get support * [Selling templates](https://docs.webstudio.is/contributing/marketplace#selling-templates) (i.e., using Share Links to deliver the template upon payment) [](https://docs.webstudio.is/university/foundations/share-links#adding-share-links) Adding Share Links ----------------------------------------------------------------------------------------------------------- Share Links are created in the Top Bar in the Share dialog. ![creating a share link](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FA2n4nfwceJXP48cowACC%252Fsharecontent.gif%3Falt%3Dmedia%26token%3D1adf268f-b860-47cd-9697-ffa96f5803b1&width=768&dpr=4&quality=100&sign=a3cba8a6&sv=2) There is no limit to how many Share Links you can add. [](https://docs.webstudio.is/university/foundations/share-links#types-of-share-links) Types of Share Links --------------------------------------------------------------------------------------------------------------- Type Is paid feature Permissions View No * View * Copy instances (Pro users can disable copying) * Clone the Project (Pro users can disable cloning) Content Yes * Edit content only, such as text, images, and predefined components * Clone the Project * Publish (optional) Build No * Make any changes * Clone the Project * Can't publish Admin Yes * Make any changes * Clone the Project * Publish [](https://docs.webstudio.is/university/foundations/share-links#working-with-clients) Working with clients --------------------------------------------------------------------------------------------------------------- When building a site for someone else, you may want to either transfer the site to them altogether, or provide them the ability to edit the content without providing the full power of the website builder. ### [](https://docs.webstudio.is/university/foundations/share-links#option-1-transfer-entire-project) Option 1: Transfer entire Project Create a new Share Link to transfer the Project to your client. Ensure the link has cloning permissions (see [Types of Share Links](https://docs.webstudio.is/university/foundations/share-links#types-of-share-links) ). Then, send the link to your client so they can clone the Project into their Webstudio account. If you are on a paid tier, it’s tied to your account, not the site. Therefore, if you transfer the site to another account, that account would need to purchase a plan if the site requires paid features/limits. If you plan to continue working on the website, they’ll need to create a Share Link and send it to you once it’s in their account. ### [](https://docs.webstudio.is/university/foundations/share-links#option-2-content-mode) Option 2: Content mode The Pro tier lets you create Share Links with the Content permission, allowing recipients to edit content without designer-oriented features like the Style Panel. To provide this, create a Share Link, toggle “Content”, and send this link to your client. See [Modes](https://docs.webstudio.is/university/foundations/modes) to learn more about this. [PreviousModes](https://docs.webstudio.is/university/foundations/modes) [NextPublishing & Custom Domains](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains) Last updated 9 months ago Was this helpful? --- # Webflow | Webstudio Documentation It works by copying anything in Webflow format, such as component libraries and projects, and pasting it into Webstudio, transferring the structure and styles. [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#what-does-and-doesnt-transfer) What does and doesn’t transfer ----------------------------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#elements) Elements Webflow Element Transfers? Notes Section ✅ Container ✅ Quick Stack ✅ V Flex ✅ H Flex ✅ Div Block ✅ List ✅ List Item ✅ Link Block ✅ Button ✅ Maps to “[Link](https://docs.webstudio.is/university/core-components/link) ”. Buttons are for interactions, like submitting a form, not linking. Heading ✅ Paragraph ✅ Text Link ✅ Text Block ✅ Block Quote ✅ Rich Text ✅ There is no Rich Text component in Webstudio, though any children of the copied Rich Text paste in as their respective components. For example, Rich Text with a Heading and Link will transfer as a Heading and Link. Collection List ❌ Though Webstudio does have a “Collection” component. Image ✅ Video ❌ Can be rebuilt “[Vimeo](https://docs.webstudio.is/university/core-components/vimeo) ” or “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) ” YouTube ❌ Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) ”. [See status](https://github.com/webstudio-is/webstudio/issues/1747) of this component in Webstudio. Lottie Animation ❌ Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) ” Spline Scene ❌ Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) ” Form Block ✅ Label ✅ Input ✅ File Upload ❌ [See status](https://github.com/webstudio-is/webstudio/issues/3023) of this component in Webstudio Text Area ✅ Checkbox ✅ Radio Button ✅ Select ✅ reCAPTCHA ❌ reCAPTCHA doesn’t transfer as Webstudio uses alternative methods of preventing spam. Form Button ✅ Maps to “Button” Search ❌ Background Video ❌ Dropdown ❌ Can be rebuilt using Radix “[Select](https://docs.webstudio.is/university/radix/select) ” Code Embed ✅ Lightbox ❌ Locales List ❌ Navbar ✅ Generates the corresponding components such as Boxes and [Links](https://docs.webstudio.is/university/core-components/link) with [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) and styles. Slider ❌ Can be rebuilt using Swiper.js in the Marketplace Tabs ❌ Can be rebuilt using Radix “[Tabs](https://docs.webstudio.is/university/radix/tabs) ” Map ❌ Facebook ❌ X (Twitter) ❌ Custom Element ❌ [See status](https://github.com/webstudio-is/webstudio/issues/3632) of this component in Webstudio Code Block ✅ Grid ✅ Columns ✅ ### [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#styles) Styles ✅ Both Webflow and Webstudio support all CSS properties, allowing all styles defined in the style panel to transfer. ✅ Webflow preset styles, which Webflow adds by default to pages and Elements. ❌ Webflow variables and their values do not transfer as those values are not available within the Webflow copy. ❌ User-defined styles on **global tag selectors** as they are not available in the Webflow copy. For example, global styling on an H1 does not transfer, but a Token of h1 is created and available for applying the styles. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F1HfrAyAZCZn1on3yJUjz%252Fglobal-tags.png%3Falt%3Dmedia%26token%3Db5296bdd-3656-4e05-b881-1db8bd439f80&width=300&dpr=4&quality=100&sign=d0aef39c&sv=2) ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F0iSBvzuHVHuCegcO5NR9%252Fh1-token.png%3Falt%3Dmedia%26token%3Dedce01d4-f45a-4fc3-b7e1-8a22a859ebfc&width=300&dpr=4&quality=100&sign=58eb6522&sv=2) ### [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#classes) Classes ✅ Classes and combo classes will transfer as [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) with their respective styles. Pasting a class/Token that already exists will not cause duplication or override it. ### [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#breakpoints) Breakpoints ✅ Responsive styles and breakpoints will transfer. ### [](https://docs.webstudio.is/university/foundations/copy-paste/webflow#interactions) Interactions ❌ Interactions and animations do not transfer. [PreviousMarkdown](https://docs.webstudio.is/university/foundations/copy-paste/markdown) [NextCommands & Search](https://docs.webstudio.is/university/foundations/commands-and-search) Last updated 1 year ago Was this helpful? --- # Button | Webstudio Documentation [PreviousCode Text](https://docs.webstudio.is/university/core-components/code-text) [NextCollection](https://docs.webstudio.is/university/core-components/collection) Last updated 3 months ago Was this helpful? --- # Vimeo | Webstudio Documentation The Vimeo component for Webstudio allows you to embed Vimeo videos into your site, whether as a video player or a background video. This component comes with several different customizable properties, including the ability to edit the preview image, set your video to “Do Not Track” mode, or customize the colors of the Vimeo Player controls to match your brand. * * * ### [](https://docs.webstudio.is/university/core-components/vimeo#benefits-of-vimeo) Benefits of Vimeo We have picked Vimeo to be Webstudio’s first video component for the following reasons: 1. **Modify Existing Videos**: It is possible to modify, edit or update your video on Vimeo without losing your video’s stats. And the best part of it all— the updated video stays on the same URL! 2. **Data Ownership**: As a Vimeo user, you retain complete ownership of all your data and intellectual property. You own what you create on Vimeo, unlike platforms like YouTube that bind your content with non-exclusive rights to use it as they please. 3. **Higher Quality Video and Audio**: Vimeo offers a higher bitrate and better video quality for their uploads compared to similar platforms. 4. **GDPR Compliance**: With complete control over your personal data, you get to choose how your data is tracked and recorded. 5. **An Adless Platform**: Vimeo operates as an adless platform, which means that they don’t allow advertisements on videos or sell ad space. * * * ### [](https://docs.webstudio.is/university/core-components/vimeo#how-to-use-the-vimeo-component-in-webstudio) How to use the Vimeo component in Webstudio You can find the Vimeo Component in the Components Panel in the Media Section. Here is how you can add and use the component on your site: #### [](https://docs.webstudio.is/university/core-components/vimeo#adding-the-vimeo-component-to-your-canvas) Adding the Vimeo component to your canvas ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-83c6e339327329fff8d0cbd4ddac0224152d362f%252FVideo_component_step_1.avif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7eedf8cf&sv=2) Vimeo to your canvas 1. You can find the Vimeo component in the “Components Panel” in the Media section. 2. Add the component by dragging and dropping it to the canvas or with a click to put it inside the selected instance. 3. Once you have the component on your canvas, you can head to Settings on the right to add your video URL and make other changes. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-8cf82aad8bd55f1cc8abd3579fe95bf23b9ee328%252FVideo_component_properties.avif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=281d59d5&sv=2) Vimeo background settings #### [](https://docs.webstudio.is/university/core-components/vimeo#modifying-the-preview-image) Modifying the Preview Image 1. Inside the Vimeo Component, you will find three instances- the Preview Image, Spinner and Play Button. These instances define the primary look of the embedded video player. 2. You can add a preview image to your video by selecting the “Preview Image” instance and choosing an image source in the “Properties” section. * * * ### [](https://docs.webstudio.is/university/core-components/vimeo#how-to-customize-the-vimeo-instances-properties) How to customize the Vimeo instance's properties The Vimeo component comes with several properties that you can use to customize your video player. These properties appear in the Settings panel to the right of the canvas when your Vimeo component is selected. Here’s how you can use the following properties: ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-be2b00ee3dda24b900a8ec8dc67376d28d38cfea%252FVimeo_instance_properties-2.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=fbdab0c7&sv=2) * **Show Preview** Toggle this property on to render the preview image from Vimeo rather than the static image in Webstudio. This property is turned off by default because rendering the Vimeo preview requires making an API call which can slow down the speed of your page. * **AutoPlay** If you enable the “AutoPlay” property, your video will start playing automatically when the player loads. * **Background Mode** When enabled, the “Background Mode” property will hide the Vimeo Player’s controls, loop the embedded video and play it automatically. * **Do Not Track** If you enable the “Do Not Track” property, the Vimeo Player will not be able to track session data, such as cookies. It is important to note that video statistics, such as the number of views, would also no longer be recorded. * **Controls Color** With the “Controls Color” property, you can customize the colors of the Vimeo Player’s controls on your site to match your brand identity. * **Other Properties** You can customize your Vimeo component further by adding [other properties](https://developer.vimeo.com/player/sdk/embed) that are not listed in the “Properties” section by default. [PreviousForm](https://docs.webstudio.is/university/core-components/form) [NextVimeo Background Video](https://docs.webstudio.is/university/core-components/vimeo-background-video) Last updated 4 months ago Was this helpful? --- # YouTube | Webstudio Documentation ![YouTube Component in Webstudio Add Panel](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FpbDbnKFqNXJEkrwo9ek9%252Fyoutube-component.png%3Falt%3Dmedia%26token%3D5fe2f2be-c9e0-4757-ae83-9e8e474dcc6a&width=768&dpr=4&quality=100&sign=94864ea5&sv=2) While YouTube offers embed codes, the YouTube component enables a much better experience, which is why it’s the recommended way to add YouTube videos to your site. **Benefits:** * Paste a URL instead of code * Responsive by default * Faster loading with customizable preview images and lazy loading * UI inputs for all the settings instead of code * Customizable play icon and loading icon [PreviousVimeo Background Video](https://docs.webstudio.is/university/core-components/vimeo-background-video) [NextBlockquote](https://docs.webstudio.is/university/core-components/blockquote) Last updated 8 months ago Was this helpful? --- # Text Animation | Webstudio Documentation Let's say you want to animate one letter at a time - instead of having to manually wrap _each_ letter in an [Animation Group](https://docs.webstudio.is/university/core-components/animation-group) , you can simply wrap a text instance (like a heading) in the Text Animation component. Text Animation is one component of the animation engine. See [Animations](https://docs.webstudio.is/university/foundations/animations) for an overview. The Text Animation component handles splitting the text under the hood, making it easy to prepare text for animation. Just remember that you'll need to wrap the Text Animation component in an [Animation Group](https://docs.webstudio.is/university/core-components/animation-group) to define and control the actual animation behavior. The Animation Group must be the **direct** **parent** of the Text Animation. You can split text by: * Spaces (enabling you to animate each word) * Characters (enabling you to animate each letter) * `#` * `~` [](https://docs.webstudio.is/university/core-components/text-animation#under-the-hood) Under the hood ---------------------------------------------------------------------------------------------------------- Here's an example of what happens automatically under the hood. If you wrap a heading component that outputs the following HTML: Copy

Hello World

in a Text Component and split the text by spaces, it will appear as: Copy

Hello World

Now the parent Animation Group can effectively target each word individually. [PreviousAnimation Group](https://docs.webstudio.is/university/core-components/animation-group) [NextVideo Animation](https://docs.webstudio.is/university/core-components/video-animation) Last updated 4 months ago Was this helpful? --- # HTML Embed | Webstudio Documentation The HTML Embed component enables the direct integration of custom HTML, CSS, and JavaScript code into your Webstudio project. With this component, you can extend the capabilities of your website, create interactive widgets, integrate external APIs, and implement personalized interactions. * * * ### [](https://docs.webstudio.is/university/core-components/html-embed#how-to-use-the-html-embed-component) How to use the HTML Embed component The "HTML Embed" component can be found in Components > General, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. * * * ### [](https://docs.webstudio.is/university/core-components/html-embed#how-to-add-custom-code-to-an-html-embed-instance) How to add custom code to an HTML Embed instance You can add your custom HTML, CSS, or JavaScript code to the HTML Embed instance by selecting it and accessing its “Settings”. #### [](https://docs.webstudio.is/university/core-components/html-embed#code) Code ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FgI76UFxiUKlK9QvI5tpR%252Fgsap.png%3Falt%3Dmedia%26token%3D085d42d9-4fb4-4fe9-ba2f-930511cd3539&width=768&dpr=4&quality=100&sign=f62d20c1&sv=2) The "Code" section has a text area for adding your custom code. After you paste your code here, it will be rendered on the canvas. You can add anything to your site including custom widgets, third-party services, API integrations, animations, and interactive content. ### [](https://docs.webstudio.is/university/core-components/html-embed#run-script-on-canvas) Run Script on Canvas The "Run Script on Canvas" toggle allows you to not only render the HTML embed directly on the canvas, but also execute scripts. It will look exactly the same way as when you publish the site. ### [](https://docs.webstudio.is/university/core-components/html-embed#client-only) Client Only If your HTML embed is script-free and only includes items like SVG icons, CSS, or static HTML, you don't need this option. For embeds with scripts that change HTML, like GSAP animations or sliders, activate the "Client Only" option. This prevents server-side rendering of the HTML. The embed, along with scripts, will render correctly once client-side JavaScript is loaded. Check out how to embed [GSAP animations](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation) . * * * ### [](https://docs.webstudio.is/university/core-components/html-embed#how-to-reuse-your-custom-code-across-multiple-web-pages) How to reuse your custom code across multiple web pages You can reuse your custom code across your project by putting it inside a Slot instance. 1. Add an HTML Embed component to your canvas and set it up with custom code of your choice. 2. Add a [Slot](https://docs.webstudio.is/university/core-components/slot) component to your canvas and place your HTML Embed instance inside it. 3. Now, you can copy and paste this slot instance anywhere on your Webstudio project. Please note that any updates you make inside your slot will update all other instances of that slot. ### [](https://docs.webstudio.is/university/core-components/html-embed#avoid-creating-global-variables) Avoid creating global variables When using the tag, every variable you create is global by default, which can lead to unpredictable effects. Example (bad): Copy In this example, we created a constant `a` and assigned the value 1 to it. However, because script tags by default use global scope, what really happened is that you created `window.a = 1`. What could go wrong? 😅 1. If you navigate away and come back to the page, the script gets executed again and you will get a syntax error: "Identifier 'a' has already been declared". This is due to the fact that const can be declared only once. You could workaround this by using `var` or `let` instead. 2. If your logic relies on an existing variable and you don't redefine it, it will use any random value that happens to be there at a given time. #### [](https://docs.webstudio.is/university/core-components/html-embed#solution-1-module) Solution 1 - module When using the module type, the script has its own scope, and the variables don't become global. Copy #### [](https://docs.webstudio.is/university/core-components/html-embed#solution-2-function-scope) Solution 2 - function scope Use an Immediately Invoked Function Expression (IIFE) to create a function scope. Copy ### [](https://docs.webstudio.is/university/core-components/html-embed#dont-use-domcontentloaded) Don't use DOMContentLoaded The **DOMContentLoaded** event won't fire during client-side navigation between pages because, technically, the page isn't reloaded. Use the same logic you intended to write inside that event handler, and if you need to wait for an element to be rendered first, place the embed after it. [PreviousList](https://docs.webstudio.is/university/core-components/list) [NextAnimation Group](https://docs.webstudio.is/university/core-components/animation-group) Last updated 9 months ago Was this helpful? --- # Code Text | Webstudio Documentation [PreviousSeparator](https://docs.webstudio.is/university/core-components/separator) [NextButton](https://docs.webstudio.is/university/core-components/button) Last updated 3 months ago Was this helpful? --- # Separator | Webstudio Documentation [PreviousHead Slot](https://docs.webstudio.is/university/core-components/head-slot) [NextCode Text](https://docs.webstudio.is/university/core-components/code-text) Last updated 3 months ago Was this helpful? --- # Dialog | Webstudio Documentation [PreviousCollapsible](https://docs.webstudio.is/university/radix/collapsible) [NextNavigation Menu](https://docs.webstudio.is/university/radix/navigation-menu) Was this helpful? --- # Publishing & Custom Domains | Webstudio Documentation If your DNS provider doesn’t allow you to add a CNAME at the apex, jump to [this section](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#dns-provider-doesnt-allow-cname-flattening) . [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#adding-a-custom-domain) Adding a custom domain ------------------------------------------------------------------------------------------------------------------------------------- These steps will show you how to add a custom domain to your Project. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-1.-add-a-new-domain-to-your-project) 1\. Add a new domain to your Project Click "Publish" in the top bar, then “Add a new domain”. Enter the domain or subdomain you want the site to be available at, for example, `www.example.com` or `example.com`. After entering your domain, you will be provided with DNS records, which can be manually added to your DNS or automatically through Entri. ![CNAME and TXT records from new domain](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F0Xhmv9bTIX2Ccz4mmOvw%252Fadd-new-domain.png%3Falt%3Dmedia%26token%3D8001bde4-6404-4cf3-bc6a-06f2bce3a20a&width=768&dpr=4&quality=100&sign=aaedb652&sv=2) ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-2.-add-the-dns-records) 2\. Add the DNS records Next, you need to add the DNS records to your DNS provider either manually or automatically. #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#option-1-manually-add-dns-records) Option 1: Manually add DNS records You can configure your custom domain manually by adding the provided `CNAME` and `TXT` records to your DNS. 1. **Open your DNS provider** 2. **Create a** `**CNAME**` **record** 1. Add a new record. 2. Set the type to `CNAME`. 3. Copy the Name and Value from Webstudio. 4. Paste them into the corresponding fields in your DNS provider. Note that the DNS provider might label the Value as "Target" or "Content." 3. **Create a** `**TXT**` **record** 1. Add a new record. 2. Set the type to `TXT`. 3. Copy the Name and Value from Webstudio. 4. Paste them into the corresponding fields in your DNS provider. Note that the DNS provider might label the Value as "Content". #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#option-2-automatically-add-dns-records-with-entri) Option 2: Automatically add DNS records with Entri The Entri option makes configuring your domain extremely simple — no puzzling registrar UIs. You can do it without leaving Webstudio Builder in just a couple of clicks. 1. Click “Configure automatically”. 2. Click “Continue” on the Entri configurator. This process will analyze your root domain and detect your DNS settings. 3. Click on the Authorize button to redirect you to your DNS provider site. Log in, if required, and approve the configuration. 4. Return to Webstudio and complete the setup. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-3.-verify-and-publish) 3\. Verify and publish Click "Check status" and once it's verified, republish your site. Verification may take up to 24 hours but usually takes only a few minutes. You must publish your site _after_ the domain is verified, or else "[Worker not found](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#domain-issues) " will show on the site. Publishing currently takes around 45 seconds. During publishing, your Project is built into a JavaScript app and deployed to 300+ servers around the world. Once your site is live, you can visit it by clicking the open icon next to the green checkmark. * * * [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#publish-to-staging) Publish to Staging ----------------------------------------------------------------------------------------------------------------------------- ![Publish to staging with production unchecked](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FWQolht5ApTTSfwf0yOkd%252Fstaging-domain.png%3Falt%3Dmedia%26token%3D95f9554d-7485-4abb-8b4d-16b865ec854b&width=768&dpr=4&quality=100&sign=aa1de4c&sv=2) You can publish your Project to a separate domain for testing before going live by only checking your staging domain, which can be the default Project subdomain or a custom domain. Every Project comes with a subdomain ending in "wstd.io". You can use this subdomain as your site’s staging environment. The domain is automatically no-indexed if you add a custom domain. When publishing the site, optionally select the domain(s) you want to publish to. The workflow for testing/approval would be: 1. Make changes in the Builder 2. Open the publish dialog 3. Ensure only your subdomain is checked 4. Publish and share with your team/client 5. Upon approval, reopen the publish dialog and check your live/production domain. 6. Publish * * * [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#standardizing-on-root-or-www-using-cloudflare) Standardizing on root or `www` using Cloudflare ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- This will show you how to standardize on either `www` or your root domain using Cloudflare. Root domain is synonymous with apex, bare, and naked. An example is `example.com`. 1. Choose whether you want to use `www` or your root domain 2. Add your choice to Webstudio (e.g., `www.example.com` or `example.com`) 3. Add the provided records to your DNS 4. Redirect the domain you did _not_ add to the domain you added by following the next sections. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-1-add-a-dns-record-for-the-other-domain) 1: Add a DNS record for the other domain Cloudflare rules can't apply to traffic that isn't proxied through Cloudflare. Therefore, adding a DNS record for the domain you are _not_ using is essential. Cloudflare offers an IP address for this exact use case. **Create an A record and point it to** `**192.0.2.1**`**.** > This address does not route traffic to an origin server but allows Cloudflare to apply rules, redirects, and Workers to incoming traffic. The equivalent IP address for an AAAA record is 100::. - [Cloudflare](https://developers.cloudflare.com/fundamentals/setup/manage-domains/redirect-domain/) Next, follow one of the subsequent options depending on your desired setup. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-2a-redirect-root-to-www) 2a: Redirect root to `www` If you are using `www` then it's important to redirect the root domain to it. For example, redirect `example.com` to `www.example.com`. Follow [Cloudflare's guide](https://developers.cloudflare.com/rules/url-forwarding/examples/redirect-root-to-www/) to redirect your root domain to `www`. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-2b-redirect-www-to-root) 2b: Redirect `www` to root While `www` is merely a subdomain and not technically different than `xyz.example.com`, old habits die hard, and some users may still type in `www` to get to your site. Therefore, it's good practice to redirect it to your root so they can reach your site. Follow [Cloudflare's guide](https://developers.cloudflare.com/rules/url-forwarding/examples/redirect-www-to-root/) to redirect `www` to your root domain. * * * [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#exporting-projects) Exporting Projects ----------------------------------------------------------------------------------------------------------------------------- Webstudio can be self-hosted, putting you in control of your hosting, pricing, security, and compliance. For more information about exporting and self-hosting, view [Self-Hosting](https://docs.webstudio.is/university/self-hosting) . * * * [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#removing-a-domain) Removing a domain --------------------------------------------------------------------------------------------------------------------------- To remove a domain from Webstudio: 1. Click “Publish” in the top bar. 2. Click your domain. 3. Click “Remove domain”. * * * [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#domain-issues) Domain issues ------------------------------------------------------------------------------------------------------------------- Below are common issues when adding custom domains and how to resolve them. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#dns-provider-doesnt-allow-cname-flattening) DNS provider doesn't allow CNAME flattening While modern DNS providers like [Cloudflare](https://www.cloudflare.com/) support using CNAME at the apex, such as `example.com` (aka CNAME flattening), others only allow using CNAME with a subdomain, such as `www.example.com`. #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#providers-that-dont-support-cname-flattening) Providers that don't support CNAME flattening This list is _not_ comprehensive. * GoDaddy * Hostinger * Squarespace * DigitalOcean * Namecheap * IONOS #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#option-1-change-your-dns-provider) Option 1: Change your DNS provider The easiest way to work around the CNAME limitation is to switch your DNS control over to a provider like [Cloudflare](https://developers.cloudflare.com/fundamentals/get-started/setup/add-site/) . This process takes about 10 minutes and once you have migrated, you can use the original process to configure it.. You can move the DNS (where the DNS records are managed) _without_ moving the registration (where the domain is purchased), though it may make sense to move both. #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#option-2-publish-your-website-on-a-www-subdomain) Option 2: Publish your website on a `www` subdomain Go back to [Step 1](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#id-1.-add-a-new-domain-to-your-project) , but this time, prefix your domain with `www`. #### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#video-tutorial) Video Tutorial The above options are shown in the following video. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#worker-not-found) Worker not found You may see "Worker not Found" message when opening the site, like this: ![Worker not found](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F6wuFlN249aKV8Mf38X3y%252Fimage.png%3Falt%3Dmedia%26token%3D17161788-4dfa-40ee-9951-01145416e2df&width=768&dpr=4&quality=100&sign=8719e62a&sv=2) Worker not found is due to one of the following reasons: 1. You haven't published your Project after adding a custom domain. 2. You clicked on publish, but it is still in the process of deployment. It usually takes 1 minute to distribute your Project across the globe. Webstudio is utilizing [Cloudflare's](https://workers.cloudflare.com/) advanced Edge network. 3. Your domain was not properly connected or you need to republish. ### [](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains#adding-a-domain-with-a-country-code-like-.co.uk) **Adding a domain with a country code like** `**.co.uk**` Using a second-level domain (SLD) within a country code top-level domain (ccTLD) such as `.co.uk` is fully supported. However, the DNS records provided when adding a domain in the Builder are incorrect. Here are the provided records and correct records when adding `example.co.uk`: Record Type Provided Value Correct Value `CNAME` `example` `@` `TXT` `_webstudio_is.example` `_webstudio_is` [PreviousShare Links & Transferring Projects](https://docs.webstudio.is/university/foundations/share-links) [NextCore Components](https://docs.webstudio.is/university/core-components) Last updated 10 months ago Was this helpful? --- # Blockquote | Webstudio Documentation The Blockquote Component is used to highlight quoted content on a webpage, enhancing its impact and readability. You can use it in your Webstudio project to emphasize text that has been taken directly from another source, such as quotes, excerpts, or references. * * * ### [](https://docs.webstudio.is/university/core-components/blockquote#how-to-use-the-blockquote-component) How to use the Blockquote Component The "Blockquote" component can be found in Components > Text, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. To edit the content of your Blockquote instance, simply double-click it. Once the component is placed on your canvas, you can customize its appearance using the Style panel on the right. You can also create a design token for this styling. This allows you to apply consistent styling on multiple blockquotes across your project by reusing the same design token for each instance. For more on Design Tokens in Webstudio, refer to [this guide](https://docs.webstudio.is/university/foundations/design-tokens) . * * * ### [](https://docs.webstudio.is/university/core-components/blockquote#how-to-attribute-a-blockquote) How to attribute a Blockquote It is a good practice to attribute the quoted text you use in a blockquote with the source's title, author, publication, URL, or any relevant information that identifies where the quote came from. This maintains transparency and credibility in your content. It also allows readers to verify the accuracy of the information and fosters ethical use of others' words. You can add an attribution or citation by using the “Cite” property in your Blockquote instance settings or with the “Cite” Tag from a Text component. #### [](https://docs.webstudio.is/university/core-components/blockquote#using-the-cite-property) Using the "Cite" Property ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fu3ES9y4whEX7V36RXnPq%252FBlockquote-Image-1_RtA7AhlDjAzKYSdRl8F2o.avif%3Falt%3Dmedia%26token%3D467713f8-d9c7-4fff-aad7-acf3337247b7&width=768&dpr=4&quality=100&sign=b844c9e3&sv=2) If you want to include a URL link as a citation: 1. Choose your blockquote instance in the canvas or the Navigator. 2. Go to Settings > Properties on the right. 3. Add the URL in the "Cite" property. Please note that this value will not be visible to the end-user. #### [](https://docs.webstudio.is/university/core-components/blockquote#using-the-cite-tag) Using the “Cite” Tag ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FmmbyYNHmbhlxbXfuwC2f%252FBlockquote-Image-2_uUD_vk1OFfpy2Th1blIj6.avif%3Falt%3Dmedia%26token%3D17cbd9b7-d9ed-4346-923d-3d9432396c85&width=768&dpr=4&quality=100&sign=faf773ff&sv=2) If you want to include a Name/Title as a citation alongside your Blockquote: 1. Add a Text component to your Blockquote instance by dragging and dropping it or clicking it in the Components panel. 2. After positioning it correctly, go to Settings and select Tag > Cite. 3. Double-click the "Cite" instance on your canvas to edit it and add your citation. Please note that this value will appear as italicized text to the end-user. [PreviousYouTube](https://docs.webstudio.is/university/core-components/youtube) [NextSlot](https://docs.webstudio.is/university/core-components/slot) Last updated 1 year ago Was this helpful? --- # Stagger Animation | Webstudio Documentation Stagger Animation applies the parent animation to one child at a time, producing a smooth, sequential animation flow. Stagger Animation is one component of the animation engine. See [Animations](https://docs.webstudio.is/university/foundations/animations) for an overview. Just remember that you'll need to wrap the Stagger Animation component in an [Animation Group](https://docs.webstudio.is/university/core-components/animation-group) to define and control the actual animation behavior. The Animation Group must be the **direct** **parent** of the Stagger Animation. [](https://docs.webstudio.is/university/core-components/stagger-animation#sliding-window) Sliding Window ------------------------------------------------------------------------------------------------------------- Controls how many child elements animate concurrently during the stagger effect. * `**0**`: Disables the transition animation for each element. Elements **appear instantly** one after the other in sequence. * `**1**`: Classic stagger effect. Only **one** element animates (with its transition, e.g., fade-in) at any given time. * `**> 1**`: Overlapping stagger effect. **Multiple** elements animate concurrently. The number specifies the maximum elements animating simultaneously (e.g., `3` means up to three animate at once), creating a smoother, wave-like reveal. [PreviousVideo Animation](https://docs.webstudio.is/university/core-components/video-animation) [NextWebhook Form](https://docs.webstudio.is/university/core-components/webhook-form) Last updated 4 months ago Was this helpful? --- # Radix UI Components | Webstudio Documentation An open source component library optimized for fast development, easy maintenance, and accessibility built directly into Webstudio. [Radix Documentation](https://www.radix-ui.com/primitives/docs/overview/introduction) > An open-source UI component library for building high-quality, accessible design systems and web apps. Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally. > > \-- _Radix UI_ [PreviousTime](https://docs.webstudio.is/university/core-components/time) [NextAccordion](https://docs.webstudio.is/university/radix/accordion) Last updated 1 year ago Was this helpful? --- # Video Animation | Webstudio Documentation To play a video when it enters the scroll port, you can insert an Animation Group and then insert Video Animation inside it. Upload a short video directly to Webstudio and select it in the Video instance inside Video Animation. The video will start playing according to the Animation Group settings once the video reaches a certain position in the scroll port. Video Animation is one component of the animation engine. See [Animations](https://docs.webstudio.is/university/foundations/animations) for an overview. Just remember that you'll need to wrap the Video Animation component in an Animation Group to define and control the actual animation behavior. The Animation Group must be the **direct** **parent** of the Video Animation. [PreviousText Animation](https://docs.webstudio.is/university/core-components/text-animation) [NextStagger Animation](https://docs.webstudio.is/university/core-components/stagger-animation) Last updated 4 months ago Was this helpful? --- # Sheet | Webstudio Documentation [PreviousSelect](https://docs.webstudio.is/university/radix/select) [NextSwitch](https://docs.webstudio.is/university/radix/switch) Was this helpful? --- # Radio Group | Webstudio Documentation [PreviousPopover](https://docs.webstudio.is/university/radix/popover) [NextSelect](https://docs.webstudio.is/university/radix/select) Was this helpful? --- # Accordion | Webstudio Documentation [](https://docs.webstudio.is/university/radix/accordion#features) Features ------------------------------------------------------------------------------- * Full keyboard navigation. * Supports horizontal/vertical orientation. * Supports Right to Left direction. * Can expand one or multiple items. * Can be controlled or uncontrolled. [](https://docs.webstudio.is/university/radix/accordion#how-to-use-the-radix-ui-accordion) How to use the Radix UI Accordion --------------------------------------------------------------------------------------------------------------------------------- The Accordion Component is in the "Components Panel" under the "Radix" section. Click on it or drag it onto the canvas. The Accordion will populate a template that's easy to adjust for your needs. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FmgVht0da3bVgBbBVzGdN%252Fradix-components.png%3Falt%3Dmedia%26token%3Df7abba1d-fa3e-4d54-9964-d69f4d72a943&width=768&dpr=4&quality=100&sign=48955eb5&sv=2) Radix UI components within Webstudio You can edit, delete or add more Accordions with ease by copying/pasting any of the "item" components within the Accordion. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FcTgoiirrUYiryJhRZXNW%252Fradix-accordion.png%3Falt%3Dmedia%26token%3D7cbeec39-3b8f-4410-92a4-70a1a5869dfb&width=768&dpr=4&quality=100&sign=e8f1cb6d&sv=2) [](https://docs.webstudio.is/university/radix/accordion#changing-an-accordions-content) Changing an Accordion's content ---------------------------------------------------------------------------------------------------------------------------- To change the content of an Accordion that isn't currently displayed in the canvas, click on the "item content" instance that you want to change and it will be displayed. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FbHgDi08KdkkXMg3dfg8i%252Fradix-accordion-content.png%3Falt%3Dmedia%26token%3Dd538be5a-6f3f-4aa7-beaf-fabeae880817&width=768&dpr=4&quality=100&sign=b18457cd&sv=2) [](https://docs.webstudio.is/university/radix/accordion#using-collections-within-accordions) Using Collections within Accordions ------------------------------------------------------------------------------------------------------------------------------------- To create an accordion with a Collection that iterates over data and outputs an accordion item for each entry, ensure each item has a unique value set, like this: ![accordion collection unique item](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252ForVN6cQzQBKWwUX37DSs%252Faccordion-collection.png%3Falt%3Dmedia%26token%3D7660fab4-65ad-4e2c-b26d-2afd2d2dec51&width=768&dpr=4&quality=100&sign=8cea7635&sv=2) [PreviousRadix UI Components](https://docs.webstudio.is/university/radix) [NextCollapsible](https://docs.webstudio.is/university/radix/collapsible) Last updated 1 year ago Was this helpful? --- # Webstudio AI | Webstudio Documentation ### [](https://docs.webstudio.is/university/webstudio-ai#hero-section) Hero Section ### [](https://docs.webstudio.is/university/webstudio-ai#feature-section) Feature Section ### [](https://docs.webstudio.is/university/webstudio-ai#pricing-section) Pricing Section [PreviousMarketplace](https://docs.webstudio.is/university/marketplace) [NextSelf-Hosting](https://docs.webstudio.is/university/self-hosting) Last updated 1 year ago Was this helpful? --- # Vimeo Background Video | Webstudio Documentation [](https://docs.webstudio.is/university/core-components/vimeo-background-video#here-is-how-you-can-use-the-vimeo-component-as-a-background-video-on-your-site) Here is how you can use the Vimeo Component as a background video on your site: --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Start by adding a Box component (Main Container) to your site and set its position to “Relative.” ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-9378c228c68a3b2686ad188a521f14f6d5af0c01%252FBG_video_step_1.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=7d63d064&sv=2) 2. Add a Vimeo component inside the Main Container. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-c056c3f9baac49128cc8e29a9cbef8e1eddbd505%252FBG_video_step_2.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=675bb2b7&sv=2) 3. After this, add another Box component (Content) inside the container and set its position to “Absolute.” This will stack the Content Box on top of the Vimeo instance. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-1d21fe7a3e3c226a4be442eef2835fb32dad5a93%252FBG_video_step_3.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=3f8e1526&sv=2) 4. Now you can add any other content, like headings and paragraphs, to your Content Box, and it will be displayed over the background video. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-a37fd9ac37dade5fef1e3357bfa85908b6e7021b%252FBG_video_step_4.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=a71ef070&sv=2) 5. Make sure to enable the “Background Mode” property for the Vimeo instance to ensure that your video starts automatically and all the video player controls are disabled. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-2304d05eb7534d37f2d890b7aaaeb7d570a0efad%252FBG_video_step_5.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=f89d1ca7&sv=2) And done! Now you have a background video on this section of your site. [](https://docs.webstudio.is/university/core-components/vimeo-background-video#here-are-some-other-changes-you-can-make-to-optimize-it-further) Here are some other changes you can make to optimize it further: --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Enable the “Muted” and “Loop” properties for your Vimeo instance to have the background video play in a loop without any sound. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-688c956d2c5a21ac2e39deb9858d5d872fbca04c%252FBG_video_step_6.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=66d01020&sv=2) 2. You can also hide or remove the Spinner on your output video for a more polished result. To hide it, select the Spinner instance from your Vimeo instance, head over to the Settings section and toggle off the “Show” option: ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-6e08f34f5b284124b5f5eb079f89d6c58a72ab92%252FBG_video_step_7.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=89486ae5&sv=2) [PreviousVimeo](https://docs.webstudio.is/university/core-components/vimeo) [NextYouTube](https://docs.webstudio.is/university/core-components/youtube) Last updated 8 months ago Was this helpful? --- # Modes | Webstudio Documentation There are three modes: * [Design](https://docs.webstudio.is/university/foundations/modes#design) * [Content](https://docs.webstudio.is/university/foundations/modes#content) * [Preview](https://docs.webstudio.is/university/foundations/modes#preview) You can change modes in the Top Bar or via [keyboard shortcuts](https://docs.webstudio.is/university/foundations/shortcuts) if you have sufficient [permissions](https://docs.webstudio.is/university/foundations/share-links#types-of-share-links) . ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FG8SY2nvFzyh1bLhUnftj%252Fmodes.png%3Falt%3Dmedia%26token%3Dcfd1161a-4536-4a1d-afd7-c8dc8bdf09b8&width=768&dpr=4&quality=100&sign=e444cc91&sv=2) [](https://docs.webstudio.is/university/foundations/modes#design) Design ----------------------------------------------------------------------------- Designer mode provides the full power of the builder. For example, you can add and style components. [](https://docs.webstudio.is/university/foundations/modes#content) Content ------------------------------------------------------------------------------- Content mode tailors the builder’s features to editor tasks like updating text and images, and adding templates to designer-specified regions. This mode is ideal for team members and clients. ### [](https://docs.webstudio.is/university/foundations/modes#allowed-actions) Allowed actions In Content mode, the following actions can be performed: * Edit text content (e.g., paragraphs, headings, links, etc.) * Add and edit links within text * Upload and change images * Insert instances of templates to designer-specified regions called [Content Blocks](https://docs.webstudio.is/university/core-components/content-block) * Publish the site (optional [permission](https://docs.webstudio.is/university/foundations/share-links#types-of-share-links) ) ### [](https://docs.webstudio.is/university/foundations/modes#for-designers-developers) For designers/developers As the website designer/developer, Content mode helps you strike the balance between creating a professional website while also letting your clients/team members edit it without them breaking it or deviating from the design system. Here’s what you need to know: * You can try the Content mode by going to the Top Bar and changing modes. * Users on the Pro tier can create a [Share Link](https://docs.webstudio.is/university/foundations/share-links) with “Content” permission * Editors can perform [these actions](https://docs.webstudio.is/university/foundations/modes#allowed-actions) * You can create templates that editors can insert with [Content Blocks](https://docs.webstudio.is/university/core-components/content-block) ### [](https://docs.webstudio.is/university/foundations/modes#for-editors) For editors With Content mode, you can dive right in and edit the website without feeling overwhelmed or risking any changes to the site that could cause issues. Here’s what you need to know: * You can click directly on the canvas to update any text you see. Want to update a title to the latest promotion? Click, type, done. ![editing content on the canvas](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FHyylRfwzSAkkET88wFf3%252Fedit-text.gif%3Falt%3Dmedia%26token%3D8d708ec2-2674-4451-8ed4-f992d563bb9f&width=768&dpr=4&quality=100&sign=55cce1c0&sv=2) Editing content on the canvas * Some items on the canvas may have settings, like images. Clicking on an image will display the settings on the right. There, you can upload a new image. Just be sure to fill in the field called “Alt” describing the image so visually impaired people can consume your site. ![image editing in content editor mode](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FwcXe7kZM0in0PEBX5cey%252Fimage-content-mode.png%3Falt%3Dmedia%26token%3D9c886823-86ba-4187-9537-415903cb9213&width=768&dpr=4&quality=100&sign=fbafb8a&sv=2) The image can be replaced in the Settings Panel * The designer of the site may have included [Content Blocks(s)](https://docs.webstudio.is/university/core-components/content-block#content-block-in-content-mode) . These are regions on the site where you have more capabilities — you can add templates the designer provided you and edit the content. See [Content Block](https://docs.webstudio.is/university/core-components/content-block) for more information. ![Adding a template](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FsnXSdK4vh3UvuZojxRg2%252Fadd-content.png%3Falt%3Dmedia%26token%3D9291ca11-54d2-4686-afa0-47e76cf2fe93&width=768&dpr=4&quality=100&sign=f784496f&sv=2) * Changes save in real-time, but you must publish your changes when you are ready for them to go live. To do so, open the publish dialog by clicking “Publish” in the top right, then click “Publish”. It takes around 45 seconds for the site to publish. Note, “Publish” may be disabled if the designer didn’t enable the publishing permission for you. [](https://docs.webstudio.is/university/foundations/modes#preview) Preview ------------------------------------------------------------------------------- Preview mode hides editing capabilities so you can browse your website. Be sure to test your website on every breakpoint! [PreviousProject Settings](https://docs.webstudio.is/university/foundations/project-settings) [NextShare Links & Transferring Projects](https://docs.webstudio.is/university/foundations/share-links) Last updated 9 months ago Was this helpful? --- # Time | Webstudio Documentation [PreviousXML Node](https://docs.webstudio.is/university/core-components/xml-node) [NextRadix UI Components](https://docs.webstudio.is/university/radix) Was this helpful? --- # Switch | Webstudio Documentation [PreviousSheet](https://docs.webstudio.is/university/radix/sheet) [NextTabs](https://docs.webstudio.is/university/radix/tabs) Was this helpful? --- # Form | Webstudio Documentation If you need the form submissions to be emailed to you/someone else or sent to a webhook, use [Webhook Form](https://docs.webstudio.is/university/core-components/webhook-form) . [](https://docs.webstudio.is/university/core-components/form#when-to-use-form) When to use Form ---------------------------------------------------------------------------------------------------- When providing visitors with a search field or filters, the submission data does _not_ need to be emailed to you (can you imagine!?). Instead, the submission data is used to modify the page's contents, like a search field on a blog. [](https://docs.webstudio.is/university/core-components/form#how-form-works) How Form works ------------------------------------------------------------------------------------------------ When submitting a form, its values are added to the URL as query parameters, triggering [Resources](https://docs.webstudio.is/university/foundations/cms#resources) to re-fetch APIs and use the query parameters (available in the [System Variable](https://docs.webstudio.is/university/foundations/variables#system) ). This all happens _without_ a page refresh, improving user experience. ### [](https://docs.webstudio.is/university/core-components/form#an-example) An example There's a blog listing page showing 100's blog posts over multiple pages and a Form added to the top with one text input, and its name field value is `searchBlog`. ![search input with searchBlog name](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FZCUg7AcksyY2w4q22Vd9%252Fsearch-blog.png%3Falt%3Dmedia%26token%3D54d486be-5052-425c-a938-9a57913bacba&width=768&dpr=4&quality=100&sign=d12a5f80&sv=2) The goal is simple: only blogs containing the search term will be shown when a visitor submits the form. **Here's how it works:** 1. A [Resource](https://docs.webstudio.is/university/foundations/cms#resources) is already responsible for fetching all of those blog posts. The URL path in the Resource might look something like this: `/api/blogs`. 2. The Resource will be modified to include the input value (just one in this case, but you can add as many as you need) like this: Copy `/api/blogs${system.search.searchBlog ? `?search=${system.search.searchBlog}` : ''}` This [expression](https://docs.webstudio.is/university/foundations/expression-editor#expressions) contains the JavaScript Ternary Operator and Template Literals. It says, "Get the blogs, and if the `searchBlog` value is present, add the search filter to the API call; otherwise, don't." All the search input values are available in [`system.search`](https://docs.webstudio.is/university/foundations/variables#system) , so if you have an input with a name, `helloWorld` you can access its value with `system.search.helloWorld`. In summary, when submitting a form, its values are added to the URL as query parameters, which can then be used in [Resources](https://docs.webstudio.is/university/foundations/cms#resources) . Resources are re-fetched when query parameters change so that the Resource can use the values when the form is submitted. [](https://docs.webstudio.is/university/core-components/form#form-inputs) Form inputs ------------------------------------------------------------------------------------------ Many types of inputs can be added to a form. There are currently two categories of form Components. ### [](https://docs.webstudio.is/university/core-components/form#webstudio-form-components) **Webstudio Form Components** These generate standard HTML inputs. While simple to implement, they have limited styling options, especially for elements like checkboxes, due to the constraints of HTML and CSS. They can be found in Add Components > Forms: ![webstudio form components](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F2TP3A8bdxEZnWANfkDnt%252Fform-components.png%3Falt%3Dmedia%26token%3D8dd5cdf5-9a6d-4f0c-97be-9c80a41186e9&width=768&dpr=4&quality=100&sign=2cb1d0b0&sv=2) #### [](https://docs.webstudio.is/university/core-components/form#input-types) Input types * **Button** – To submit the form, reset it, or for interactions like opening something. Buttons are _not_ links. There are three types in Settings: * **Button**: Makes it a general element with no specific default action. Mainly used for interactions like opening something. * **Submit**: Will submit the form. * **Reset**: Will remove any data the user has put into a form. * **Text Input** – By default, it's a simple text field, but it can be changed by going to Settings > Type and selecting one of the following types: number, search, time, hidden, color, date, datetime-local, email, month, password, range, tel, url, or week. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fti4ssKtw31QXHNhOiFMS%252Ftext-input.png%3Falt%3Dmedia%26token%3De68b74fa-5a77-4371-b5b8-e8306ffe7a49&width=300&dpr=4&quality=100&sign=601b1166&sv=2) * **Select** – Provides a dropdown visitors can select one or more options. * **Text Area** – Allows visitors to add multi-line data as part of their answers. It is similar to the “Text Input” component and the two share the same list of properties. * **Checkbox** – Provides multiple options that the visitor can check or leave unchecked as part of their input. * **Radio** – Gives the visitor a list of options and they have to select one. ### [](https://docs.webstudio.is/university/core-components/form#radix-form-components) **Radix Form Components** [Radix Form Components](https://docs.webstudio.is/university/radix) provide enhanced styling and control by using dynamic elements. They work by hiding the actual HTML inputs (which have limited styling capabilities) and displaying customizable versions. When users interact with these styled elements, the system automatically updates the state of the hidden inputs, providing a visually rich and flexible user experience. They can be found in Add Components > Radix: ![radix form components](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FUD6JPxli2MXKes4iyMCM%252Fradix-forms.png%3Falt%3Dmedia%26token%3D54b0dfd2-69fc-4731-9b78-11d3faf6a030&width=768&dpr=4&quality=100&sign=acd84ac2&sv=2) [PreviousWebhook Form](https://docs.webstudio.is/university/core-components/webhook-form) [NextVimeo](https://docs.webstudio.is/university/core-components/vimeo) Last updated 1 year ago Was this helpful? --- # How-Tos | Webstudio Documentation [▶️How to add icons](https://docs.webstudio.is/university/how-tos/how-to-add-icons) [▶️How to create fluid video backgrounds with Vimeo](https://docs.webstudio.is/university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo) [▶️How to create fluid video backgrounds with Vimeo](https://docs.webstudio.is/university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo) [▶️How to create a countdown](https://docs.webstudio.is/university/how-tos/how-to-create-a-countdown) [🍀How to add a GSAP animation](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation) [▶️How to crop an image with out cropping the original image](https://docs.webstudio.is/university/how-tos/how-to-crop-an-image-with-out-cropping-the-original-image) [▶️Using filters to dynamically display content (Airtable example)](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content) [https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/how-tos/how-to-use-custom-fonts.md](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/how-tos/how-to-use-custom-fonts.md) [PreviousHetzner with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/hetzner-coolify) [NextHow to add icons](https://docs.webstudio.is/university/how-tos/how-to-add-icons) Last updated 4 months ago Was this helpful? --- # Head Slot | Webstudio Documentation ![Head Slot](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FB2V3SGDgIrbW4IvYbeex%252Fheadslot.png%3Falt%3Dmedia%26token%3Daba242d3-19db-4795-8349-0c3ab49e21a1&width=768&dpr=4&quality=100&sign=8b77ba81&sv=2) [](https://docs.webstudio.is/university/core-components/head-slot#key-information) Key information ------------------------------------------------------------------------------------------------------- * Even though the Head Slot is visually in the Body instance, the contents of Head Slot are added to the ``. This hierarchy enables [Data Variables](https://docs.webstudio.is/university/foundations/variables) defined on the Body to be used in the head. * If Head Slot and Page Settings define the same data, such as meta title, Head Slot will take priority. Similarly, a default canonical is output on every page and references the current path. By specifying a canonical in Head Slot, the default canonical will not be displayed on the page. * Head Slot comes with an instance for Title, Link, and Meta. These can be duplicated. If you remove them and later need to add them back, you can copy them from a new Head Slot instance. [](https://docs.webstudio.is/university/core-components/head-slot#third-party-documentation) Third Party Documentation --------------------------------------------------------------------------------------------------------------------------- Many elements in the head are quite technical and require reading documentation for proper usage. Here is a list of relevant docs: * [Head (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) * [Canonical (Google)](https://developers.google.com/search/docs/crawling-indexing/canonicalization) * [Meta (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) * [Link (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) * [Title (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) * [Rel (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) * [Pagination (Google)](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading) [PreviousSlot](https://docs.webstudio.is/university/core-components/slot) [NextSeparator](https://docs.webstudio.is/university/core-components/separator) Last updated 7 months ago Was this helpful? --- # Slot | Webstudio Documentation Slots enable you to create reusable sections on your site. Changes made to one instance of the Slot will automatically change all other instances. Slots and their children will appear purple in the navigator and canvas to indicate they are Slots, and any changes made to them will affect all other instances of the Slot. Slots are most commonly used to create reusable navigations and footers, though they are helpful for any sections you want to reuse throughout your site. Data Variables defined on the Global Root are accessible within Slots, while those defined on other instances outside the Slot are not. * * * ### [](https://docs.webstudio.is/university/core-components/slot#how-to-use-slot-component) How to use Slot Component Here is the process for creating and reusing Slot instances: #### [](https://docs.webstudio.is/university/core-components/slot#creating-a-slot-instance) Creating a Slot instance ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-17ec0c76830ed1366cf657be601bfea9d3f76764%252FSlots_Image.avif%3Falt%3Dmedia&width=300&dpr=4&quality=100&sign=2ec60dd3&sv=2) 1. You can find the Slots component in the “Components Panel.” 2. Drag “Slot” from the Components Panel onto your canvas to create a Slot instance. Alternatively, you can add it to the currently selected instance with a click. 3. Add other instances from the Components Panel into the Slot instance to populate it. #### [](https://docs.webstudio.is/university/core-components/slot#reusing-a-slot-instance) Reusing a Slot instance Once you have a Slot on the canvas you can re-use it by simply copying and pasting it anywhere in your project. 1. Select your Slot instance and press Ctrl + C (for Windows) or CMD + C (for Mac). 2. Now, select the position where you want to insert the Slot instance and press Ctrl + V (for Windows) or CMD + V (for Mac) And that’s it! Now updates that you make to any Slot will update all other instances of that Slot. If you need a new unique Slot instance, simply add a new Slot from the Add panel and it will not interfere with your existing Slots. * * * ### [](https://docs.webstudio.is/university/core-components/slot#conclusion) Conclusion With Slots you can re-use content across your site and sync the changes you make to them. [PreviousBlockquote](https://docs.webstudio.is/university/core-components/blockquote) [NextHead Slot](https://docs.webstudio.is/university/core-components/head-slot) Last updated 6 months ago Was this helpful? --- # Tooltip | Webstudio Documentation [PreviousTabs](https://docs.webstudio.is/university/radix/tabs) [NextMarketplace](https://docs.webstudio.is/university/marketplace) Was this helpful? --- # Cloudflare Pages | Webstudio Documentation [Cloudflare Pages](https://pages.cloudflare.com/) is a powerful platform for deploying your projects. It’s simple to use, has a generous free tier, and leverages the Cloudflare Network, offering speed, security, and reliability. While Cloudflare Pages supports static sites and dynamic apps, only the Webstudio static export is currently compatible. See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. [](https://docs.webstudio.is/university/self-hosting/cloudflare-pages#static) Static ----------------------------------------------------------------------------------------- Learn how to upload your static site to Cloudflare Pages. ![Cloudflare Pages new project dashboard](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FUyTQFU3eDvIGfI3WmnfJ%252Fcloudflare-pages-new-project.png%3Falt%3Dmedia%26token%3D9709d739-5bda-482a-a469-621b22c1af01&width=768&dpr=4&quality=100&sign=cef75cda&sv=2) ### [](https://docs.webstudio.is/university/self-hosting/cloudflare-pages#prerequisites) Prerequisites Export your project using one of the [export methods](https://docs.webstudio.is/university/self-hosting#exporting) . **How to upload your project to Cloudflare Pages:** * Go to your Cloudflare Account > Workers and Pages * Click “Create” then select the “Pages” tab * Upload your site manually or add your code to a repository and connect to it * Name your project and deploy it See [Cloudflare’s getting started docs](https://developers.cloudflare.com/pages/get-started/) for a comprehensive tutorial. [PreviousDownload](https://docs.webstudio.is/university/self-hosting/download) [NextGitHub Pages](https://docs.webstudio.is/university/self-hosting/github-pages) Last updated 1 year ago Was this helpful? --- # Using filters to dynamically display content (Airtable example) | Webstudio Documentation [PreviousBuild Your Own Directory Website with Airtable](https://docs.webstudio.is/university/how-tos/build-your-own-directory-website-with-airtable) [NextIntegrations](https://docs.webstudio.is/university/integrations) Last updated 1 year ago Was this helpful? --- # Navigation Menu | Webstudio Documentation [PreviousDialog](https://docs.webstudio.is/university/radix/dialog) [NextPopover](https://docs.webstudio.is/university/radix/popover) Was this helpful? --- # XML Node | Webstudio Documentation Webstudio automatically generates a sitemap for static pages such as Home and About. If you are integrating with a CMS, you can use this component to create a sitemap for CMS data. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FiySSJcLzN8x2L6KJKRd9%252Fxml-component.png%3Falt%3Dmedia%26token%3D67222dcd-1256-451a-ad8b-b6fb5207e2be&width=768&dpr=4&quality=100&sign=c35b1e5c&sv=2) Will display when Document Type is set to "XML" ### [](https://docs.webstudio.is/university/core-components/xml-node#how-to-use-the-xml-node-component) How to use the XML Node component 1. Go to Page Settings > Document Type and select XML from the dropdown ![Page Settings Document Type to XML](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FyWNDGa6RJP3aV73QW3iV%252Fpage-settings-xml-doc-type.png%3Falt%3Dmedia%26token%3D7f103315-f28a-4819-b052-54c7a963669e&width=768&dpr=4&quality=100&sign=7f46bacc&sv=2) 2. Go to Components > XML and add XML Node (this component won’t show until Step 1 is completed) 3. Set the tag and text content (e.g., “loc” and “https://example.com) ### [](https://docs.webstudio.is/university/core-components/xml-node#tips) Tips * XML Nodes can be nested within each other * Use Collection to iterate over a list of data * A sitemap skeleton is available in the Marketplace ### [](https://docs.webstudio.is/university/core-components/xml-node#including-the-static-sitemap) Including the static sitemap While you can use the autogenerated sitemap for static pages and create a separate sitemap for dynamic pages, you can also combine the two. To include the static sitemap data in your custom sitemap, follow these steps: 1. Create a page 2. In the page settings, set the Document Type to XML 3. Set the page path to /sitemap.xml. This will override the default sitemap. 4. Fetch the static data by clicking Create Variable > System Resource (Type) > Sitemap (Resource) ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FlHJBEvIMOoW28QtWHZUE%252Fstatic-sitemap-data.png%3Falt%3Dmedia%26token%3Df2e6fff9-7a7a-4ae9-a4cf-7e2e4c258587&width=768&dpr=4&quality=100&sign=fba4f1fa&sv=2) 5. Use a Collection to iterate over the static sitemap data [PreviousContent Block](https://docs.webstudio.is/university/core-components/content-block) [NextTime](https://docs.webstudio.is/university/core-components/time) Last updated 1 year ago Was this helpful? --- # Collapsible | Webstudio Documentation [](https://docs.webstudio.is/university/radix/collapsible#features) Features --------------------------------------------------------------------------------- * Full keyboard navigation. * Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) . [](https://docs.webstudio.is/university/radix/collapsible#how-to-use-the-radix-ui-collapsible) How to use the Radix UI Collapsible --------------------------------------------------------------------------------------------------------------------------------------- The Collapsible Component is in the "Components Panel" under the "Radix" section. Click on it or drag it onto the canvas. The Collapsible will populate a template that's easy to adjust for your needs. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fgit-blob-08692d424d800f76d035276348785bbd4b75ea92%252Fradix-collapsible.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=35f7560&sv=2) Radix UI Collapsible component within Webstudio The Collapsible component consists of three main parts: 1. **Collapsible**: The root component that controls the collapsible behavior. 2. **Collapsible Trigger**: The button that toggles the collapsible. 3. **Collapsible Content**: The component that contains the collapsible content. [](https://docs.webstudio.is/university/radix/collapsible#customizing-the-collapsible) Customizing the Collapsible ----------------------------------------------------------------------------------------------------------------------- To customize the Collapsible component: 1. **Collapsible Trigger**: Modify the trigger element to change what users click to expand/collapse the content. This can be text, an icon, or any combination of elements. 2. **Collapsible Content**: Edit the content section to add whatever elements you want to show/hide when the collapsible is toggled. 3. **Styling**: Any of the three components can be styled to match your design requirements. [](https://docs.webstudio.is/university/radix/collapsible#using-collapsible-for-ui-patterns) Using Collapsible for UI Patterns ----------------------------------------------------------------------------------------------------------------------------------- The Collapsible component is useful for various UI patterns: * FAQ sections * "Show more" content sections * Settings or preferences panels * Mobile navigation menus * Detail views that can be expanded/collapsed [PreviousAccordion](https://docs.webstudio.is/university/radix/accordion) [NextDialog](https://docs.webstudio.is/university/radix/dialog) Last updated 4 months ago Was this helpful? --- # Webhook Form | Webstudio Documentation **Name change:** Webhook Forms used to be called "Forms." However, [Forms](https://docs.webstudio.is/university/core-components/form) are now a different component intended for building searches and filters. [](https://docs.webstudio.is/university/core-components/webhook-form#receiving-form-submissions) Receiving Form Submissions -------------------------------------------------------------------------------------------------------------------------------- Webhook Forms are used when you need to send form submission data to an external service, rather than modifying page content like searches and filters. ### [](https://docs.webstudio.is/university/core-components/webhook-form#email-notifications) Email Notifications By default, submissions are sent to the Project owner. **Pro feature:** You can customize the recipient of email notifications by navigating to **Project Settings > General**. ![Field to customize the recipient of the form submissions](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F6nV97WOkKnypPQjZEDrI%252Fform-recipient.png%3Falt%3Dmedia%26token%3De5f0f1c9-f240-449e-8f9e-0200d95eeb89&width=300&dpr=4&quality=100&sign=7eafef63&sv=2) ### [](https://docs.webstudio.is/university/core-components/webhook-form#webhooks) Webhooks You can also send form submission data to a webhook—an external URL that receives the data and triggers an action, such as adding a contact to an email automation platform. 1. Obtain a webhook URL from a third-party platform such as [Airtable](https://docs.webstudio.is/university/integrations/airtable-1) . 2. Paste the URL into the `Action` field in **Webhook Form > Settings**. Once set up, every form submission will send a payload (form fields and values) to the webhook URL. [](https://docs.webstudio.is/university/core-components/webhook-form#using-the-webhook-form-component) Using the Webhook Form Component -------------------------------------------------------------------------------------------------------------------------------------------- You can add a Webhook Form Component to your canvas from **Components Panel > Data section**. Webhook Forms do not submit inside the Builder, including in Preview. They only submit on the published site. ### [](https://docs.webstudio.is/university/core-components/webhook-form#webhook-form-structure) Webhook Form Structure A Webhook Form consists of three nested instances: 1. **Form Content** – The primary form fields. 2. **Success Message** – Displayed upon successful submission. 3. **Error Message** – Shown when an error occurs. You can [add new Components](https://docs.webstudio.is/university/core-components/form#form-inputs) to further expand and modify your form. ### [](https://docs.webstudio.is/university/core-components/webhook-form#form-states) Form States Webhook Forms automatically switch between states based on submission results. #### [](https://docs.webstudio.is/university/core-components/webhook-form#success-message) Success Message When a submission is successful, users will see a success message. To customize it: 1. Select the main "Form" instance and go to **Settings**. 2. Change the **State** from "Initial" to "Success." 3. Edit the success message directly on the canvas. #### [](https://docs.webstudio.is/university/core-components/webhook-form#error-message) Error Message If there’s an error during submission, users will see an error message. To modify it: 1. Select the Webhook Form Component. 2. Set the **State** to "Error" to preview and edit the error message. [](https://docs.webstudio.is/university/core-components/webhook-form#form-inputs) Form Inputs -------------------------------------------------------------------------------------------------- Each input field must have a `name` attribute for its data to appear in email notifications and webhook payloads. Ensure every form input has a value for the `name` field to be included in submissions. ![Form input name](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F6ZtwtHfVhpSxfZrnJuiy%252Fform-name.png%3Falt%3Dmedia%26token%3Dc3d04124-5ee3-4e73-ab5e-d22b17b2fefd&width=768&dpr=4&quality=100&sign=61eae260&sv=2) For a full list of input types, including checkboxes and radio buttons, refer to [Form Inputs](https://docs.webstudio.is/university/core-components/form#form-inputs) . [PreviousStagger Animation](https://docs.webstudio.is/university/core-components/stagger-animation) [NextForm](https://docs.webstudio.is/university/core-components/form) Last updated 7 months ago Was this helpful? --- # Tabs | Webstudio Documentation [PreviousSwitch](https://docs.webstudio.is/university/radix/switch) [NextTooltip](https://docs.webstudio.is/university/radix/tooltip) Was this helpful? --- # Marketplace | Webstudio Documentation See [Webstudio Templates](https://webstudio.is/marketplace/templates) or head over to the Builder to view all templates. The Marketplace in the Builder contains more templates than what's shown in the Dashboard. The Dashboard shows starter Projects, while the Builder shows everything in the Dashboard, plus pages and sections. ![Webstudio Marketplace in the Builder](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FeEUQ87aIdZh892h0fWl3%252Fmarketplace-three-tabs.png%3Falt%3Dmedia%26token%3D208146fd-73b9-429e-9a14-983f648bd476&width=768&dpr=4&quality=100&sign=edbb5d0c&sv=2) [](https://docs.webstudio.is/university/marketplace#types-of-templates) Types of templates ----------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/marketplace#pages) **Pages** Page templates are pre-designed single or multi-page layouts for entire pages. Upon selection, a new page will be inserted into your Project. ### [](https://docs.webstudio.is/university/marketplace#integrations) **Integrations** Integration templates are [pages](https://docs.webstudio.is/university/marketplace#pages) with preconfigured [Resources](https://docs.webstudio.is/university/foundations/variables#resource) , such as Airtable, Notion, Ghost, Baserow, and more. Blog templates, for example, typically include pages like: * Posts * Post * Author * Tag * Sitemap Integration templates are typically unstyled or minimally styled, allowing you to apply your own design while providing the backend API connections. ### [](https://docs.webstudio.is/university/marketplace#sections) **Sections** Section templates are pre-designed layouts for quickly creating pages from sections. Upon selection, the section is inserted into the current page. [](https://docs.webstudio.is/university/marketplace#webflow-ecosystem-compatibility) Webflow Ecosystem Compatibility ------------------------------------------------------------------------------------------------------------------------- Webstudio supports templates, component libraries, and projects from the Webflow ecosystem, allowing you to copy from Webflow and paste into Webstudio. Learn more about [Copy Paste](https://docs.webstudio.is/university/foundations/copy-paste/webflow) . [](https://docs.webstudio.is/university/marketplace#contributing-to-the-marketplace) Contributing to the Marketplace ------------------------------------------------------------------------------------------------------------------------- You can contribute free or paid templates by creating a project and submitting it for review. Learn about about [contributing to the Marketplace](https://docs.webstudio.is/contributing/marketplace) . [PreviousTooltip](https://docs.webstudio.is/university/radix/tooltip) [NextWebstudio AI](https://docs.webstudio.is/university/webstudio-ai) Last updated 9 months ago Was this helpful? --- # Animation Group | Webstudio Documentation Animation Groups serve as containers that define how their contents animate. You can nest Animation Groups to create complex animations. Animation Group is one component of the animation engine. See [Animations](https://docs.webstudio.is/university/foundations/animations) for an overview. [](https://docs.webstudio.is/university/core-components/animation-group#settings) Settings ----------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/core-components/animation-group#run-on-canvas) Run on canvas By default, animations only run on the canvas when the Animation Group is selected in the navigator. Enable this setting to preview animations while designing other elements. ### [](https://docs.webstudio.is/university/core-components/animation-group#type) Type Choose between two animation trigger types: * **View-based** – Triggers when an element enters or exits the viewport. Ideal for entrance and exit animations that respond to element visibility. * **Scroll-based** – Progresses based on scroll position, perfect for scroll indicators. ### [](https://docs.webstudio.is/university/core-components/animation-group#axis) Axis Defines which scroll direction controls the animation: * **Y-axis** – Vertical scrolling (default). * **X-axis** – Horizontal scrolling. ### [](https://docs.webstudio.is/university/core-components/animation-group#scroll-source-for-scroll-based-animations) Scroll source (for scroll-based animations) Select which scrollable container drives the animation: * **Nearest** – Uses the closest scrolling container affecting the element. * **Root** – Uses the main document scroll. * **Closest** – Uses the nearest ancestor element with scrolling enabled. ### [](https://docs.webstudio.is/university/core-components/animation-group#subject-for-view-based-animations) Subject (for view-based animations) Defines which element's visibility determines the animation progress, allowing animations to be triggered by different elements entering or exiting the viewport. ### [](https://docs.webstudio.is/university/core-components/animation-group#inset) Inset Fine-tune animation start and end points relative to the viewport: * **Top Inset** – Adjusts when the animation begins. * **Bottom Inset** – Adjusts when the animation ends. Positive values delay the animation, while negative values trigger it earlier. For an alternative workflow, the Style Panel accepts `view-timeline-inset` in Advanced on the child instances of the Animation Group. The usage of this property is automatically polyfilled for cross-browser support. If you opt to use the Style Panel, be sure to explicitly set the Top and Bottom Inset values to `auto` in the Animation Group. ### [](https://docs.webstudio.is/university/core-components/animation-group#debug-mode) Debug mode Debug mode is experimental. While it can be very helpful in fine-tuning animations, there are some known issues with it—especially in complex animations. Enables visualization tools to fine-tune animation timing and progression. When enabled, a small overlay appears displaying animation state details: * Current status (idle, running). * Progress percentage. * Timeline position. This debugging information is visible only in design mode and does not affect the live site. [](https://docs.webstudio.is/university/core-components/animation-group#define-your-animation) Define your animation ------------------------------------------------------------------------------------------------------------------------- Once your Animation Group settings are configured, define the animation behavior. Webstudio offers preset animations for quick setup while allowing custom animations. ### [](https://docs.webstudio.is/university/core-components/animation-group#animation-presets) Animation presets The available presets depend on the animation type: #### [](https://docs.webstudio.is/university/core-components/animation-group#view-based-animation-presets) **View-based animation presets** * **Fade In** – Smoothly transitions an element from invisible to visible. * **Fade Out** – Gradually fades an element as it exits the viewport. * **Fly In** – Moves an element into position upon entry. * **Fly Out** – Animates an element away upon exit. * **Wipe In** – Creates a revealing effect. * **Wipe Out** – Gradually hides content. * **Parallax In** – Creates depth by moving elements at different speeds during entry. * **Parallax Out** – Applies a parallax effect as elements exit. #### [](https://docs.webstudio.is/university/core-components/animation-group#scroll-based-animation-presets) **Scroll-based animation presets** * **Fade In** – Gradually reveals content based on scroll position. * **Fade Out** – Progressively hides content as the user scrolls. ### [](https://docs.webstudio.is/university/core-components/animation-group#animation-properties) Animation properties Each animation can be customized using the following properties: #### [](https://docs.webstudio.is/university/core-components/animation-group#timing) **Timing** * **Range Start** and **Range End** – Define when the animation starts and stops, typically based on element position or scroll progress. See [Scroll-driven Animations](https://scroll-driven-animations.style/tools/view-timeline/ranges) for an interactive tool that explains the various options. * **Entry** – Animates during the subject element entry (starts entering → fully visible) * **Exit** – Animates during the subject element exit (starts exiting → fully hidden) * **Contain** – Animates only while the subject element is fully in view (fullly visible after entering → starts exiting) * **Cover** – Animates entire time the subject element is visible (starts entering → ends after exiting) * **Entry Crossing** – Animates as the subject element enters (leading edge → trailing edge enters view) * **Exist Crossing** – Animates as the subject element exits (leading edge → trailing edge leaves view) * **Duration** – Setting a duration will play the animation when it enters the scrollport (taking into account Range Start and Inset), then animate for the duration and end. On the published site, the animation will play just once, but in the builder, it will play multiple times to aid in building. Because the duration dictates when the animation will end, the Range End field will be disabled. * **Fill Mode** – Controls how an element appears before and after the animation: * **None** – Only displays its animation styles _during_ the animation. * **Forwards** – The animation transitions from the **canvas styles → animation styles**. Prefered for "_out_" animations. * **Backwards** – The animation transitions from the the **animation styles → canvas styles**. Prefered for "_in_" animations. For example, the opacity is "1" by default on the canvas so to fade it in, you'd set "0" in the animation. It then transitions from the animation style (0) to the canvas style (1). * **Both** – Combines "Forwards" and "Backwards," transitioning smoothly before and after animation. * **Easing** – Defines the speed curve of the animation: * **Linear** – Moves at a constant speed. * **Ease-In** – Starts slow, then accelerates. * **Ease-Out** – Starts fast, then decelerates. #### [](https://docs.webstudio.is/university/core-components/animation-group#keyframes) **Keyframes** * Define specific points in the animation timeline. * Each keyframe can modify multiple CSS properties. * Offset values determine when changes occur (0 to 100). You can stack multiple animations on the same element by adding additional animations to your Animation Group. This enables complex, multi-step effects. [](https://docs.webstudio.is/university/core-components/animation-group#css-input-fields) CSS input fields --------------------------------------------------------------------------------------------------------------- The input fields support various units (`px`, `%`, `vh`, `dvh`, `lvh`, etc.), CSS functions (`calc()`, `clamp()`, etc.), or `"auto"` for default values, and [CSS variables](https://docs.webstudio.is/university/foundations/css-variables) . Additionally, two special CSS variables are automatically exposed: * `--index`: Represents the current child's position in the Animation Group sequence (0, 1, 2, etc.). * `--total`: Represents the total number of children in the Animation Group. These variables are useful for advanced animation patterns, such as: * Creating unique rotations for each child element using `calc(var(--index) * 45deg)`. * Applying varying translations with `calc(var(--index) * 100px)`. * Adjusting animations relative to the total number of elements, like `calc(100% / var(--total))` for evenly distributed effects. You can use these variables anywhere in descendant elements or pass them as parameters to nested animations, enabling complex, coordinated motion effects. [](https://docs.webstudio.is/university/core-components/animation-group#mental-model-and-design-patterns) Mental model and design patterns ----------------------------------------------------------------------------------------------------------------------------------------------- Thus far, we’ve covered the building blocks of animations. However, there are various strategies to consider when composing animations. ### [](https://docs.webstudio.is/university/core-components/animation-group#mental-model) Mental model Understanding how to approach animation composition can simplify the process, making it easier to comprehend and reducing mental fatigue during development. When animating instances _in_ (e.g., fading in or performing complex transitions like translating and rotating scattered items into a neat grid), **the mental model is to set the styles in the Style Panel to their** _**final "in" state**_ **and define the styles in the Animation Group as their** _**beginning state**_. For animations transitioning from one value to another (e.g., opacity from 0 to 1), the Animation Group requires only a single keyframe. Here are examples of animations with their corresponding styles in the Style Panel and Animation Group: Animations transitioning from a custom style to their default state don’t require the default state to be explicitly defined in the Style Panel. For instance, to fade something in (i.e., opacity `0` → `1`), you only need to specify the non-default value (`opacity: 0`) in the Animation Group. CSS will interpolate to the default state (e.g., `opacity: 1`) automatically. However, you must define a style in the Style Panel if the final "in" state is not a default value (defaults being `0`, `none`, `auto`, etc.). For example, if an image’s final state is slightly rotated, such as `rotate: 3deg`, this must be explicitly set in the Style Panel, as the default rotation is effectively `0`. Animation Style Panel Animation Group Fade in Nothing `opacity: 0` Rotate Nothing `rotate: 50deg` Translate Y Nothing `translate: 0 200px` Grow box shadow Bigger box shadow: `box-shadow: 0 0 50px 100px black` Smaller box shadow: `box-shadow: 0 0 25px 50px black` This mental model has two key implications: 1. **The canvas reflects the final "in" state.** This approach simplifies designing on the canvas, allowing you to see the site’s final appearance without relying on animations. Sometimes animations can interfere with design work, so being able to turn them off is valuable. You might also want to disable animations at specific breakpoints. Since the canvas is designed for the final "in" state, disabling animations won’t compromise the site’s look—everything still appears polished! 2. **For "out" animations, the opposite mental model applies.** Here, animations transition from the default state to the defined animation state. For example, to fade out, the Animation Group would set `opacity: 0`. This matches the value used for an "in" animation, but there’s a critical difference: **the fill mode must be set to** `**forwards**`. This ensures the animation moves from the default state to the animation state and stays there, while `backwards` would reverse the direction (from animation state to default). See "[Timing](https://docs.webstudio.is/university/core-components/animation-group#timing) " for more details. ### [](https://docs.webstudio.is/university/core-components/animation-group#design-patterns) Design patterns There are multiple ways to structure Animation Groups and their settings, each offering different levels of maintainability and complexity. The best approach often depends on the animation’s complexity. #### [](https://docs.webstudio.is/university/core-components/animation-group#direct-style-animation-pattern) Direct style animation pattern In this pattern, you directly define animation properties, such as `opacity: 0`, within the Animation Group. This is the method discussed so far. It works for both simple and complex animations, but maintainability can suffer as complexity grows. The Animation Group controls the styles of its _direct_ children. If multiple levels of nested instances need animation, each level in the hierarchy requires its own Animation Group. As the number of animation groups increases, so does the management overhead and learning curve. #### [](https://docs.webstudio.is/university/core-components/animation-group#custom-property-animation-pattern) Custom property animation pattern In this pattern, the Animation Group animates custom properties ([CSS variables](https://docs.webstudio.is/university/foundations/css-variables) ), such as `--child-rotate: 50deg`. These properties are both defined and applied in the Style Panel, unlocking features like UI controls and [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) for reusability. Beyond accessing Style Panel capabilities, this pattern offers another major advantage: only a single Animation Group is needed for the entire composition. The Animation Group controls the _values_ of the CSS variables, not _where_ they’re applied. In contrast, the direct style pattern manages both values and their application (the group’s direct children). [PreviousHTML Embed](https://docs.webstudio.is/university/core-components/html-embed) [NextText Animation](https://docs.webstudio.is/university/core-components/text-animation) Last updated 4 months ago Was this helpful? --- # Markdown Embed | Webstudio Documentation ![Markdown Embed Component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FcWhGL5tb28BvYRhb6PyB%252Fmarkdown-embed.png%3Falt%3Dmedia%26token%3D46f3ada8-562a-4060-9407-e1c8cc052e30&width=768&dpr=4&quality=100&sign=c99e5fa1&sv=2) [](https://docs.webstudio.is/university/core-components/markdown-embed#why-markdown-embed-is-needed) Why Markdown Embed is needed -------------------------------------------------------------------------------------------------------------------------------------- Some APIs (or users) provide rich text in Markdown format, which can't be rendered in the web browser. Markdown Embed converts Markdown to HTML and enables applying styles to the various tags contained within HTML. [](https://docs.webstudio.is/university/core-components/markdown-embed#how-to-use-markdown-embed) How to use Markdown Embed -------------------------------------------------------------------------------------------------------------------------------- Markdown Embed is located in Components > Data. ### [](https://docs.webstudio.is/university/core-components/markdown-embed#id-1.-add-markdown) 1\. Add Markdown Once added to the canvas, the right panel will show a Code field. You can either add Markdown directly to it or, more commonly, bind Markdown to it from a Resource. ![Markdown bound to Markdown Embed component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F3d07DQKyrgytNH885Uwk%252Fmarkdown-embed-code.png%3Falt%3Dmedia%26token%3D69a62669-378d-43df-a652-0510f37020e2&width=768&dpr=4&quality=100&sign=5680c9a&sv=2) CMS data bound to Markdown Embed Code ### [](https://docs.webstudio.is/university/core-components/markdown-embed#id-2.-style) 2\. Style In the Navigator, Markdown Embed has various HTML tags nested. Expand Markdown Embed, and you’ll see tags such as Heading 1, Link, Image, and much more. ![Markdown Embed List styled](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FIvGELG3nsLDEtwg6a26P%252Fmarkdown-embed-style.png%3Falt%3Dmedia%26token%3D407a8e7c-f49e-4ac8-b775-143f096cfa02&width=768&dpr=4&quality=100&sign=85a47d97&sv=2) List selected and styled Styles applied to each of these tags will apply to all occurrences of that tag within the Markdown Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border. [](https://docs.webstudio.is/university/core-components/markdown-embed#image-handling) Image handling ---------------------------------------------------------------------------------------------------------- Webstudio does NOT optimize images contained in the markup. On the other hand, images bound to the [Image Component](https://docs.webstudio.is/university/core-components/image) are [optimized by default](https://docs.webstudio.is/university/core-components/image#optimize) . The difference is in markup, we are not mapping every element to a Webstudio Component; rather, the element is served as-is with the exception of your custom styles applied to it. [](https://docs.webstudio.is/university/core-components/markdown-embed#similar-components) Similar components ------------------------------------------------------------------------------------------------------------------ [⌨️HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) [🪜Content Embed](https://docs.webstudio.is/university/core-components/content-embed) [PreviousContent Embed](https://docs.webstudio.is/university/core-components/content-embed) [NextContent Block](https://docs.webstudio.is/university/core-components/content-block) Last updated 1 year ago Was this helpful? --- # Content Block | Webstudio Documentation [Content _mode_](https://docs.webstudio.is/university/foundations/modes#content) enables editing _existing_ content, anywhere on the site. But there are many use cases where editors need to add _new_ content. Content Block enables adding new content — not just any content, but specifically inserting new instances predefined in Templates. Designers can create a library of templates, from little cards to fully built sections, and editors can insert instances of these pre-styled templates and modify their content. Next is a breakdown of Content Block by mode: 1. [Design mode](https://docs.webstudio.is/university/core-components/content-block#design-mode) ⬇️ 2. [Content mode](https://docs.webstudio.is/university/core-components/content-block#content-mode) ⬇️ [](https://docs.webstudio.is/university/core-components/content-block#content-block-in-design-mode) Content Block in Design mode ------------------------------------------------------------------------------------------------------------------------------------- Sometimes providing team members or clients the ability to edit existing content doesn’t help them accomplish everything they need. Instead, they may want to add new content without asking you. Content Block enables you to define regions on the site where editors can add instances of templates that you create. Next is how to use it. ### [](https://docs.webstudio.is/university/core-components/content-block#step-1-add-content-block) Step 1: Add Content Block Add the Content Block to the various regions you want editors to insert new content. For example, you can add it to a place on the page where entirely new sections can be added, or you can add it within a section for them to add additional content to. ### [](https://docs.webstudio.is/university/core-components/content-block#step-2-add-templates) Step 2: Add templates Notice that the child of Content Block is Templates. Drag/build the various instances you want to provide editors here. For example, your client wants to update the section under the hero with the latest promotion. Sometimes the promotion is for an event while other times it’s a product. You can create those two designs, add them to “Templates” within Editable Block, and your client can insert instances of the desired template and edit its content. Editors don’t have access to the Style Panel, so be sure to provide fully designed templates. Every top-level instance within Templates will appear in Content mode like this: ![Templates in Design mode](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FX9vpDvjGCrjfa0mVamyp%252Ftemplates-design-mode.png%3Falt%3Dmedia%26token%3D38a26e34-6ffe-49e1-8fff-ef8a808e9301&width=768&dpr=4&quality=100&sign=e4fdf007&sv=2) Templates in Design mode ![Template in Content mode](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FxvJ0KGVeTBaxdqK5IPv9%252Ftemplates-content-mode.png%3Falt%3Dmedia%26token%3Da37b4c31-6e0b-4a4f-a2de-20c21cbf708f&width=768&dpr=4&quality=100&sign=797b831f&sv=2) Template in Content mode Each time they insert a template, it will appear as a direct child of Templates. ### [](https://docs.webstudio.is/university/core-components/content-block#step-3-add-an-initial-setup-optional) Step 3: Add an initial setup (optional) Optionally, you can add instances as direct children of Content Block. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FI3QanbYLCw6wRyOn3p8o%252Fstartingpoint-content-block.png%3Falt%3Dmedia%26token%3D0fd98be7-4c70-4369-915a-fd51579ac945&width=768&dpr=4&quality=100&sign=62740117&sv=2) The "Feature" instances are provided as a starting point Doing so will provide an initial setup for editors. Just keep in mind that editors have permissions to delete any instances within Editable Block (not within Templates though). [](https://docs.webstudio.is/university/core-components/content-block#content-block-in-content-mode) Content Block in Content mode --------------------------------------------------------------------------------------------------------------------------------------- In [Content mode](https://docs.webstudio.is/university/foundations/modes#content) , you can edit any _existing_ content. But what if you want to add _new_ content? You can within Editable Block — region(s) on the page the designer designates as a place you can add new content from building blocks to entire sections. For example, on your homepage, you change out promotions. Sometimes they are events, and other times they are products. The designer can add the Editable Block to that section on your homepage and provide you with an “Events template” and “Products template”. You can then insert instances of each template, delete them, and change out their content. The design is fully provided for you. Next is how to use it. ### [](https://docs.webstudio.is/university/core-components/content-block#step-1-locate-the-region-you-want-to-change) Step 1: Locate the region you want to change On the left-hand side, there is the navigator showing you the various Content Blocks on the page. ![Content Blocks in the navigator](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FVsZVvUtjUhVMFeEbXuKj%252Fcontent-blocks-navigator.png%3Falt%3Dmedia%26token%3D4e183346-83d8-4894-a832-a499a7dc65bc&width=768&dpr=4&quality=100&sign=22c6217b&sv=2) You can click on them to navigate to that part of the page. ### [](https://docs.webstudio.is/university/core-components/content-block#step-2-add-template-instances) Step 2: Add template instances Each Content Block can have a unique set of templates you can choose from. On the canvas, hover where you want to insert, and the blue + button will appear. Click that, and you’ll see a list of templates provided by the designer. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FxvJ0KGVeTBaxdqK5IPv9%252Ftemplates-content-mode.png%3Falt%3Dmedia%26token%3Da37b4c31-6e0b-4a4f-a2de-20c21cbf708f&width=768&dpr=4&quality=100&sign=797b831f&sv=2) Templates the designer provided Select the one you want, and it’ll insert an instance/copy of that template. Click into it to make changes. See more about editing content in [Content mode](https://docs.webstudio.is/university/foundations/modes#for-editors) . ### [](https://docs.webstudio.is/university/core-components/content-block#step-3-delete-instances) Step 3: Delete instances You can delete any instances within the Content Block in one of two ways: 1. The blue + button will turn into a red delete button if you hold the option/alt key on your keyboard. 2. Select the instance in the navigator, and press delete/backspace on your keyboard. ![plus button changing to delete when holding option/alt](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FGCNugCMqKFANSHYF1YHO%252Fdelete-instance-content-mode.gif%3Falt%3Dmedia%26token%3Db5bc0b2e-3acd-4a4e-8e6e-a69befeecb0a&width=768&dpr=4&quality=100&sign=2311d69a&sv=2) Hold option/alt You can’t delete the template itself, so you can always add it back. Beyond adding new content, you can edit any of the existing content. See [Content mode](https://docs.webstudio.is/university/foundations/modes#content) for more information. [PreviousMarkdown Embed](https://docs.webstudio.is/university/core-components/markdown-embed) [NextXML Node](https://docs.webstudio.is/university/core-components/xml-node) Last updated 9 months ago Was this helpful? --- # How to create fluid video backgrounds with Vimeo | Webstudio Documentation [PreviousHow to add icons](https://docs.webstudio.is/university/how-tos/how-to-add-icons) [NextHow to create a countdown](https://docs.webstudio.is/university/how-tos/how-to-create-a-countdown) Last updated 1 year ago Was this helpful? --- # Popover | Webstudio Documentation [PreviousNavigation Menu](https://docs.webstudio.is/university/radix/navigation-menu) [NextRadio Group](https://docs.webstudio.is/university/radix/radio-group) Was this helpful? --- # How to crop an image with out cropping the original image | Webstudio Documentation [PreviousHow to create a countdown](https://docs.webstudio.is/university/how-tos/how-to-create-a-countdown) [NextHow to add a GSAP animation](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation) Last updated 1 year ago Was this helpful? --- # Vercel | Webstudio Documentation [Vercel](https://vercel.com/) , a popular cloud platform for static sites and Serverless Functions, is known for its ease of use and performance optimization capabilities. It provides an ideal environment for deploying your Webstudio Projects. See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. [](https://docs.webstudio.is/university/self-hosting/vercel#javascript-application) JavaScript application --------------------------------------------------------------------------------------------------------------- Learn how to deploy your dynamic JavaScript application to Vercel. How to Export and Self-Host Your Site on Vercel ### [](https://docs.webstudio.is/university/self-hosting/vercel#prerequisites) **Prerequisites** * Install the [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) * [Build](https://docs.webstudio.is/university/self-hosting/cli#build) your project locally Once you've built the project locally, you can use the [Vercel CLI](https://vercel.com/docs/cli) to deploy your app directly to Vercel: Copy vercel deploy Follow the [Vercel CLI installation instructions](https://vercel.com/docs/cli) . We plan to add more deployment targets in future. #### [](https://docs.webstudio.is/university/self-hosting/vercel#important-notes) Important Notes If you use `vercel build` before `vercel deploy`, make sure to clean your `app` folder in the project afterward. Vercel injects a few [files](https://github.com/vercel/vercel/blob/a8ad176262ef822860ce338927e6f959961d2d32/packages/remix/src/build.ts#L63) to support and deploy Remix using their CLI, but these files are not necessary for your project when you use it locally. [](https://docs.webstudio.is/university/self-hosting/vercel#static-site) Static site ----------------------------------------------------------------------------------------- Learn how to upload your static site to Vercel. ![Vercel add new project dashboard](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F91tDzM7rK3QCHeMEWrVC%252Fvercel-new-project.png%3Falt%3Dmedia%26token%3D07d4b636-68b8-4109-bcc3-1d9480083033&width=768&dpr=4&quality=100&sign=f9ccae52&sv=2) ### [](https://docs.webstudio.is/university/self-hosting/vercel#prerequisites-1) Prerequisites * Export your project using one of the [export methods](https://docs.webstudio.is/university/self-hosting#exporting) * Upload/commit your project to a Git provider (GitHub, Bitbucket, GitLab) **How to upload your project to Netlify:** * Go to dashboard * Click “Import project” or “Add New” > “Project” * Continue with one of the Git providers and authorize it * Select the repository your project is in * Click “Deploy” See Vercel’s “[Import an existing project](https://vercel.com/docs/getting-started-with-vercel/import) ” doc for a comprehensive tutorial. [PreviousNetlify](https://docs.webstudio.is/university/self-hosting/netlify) [NextAWS with Flightcontrol (Docker)](https://docs.webstudio.is/university/self-hosting/flightcontrol) Last updated 1 year ago Was this helpful? --- # Select | Webstudio Documentation [PreviousRadio Group](https://docs.webstudio.is/university/radix/radio-group) [NextSheet](https://docs.webstudio.is/university/radix/sheet) Was this helpful? --- # How to create a countdown | Webstudio Documentation [PreviousHow to create fluid video backgrounds with Vimeo](https://docs.webstudio.is/university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo) [NextHow to crop an image with out cropping the original image](https://docs.webstudio.is/university/how-tos/how-to-crop-an-image-with-out-cropping-the-original-image) Last updated 1 year ago Was this helpful? --- # CLI | Webstudio Documentation One of the key features of Webstudio's CLI is its exporting capability. With this, you can export your entire Webstudio Project in full. Once exported, these projects are ready to be deployed on any hosting platform of your choice - giving you complete freedom over where and how your website goes live. [](https://docs.webstudio.is/university/self-hosting/cli#prerequisites-installing-node.js) Prerequisites: Installing Node.js --------------------------------------------------------------------------------------------------------------------------------- You need Node.js to use the Webstudio CLI. If Node.js is already installed in your system, you can skip ahead to the section on installing the Webstudio CLI. To install Node.js using NVM, first install NVM by running: Copy curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash Once NVM is installed, you can install Node.js version 20 or greater by running: Copy nvm install 20 Verify your Node.js installation by checking its version: Copy node --version [](https://docs.webstudio.is/university/self-hosting/cli#installing-the-webstudio-cli) Installing the Webstudio CLI ------------------------------------------------------------------------------------------------------------------------ To get started with the Webstudio CLI: 1. Download and install the CLI using the following command: Copy npm install -g webstudio 2. Confirm the installation by checking the CLI version: Copy webstudio --version 3. To keep your CLI updated, use the same command used for installation whenever a new release is available. [](https://docs.webstudio.is/university/self-hosting/cli#initiating-a-webstudio-project) Initiating a Webstudio Project ---------------------------------------------------------------------------------------------------------------------------- Now, you can run a Webstudio Project on your local machine using this command: Copy webstudio This will initiate the flow to connect your Webstudio Cloud project and build it in your local computer. The default flow will guide you through the steps. You can also perform all the operations individually using independent commands. ### [](https://docs.webstudio.is/university/self-hosting/cli#commands) Commands Here is the list of independent commands: * version * help * link * sync * build #### [](https://docs.webstudio.is/university/self-hosting/cli#link) link The `**link**` command syncs your local Webstudio Project with the Project from the Cloud. This means that any changes made in the Cloud can be synced to the local Project, once they are published. You can link a Project from Webstudio Cloud with the following command: Copy webstudio link This command will prompt you to paste a link which you can create using the _Share_ option in your Project. **Make sure to provide Build access when generating the link in Webstudio Cloud.** #### [](https://docs.webstudio.is/university/self-hosting/cli#sync) sync Once the project is linked, use the `**sync**` command to sync it with the Cloud: Copy webstudio sync Make sure to publish the Project in Webstudio Cloud before running the `**sync**` command in your local Webstudio Project. #### [](https://docs.webstudio.is/university/self-hosting/cli#build) build Now, you can build your Project as a dynamic app or static site using the `**build**` command: Copy webstudio build See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. **Build a JavaScript application** During this phase, the CLI establishes the necessary routes and pages, scaffolding the entire application using the default Remix template. Additionally, all assets, such as images and fonts, are downloaded to the `assets` folder inside the `public` directory. Once the project is scaffolded, you can run `npm install` and then `npm run dev` to run your app in development mode. If you want to build a production version of the app, you can run `npm run build`. See [JavaScript app hosting platforms](https://docs.webstudio.is/university/self-hosting#platforms-for-javascript-applications) we have documented. **Build a static site** You can optionally build the project as a static site by selecting "Static Site Generation (SSG)" in templates or with the following command: Copy webstudio build --template ssg Please review [the limitations](https://docs.webstudio.is/university/self-hosting#ssg-limitations) of using the static site export instead of dynamic (i.e., all the other options in templates). See [static site hosting platforms](https://docs.webstudio.is/university/self-hosting#platforms-for-static-sites) we have documented. [PreviousSelf-Hosting](https://docs.webstudio.is/university/self-hosting) [NextDownload](https://docs.webstudio.is/university/self-hosting/download) Last updated 12 months ago Was this helpful? --- # Integrations | Webstudio Documentation This page is a work in progress – much more to come. ### [](https://docs.webstudio.is/university/integrations#cmss) CMSs * [Hygraph](https://docs.webstudio.is/university/integrations/hygraph) * [Airtable](https://docs.webstudio.is/university/integrations/airtable) * [WordPress](https://docs.webstudio.is/university/integrations/wordpress) * [Flotiq](https://docs.webstudio.is/university/integrations/flotiq) ### [](https://docs.webstudio.is/university/integrations#databases) Databases * [Notion](https://docs.webstudio.is/university/integrations/notion) * [Supabase](https://docs.webstudio.is/university/integrations/supabase) ### [](https://docs.webstudio.is/university/integrations#forms) Forms * [Pabbly](https://docs.webstudio.is/university/integrations/pabbly) * [Zappier](https://docs.webstudio.is/university/integrations/zapier) * [N8N](https://docs.webstudio.is/university/integrations/n8n) * [Airtable](https://docs.webstudio.is/university/integrations/airtable-1) Have a platform you want to see a tutorial for? Send us a message in [Discord](https://discord.gg/UNdyrDkq5r) . [PreviousUsing filters to dynamically display content (Airtable example)](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content) [NextHow to build a frontend for Supabase using Webstudio](https://docs.webstudio.is/university/integrations/supabase) Last updated 3 months ago Was this helpful? --- # Download | Webstudio Documentation The Webstudio Builder has a button that lets you download a static version of your site. See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. [](https://docs.webstudio.is/university/self-hosting/download#downloading-your-project) Downloading your project --------------------------------------------------------------------------------------------------------------------- 1. Click “Publish” 2. Click “Export” ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FsPlbpUr2kT5xGgGogEKz%252Fexport.png%3Falt%3Dmedia%26token%3D19f04496-e8bf-40a5-b2bd-2bf431fc0e84&width=300&dpr=4&quality=100&sign=15d090fe&sv=2) 3. Click “Build and download static site” ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F58Bnc4sVJ3i9RNo7aZSd%252Fbuild-and-download-static-site.png%3Falt%3Dmedia%26token%3D82586d13-8aa7-4ebb-b688-8cff090539ae&width=300&dpr=4&quality=100&sign=a9f9f749&sv=2) 4. Wait up to a minute while the project is built then downloaded The export contains a static site consisting of HTML, CSS, JS, and images ready to be uploaded to another platform. See [static site hosting platforms](https://docs.webstudio.is/university/self-hosting#platforms-for-static-sites) we have documented. [PreviousCLI](https://docs.webstudio.is/university/self-hosting/cli) [NextCloudflare Pages](https://docs.webstudio.is/university/self-hosting/cloudflare-pages) Last updated 1 year ago Was this helpful? --- # How to add icons | Webstudio Documentation This guide shows you how to easily add icons to your Webstudio website. [PreviousHow-Tos](https://docs.webstudio.is/university/how-tos) [NextHow to create fluid video backgrounds with Vimeo](https://docs.webstudio.is/university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo) Last updated 1 year ago Was this helpful? --- # Errors | Webstudio Documentation [▶️Connecting your Hostinger Domain to Webstudio](https://docs.webstudio.is/errors/connecting-your-hostinger-domain-to-webstudio) [🔌Worker not found](https://docs.webstudio.is/errors/worker-not-found) [🌮AppSumo redemption failed](https://docs.webstudio.is/errors/appsumo-redemption-failed) [PreviousContributing to the Marketplace](https://docs.webstudio.is/contributing/marketplace) [NextConnecting your Hostinger Domain to Webstudio](https://docs.webstudio.is/errors/connecting-your-hostinger-domain-to-webstudio) Was this helpful? --- # Netlify | Webstudio Documentation [Netlify](https://www.netlify.com/) , a popular choice for deploying modern websites and apps, offers features like continuous deployment from Git across a global application delivery network, serverless form handling, and more. It provides an ideal environment for deploying your Webstudio Projects. **Netlify supports deploying both dynamic apps and static sites.** See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. [](https://docs.webstudio.is/university/self-hosting/netlify#javascript-application) JavaScript application ---------------------------------------------------------------------------------------------------------------- Learn how to deploy your dynamic JavaScript application to Netlify. ### [](https://docs.webstudio.is/university/self-hosting/netlify#prerequisites) Prerequisites * Install the [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) Use the [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy your app directly to [Netlify](https://netlify.com/) : Copy netlify deploy You can configure the project to support Netlify serverless/edge-functions respectively, as deployment target at the time of initially setting up your project. Please check the [initiating-a-webstudio-project](https://github.com/webstudio-is/webstudio/tree/main/packages/cli#initiating-a-webstudio-project) section. You can manually change it using the `build` command. For serverless functions: Copy webstudio build --template netlify [](https://docs.webstudio.is/university/self-hosting/netlify#static-site) Static site ------------------------------------------------------------------------------------------ Learn how to upload your static site to Netlify. ![netlify new site dashboard](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FMq7DknJpcVMksCHA3Lun%252Fnetlify-new-project.png%3Falt%3Dmedia%26token%3D38162a9a-3fa3-4259-ab50-fc638110673e&width=768&dpr=4&quality=100&sign=98876634&sv=2) ### [](https://docs.webstudio.is/university/self-hosting/netlify#prerequisites-1) Prerequisites * Export your project using one of the [export methods](https://docs.webstudio.is/university/self-hosting#exporting) . **How to upload your project to Netlify:** * Go to Sites * Add a new site * **Manually** – upload the export zip from Webstudio ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FcgC0PTjQydF4WNsqsQum%252Fnetlify-drag-drop.png%3Falt%3Dmedia%26token%3D691f1739-2031-44e1-9e22-5e5c1926d18a&width=768&dpr=4&quality=100&sign=90584e21&sv=2) Drag and drop upload static site to netlify * **Git** – Unzip the export and add it to a repository such as GitHub * Click “Open production deploy” \\ [PreviousGitHub Pages](https://docs.webstudio.is/university/self-hosting/github-pages) [NextVercel](https://docs.webstudio.is/university/self-hosting/vercel) Last updated 6 months ago Was this helpful? --- # Content Embed | Webstudio Documentation ![Content Embed Component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F346SSPPshaQX1JvhkfdZ%252Fcontent-embed-component.png%3Falt%3Dmedia%26token%3Dbc21c4f6-49ff-460b-a3d1-9db54c24d744&width=768&dpr=4&quality=100&sign=3f82cef5&sv=2) [](https://docs.webstudio.is/university/core-components/content-embed#why-content-embed-is-needed) Why Content Embed is needed ----------------------------------------------------------------------------------------------------------------------------------- When designing most components on the site, you click on them and style them. However, this can’t be the case for HTML code because the HTML component is all that can be clicked on, not any of the headers, paragraphs, or other tags within. Content Embed enables applying styles to the various tags contained within HTML. [](https://docs.webstudio.is/university/core-components/content-embed#how-to-use-content-embed) How to use Content Embed ----------------------------------------------------------------------------------------------------------------------------- Content Embed is located in Components > Data. ### [](https://docs.webstudio.is/university/core-components/content-embed#id-1.-add-html) 1\. Add HTML Once added to the canvas, the right panel will show a Code field. You can either add HTML directly to it or, more commonly, bind HTML to it from a Resource. ![HTML bound to Content Embed component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F3UlxVGiKR1q9f4BODCqz%252Fcontent-embed-code.png%3Falt%3Dmedia%26token%3D59d1c9e7-ecd5-4717-ada8-74dafe9d58af&width=768&dpr=4&quality=100&sign=2cea3d70&sv=2) CMS data bound to Content Embed Code ### [](https://docs.webstudio.is/university/core-components/content-embed#id-2.-style) 2\. Style In the Navigator, Content Embed has various HTML tags nested. Expand Content Embed, and you’ll see tags such as Heading 1, Link, Image, and much more. ![Content Embed H2 styled](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FrWuXrYenw0txdiALQHCo%252Fcontent-embed-style.png%3Falt%3Dmedia%26token%3Dc0a14c62-1ef2-48b4-8b59-ee1a87e5056b&width=768&dpr=4&quality=100&sign=e2a8e88a&sv=2) Heading 2 selected and styled Styles applied to each of these tags will apply to all occurrences of that tag within the Content Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border. [](https://docs.webstudio.is/university/core-components/content-embed#image-handling) Image handling --------------------------------------------------------------------------------------------------------- Webstudio does NOT optimize images contained in the markup. On the other hand, images bound to the [Image Component](https://docs.webstudio.is/university/core-components/image) are [optimized by default](https://docs.webstudio.is/university/core-components/image#optimize) . The difference is in markup, we are not mapping every element to a Webstudio Component; rather, the element is served as-is with the exception of your custom styles applied to it. [](https://docs.webstudio.is/university/core-components/content-embed#html-embed-vs.-content-embed) HTML Embed vs. Content Embed ------------------------------------------------------------------------------------------------------------------------------------- While very similar, there is one distinct difference: Content Embed enables styling the contained HTML. If there is no need to apply styles to the contained HTML, then use the [HTML Embed Component](https://docs.webstudio.is/university/core-components/html-embed) . However, if you need to style the contents (which is typically the case if fetching HTML from a CMS), then use Content Embed. [](https://docs.webstudio.is/university/core-components/content-embed#similar-components) Similar components ----------------------------------------------------------------------------------------------------------------- [⌨️HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) [🪜Markdown Embed](https://docs.webstudio.is/university/core-components/markdown-embed) [PreviousCollection](https://docs.webstudio.is/university/core-components/collection) [NextMarkdown Embed](https://docs.webstudio.is/university/core-components/markdown-embed) Last updated 1 year ago Was this helpful? --- # GitHub Pages | Webstudio Documentation [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) lets you publish static sites directly from your GitHub repository for free. GitHub supports only static sites. See [export types](https://docs.webstudio.is/university/self-hosting#export-types) for more information about JavaScript applications vs. static sites. [](https://docs.webstudio.is/university/self-hosting/github-pages#static) Static ------------------------------------------------------------------------------------- Learn how to upload your static site to GitHub Pages. ### [](https://docs.webstudio.is/university/self-hosting/github-pages#prerequisites) Prerequisites Export your project using one of the [export methods](https://docs.webstudio.is/university/self-hosting#exporting) . **How to deploy your project to GitHub Pages:** * Create a repository on GitHub and name it .github.io * Upload/commit your project to a GitHub repository See [GitHub’s installation instructions](https://pages.github.com/) for a comprehensive tutorial. [PreviousCloudflare Pages](https://docs.webstudio.is/university/self-hosting/cloudflare-pages) [NextNetlify](https://docs.webstudio.is/university/self-hosting/netlify) Last updated 1 year ago Was this helpful? --- # Self-Hosting | Webstudio Documentation The Builder and Projects are hosted separately. The Builder is used to create Projects, and when a Project is published or exported, the site/app is deployed independently. [](https://docs.webstudio.is/university/self-hosting#builder) Builder -------------------------------------------------------------------------- While both the Builder and the generated site are open-source, self-hosting the Builder in production is more difficult and currently not recommended. You can still [self-host the Builder for development](https://docs.webstudio.is/contributing/contributing-for-developers#running-the-webstudio-project-using-github-codespaces) , and of course, you can self-host the sites for production. [](https://docs.webstudio.is/university/self-hosting#projects) Projects ---------------------------------------------------------------------------- After building, export your Projects and host them on your own server or preferred platform. ### [](https://docs.webstudio.is/university/self-hosting#export-methods) Export methods There are two ways to export Projects: 1. [**Webstudio CLI**](https://docs.webstudio.is/university/self-hosting/cli) – Allows you to interact with and export your Projects. **Supports static and dynamic (see below).** 2. [**Download button in the Builder**](https://docs.webstudio.is/university/self-hosting/download) – Click a button in the Webstudio Builder, and the Project will be downloaded as a zip. **Supports static only (see below).** If you are self-hosting the Builder, then please use the [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) to export your project. ### [](https://docs.webstudio.is/university/self-hosting#export-types) Export types There are two types of exports: * **JavaScript application** – Builds a dynamic [Remix app](https://remix.run/) . This is the default behavior of Webstudio Cloud and provides the most functionality, but it requires hosting that works with apps. * **Static site** – Outputs a static site (HTML/CSS/JS) with limited functionality, but has more versatile hosting options. If you want the export to contain human-readable class names, disable atomic CSS. See [Atomic CSS](https://docs.webstudio.is/university/foundations/project-settings#atomic-css) for more information. #### [](https://docs.webstudio.is/university/self-hosting#javascript-application) **JavaScript application** This is the default behavior if you were to publish to Webstudio Cloud. The JavaScript application supports dynamic functionality like [CMS integrations](https://docs.webstudio.is/university/foundations/cms) , Webhook forms, [image optimization](https://docs.webstudio.is/university/core-components/image#optimize) , redirects, and more. JavaScript applications require a hosting environment that handles server-side code execution, fetching data from CMS integrations, and more. #### [](https://docs.webstudio.is/university/self-hosting#platforms-for-javascript-applications) Platforms for JavaScript applications Here are the platforms we have documented. **Serverless:** Serverless platforms enable you to push code, and they handle the rest, from infrastructure to scaling. This self-hosting option is the easiest to use, though there is less flexibility in platform choice. [▶️Netlify](https://docs.webstudio.is/university/self-hosting/netlify) [▶️Vercel](https://docs.webstudio.is/university/self-hosting/vercel) **Servers:** Webstudio provides a Dockerfile, which enables your site to run on any server that supports containers. This self-hosting option is more technical compared to others, but it offers a higher degree of flexibility regarding its deployment location. The Docker build requires a _minimum_ of 1 GB of memory and 1 core CPU, though more is recommended. [▶️AWS with Flightcontrol (Docker)](https://docs.webstudio.is/university/self-hosting/flightcontrol) [▶️Digital Ocean with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify) [▶️Hetzner with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/hetzner-coolify) #### [](https://docs.webstudio.is/university/self-hosting#static-site) **Static site** You can optionally export your Webstudio Project as a static site, i.e., a collection of HTML, CSS, JavaScript, and image files. This allows you to host your site on traditional hosting providers or, better yet, on dedicated static site hosting and deployment platforms. #### [](https://docs.webstudio.is/university/self-hosting#static-site-limitations) Static site limitations While static site exporting and hosting are less technical, this comes at the cost of functionality. **The following are** _**not**_ **supported:** * Dynamic pages * Redirects * Statuses * Client navigation * Webhook form * Image optimization * No robots.txt * No sitemap.xml #### [](https://docs.webstudio.is/university/self-hosting#local) Local To run a project locally, you must run a simple local server. Use the command `npx serve .` to spin one up. This is required because the static files use absolute URLs. #### [](https://docs.webstudio.is/university/self-hosting#platforms-for-static-sites) Platforms for static sites Here are the platforms we have documented: [▶️Cloudflare Pages](https://docs.webstudio.is/university/self-hosting/cloudflare-pages) [▶️GitHub Pages](https://docs.webstudio.is/university/self-hosting/github-pages) [▶️Netlify](https://docs.webstudio.is/university/self-hosting/netlify) [▶️Vercel](https://docs.webstudio.is/university/self-hosting/vercel) [PreviousWebstudio AI](https://docs.webstudio.is/university/webstudio-ai) [NextCLI](https://docs.webstudio.is/university/self-hosting/cli) Last updated 6 months ago Was this helpful? --- # Worker not found | Webstudio Documentation Webstudio is utilizing [Cloudflare's](https://workers.cloudflare.com/) most advanced Edge Publishing network. Worker can not be found due to one of the following reasons: 1. You haven't published your project after adding a custom domain, [learn more about publishing](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains) , 2. You clicked on publish, but it is still in the process of deployment, it usually takes 1 minute to distribute your project across the globe. 3. Your domain was not properly connected or you need to republish. [PreviousConnecting your Hostinger Domain to Webstudio](https://docs.webstudio.is/errors/connecting-your-hostinger-domain-to-webstudio) [NextAppSumo redemption failed](https://docs.webstudio.is/errors/appsumo-redemption-failed) Last updated 11 months ago Was this helpful? --- # How to integrate Webhook Form with Zappier | Webstudio Documentation How to integrate Webstudio with Zapier [PreviousHow to integrate Webhook Form with Pabbly](https://docs.webstudio.is/university/integrations/pabbly) [NextHow to integrate Webhook Form with N8N](https://docs.webstudio.is/university/integrations/n8n) Last updated 1 year ago Was this helpful? --- # Build Your Own Directory Website with Airtable | Webstudio Documentation In this video, Alex guides you through creating your own directory website using Webstudio and Airtable! Whether you're a beginner or have some experience, this tutorial is designed to provide you with a clear, step-by-step process to build a functional and visually appealing directory website. Clonable Link: [https://wstd.us/template/directory](https://wstd.us/template/directory) [PreviousHow to add a GSAP animation](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation) [NextUsing filters to dynamically display content (Airtable example)](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content) Last updated 1 year ago Was this helpful? --- # Contributing for Designers | Webstudio Documentation Webstudio is not just a tool, but also a community. As an open-source platform, it thrives on the contributions of its users. If you're a designer wondering how you can contribute to the growth and development of Webstudio, here are some ways: 1. **Share Your Designs** One of the most straightforward ways designers can contribute is by sharing their designs built with Webstudio in [our community](https://wstd.us/community) . This could be in the form of templates or individual components that others can use as starting points for their projects. We would also love to share your design showcases with the rest of the Webstudio audience via our socials. 2. **Create Tutorials & Guides** If you've mastered certain aspects of using Webstudio, consider creating tutorials or guides to help other users navigate those features more effectively. Tag us in what you create and we'll help spread the word. 3. **Participate in Community Discussions** Join discussions on forums or social media platforms where ideas about new features or improvements are being discussed - your perspective as a designer will add unique value. If you're looking for a place to start you can join the [Official Webstudio Community](https://wstd.us/community) . 4. **Contributing to the Webstudio Builder UI** If you want to contribute to the Builder UI, your first step is to become familiar with our design system in Figma. Start with the first page of our [Design Docs](https://www.figma.com/community/file/1314046494721696168) . And for our design system & components see the [Webstudio Library](https://www.figma.com/community/file/1314044856015300004) . Please read the docs carefully and thoroughly so you can use our design system properly to create a UI that looks like it's a natural part of Webstudio. If any part of the design is confusing or intimidating you can reach out via our [Discord](https://discord.gg/UNdyrDkq5r) with questions or feedback. We're also happy to give a tour of the design system to anyone who asks. 5. **Contributing to the Webstudio Brand** If you want to contribute to our brand design or use our brand assets, you can refer to our [Brand Guidelines](https://www.figma.com/community/file/1253220655531199360) . [PreviousCraft](https://docs.webstudio.is/university/craft) [NextContributing for Developers](https://docs.webstudio.is/contributing/contributing-for-developers) Last updated 1 year ago Was this helpful? --- # Connecting your Hostinger Domain to Webstudio | Webstudio Documentation Hostinger does not recommend using their DNS service with non Hostinger products. It's recommended that users change their nameservers instead. Whilst this is not recommended, it remains possible to use Hostinger as a DNS provider should this be required. The video below covers: * Connecting your Webstudio site with Hostinger DNS * Migrating from Hostinger DNS to Cloudflare DNS * Why migrate and comments from Hostinger Support [PreviousErrors](https://docs.webstudio.is/errors) [NextWorker not found](https://docs.webstudio.is/errors/worker-not-found) Last updated 9 months ago Was this helpful? --- # Misc | Webstudio Documentation [📊Account Limits](https://docs.webstudio.is/misc/account-limits) [🆘Webstudio Support Process](https://docs.webstudio.is/misc/webstudio-support-process) [Fixing overflow issues](https://docs.webstudio.is/misc/fixing-overflow-issues) [PreviousAppSumo redemption failed](https://docs.webstudio.is/errors/appsumo-redemption-failed) [NextAccount Limits](https://docs.webstudio.is/misc/account-limits) Was this helpful? --- # AWS with Flightcontrol (Docker) | Webstudio Documentation In this tutorial, you will learn how to export your Webstudio Project and use [Flightcontrol](https://www.flightcontrol.dev/) to deploy it to [AWS](https://aws.amazon.com/) . Flightcontrol is a PaaS that deploys to your AWS account, enabling you to leverage the power and cost of AWS without the complexity. [](https://docs.webstudio.is/university/self-hosting/flightcontrol#prerequisites) Prerequisites ---------------------------------------------------------------------------------------------------- * [GitHub account](https://github.com/) * [AWS account](https://aws.amazon.com/) * [Flightcontrol account](https://www.flightcontrol.dev/) * [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) [](https://docs.webstudio.is/university/self-hosting/flightcontrol#id-1.-create-a-github-repository) 1\. Create a GitHub repository ---------------------------------------------------------------------------------------------------------------------------------------- Create a repository where you will add the Webstudio Project code in the following steps. Be sure to clone the repository to your local machine. [](https://docs.webstudio.is/university/self-hosting/flightcontrol#id-2.-export-webstudio-project) 2\. Export Webstudio Project ------------------------------------------------------------------------------------------------------------------------------------ Use the [CLI](https://docs.webstudio.is/university/self-hosting/cli) to export your Project and select the “Docker” option. ![Selecting Docker for Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FX2aen788uJVahlS0W9aa%252FScreenshot%25202025-01-27%2520at%25207.42.11%25E2%2580%25AFPM.png%3Falt%3Dmedia%26token%3Df2f6a370-d22d-457a-80ac-564e229dd54a&width=768&dpr=4&quality=100&sign=607d27bc&sv=2) [](https://docs.webstudio.is/university/self-hosting/flightcontrol#id-3.-push-to-github) 3\. Push to GitHub ---------------------------------------------------------------------------------------------------------------- Now that the site code is local, push it to GitHub. You do not need to install dependencies. [](https://docs.webstudio.is/university/self-hosting/flightcontrol#id-4.-setup-flightcontrol) 4\. Setup Flightcontrol -------------------------------------------------------------------------------------------------------------------------- 1. Follow the prompt to connect AWS, which will direct you to AWS. Then click “Create stack”. It may take a couple of minutes, but once it is done, Flightcontrol will take you to the next step. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fe6SYNlxxxphk5VsyPMpa%252Faws.PNG%3Falt%3Dmedia%26token%3D7bd39c57-aae5-4523-ae25-c1a186351901&width=300&dpr=4&quality=100&sign=8f25cff7&sv=2) 2. Connect your GitHub account and select the repository you want to give it permission to. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FVkqvbVt7vXbmZfO3TRgr%252Fconnect-github.PNG%3Falt%3Dmedia%26token%3Deb529635-18c8-4111-b9f6-9421f86399b8&width=300&dpr=4&quality=100&sign=a012e310&sv=2) 3. Follow the prompts: Select "Build your own" > Select "Web server" > and select "Dockerfile" in "Build Configuration". ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fjbk3tl7BjczcGhn2KDyi%252Fbuildown.PNG%3Falt%3Dmedia%26token%3D582b4a52-66aa-4b90-9d73-85911b5699d1&width=300&dpr=4&quality=100&sign=8a21d059&sv=2)![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FNecVzgj0bMsOka6OKSvU%252Fbuild-config.png%3Falt%3Dmedia%26token%3D34b59b96-903c-48ae-be4c-dbe76955a581&width=300&dpr=4&quality=100&sign=a211ea21&sv=2) 4. Deploy and wait. The initial deployment takes some time. Please allow up to ~15 minutes for the deployment to finish. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FcJxYalurxvVJKMKw72sk%252Fflightcontrol-done.png%3Falt%3Dmedia%26token%3De8b7f157-9981-4148-a049-931553b8ec0b&width=300&dpr=4&quality=100&sign=92f909c7&sv=2) 5. (Optional) If you are loading images from third-party domains, usually in the case of [CMS integrations](https://docs.webstudio.is/university/foundations/cms) , you must specify those asset domains in the Environment Variables tab with the key `DOMAINS` and a comma-separated list of the third-party domains. It’s best to inspect your HTML/API response to see the exact domain the platform is using. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FBeIMqKP6nXG1NvtgpW5r%252Fthird-party-images-flight-control.png%3Falt%3Dmedia%26token%3D0656fd8e-cc49-48bb-a96e-21c2e6ada80f&width=300&dpr=4&quality=100&sign=14e6ecb2&sv=2) [](https://docs.webstudio.is/university/self-hosting/flightcontrol#id-5.-sync-build-and-push-new-changes) 5\. Sync, Build, and push new changes ---------------------------------------------------------------------------------------------------------------------------------------------------- When you are ready to publish your latest changes again, follow these steps: 1. Click “Publish” in the builder (even though you aren’t publishing to the cloud, it’s necessary to generate the latest build data). 2. Run `webstudio sync` 3. Run `webstudio build --template docker` 4. Push the changes to GitHub ![webstudio sync command](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FaOEkNyM9QNJYwBRlPWA5%252Fwebstudio-sync.png%3Falt%3Dmedia%26token%3Dd023a332-aec2-4053-9794-b3f5636a77eb&width=768&dpr=4&quality=100&sign=e13f4b8d&sv=2) * * * Now, you should have a website built on Webstudio that is hosted on AWS using Flightcontrol. [PreviousVercel](https://docs.webstudio.is/university/self-hosting/vercel) [NextDigital Ocean with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify) Last updated 6 months ago Was this helpful? --- # Contributing to the Marketplace | Webstudio Documentation [](https://docs.webstudio.is/contributing/marketplace#submission-process) Submission Process ------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/contributing/marketplace#id-1.-create-a-project) **1\. Create a Project** Create a Project with a page per section or page you want to make available. When creating sections, ensure there is one parent wrapper for the entire section, as only the first wrapper is inserted when sections are inserted. The Body and its styles are only inserted on pages, not sections. We recommend creating templates using [Craft](https://docs.webstudio.is/university/craft) — the standard for building with Webstudio. It contains a set of standards, CSS variables, and Tokens that make building websites fast, maintainable, and reusable. While Craft is not mandatory, it’s the recommended way to build in Webstudio. See [Craft](https://docs.webstudio.is/university/craft) for more information. ### [](https://docs.webstudio.is/contributing/marketplace#id-2.-submit-the-project) **2\. Submit the Project** Navigate to Project Settings > Marketplace, fill out the required fields, select whether your Project includes pages, sections, or integrations, and submit it for review. ![Marketplace Submission](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FfUTFKuZlCRSB6ce7CBrv%252Fmarketplace-submission.png%3Falt%3Dmedia%26token%3D2326b18d-096d-4f9a-828a-55a620ccfe49&width=768&dpr=4&quality=100&sign=48783dcd&sv=2) Once it’s submitted, Page Settings will now have the following options you can immediately use: * **Include in Marketplace**: Toggle on or off. * **Category**: Optionally categorize your pages/sections (e.g., "Contact" if offering various Contact sections/pages). * **Marketplace Preview**: Add an optional preview image. If none is provided, the page/section name will be displayed. ![Marketplace Page Settings](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FR65fanbB2T21BvoxWBU8%252Fmarketplace-page-settings.png%3Falt%3Dmedia%26token%3D4f52cab1-c0e9-44ec-85fc-bd6e9bb29cd4&width=768&dpr=4&quality=100&sign=d3c04f89&sv=2) [](https://docs.webstudio.is/contributing/marketplace#selling-templates) Selling Templates ----------------------------------------------------------------------------------------------- To sell templates, follow the same submission process but include a page with purchasing instructions and a checkout link. Ensure purchases provide immediate access to the template via a Share link so they can clone it. You can redirect your buyers to the Project or send an automated email. Please include “(Paid)” at the end of the template name. Learn more about the [Marketplace](https://docs.webstudio.is/university/marketplace) . [PreviousContributing for Developers](https://docs.webstudio.is/contributing/contributing-for-developers) [NextErrors](https://docs.webstudio.is/errors) Last updated 9 months ago Was this helpful? --- # Webstudio Support Process | Webstudio Documentation [](https://docs.webstudio.is/misc/webstudio-support-process#account-upgrades) Account upgrades --------------------------------------------------------------------------------------------------- If you're looking to upgrade your account and wish to receive a credit for any previous purchase, follow the below steps: * Visit [https://webstudio.is/pricing](https://webstudio.is/pricing) * Select the "Existing Lifetime Customer, Click here" text as illustrated below. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FpBSQgQsKrLP9QOIVlCJ1%252Fimage.png%3Falt%3Dmedia%26token%3Def0727f1-3bfd-4704-bacd-97a98a924f1c&width=300&dpr=4&quality=100&sign=64855b74&sv=2) * Fill out the upgrade request form. [](https://docs.webstudio.is/misc/webstudio-support-process#rockethub-account-issues) RocketHub account issues ------------------------------------------------------------------------------------------------------------------- If you're having trouble with an activation through a RocketHub purchase, please reach out to RocketHub support directly. They can issue you a new activation code. [](https://docs.webstudio.is/misc/webstudio-support-process#appsumo-account-issues) AppSumo account issues --------------------------------------------------------------------------------------------------------------- If you're having trouble activating your AppSumo license please read [this article](https://docs.webstudio.is/errors/appsumo-redemption-failed) . [](https://docs.webstudio.is/misc/webstudio-support-process#any-other-type-of-support) Any other type of support --------------------------------------------------------------------------------------------------------------------- All other support is run directly via our community. We have a thriving community of creators who are always around to help out new members. The core Webstudio team also monitors the community posts daily. You can join the Webstudio communtiy anytime from [here](https://wstd.us/community) . [PreviousAccount Limits](https://docs.webstudio.is/misc/account-limits) [NextFixing overflow issues](https://docs.webstudio.is/misc/fixing-overflow-issues) Last updated 1 year ago Was this helpful? --- # How to build a frontend for Hygraph using Webstudio | Webstudio Documentation ![Page cover](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fjatn9TzE4iU0zKiVBtQF%252Fhygraph-frontend-cover.png%3Falt%3Dmedia%26token%3De6650b97-55e5-4011-9a62-34f1281fe382&width=1248&dpr=4&quality=100&sign=c0bab630&sv=2) A lightweight Hygraph template is in the Marketplace. To start a new project, [clone the template](https://wstd.us/hygraph-template) . To integrate with an existing project, visit the Marketplace and insert the various pages. By the end of this tutorial, you will have the following using your [Hygraph](https://hygraph.com/) data and [Webstudio](https://webstudio.is/) : * **An overview page** – One page that contains all the records in the Hygraph blog model, each with a link to view that record on a details page (a dynamic page). * **A details page** – A template displaying the blog data matching the blog URL viewed. If the user is on /blog/mouse, the [Dynamic Page](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) will fetch Hygraph for a record whose slug equals "mouse" and display its contents. * **A sitemap** – A dynamic [sitemap](https://docs.webstudio.is/university/core-components/xml-node) containing the various records in Hygraph. [](https://docs.webstudio.is/university/integrations/hygraph#video-tutorial) Video tutorial ------------------------------------------------------------------------------------------------ This video contains a step-by-step walkthrough on using Webstudio and Hygraph together. Full video walkthrough [](https://docs.webstudio.is/university/integrations/hygraph#webstudio-is-a-visual-builder-that-connects-to-hygraph) **Webstudio is a visual builder that connects to Hygraph** ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Webstudio is solely focused on creating a visual builder for the frontend. It's backend agnostic, meaning we don't lock you into using any one backend/CMS/database. In the case of Hygraph, this enables you to leverage your current data without having to custom code a frontend. Webstudio is open source, has all CSS properties, and is dynamic at the speed of static. [](https://docs.webstudio.is/university/integrations/hygraph#pagination) Pagination ---------------------------------------------------------------------------------------- The demo did not show how to paginate your Hygraph content, so this section will show you. Use pagination only if necessary. Users and search engines prefer minimal navigation. First, start by going to the Marketplace > Hygraph > and insert the Posts page. The Posts page contains: * A query ready for pagination * A `Posts Per Page` variable on the body that lets you define how many posts should display * Accessibility and SEO-friendly pagination that will display if the amount of posts in Hygraph exceeds the `Posts Per Page` number * Bindings with logic to calculate the offset and conditions to hide prev/next links if at the beginning or end The method of pagination will use prev/next links with offset values, i.e., skipping a specified number of items to move to the next set of results. Offset is used over cursors (another pagination method) because offsets provide a single URL per page, such as `?page=4`, whereas cursor provides two URLs per page, such as `?after=abc` and `?before=ghi`, which is not good for SEO. ### [](https://docs.webstudio.is/university/integrations/hygraph#converting-your-existing-query) Converting your existing query If you have an existing query, it will need to be modified if it uses ``, such as `posts`, and not ``, such as `postsConnection`. If your query looks like this: Copy query Posts { ... posts { title slug ... } } It will now look like this: Copy query Posts($first: Int, $skip: Int = 0) { postsConnection( first: $first skip: $skip orderBy: publishedAt_DESC ) { pageInfo { hasNextPage hasPreviousPage } edges { node { title slug ... } } } } The contents of `edges.node` in the second query are exactly the same as the contents of `posts` from the first query. Therefore, you can copy the contents of `posts` and paste them into `edges.node`. The rest of the second query provides context about whether there are previous or next pages and introduces filters to offset/skip results based on the current page. If you already setup a page using `posts`, you will need to rebind the values on your page because the Resource response will be different. For example, `Post Item.node.title` instead of `Post Item.title`. [PreviousHow to integrate a Webhook Form with Airtable](https://docs.webstudio.is/university/integrations/airtable-1) [NextHow to build a WordPress frontend using Webstudio (no-code builder)](https://docs.webstudio.is/university/integrations/wordpress) Last updated 1 year ago Was this helpful? --- # Account Limits | Webstudio Documentation As a thank you to our earliest adopters, we've decided to increase the limits of all existing accounts. Here below are the new limits to each account type: You can find your plan name from your dashboard beside your profile image as shown below. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FY4fK45zjq9uyh72cLnOb%252Fimage.png%3Falt%3Dmedia%26token%3D99c63d59-2bdd-4920-b006-9d30f8cc6c95&width=768&dpr=4&quality=100&sign=b4996b2c&sv=2) ### [](https://docs.webstudio.is/misc/account-limits#webstudio-ltds) Webstudio LTDs Purchase link: [https://wstd.us/pricing](https://wstd.us/pricing) Plan name Domain limit Pageview limit LTD T1 10 200k LTD T1.5 unlimited 1M LTD T2 unlimited 2M LTD T3 unlimited unlimited ### [](https://docs.webstudio.is/misc/account-limits#rockethub-ltds) RocketHub LTDs No longer available for purchase. Plan name Domain limit Pageview limit RocketHub T1 10 200k RocketHub T2 unlimited 1M RocketHub T3 unlimited 2M ### [](https://docs.webstudio.is/misc/account-limits#appsumo-ltds) Appsumo LTDs No longer available for purchase. Plan name Domain limit Pageview limit AppSumo T1 10 200k AppSumo T2 25 500k AppSumo T3 50 1M AppSumo T4 unlimited 2M [PreviousMisc](https://docs.webstudio.is/misc) [NextWebstudio Support Process](https://docs.webstudio.is/misc/webstudio-support-process) Last updated 4 months ago Was this helpful? --- # Collection | Webstudio Documentation ![Collection component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F1ICfVHx04GIkgYEgRkWt%252Fcollection-component.png%3Falt%3Dmedia%26token%3D44fb8245-4679-4996-b4bc-19cfae363497&width=768&dpr=4&quality=100&sign=b82d3742&sv=2) [](https://docs.webstudio.is/university/core-components/collection#why-collections-are-needed) Why Collections are needed ------------------------------------------------------------------------------------------------------------------------------ Let's say you are building a list of all your blog posts. Each blog post will have an image, a title, and a link. You have 50 blog posts. Does this mean you need to duplicate your design 50 times manually? No. Collections let you design something once, and it will repeat it for every item in the array and contain the data for the current iteration (e.g., the blog post title). [](https://docs.webstudio.is/university/core-components/collection#whats-an-array) What's an array? -------------------------------------------------------------------------------------------------------- An array is a programming term that generally translates to **a list of data**. In the case of blog posts, this might look like the following: Copy 0 { title: "Hello world"}, 1 { title: "Lorem ipsum"}, 2 { title: "Webstudio rocks!" } It's important that when binding data to a Collection, **you must bind the array**, i.e., the data you want to iterate over. If you don't bind the array, you'll receive an error: "The Collection component requires an array in the data property. When binding external data, it is likely that the array is nested somewhere within, and you need to provide the correct path in the binding." ![Error when binding a value other than an array](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F15AkWQWHzCMOzSuPgmZc%252Fcollection-error.png%3Falt%3Dmedia%26token%3D49b91531-4c0a-43bb-a245-248d24194f77&width=768&dpr=4&quality=100&sign=994777b4&sv=2) Error when binding a value other than an array If you are binding external data, the array is nested somewhere within. ![Right and wrong ways to bind data to a collection](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FYXOL9fUlGuBD43KI0oQb%252Fright-and-wrong-way-collections.png%3Falt%3Dmedia%26token%3D040d9c5c-d55b-4451-a0a5-cfd95ebb50d9&width=768&dpr=4&quality=100&sign=e3304b7&sv=2) Example of where they array is at for an external service (will vary for each service) In the image, the data bound to the component is: 1. ❌ Not the array 2. ❌ The first item in the array (0), not the entire list 3. ✅ The array It's unclear why each item is correct or incorrect by just looking at the image, so let's clarify. **You'll know when you get to the array when the next items in the autocomplete are numbers.** The numbers represent each item in the list. Once you see the numbers, backspace, as you don't want to select one item; you want the list. ![Autocomplete showing array items in Binding](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FGRVg9zBzSCoBOIkqHJiH%252Fcomponent-array.png%3Falt%3Dmedia%26token%3Da06c7398-b2c5-4408-8e11-691bca4f0f6f&width=768&dpr=4&quality=100&sign=735803db&sv=2) The numbers indicate each item in the list/array [](https://docs.webstudio.is/university/core-components/collection#how-to-use-collection) How to use Collection -------------------------------------------------------------------------------------------------------------------- Add the Collection component to the canvas and either manually enter data (less common) or [bind data](https://docs.webstudio.is/university/foundations/expression-editor#binding) to it (more common). **The Collection iterates over the array, so you must bind just the array portion of your variable to it. See** [**What's an Array**](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/core-components/collection.md.md#whats-an-array) **for more info.** Optionally, rename the default Collection Item variable to something more semantic. If you are iterating over blog posts, name it "Blog Post." Now, you can add components to the Collection, and the Collection will automatically duplicate it for the number of items in the array. If you have multiple components, wrap everything in a [Box](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/core-components/box.md.md) component. Next, [bind](https://docs.webstudio.is/university/foundations/expression-editor#binding) the Collection Item (or whatever you named it) to the various components. You will see it output a different value depending on the iteration. [](https://docs.webstudio.is/university/core-components/collection#using-collections-within-accordions) Using Collections with Radix Components ---------------------------------------------------------------------------------------------------------------------------------------------------- When working with [Radix Components](https://docs.webstudio.is/university/radix) , you might want to dynamically generate items for various components such as accordions, tabs, or menus. **You must provide the Value field with a unique value for each item.** This is commonly done by binding an ID or slug from the dynamic data to the field. ### [](https://docs.webstudio.is/university/core-components/collection#accordions) Accordions ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252ForVN6cQzQBKWwUX37DSs%252Faccordion-collection.png%3Falt%3Dmedia%26token%3D7660fab4-65ad-4e2c-b26d-2afd2d2dec51&width=768&dpr=4&quality=100&sign=8cea7635&sv=2) The Item has a unique value from the dynamic data bound to the Value field ### [](https://docs.webstudio.is/university/core-components/collection#tabs) Tabs On Tabs, you need to manually add the "value" property on both the Tab Trigger and Tab Content by going to Settings > Properties & Attributes > "+". Tab Triggers and Tab Contents maintain their relationship by having the same value. For example, the Tab Trigger with the value "asdf" will make the Tab Content with the value "asdf" active. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FiL2Saqj1UuNK6U7qBFje%252Ftab-trigger.png%3Falt%3Dmedia%26token%3D6ae90ba4-24fd-4cb1-94b2-7666c152fdb2&width=768&dpr=4&quality=100&sign=e6234a36&sv=2) Tab Trigger with custom value ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FPapNiqP5ZxCaWvBkoKB0%252Ftab-content.png%3Falt%3Dmedia%26token%3Da964ba40-de09-4552-b9eb-34f1ba9b75e4&width=768&dpr=4&quality=100&sign=25c89a20&sv=2) Tab Content with custom value Also, you can change the default value on the Tabs instance by binding the first value in the collection to it. [PreviousButton](https://docs.webstudio.is/university/core-components/button) [NextContent Embed](https://docs.webstudio.is/university/core-components/content-embed) Last updated 3 months ago Was this helpful? --- # How to integrate Webhook Form with Pabbly | Webstudio Documentation How to integrate Webstudio with Pabbly [PreviousHow to integrate a Notion database with Webstudio](https://docs.webstudio.is/university/integrations/notion) [NextHow to integrate Webhook Form with Zappier](https://docs.webstudio.is/university/integrations/zapier) Last updated 1 year ago Was this helpful? --- # AppSumo redemption failed | Webstudio Documentation AppSumo accounts are required to be activated via the AppSumo redemption API (Big yellow "redeem" button from your dashboard). This activation can fail for several reasons: * Redemption email mismatch between AppSumo and Webstudio * Closed redemption browser before the account has been activated * Logged-into wrong account when redeeming the licence (browser will automatically attempt to validate the license on the current logged-in account) * AppSumo API got confused and hurt itself in confusion ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FGO7xCfHDhALQ5Ehhyu9d%252Fimage.png%3Falt%3Dmedia%26token%3Dab033954-ab37-4910-bf4b-58b8c4f0b484&width=768&dpr=4&quality=100&sign=90d83619&sv=2) Hurt itself in confusion Pokemon meme. ### [](https://docs.webstudio.is/errors/appsumo-redemption-failed#how-to-resolve-the-issue) How to resolve the issue: #### [](https://docs.webstudio.is/errors/appsumo-redemption-failed#if-the-appsumo-deal-is-currently-active-the-fastest-way-to-resolve-this-issue-is-to) If the AppSumo deal is currently active, the fastest way to resolve this issue is to: * Refund the AppSumo purchase * Repurchase a new license * Make sure you're logged-into the correct Webstudio account * Redeem your purchase again When/If the AppSumo deal ends and there remains issues with redemption we will update this doc with further instructions. ### [](https://docs.webstudio.is/errors/appsumo-redemption-failed#appsumo-is-bugged-it-wont-let-me-rebuy-a-license-for-webstudio) AppSumo is bugged, it won't let me rebuy a license for Webstudio: AppSumo have some security measures in place to prevent credit card fraud. If you're running into issues purchasing a new license after the refund you might need to wait 24h before the system automatically unlocks your account. If the problem persists and your account is locked please reach out to AppSumo support to unlock your account. [PreviousWorker not found](https://docs.webstudio.is/errors/worker-not-found) [NextMisc](https://docs.webstudio.is/misc) Last updated 1 year ago Was this helpful? --- # Fixing overflow issues | Webstudio Documentation Sometimes, the content takes up too much space, causing unintentional horizontal scroll. This frustrates users, especially on mobile, and should be remedied. Here's a video demonstrating how to diagnose and fix it. After the video, there are detailed instructions. [](https://docs.webstudio.is/misc/fixing-overflow-issues#find-the-culprit) Find the culprit ------------------------------------------------------------------------------------------------ Toggle "Show" on each instance in the navigator until the horizontal scroll goes away. It's best to start with the outermost wrappers, like the header, main, and footer, to see which one is causing it, then drill down to inner wrappers, like sections. Continue going deeper into the nested instances until you find the innermost instance causing the horizontal scroll. [](https://docs.webstudio.is/misc/fixing-overflow-issues#fix-the-culprit) Fix the culprit ---------------------------------------------------------------------------------------------- There is something in the culprit causing the content to extend past the viewport boundaries. Many styles can cause overflow, but here are some common things to look for: Issue Solution Fixed widths Remove it or set to auto Flex rows without the ability to wrap Allow wrapping A single word like "responsibility/accountability" (note the "/" will prevent it from breaking). Separate with a space Wide content that can't wrap Set overflow to auto [PreviousWebstudio Support Process](https://docs.webstudio.is/misc/webstudio-support-process) Last updated 10 months ago Was this helpful? --- # Hetzner with Coolify (Docker) | Webstudio Documentation In this tutorial, you will learn how to export your Webstudio Project and use [Coolify](https://coolify.io/) to deploy it to [Hetzner](https://www.hetzner.com/) . Coolify is a PaaS that makes it easy to deploy and manage applications on your own server, giving you control over your infrastructure without the complexity. You can self-host Coolify or use their Cloud. [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#prerequisites) Prerequisites ------------------------------------------------------------------------------------------------------ * [GitHub account](https://github.com/) * [Hetzner account](https://www.hetzner.com/) * [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-1.-create-a-github-repository) 1\. Create a GitHub repository ------------------------------------------------------------------------------------------------------------------------------------------ Create a repository where you will add the Webstudio Project code in the following steps. Be sure to clone the repository to your local machine. [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-2.-export-webstudio-project) 2\. Export Webstudio Project -------------------------------------------------------------------------------------------------------------------------------------- Use the [CLI](https://docs.webstudio.is/university/self-hosting/cli) to export your Project and select the "Docker" option. [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-3.-push-to-github) 3\. Push to GitHub ------------------------------------------------------------------------------------------------------------------ Now that the site code is local, push it to GitHub. You do not need to install dependencies. [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-4.-setup-hetzner-server) 4\. Setup Hetzner Server ------------------------------------------------------------------------------------------------------------------------------ 1. Create a new server. 2. Select your preferred region. 3. Select the Ubuntu image with a [version that is supported by Docker](https://docs.docker.com/engine/install/ubuntu/#os-requirements) . 4. Select the type; a shared CPU is sufficient and the minimum recommended RAM is 2 GB. 5. Add an IPv4. 6. All other defaults suffice, though you can optionally modify them. 7. Click "Create and Buy Now". Wait as your server is provisioned then copy the IPv4 address. [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-5.-configure-coolify-to-use-your-server) 5\. Configure Coolify to use your server -------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Create a Coolify account or log in to your existing account. 2. Navigate to the "Servers" tab. 3. Add a new server and provide your server’s IP address then click “Continue”. 4. Click “Validate Server & Install Docker Engine“ and Coolify will install all necessary components on your server automatically. Once completed, you should see a green “Proxy Running” status. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FmoyH6wDwPqPwhllzEQbs%252Fwebstudio-digital-ocean-coolify-4.png%3Falt%3Dmedia%26token%3D750e07d3-d91f-4959-889f-96a690dcfe52&width=300&dpr=4&quality=100&sign=c461efbb&sv=2) [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-6.-setup-a-project-on-coolify) 6\. Setup a Project on Coolify ------------------------------------------------------------------------------------------------------------------------------------------ 1. Go to Projects and create a new one. 2. Add a Resource to the project. 3. Select the source of your code, likely a private repository. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FpUWPhFIMw0bKNPoUnDTc%252Fwebstudio-digital-ocean-coolify-5.png%3Falt%3Dmedia%26token%3D413676c0-79b5-44ec-96ac-b743edbb9e4d&width=300&dpr=4&quality=100&sign=e9e66cd9&sv=2) 4. Add a GitHub app and provide it access to your repository with the site. 5. Change the Build Pack to Dockerfile. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FeF1b9jPhhNhjbhVz3iQD%252Fwebstudio-digital-ocean-coolify-6.png%3Falt%3Dmedia%26token%3Dad4c9911-9fec-407c-970d-86c503357429&width=300&dpr=4&quality=100&sign=d08509e6&sv=2) 6. Click Deploy and wait several minutes while it deploys. You can click “Show debug logs” to see more details. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FlWFVix058wCjf7sweiot%252Fwebstudio-digital-ocean-coolify-8.png%3Falt%3Dmedia%26token%3D524e8922-e13c-4232-829e-0ec2fb1c2cb9&width=300&dpr=4&quality=100&sign=b4b08f71&sv=2) 7. If all goes well, you should see “Deployment is Finished.” 1. If the deployment fails, one possibility is that the server does not have enough resources. 8. (Optional) If you are loading images from third-party domains, add them to your environment variables with the key `DOMAINS` and a comma-separated list of the third-party domains. 9. At the top, there is a "links" button which will take you to the live site. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FP05ToDb1X3KZNiLF2xTX%252Fwebstudio-digital-ocean-coolify-9.png%3Falt%3Dmedia%26token%3D67edc8b6-1208-46fd-9a12-7049d7124a51&width=300&dpr=4&quality=100&sign=8ddfd443&sv=2) [](https://docs.webstudio.is/university/self-hosting/hetzner-coolify#id-7.-sync-build-and-push-new-changes) 7\. Sync, build, and push new changes ------------------------------------------------------------------------------------------------------------------------------------------------------ When you are ready to publish your latest changes again, follow these steps: 1. Click "Publish" in the builder (even though you aren't publishing to the cloud, it's necessary to generate the latest build data). 2. Run `webstudio sync` 3. Run `webstudio build --template docker` 4. Push the changes to GitHub Coolify will automatically detect the changes and trigger a new deployment. ![webstudio sync command](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FaOEkNyM9QNJYwBRlPWA5%252Fwebstudio-sync.png%3Falt%3Dmedia%26token%3Dd023a332-aec2-4053-9794-b3f5636a77eb&width=768&dpr=4&quality=100&sign=e13f4b8d&sv=2) * * * Now, you should have a website built on Webstudio that is hosted on Hetzner using Coolify, giving you full control over your infrastructure. [PreviousDigital Ocean with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify) [NextHow-Tos](https://docs.webstudio.is/university/how-tos) Last updated 6 months ago Was this helpful? --- # Contributing for Developers | Webstudio Documentation [](https://docs.webstudio.is/contributing/contributing-for-developers#process) Process ------------------------------------------------------------------------------------------- If you want to contribute and don't know where to start, here is a step-by-step for a complete lifecycle, from idea to deployment. 1. If you have an idea that is not already in [discussion](https://github.com/webstudio-is/webstudio/discussions) or [issues](https://github.com/webstudio-is/webstudio-builder/issues) , please start a discussion or reach out on [discord](https://discord.gg/UNdyrDkq5r) 2. If you are a DEVELOPER, and you want to contribute to the Builder UI, your first step is to become familiar with our design system in figma. Start with the first page of our [Design Docs](https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?type=design&node-id=234%3A36754&t=w3VxT162RQF0gTrI-1) . And for our design system & components see the [Webstudio Library](https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?type=design&node-id=2647%3A10046&t=f4xr8mcumXfXkHVh-1) . Please read the docs carefully and throughly so you can use our design system properly to create a UI that looks like it's a natural part of Webstudio. If any part of the design is confusing or intimidating you can reach out to us on Discord with questions or feedback. 3. After submitting an enhancement or a bug we need to agree on a solution. You can jump into implementation right away, but be aware that we have to agree on the solution in the end. Communicating the problem you are solving and why you think the approach you are taking is the best is key for a quick process. In fact, we are happy to help communicating your ideas, so if you are not sure - talk to us on discord. 4. When the implementation is in a mergeable state, a core team member will deploy it to production. [](https://docs.webstudio.is/contributing/contributing-for-developers#running-the-webstudio-project-using-vs-code) Running the Webstudio Project Using VS Code ------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/contributing/contributing-for-developers#prerequisites) Prerequisites * VS Code installed: [Download VS Code](https://code.visualstudio.com/Download) * Docker installed: [Install Docker](https://docs.docker.com/get-docker/) ### [](https://docs.webstudio.is/contributing/contributing-for-developers#steps) Steps 1. Install the "Dev Containers" extension in VS Code: * Open VS Code. * Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window. * Search for "Dev Containers" and click Install. Alternatively, you can install it from the recommended extensions listed in the Webstudio project. 2. Fork and clone the Webstudio repository: * Fork the repository on GitHub. * Clone your forked repository to your local machine. 3. Open the repository in VS Code: * Open VS Code. * Select "File" > "Open Folder" and choose your project folder. 4. Reopen in Container: * Once your folder is open, you might see a notification asking if you want to reopen in a container. Click "Reopen in Container". * If you don't see a notification, press `F1`, type `Dev Containers: Reopen in Container`, and select it. VS Code will now build the Docker container and open the Webstudio project inside it. This process will take some time as the environment is set up and dependencies are installed. 1. Run the development server: * After the setup completes, open the terminal in VS Code. * Run the following command: Copy pnpm dev 2. Open the application in your browser: * After running `pnpm dev`, you will see a URL in the console that looks like this: Copy ➜ Local: https://wstd.dev:5173/ * Cmd + click on the URL in the console to open it in your browser. If VS Code shows you an "Open Browser" button, it will lead you to the wrong URL as they are only watching ports. Be sure to use `wstd.dev` and **NOT** `localhost`. The proper URL will show in the console. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FGiAcRWF5HZJ64rVcXhYi%252Fvscode-dialog.png%3Falt%3Dmedia%26token%3D0dbcb9ca-6592-4e70-b5f6-a72eed89d4c1&width=300&dpr=4&quality=100&sign=b72bee7f&sv=2) [](https://docs.webstudio.is/contributing/contributing-for-developers#login-locally) Login locally ------------------------------------------------------------------------------------------------------- When downloading the app you will have two options for login and they both work in different ways. ### [](https://docs.webstudio.is/contributing/contributing-for-developers#dev-login) Dev login Dev login will create you a dev account so you don't need to be online or create a github app. To enable you create a file `.env.development` in `apps/builder` and include two lines: Copy DEV_LOGIN=true AUTH_SECRET=a random value To login in the app click on the "Login with Secret" button and paste your `AUTH_SECRET` in the input. To log in as another user in dev mode, use your AUTH\_SECRET, followed by : and any email address. For example: \`abcd:[\[email protected\]](https://docs.webstudio.is/cdn-cgi/l/email-protection) \`\\ ### [](https://docs.webstudio.is/contributing/contributing-for-developers#github-login) GitHub Login To login and use GitHub login you will need to create an OAuth app with the following values: Copy Name: Webstudio Homepage URL: http://localhost:3000 Authorization callback URL: http://localhost:3000/auth/github/callback > When creating the app with `http://localhost:3000` you will need to always open your app at `http://localhost:3000` for the GitHub login to work. After the app is created you will need to create a client secret and then copy that value and your client id to the `.env` file: Copy GH_CLIENT_SECRET= GH_CLIENT_ID= You are done! 🎉 [PreviousContributing for Designers](https://docs.webstudio.is/contributing/contributing-for-designers) [NextContributing to the Marketplace](https://docs.webstudio.is/contributing/marketplace) Last updated 22 days ago Was this helpful? --- # Digital Ocean with Coolify (Docker) | Webstudio Documentation In this tutorial, you will learn how to export your Webstudio Project and use [Coolify](https://coolify.io/) to deploy it to [Digital Ocean](https://www.digitalocean.com/) . Coolify is a PaaS that makes it easy to deploy and manage applications on your own server, giving you control over your infrastructure without the complexity. You can self-host Coolify or use their Cloud. [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#prerequisites) Prerequisites ------------------------------------------------------------------------------------------------------------ * [GitHub account](https://github.com/) * [Digital Ocean account](https://www.digitalocean.com/) * [Webstudio CLI](https://docs.webstudio.is/university/self-hosting/cli) [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-1.-create-a-github-repository) 1\. Create a GitHub repository ------------------------------------------------------------------------------------------------------------------------------------------------ Create a repository where you will add the Webstudio Project code in the following steps. Be sure to clone the repository to your local machine. [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-2.-export-webstudio-project) 2\. Export Webstudio Project -------------------------------------------------------------------------------------------------------------------------------------------- Use the CLI to export your Project and select the "Docker" option. [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-3.-push-to-github) 3\. Push to GitHub ------------------------------------------------------------------------------------------------------------------------ Now that the site code is local, push it to GitHub. You do not need to install dependencies. [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-4.-setup-digital-ocean-droplet) 4\. Setup Digital Ocean Droplet -------------------------------------------------------------------------------------------------------------------------------------------------- 1. Log in to your Digital Ocean account and click on "Create" > "Droplets". ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FFskc5iyMbCMPka7O6B2i%252Fwebstudio-digital-ocean-coolify-1.png%3Falt%3Dmedia%26token%3Dd00a61bd-d25a-4ffd-a44a-b41e828da7e7&width=300&dpr=4&quality=100&sign=dab84ca9&sv=2) 2. Select your preferred region. 3. Select the Ubuntu image with [version that is supported by Docker](https://docs.docker.com/engine/install/ubuntu/#os-requirements) . 1. Note: In following steps, the automatic Docker install failed on Ubuntu versions higher than 22 during our setup. If yours fails, you can manually install Docker on the Droplet or use a different Ubuntu version and rerun the process. 4. Choose a plan with sufficient RAM (minimum 1GB but we recommend more for optimal performance). 5. Choose an authentication method (SSH keys are recommended for security). 6. Click "Create Droplet". Wait for your Droplet to be provisioned. Once completed, you’ll be provided an IP address; copy it. [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-5.-configure-coolify-to-use-your-droplet) 5\. Configure Coolify to use your Droplet ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Create a Coolify account or log in to your existing account. 2. Navigate to the "Servers" section in the Coolify dashboard. 3. Add a new server and provide your Droplet's IP address then click “Continue”. 4. Click “Validate Server & Install Docker Engine“ and Coolify will install all necessary components on your server automatically. Once completed, you should see a green “Proxy Running” status. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FOKTAFSuCFy1nNSGzEhlN%252Fwebstudio-digital-ocean-coolify-3.png%3Falt%3Dmedia%26token%3D24478b23-be00-4869-a2d9-f82f6ea34506&width=300&dpr=4&quality=100&sign=5a5c5ac0&sv=2)![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FmoyH6wDwPqPwhllzEQbs%252Fwebstudio-digital-ocean-coolify-4.png%3Falt%3Dmedia%26token%3D750e07d3-d91f-4959-889f-96a690dcfe52&width=300&dpr=4&quality=100&sign=c461efbb&sv=2) [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-6.-setup-a-project-on-coolify) 6\. Setup a Project on Coolify ------------------------------------------------------------------------------------------------------------------------------------------------ 1. Go to Projects and create a new one. 2. Add a Resource to the project. 3. Select the source of your code, likely a private repository. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FpUWPhFIMw0bKNPoUnDTc%252Fwebstudio-digital-ocean-coolify-5.png%3Falt%3Dmedia%26token%3D413676c0-79b5-44ec-96ac-b743edbb9e4d&width=300&dpr=4&quality=100&sign=e9e66cd9&sv=2) 4. Add a GitHub app and provide it access to your repository with the site. 5. Change the Build Pack to "Dockerfile". ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FeF1b9jPhhNhjbhVz3iQD%252Fwebstudio-digital-ocean-coolify-6.png%3Falt%3Dmedia%26token%3Dad4c9911-9fec-407c-970d-86c503357429&width=300&dpr=4&quality=100&sign=d08509e6&sv=2) 6. Click Deploy and wait several minutes while it deploys. You can click “Show debug logs” to see more info. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FlWFVix058wCjf7sweiot%252Fwebstudio-digital-ocean-coolify-8.png%3Falt%3Dmedia%26token%3D524e8922-e13c-4232-829e-0ec2fb1c2cb9&width=300&dpr=4&quality=100&sign=b4b08f71&sv=2) 7. If all goes well, you should see “Deployment is Finished.” 1. If the deployment fails, one possibility is that the server does not have enough resources. 8. (Optional) If you are loading images from third-party domains, add them to your environment variables with the key `DOMAINS` and a comma-separated list of the third-party domains. 9. At the top, there is a "links" button which will take you to the live site. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FP05ToDb1X3KZNiLF2xTX%252Fwebstudio-digital-ocean-coolify-9.png%3Falt%3Dmedia%26token%3D67edc8b6-1208-46fd-9a12-7049d7124a51&width=300&dpr=4&quality=100&sign=8ddfd443&sv=2) [](https://docs.webstudio.is/university/self-hosting/digital-ocean-coolify#id-7.-sync-build-and-push-new-changes) 7\. Sync, Build, and push new changes ------------------------------------------------------------------------------------------------------------------------------------------------------------ When you are ready to publish your latest changes again, follow these steps: 1. Click “Publish” in the builder (even though you aren’t publishing to the cloud, it’s necessary to generate the latest build data). 2. Run `webstudio sync` 3. Run `webstudio build --template docker` 4. Push the changes to GitHub ![webstudio sync command](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FaOEkNyM9QNJYwBRlPWA5%252Fwebstudio-sync.png%3Falt%3Dmedia%26token%3Dd023a332-aec2-4053-9794-b3f5636a77eb&width=768&dpr=4&quality=100&sign=e13f4b8d&sv=2) * * * Now, you should have a website built on Webstudio that is hosted on Digital Ocean using Coolify, giving you full control over your infrastructure. [PreviousAWS with Flightcontrol (Docker)](https://docs.webstudio.is/university/self-hosting/flightcontrol) [NextHetzner with Coolify (Docker)](https://docs.webstudio.is/university/self-hosting/hetzner-coolify) Last updated 6 months ago Was this helpful? --- # How to build a frontend for Airtable using Webstudio | Webstudio Documentation ![Page cover](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F7Xzzs7Gs8846X1rqgqq0%252Fairtable-frontend-cover.png%3Falt%3Dmedia%26token%3D5ce86873-e8da-41f9-8d56-6a5614ad2017&width=1248&dpr=4&quality=100&sign=922a817e&sv=2) A lightweight Airtable template is in the Marketplace. To start a new project, [clone the template](https://wstd.us/airtable-template) . To integrate with an existing project, visit the Marketplace and insert the various pages. By the end of this tutorial, you will have the following using your [Airtable](https://airtable.com/) database and [Webstudio](https://webstudio.is/) : * **An overview page** – One page that contains all the records in Airtable, each with a link to view that record on a details page (a dynamic page). * **A details page** – A template displaying the record/row matching the record viewed. If the user is on /products/mouse, the Dynamic Page will fetch the Airtable record matching "mouse" and display its contents. * **A filter on the overview page** – A search field that lets users search the backend (Airtable) for records. * **A sitemap** – A dynamic sitemap containing the various records in Airtable. Video tutorial [](https://docs.webstudio.is/university/integrations/airtable#webstudio-is-a-visual-builder-that-connects-to-airtable) Webstudio is a visual builder that connects to Airtable ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Webstudio is solely focused on creating a visual builder for the frontend. It's backend agnostic, meaning we don't lock you into using any one backend/CMS/database. In the case of Airtable, this enables you to leverage your current data and the ease of use that comes with it. Webstudio enables you to build a custom frontend for your Airtable data without writing code. Webstudio is mainly a no-code platform, however, it's also optionally a low-code platform to enable custom logic. Webstudio is open source, has all CSS properties, and is dynamic at the speed of static. [](https://docs.webstudio.is/university/integrations/airtable#why-airtable) Why Airtable --------------------------------------------------------------------------------------------- Airtable is a highly maintainable way of managing tabular data such as team members, products, portfolio projects, business data, and _many_ other types of data. Many data types can benefit from displaying them on a frontend/website. [](https://docs.webstudio.is/university/integrations/airtable#steps-to-building-an-airtable-frontend-using-webstudio) Steps to building an Airtable frontend using Webstudio --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/integrations/airtable#id-1-create-a-dynamic-page) 1 Create a dynamic page In this step, you will create a [Dynamic Page](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) in Webstudio. Think of it as your record template – one page that dynamically changes based on the URL. The URL will contain a dynamic path, and its value will be used to get the record from Airtable. Go to your Webstudio project > Pages > Create a new page. Add a path with a minimum of two segments in the Dynamic Path field. This example uses the path `/products/:slug`. ![Dynamic path of /products/:slug](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F50c2d540-a187-4a67-8f0a-7b82c94fe6f2.png&width=768&dpr=4&quality=100&sign=1c6d2ff7&sv=2) 1. The first segment should be something to describe your records (e.g., `products`) 2. The second is a dynamic component. You can name it whatever. This example uses `:slug`. The value will be used in the following steps. ### [](https://docs.webstudio.is/university/integrations/airtable#id-2-fetch-airtable-data) 2 Fetch Airtable data In this step, you will configure a [Resource](https://docs.webstudio.is/university/foundations/cms#resources) in Webstudio to get data from Airtable. **Create a Resource variable** Go to the Navigator on the left > select Body > Settings on the right > and create a new variable with any name (this example uses "Airtable Product"), and in type, use Resource. While the URL and remaining fields can be manually entered, there is also a shortcut – you can paste in a curl command, and Webstudio will automatically parse it and populate the respective fields. To get the curl command custom to your Base, go to your Airtable Base > Help > API documentation > click on your Table on the left > then click "List records". ![Airtable curl command](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F9825e416-8da0-4a5d-87e0-31ff3a8b8205.png&width=768&dpr=4&quality=100&sign=88b4a456&sv=2) Copy the curl command as shown in the image, then paste it into the URL field in the Resource. Now, you need to add several customizations to it. First, replace `YOUR_SECRET_API_TOKEN` with your API token. Refer to [Airtable's documentation](https://support.airtable.com/docs/creating-personal-access-tokens) for generating a token. Make sure you keep `Bearer` in front of the token. ![Airtable authorization Bearer](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F84dc1cba-c30f-4e13-9184-6ccd618b66bc.png&width=768&dpr=4&quality=100&sign=1704426d&sv=2) Second, you must modify the URL to filter by the currently viewed URL. So, for example, if somebody is viewing `/products/wireless-mouse`, the URL needs to filter Airtable records using `wireless-mouse`. Click the "+" in the URL field to open up the [**Expression Editor**](https://docs.webstudio.is/university/foundations/expression-editor) **.** Use the following as a template to create your dynamic URL: Copy `https://example.com?filterByFormula={YOUR_COLUMN_NAME}="${system.params.YOUR_DYNAMIC_PATH}"` Be sure to: * Use your URL * Replace `YOUR_COLUMN_NAME` with the column you want to filter by. It's best to have a URL-friendly column in your Airtable, meaning it only contains alphanumeric characters and dashes. * Replace `YOUR_DYNAMIC_PATH` with what you created in the Dynamic Path. If you used `:slug`, you will enter "slug". **In plain text, the Expression will say, "Hey, Airtable, get the record where the slug value equals the currently viewed slug."** **Add a test URL value** Nothing will be retrieved until we give it a test slug value. To do this, go to the [Address Bar](https://docs.webstudio.is/university/foundations/cms#address-bar) and manually enter one of the values from the Airtable column you are filtering by. ![Adding a test param slug which is a value from my Airtable Base](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F74e10fcc-00a2-4319-81d6-e0b570a5dc13.png&width=768&dpr=4&quality=100&sign=5ad358fa&sv=2) Now, go to your variable and inspect it. ![Response from Airtable API call](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F5a601a53-1994-493e-8a2c-cc8760d62542.png&width=768&dpr=4&quality=100&sign=7e2acbc2&sv=2) You should see data within "records" like the image shows. If you are not seeing data, then there is likely an issue with mapping the value from your dynamic path to the dynamic URL. If you see an error, read it and try to correct it. Now that you are getting data, you can move to the next step, mapping or "binding" the data to the various components within Webstudio. ### [](https://docs.webstudio.is/university/integrations/airtable#id-3-bind-airtable-data-to-webstudio-components) 3 Bind Airtable data to Webstudio components [Binding](https://docs.webstudio.is/university/foundations/cms#binding-data) enables you to connect or map values from the Airtable response (aka the Airtable data) to the Webstudio components to build your frontend. **Bind data to components** First, add the various [components](https://docs.webstudio.is/university/core-components) you want on your page. This example uses a Header, Paragraph, Text Block, and Image. Here's a page with the various components with their default values: ![Dynamic page with components without bindings](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fcb93cbff-d57a-4efb-ad77-ce3b6b6a481b.png&width=768&dpr=4&quality=100&sign=94a69ffa&sv=2) For each component, go to Settings and the field to which you want to attach an external value and click the "+" to open Bindings. In the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) , click or type the variable you created previously. From there, "drill down" or access the child fields within the variable by typing a period and selecting the following field (repeat until you get the value). Here is what that looks like: ![Binding Airtable data to Webstudio components](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F51e88932-60cb-4929-94a2-dd40019e13e0.png&width=768&dpr=4&quality=100&sign=3d7705ca&sv=2) Continue this process for all components. All fields in Webstudio can have Airtable fields bound to them, including page fields like Title. **Bind data to Page Settings** Here are the Page Settings bound to Airtable values: ![Page Settings bound to Airtable values](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F40573512-4811-43fa-a7d7-7d928e8ba9d3.png&width=768&dpr=4&quality=100&sign=e40c7a32&sv=2) There is one more place to bind: the status code. You want to ensure that if there is no matching value within your Airtable, the page returns a 404, not a 200. To do this, go to Page Settings > Status Code > "+" and enter an expression. The format will be like this: Copy ? 200 : 404 For this example, it looks like this: ![Status code for Airtable page.](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fdcd9f284-2c14-46a3-9e35-b3631cf09918.png&width=768&dpr=4&quality=100&sign=1d254a75&sv=2) In plain text, the expression says, "If the Airtable value exists, return 200 (found); otherwise, return 404 (not found). Well done! So far, you have successfully created a Dynamic Page, fetched the data from Airtable, and bound the data to Webstudio Components. In the following steps, these same concepts will be used to create an overview page with your various records all on one page and a sitemap for search engines. ### [](https://docs.webstudio.is/university/integrations/airtable#id-4-create-an-overview-page) 4 Create an overview page ![Grid of Airtable products in Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F57850fff-5fa3-4179-8a29-ac09dc3ed8cb.png&width=768&dpr=4&quality=100&sign=3ab21be0&sv=2) In this step, you will create a page that lists the various Airtable records and links them so that users can click on them and land on the Dynamic Page containing the proper data. **Create a new page** Create a new page and ideally give it the base path of the Dynamic Page. So, if the Dynamic Page uses `/products/:slug`, this new page should use `/products`. **Create a new Resource variable** Create a new variable, same as last time, except the URL will _not_ be dynamic. For example, `https://api.airtable.com/v0/appXXXXXXXXXX/BASE_NAME`. This should return a list of all the records which you can see in the inspect tool. **Setup a Collection** Add the **Collection** component, which will iterate over a list of the records. So, if you can design what a record should look like once, it will replicate it for each record. You need to bind the list of records to the Collection. Here's what that looks like: ![Airtable records attached to Collection](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F80a98c18-69e4-4176-ace9-a9f25292292a.png&width=768&dpr=4&quality=100&sign=4818dbc6&sv=2) The Collection has a default variable containing the value of the current iteration's record. The default name is "Collection Item"; however, in the screenshot, you can see it was renamed to "Airtable Product" for clarity. **Bind data to components** Next, bind the various values to the components, as you learned previously. For the link, you'll need to do something special: prefix the slug with the base path. Here is what that looks like in this example: ![Linking to each Airtable records' corresponding page](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F0d08b0e5-7895-4e40-9f1f-05381c2566fc.png&width=768&dpr=4&quality=100&sign=be154f0c&sv=2) Note that the static value is in quotes ("/products/"), and there is a "+" to glue it together with the dynamic slug value. **Create dynamic filters** You may notice the example contains a search field letting users dynamically filter content. Refer to the following guide to create the filters: [▶️Using filters to dynamically display content (Airtable example)](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content) This page is great to let users browse your records, but we need to create a page for search engines, a sitemap. ### [](https://docs.webstudio.is/university/integrations/airtable#id-5-create-a-sitemap) 5 Create a sitemap Webstudio enables you to visually build a dynamic sitemap using **Collections** and [**XML Nodes**](https://docs.webstudio.is/university/core-components/xml-node) . Here's how to do it: 1. Go to Marketplace > Pages > CMS Sitemap > and click Sitemap. This will insert a template sitemap. 2. Add a new Resource that fetches your slugs and, optionally, the record's updated time to inform search engines when the last edit was made. 3. Bind those values. Refer to [this video chapter](https://www.youtube.com/watch?v=QC6Y7BHduLw&t=975s) for a full video demonstration on building a sitemap. While the backend differs in this video, the concepts are the same. [](https://docs.webstudio.is/university/integrations/airtable#start-using-webstudio-as-a-frontend-for-airtable) Start using Webstudio as a frontend for Airtable --------------------------------------------------------------------------------------------------------------------------------------------------------------------- With [Webstudio](https://apps.webstudio.is/dashboard) , you can build an entire Airtable frontend, including a record overview page, a dynamic page displaying each record, and a sitemap – all without writing code! The flexibility of Resources enables you to fetch exactly what you need from one or more Airtable Databases and even multiple systems altogether (e.g., Airtable team members and Hygraph for blog posts). [](https://docs.webstudio.is/university/integrations/airtable#resources) Resources --------------------------------------------------------------------------------------- * [Using filters to dynamically display Airtable content](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content) * [Building dynamic pages for Airtable data](https://youtu.be/3mW7cPDXIxY) * [Using Webstudio Webhook form to send data to an Airtable automation (doc)](https://docs.webstudio.is/university/integrations/airtable-1) * [Airtable filters API (doc)](https://support.airtable.com/docs/airtable-web-api-using-filterbyformula-or-sort-parameters) [PreviousHow to build a frontend for Supabase using Webstudio](https://docs.webstudio.is/university/integrations/supabase) [NextHow to integrate a Webhook Form with Airtable](https://docs.webstudio.is/university/integrations/airtable-1) Last updated 1 year ago Was this helpful? --- # How to integrate Webhook Form with N8N | Webstudio Documentation This guide shows you how to link Webstudio Forms with [n8n](https://n8n.io/) for workflow automation. We will move data from Webstudio to n8n, save it in a Supabase table, and then ping a Slack channel when certain conditions are met. ### [](https://docs.webstudio.is/university/integrations/n8n#what-is-n8n) What is n8n? n8n is a platform designed to automate workflows. It helps you set up a series of tasks that run automatically, connecting different apps and services in the process. One of the key features of n8n is its visual editor, which allows you to build these automated workflows without having to write any code. * * * ### [](https://docs.webstudio.is/university/integrations/n8n#how-to-create-a-webstudio-greater-than-n8n-integration) How to create a Webstudio > n8n integration? For our Webstudio integration, we will create a workflow that sends form submissions to Supabase and notifies a Slack channel if certain requirements are met. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FnNWLLFqL5ulBsXsGd4xa%252Fcreators.app.n8n_2_L2bSfi01s2coM05A7-69U.avif%3Falt%3Dmedia%26token%3Dd92914ef-b295-4a7c-9678-b4c2d832f7b3&width=768&dpr=4&quality=100&sign=14b72018&sv=2) * Get started with n8n * Create the workflow trigger * Connect the webhook to your Webstudio Form * Integrate with External Applications (Supabase) * Add an IF Node * Add a Slack Node * Finalize your workflow #### [](https://docs.webstudio.is/university/integrations/n8n#get-started-with-n8n) Get started with n8n Start by logging in to your n8n account. * Inside your dashboard, go to Credentials > Add credential. For this demo, we will be using Supabase and Slack. You can find detailed instructions for all [supported credential setups](https://docs.n8n.io/integrations/builtin/credentials) . * After setting up the relevant credentials, go to “Workflows” and create a new workflow to start building your automation. #### [](https://docs.webstudio.is/university/integrations/n8n#create-the-workflow-trigger) Create the workflow trigger To initiate our n8n workflow with a webhook, we need to configure a webhook trigger. * Add a Webhook node to your workflow by going to Add first step > Select a trigger > On webhook call * Set HTTP Method to POST. * Copy the “Test Webhook URL” and head over to Webstudio. You can learn more about the [Webhook node and its parameters](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/) . #### [](https://docs.webstudio.is/university/integrations/n8n#connect-the-webhook-to-your-webstudio-form) Connect the webhook to your Webstudio Form ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FGQI2CcOb0Xukzq1TF418%252Fgroup_4_Xt06GzUYWM7Kf9OWv0jga.avif%3Falt%3Dmedia%26token%3Dccb9805c-1910-4040-86d4-a53299773183&width=768&dpr=4&quality=100&sign=dc197dc8&sv=2) 1. Open the Webstudio builder, select your form instance, go to Settings and add two properties— _Action_ and _Method_. 2. Paste your copied Test Webhook into the Action property. 3. Write the word “POST" in the Method property. 4. Name every input field in your form so n8n can identify them in a form submission. 5. Head back to n8n and click on “Listen for test event”. It is important to submit your form on the published site to trigger the test submission. 6. Open the published version of your website and submit the updated form. 7. Back in n8n, you will now see the submitted form data in the Output Section. #### [](https://docs.webstudio.is/university/integrations/n8n#integrate-with-external-applications) Integrate with External Applications Next, let’s add an external application to our workflow. To demonstrate this step, we will be adding form records to Supabase. 1. Go to Add Node > Action in an app > Supabase > Create a row. 2. Select the Supabase account you have linked to n8n and modify the other relevant parameters. 3. Link your form’s input fields to your Supabase table by mapping them to your Webhook’s Output Data. You can learn more about the [Supabase node and its parameters](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.supabase) . #### [](https://docs.webstudio.is/university/integrations/n8n#add-an-if-node) Add an IF Node IF and other flow nodes are used to trigger automations when specified conditions are met. For this example, we will create a condition to send a Slack channel message only if the value of a lead is over $10,000. 1. Go to Add Node > Flow > IF. 2. Add a condition that sets your IF node to “true” if the value from your input is $10,000 or under. 3. Click on “Execute Node” This will return a true/false result. a. On “true”, the value is under $10,000. b. On “false”, the value is over $10,000. You can [learn more about the IF node and its parameters](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.if/) . #### [](https://docs.webstudio.is/university/integrations/n8n#add-a-slack-node) Add a Slack Node Finally, let’s add a Slack node to our workflow. We will configure this node to send a message to the Sales channel in Slack. 1. On your n8n canvas, click the “+” sign next to the IF node’s “false” branch. 2. Go to Action in an app > Slack > Send a message. 3. Select your target Slack account 4. Set “Message Type” to “Simple Text Message” from the dropdown. 5. Map the relevant data from the “Input” Section to your Slack message in the “Message Text” parameter. You can [learn more about the Slack node and its parameters](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.slack/) . #### [](https://docs.webstudio.is/university/integrations/n8n#finalize-your-workflow) Finalize your workflow After setting up your workflow, you should test it to ensure it runs properly. 1. Execute the n8n workflow. 2. Create a new submission on your published Webstudio site. 3. If the workflow runs without any errors, all nodes will have a green border. After the checks are concluded, activate your workflow. 1. Replace the “Test Webhook URL” with the “Production Webhook URL” in your Form’s Action property. 2. Go to the upper left of your n8n canvas and activate your workflow by toggling it from “Inactive” to “Active”. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FyJepysYAhQznB7FN1dNU%252Fcreators.app.n8n_2_L2bSfi01s2coM05A7-69U.avif%3Falt%3Dmedia%26token%3Dc9c7fa9b-9fed-482c-91d4-69c77767f4d9&width=300&dpr=4&quality=100&sign=a90a3f01&sv=2) [PreviousHow to integrate Webhook Form with Zappier](https://docs.webstudio.is/university/integrations/zapier) [NextHow to integrate Flotiq with Webstudio](https://docs.webstudio.is/university/integrations/flotiq) Last updated 1 year ago Was this helpful? --- # How to add a GSAP animation | Webstudio Documentation ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FgI76UFxiUKlK9QvI5tpR%252Fgsap.png%3Falt%3Dmedia%26token%3D085d42d9-4fb4-4fe9-ba2f-930511cd3539&width=768&dpr=4&quality=100&sign=f62d20c1&sv=2) [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#embed-gsap-library-on-the-page) Embed GSAP library on the page ----------------------------------------------------------------------------------------------------------------------------------------------- 1. Add HTML [Embed Component](https://docs.webstudio.is/university/core-components/html-embed) to the canvas 2. Activate "[Client Only](https://docs.webstudio.is/university/core-components/html-embed#client-only) " setting 3. Optionally activate "[Run script on canvas](https://docs.webstudio.is/university/core-components/html-embed#run-script-on-canvas) " setting 4. Open GSAP official [installation instruction](https://gsap.com/docs/v3/Installation) 5. Copy the scripts into HTML Embed Code in Settings ### [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#example) Example Copy [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#q-and-a) Q&A --------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#how-to-reuse-the-animation-on-multiple-pages) How to reuse the animation on multiple pages? You can reuse the animation using [Slot component](https://docs.webstudio.is/university/core-components/html-embed#how-to-reuse-your-custom-code-across-multiple-web-pages) ### [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#can-i-use-the-custom-code-from-project-settings-to-include-gsap-on-all-pages) Can I use the Custom Code from project settings to include GSAP on all pages? While you can add the library in the HEAD in project settings, this HTML won't run in preview, so you can't test inside the builder. Additionally, if you use async or defer attributes, there is no guarantee that your HTML Embed scripts on the page won't run before the library is loaded. If you don't use defer or async attributes, you will slow down your site by blocking the rendering until the library is loaded. ### [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#identifier-x-has-already-been-declared) Identifier 'x' has already been declared Learn more about script scope [here](https://docs.webstudio.is/university/core-components/html-embed#avoid-creating-global-variables) . [](https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation#demo) Demo ------------------------------------------------------------------------------------------- [Preview Link](https://simple-gsap-demo.wstd.io/) [Builder Link](https://apps.webstudio.is/builder/623cdb40-24bb-4809-a610-145b6eefcf21?authToken=d0544921-f4bb-4697-a0d8-2efd2a0c4a11&mode=preview) [PreviousHow to crop an image with out cropping the original image](https://docs.webstudio.is/university/how-tos/how-to-crop-an-image-with-out-cropping-the-original-image) [NextBuild Your Own Directory Website with Airtable](https://docs.webstudio.is/university/how-tos/build-your-own-directory-website-with-airtable) Last updated 4 months ago Was this helpful? --- # How to integrate a Webhook Form with Airtable | Webstudio Documentation Out of the box, Webstudio automatically sends form data to the site owner’s registered email, effectively creating singular records. To expand this functionality, we can seamlessly integrate it with a relational database like Airtable. This will centralize, access, and analyze all your form submission data in one place, making data management a breeze and enabling efficient team collaboration. * * * ### [](https://docs.webstudio.is/university/integrations/airtable-1#integration-overview) Integration overview: You can integrate your Webstudio form with Airtable in 3 simple steps: 1. Configuring your Webstudio form 2. Setting Up Webhooks in Airtable and Webstudio 3. Mapping Data to the Right Fields ### [](https://docs.webstudio.is/university/integrations/airtable-1#step-1-configuring-your-webstudio-form) Step 1: Configuring your Webstudio Form To configure your form for the integration, you will need to define the input name for each field. Select your form input field in the navigator, and head over to “Settings” on the right to fill in the name property. Repeat this for every input field on your form as this is what Airtable will use to identify your website form submissions. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FN9WdoDuINYznSfXPNuDZ%252FInput_settings_yMT_DZuztiiOcyMEWcFfT.avif%3Falt%3Dmedia%26token%3Df473dcb7-4948-45e4-86e0-4a501b84816b&width=768&dpr=4&quality=100&sign=69b3a890&sv=2) ### [](https://docs.webstudio.is/university/integrations/airtable-1#step-2-setting-up-webhooks-in-airtable-and-webstudio) Step 2: Setting Up Webhooks in Airtable and Webstudio Airtable simplifies the process of setting up webhooks within the platform. 1. Open your Airtable workspace and navigate to the table where you want to add data. 2. Click on the "Automations" button located on the top of the screen. 3. Create a new automation by selecting "Create Automation" and choose the trigger event. In this case, select "When webhook received" as the trigger. 4. Copy the webhook URL to your clipboard. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FBLvCHFsQj14uT1IZhiHZ%252FGroup_3_w01YNmN5_ItZ3Huc6Nr-O.avif%3Falt%3Dmedia%26token%3D349d5565-c961-4308-9b45-986f98135632&width=768&dpr=4&quality=100&sign=4e10a635&sv=2) Next, link your Webstudio form to this webhook. 1. Open up Webstudio and select the form you want to link to Airtable. 2. Navigate to the Settings tab on the top right. 3. Click on the "+" button beside properties. 4. Select "Action" from the dropdown. 5. Paste the Airtable webhook URL into the new action field. 6. Publish your new changes on Webstudio. 7. Head over to the live version of your site and create a test submission on your form. This will trigger send the submission to Airtable and validate your integration. ### [](https://docs.webstudio.is/university/integrations/airtable-1#step-3-mapping-data-to-the-right-fields) Step 3: Mapping Data to the Right Fields With the webhook set up, data will automatically flow into your Airtable automation. Now, let's proceed to map the incoming data to the appropriate feeds within the table. To learn more about how to use Airtable's powerful automation tool, refer to their official [documentation](https://support.airtable.com/docs/getting-started-with-airtable-automations) . 1. Identify Key Data Points Determine the essential data points you want to capture from the incoming data. For example, if you're receiving data from a contact form, key data points might include the name, email address, phone number, and message. 2. Create Fields in Airtable Under the data tab, in your selected table, create fields that correspond to the identified data points. Airtable offers various field types (e.g., Single Line Text, Email, Phone, Date) to accommodate different types of data. 3. Set Up Data Mapping Automation Head back to Airtable's automation tab, add a new action to your original automation. Select "Create record" as the action type and map the incoming data to the respective fields. In the automation setup, specify which data points should populate each field in the Airtable table. 4. Turn on your automation Now that we have finished configuring our automation, we can turn it on. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FuhFNydIwacMwoEzwSpHl%252Fgroup_4_PlqnP8v1v_6YdeJ3jf3tx.avif%3Falt%3Dmedia%26token%3Df45593dc-0cb5-47df-a9a7-f6fad59be45d&width=768&dpr=4&quality=100&sign=c3513cb3&sv=2) ### [](https://docs.webstudio.is/university/integrations/airtable-1#conclusion) Conclusion Airtable's native [automation](https://support.airtable.com/docs/getting-started-with-airtable-automations) features empower users to streamline data entry and enhance data organization. By setting up a webhook action from your Webstudio form to receive external data and automating the mapping process, you eliminate the need for manual data entry, reduce the risk of errors and gain access to all of Airtable's data management features. [PreviousHow to build a frontend for Airtable using Webstudio](https://docs.webstudio.is/university/integrations/airtable) [NextHow to build a frontend for Hygraph using Webstudio](https://docs.webstudio.is/university/integrations/hygraph) Last updated 1 year ago Was this helpful? --- # How to build a frontend for Supabase using Webstudio | Webstudio Documentation In Webstudio, a "Collection" is a powerful feature designed to manage and display dynamic content on web pages. Essentially, they serve as containers that can connect to various data sources, like databases or APIs, to fetch and present data in a structured and repeatable manner. This allows developers and designers to create instances, such as lists, galleries, or testimonial sections, where each item in the collection is automatically populated with data from the connected source. By using a collection, Webstudio users can efficiently create pages with content that updates in real-time, reflecting changes in the data source without manual intervention, thereby enhancing the site's interactivity and relevance. [](https://docs.webstudio.is/university/integrations/supabase#dynamic-content-creation-with-webstudio-and-supabase) Dynamic Content Creation with Webstudio and Supabase ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- To create pages featuring dynamic content in Webstudio by integrating Supabase as your data source. * * * ### [](https://docs.webstudio.is/university/integrations/supabase#setting-up-your-supabase-project) Setting Up Your Supabase Project 1. Sign up for a free Supabase account. 2. Create a new project. (You'll need to set a strong password for your project to proceed). 3. Once your project is initialized, navigate to the table editor to create a new table 4. Define your fields * * * ### [](https://docs.webstudio.is/university/integrations/supabase#uploading-images-to-supabase-storage) Uploading Images to Supabase Storage * Create a new bucket - set it as public, and upload your images. * Each image will have a URL * * * ### [](https://docs.webstudio.is/university/integrations/supabase#integrating-supabase-with-webstudio) Integrating Supabase with Webstudio To connect Supabase to Webstudio, you'll need to set up Row Level Security (RLS) policies for your table and obtain your API URL from Supabase's API docs. 1. **Creating RLS Policies**: Navigate to the RLS policies section in Supabase and create a new policy that allows read access for everyone. 2. **Retrieving the API URL**: Find your table in the API docs, switch the example code to bash, and copy the URL provided. In Webstudio, select your container and add a new collection component. Configure a collection variable with the Supabase API URL, ensuring the request is authenticated with your Supabase API key. * * * ### [](https://docs.webstudio.is/university/integrations/supabase#mapping-data-and-finalizing-your-page) Mapping Data and Finalizing Your Page Map the data from Supabase to your Webstudio project. This involves setting up the data within your collection to inform Webstudio about the available data for use. * Delete any automatically generated preview box within the collection. * Drag in your pre-created and pre-styled components, which will be repeated for each fetched item from Supabase. * For each component (e.g., paragraph, field, and image), bind the corresponding data from your Supabase collection. * Once everything is connected and data is properly mapped, your page will dynamically display the testimonials stored in Supabase. Make sure to check the responsiveness and appearance on mobile devices before publishing. * * * [PreviousIntegrations](https://docs.webstudio.is/university/integrations) [NextHow to build a frontend for Airtable using Webstudio](https://docs.webstudio.is/university/integrations/airtable) Last updated 3 months ago Was this helpful? --- # How to integrate a Notion database with Webstudio | Webstudio Documentation ![Page cover](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FRnKsEei2LKGFPrZFJjti%252Fnotion-website-cover.png%3Falt%3Dmedia%26token%3Db1021b40-9610-4060-af0d-1159aa87057d&width=1248&dpr=4&quality=100&sign=80c684d2&sv=2) Disclaimer: Using Notion Page content in Webstudio is impossible (for now), so it is only for Database properties. By the end of this tutorial, you will have the following using your [Notion](https://notion.so/) database and [Webstudio](https://webstudio.is/) : * **An overview page** – One page that contains all the records in your Notion database, each with a link to view that record on a details page (a dynamic page). * **A details page** – A template displaying the record/row matching the record viewed. If the user is on /events/birthday, the Dynamic Page will fetch the Notion record matching "birthday" and display its contents. * **A filter on the overview page** – A filter that lets users find events in the past, within the next week, and within the next year. * **A sitemap** – A dynamic sitemap containing the various database records in Notion to help with search engine indexing A lightweight Notion template is in the Marketplace. To start a new project, [clone the template](https://wstd.us/notion-template) . To integrate with an existing project, visit the Marketplace and insert the various pages. Video tutorial [](https://docs.webstudio.is/university/integrations/notion#webstudio-is-a-visual-website-builder-that-connects-to-notion) **Webstudio is a visual website builder that connects to Notion** ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Webstudio is solely focused on creating a visual builder for the frontend. It's backend agnostic, meaning we don't lock you into using any one backend/CMS/database. You can build a website on your custom domain and fetch data from your Notion Workspace. In the case of Notion, this enables you to leverage your current databases and the ease of use that comes with them. Webstudio enables you to build a custom frontend for your Notion data without writing code. Webstudio is mainly a no-code platform, however, it's also optionally a low-code platform to enable custom logic. Webstudio is open source, has all CSS properties, and is dynamic at the speed of static. [](https://docs.webstudio.is/university/integrations/notion#why-notion) **Why Notion** ------------------------------------------------------------------------------------------- Notion is where many teams and individuals already manage content, typically in preparation for adding it to their website. By integrating the website builder directly with Notion, people can avoid the unnecessary step of manually transferring the data to the website. [](https://docs.webstudio.is/university/integrations/notion#use-notion-databases-not-notion-pages) Use Notion Databases (not Notion Pages) ----------------------------------------------------------------------------------------------------------------------------------------------- You can use Webstudio as a Notion website builder for any properties in your database. **Notion Pages cannot be fetched in Webstudio.** Notion Pages cannot be used because the Notion API requires three calls to fetch the necessary data. 1. **Fetch the database item** – Notion Pages don't contain any properties. You need properties to manage SEO settings such as meta title, meta description, and slug, among other data for managing a blog. 2. **Fetch page content** – The first call provides an ID to fetch Notion Page content, a wrapper for the actual content. 3. **Fetch block content** – The Notion Page call provides an ID to use in the third call, which fetches the various blocks within a page (e.g., title, paragraph, link, etc.). Synchronously calling three APIs would lead to slow performance for your visitors. [](https://docs.webstudio.is/university/integrations/notion#steps-to-building-a-website-using-notion-data) **Steps to building a website using Notion data** ----------------------------------------------------------------------------------------------------------------------------------------------------------------- This example uses the Notion events functionality, enabling you or clients to add events to the website without actually having to touch the website. It can be adapted to other types of data, such as team members, business data, etc. ### [](https://docs.webstudio.is/university/integrations/notion#id-1-create-a-dynamic-page) **1 Create a dynamic page** In this step, you will create a [Dynamic Page](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) in Webstudio. Think of it as your record template – one page that dynamically changes based on the URL. The URL will contain a dynamic path, and its value will be used to get the record from Notion. Go to your Webstudio project > Pages > Create a new page. Add a path with at least two segments in the Dynamic Path field. This example uses the path `/events/:slug`. ![Dynamic path of /events/:slug](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fe92dc1d1-55b2-432c-aa1a-bf8a337ad57c.png&width=768&dpr=4&quality=100&sign=3d21f04f&sv=2) 1. The first segment should be something to describe your records (e.g., `events`) 2. The second is a dynamic component. You can name it whatever. This example uses `:slug`. The value will be used in the following steps. ### [](https://docs.webstudio.is/university/integrations/notion#id-2-fetch-notion-data) **2 Fetch Notion data** In this step, you will configure a [Resource](https://docs.webstudio.is/university/foundations/variables#resource) in Webstudio to get data from Notion. #### [](https://docs.webstudio.is/university/integrations/notion#create-a-resource-variable) **Create a Resource variable** Go to the Navigator on the left > select Body > Settings on the right > and create a new variable with any name (this example uses "Notion Data"), and in type, use Resource. While the URL and remaining fields can be manually entered, there is also a shortcut – you can paste in a curl command, and Webstudio will automatically parse it and populate the respective fields. To get the curl command, go to [Notion's filter database entries doc](https://developers.notion.com/reference/post-database-query-filter) . ![Notion filter database curl command](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F7928e894-7215-48c9-a975-a563c146223d.png&width=768&dpr=4&quality=100&sign=68c992a5&sv=2) Copy the curl command as shown in the image, then paste it into the URL field in the Resource. Now, you need to add several customizations to it. First, replace `$NOTION_API_KEY` with your API key, which you can get by [creating a new integration](https://www.notion.so/my-integrations) . Make sure you keep `Bearer` in front of the API key. ![Notion authorization Bearer](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fea114c6f-5edb-4f55-beee-6735cbdd260b.png&width=768&dpr=4&quality=100&sign=29d22916&sv=2) Second, you must modify the URL to include your database ID. If you are in a web browser, go to your database, and it'll be in the URL. If you are in the app, go to your data, click the three dots, copy a link to the database, and paste it somewhere temporarily. As bolded below, the database ID is after the path and before the `?v`. https://www.notion.so/**94582558d50a4cb98234f16973f69c8a**?v=1f9c545770334b2091e52c906492143c Third, you must modify the filter in the body to use the currently viewed URL. So, for example, if somebody is viewing `/events/birthday`, the URL needs to filter Notion records using birthday. Click the "+" in the URL field to open the [**Expression Editor**](https://docs.webstudio.is/university/foundations/expression-editor) **.** Use the following as a template to create your dynamic body: Copy { "filter": { "property": "Slug", "rich_text": { "equals": system.params.slug } } } Be sure to: * Replace "Slug" with the column name you are filtering by. * Replace `system.params.slug` with what you created in the Dynamic Path. You don't need to change anything if you used `:slug`. **In plain text, the Expression will say, "Hey, Notion, get the record where the Slug value equals the currently viewed slug."** #### [](https://docs.webstudio.is/university/integrations/notion#add-a-test-url-value) **Add a test URL value** Nothing will be retrieved until we give it a test slug value. To do this, go to the [Address Bar](https://docs.webstudio.is/university/foundations/cms#address-bar) and manually enter one of the values from the Notion column you are filtering by. ![Adding a test param slug which is a value from the Notion database](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fbf62fff2-537d-40ba-852e-6a0028cb2dc9.png&width=768&dpr=4&quality=100&sign=ad60e284&sv=2) The Address Bar value is for testing. Once you publish the site, the value is whatever is in the URL. Anytime you add data to Notion, you don't need to republish your website. Notion data is dynamically fetched when visiting a page. Now, go to your variable and inspect it. ![Response from Notion API call](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Faae0d39f-6952-445e-bd06-ee13945d0d1a.png&width=768&dpr=4&quality=100&sign=9c2c5d29&sv=2) You should see data like the image shows. If you are not seeing data, then there is likely an issue with mapping the value from your dynamic path to the dynamic URL. If you see an error, read it and try to correct it. Now that you are getting data, you can move to the next step, mapping or "binding" the data to the various components within Webstudio. ### [](https://docs.webstudio.is/university/integrations/notion#id-3-bind-notion-data-to-webstudio-components) **3 Bind Notion data to Webstudio components** [Binding](https://docs.webstudio.is/university/foundations/expression-editor#binding) enables you to connect or map values from the Notion response (aka the Notion data) to the Webstudio components to build your Notion website. #### [](https://docs.webstudio.is/university/integrations/notion#bind-data-to-components) **Bind data to components** First, add the various [components](https://docs.webstudio.is/university/core-components) you want on your page. This example uses a Header, Paragraph, Time, and Image. Here's a page with the various components with their default values: ![Dynamic page with components without bindings](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F75f784da-3e83-4c0b-b523-ceaabe1bd4e7.png&width=768&dpr=4&quality=100&sign=87473828&sv=2) For each component, go to Settings and the field to which you want to attach an external value and click the "+" to open Bindings. In the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) , click or type the variable you created previously. From there, "drill down" or access the child fields within the variable by typing a period and selecting the following field (repeat until you get the value). Notion database properties are contained in: `.results[0].properties` Here is what that looks like: ![Binding Notion data to Webstudio components](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F6441da4e-4ef4-4b03-af61-338c8af20f6c.png&width=768&dpr=4&quality=100&sign=67c950cc&sv=2) Continue this process for all components. All fields in Webstudio can have Notion properties bound to them, including page fields like Title. #### [](https://docs.webstudio.is/university/integrations/notion#bind-data-to-page-settings) **Bind data to Page Settings** Here are the Page Settings bound to Notion values: ![Page Settings bound to Notion values](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fe7b06a6d-f4a3-4d73-ad9a-0f9e050771d9.png&width=768&dpr=4&quality=100&sign=ae7bc1b9&sv=2) There is one more place to bind: the status code. You want to ensure that if there is no matching value within your Notion, the page returns a 404, not a 200. To do this, go to Page Settings > Status Code > "+" and enter an expression. The format will be like this: Copy Copy ? 200 : 404 For this example, it looks like this: ![Status code for Notion page.](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fa51a200c-0205-48a5-b848-d6d3c58602ff.png&width=768&dpr=4&quality=100&sign=a6b71dcf&sv=2) In plain text, the Expression says, "If the Notion record exists, return 200 (found); otherwise, return 404 (not found). Well done! So far, you have successfully created a Dynamic Page, fetched the data from Notion, and bound the data to Webstudio Components. In the following steps, these same concepts will be used to create an overview page with your various records on one page and a sitemap for search engines. ### [](https://docs.webstudio.is/university/integrations/notion#id-4-create-an-overview-page) **4 Create an overview page** ![Grid of Notion events in Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F8ca6e676-6633-4f96-8c4c-441e7237a0b2.png&width=768&dpr=4&quality=100&sign=cd057afb&sv=2) In this step, you will create a page that lists the various Notion records and links them so that users can click on them and land on the Dynamic Page containing the proper data. #### [](https://docs.webstudio.is/university/integrations/notion#create-a-new-page) **Create a new page** Create a new page and ideally give it the base path of the Dynamic Page. So, if the Dynamic Page uses `/events/:slug`, this new page should use /events. #### [](https://docs.webstudio.is/university/integrations/notion#create-a-new-resource-variable) **Create a new Resource variable** Create a new variable, same as last time, except no body field is needed. The Marketplace contains a filter property that sorts, paginates, and filters events based on user input. #### [](https://docs.webstudio.is/university/integrations/notion#setup-a-collection) **Setup a Collection** Add the **Collection** component, which will iterate over a list of the records. You can design what a record should look like once, and it will replicate it for each record. You need to bind the list of records to the Collection. Here's what that looks like: ![Notion records attached to Collection](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F0ab681b1-5e38-4b79-9281-542d843feb06.png&width=768&dpr=4&quality=100&sign=38703ab3&sv=2) The Collection has a default variable containing the value of the current iteration's record. The default name is "Collection Item"; however, you can rename this to "Event Item" for clarity. #### [](https://docs.webstudio.is/university/integrations/notion#bind-data-to-components-1) **Bind data to components** Next, bind the various values to the components, as you learned previously. You'll need to do something special for the link: prefix the slug with the base path. Here is what that looks like in this example: ![Linking to each Notion records' corresponding page](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F1863654c-6f61-467b-ba35-7521da438212.png&width=768&dpr=4&quality=100&sign=6574394f&sv=2) Note that the static value is in quotes ("/events/"), and there is a "+" to glue it together with the dynamic slug value. ### [](https://docs.webstudio.is/university/integrations/notion#id-5-create-a-sitemap-for-search-engines) **5 Create a sitemap for search engines** Webstudio enables you to visually build a dynamic sitemap using **Collections** and [**XML Nodes**](https://docs.webstudio.is/university/core-components/xml-node) . The sitemap helps Google and other search engines discover pages on your website and understand when they were last updated. Building a sitemap is a key step in making your Notion website SEO-friendly. Here's how to do it: 1. Go to Marketplace > Pages > CMS Sitemap > and click Sitemap. This will insert a template sitemap. 2. Add a new Resource that fetches your slugs and, optionally, the record's updated time to inform search engines when the last edit was made. You can add a column to your data with the "Last edited time" property, which automatically outputs the last time you edited that record. 3. Bind those values. Refer to [this video chapter](https://www.youtube.com/watch?v=j6JcJ32mxLQ?t=1140) for a full video demonstration on building a sitemap containing Notion data. [](https://docs.webstudio.is/university/integrations/notion#start-using-webstudio-to-build-notion-websites) **Start using Webstudio to build Notion websites** ------------------------------------------------------------------------------------------------------------------------------------------------------------------- With [Webstudio](https://apps.webstudio.is/dashboard) , you can build a Notion site, including a record overview page, a dynamic page displaying each record, and a sitemap – all without writing code! The flexibility of Resources enables you to fetch exactly what you need from one or more Notion Databases and even multiple systems together (e.g., Airtable for team members, Hygraph for blog posts, and Notion for events). [PreviousHow to build a WordPress frontend using Webstudio (no-code builder)](https://docs.webstudio.is/university/integrations/wordpress) [NextHow to integrate Webhook Form with Pabbly](https://docs.webstudio.is/university/integrations/pabbly) Last updated 1 year ago Was this helpful? --- # How to integrate Flotiq with Webstudio | Webstudio Documentation This guide demonstrates how to integrate Flotiq with Webstudio to build a fully dynamic, content-driven website. [](https://docs.webstudio.is/university/integrations/flotiq#what-is-flotiq) **What is Flotiq?** ---------------------------------------------------------------------------------------------------- Flotiq is a headless CMS designed to make content management simple and powerful. It allows you to create, manage, and deliver content through APIs, offering flexibility and scalability. Paired with Webstudio, you can design dynamic frontends while keeping content stored and managed in Flotiq. [](https://docs.webstudio.is/university/integrations/flotiq#prerequisites) **Prerequisites** ------------------------------------------------------------------------------------------------- Before starting, ensure you have the following: * **Flotiq account** – [Register here](https://flotiq.com/) . * **Flotiq API Key** – Learn more about [Flotiq API Keys](https://flotiq.com/docs) . * **Webstudio account** – [Sign up here](https://webstudio.com/) . > Webstudio’s **Pro tier plan** is required to use the Resource feature. Flotiq does not require a paid plan. [](https://docs.webstudio.is/university/integrations/flotiq#id-1.-setting-up-flotiq) **1\. Setting up Flotiq** ------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/integrations/flotiq#create-a-content-type) **Create a content type** Start by creating a content type in Flotiq. For this tutorial, we’ll use Flotiq’s **Blogpost Template**, which includes fields like `title`, `slug`, `excerpt`, `content`, and `headerImage`. ![Create content type in Flotiq](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FuEUOijxz2kAEoWnV1YYL%252Fimage-2.png%3Falt%3Dmedia%26token%3Dea71e344-3ce2-4798-be56-b395230ec371&width=768&dpr=4&quality=100&sign=bf68b400&sv=2) ### [](https://docs.webstudio.is/university/integrations/flotiq#add-sample-data) **Add sample data** Populate your content type with a few example blog posts to test your integration. [](https://docs.webstudio.is/university/integrations/flotiq#id-2.-setting-up-webstudio) 2\. Setting Up Webstudio --------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/integrations/flotiq#create-a-new-project) **Create a new project** 1. Log in to Webstudio and either create a new project or edit an existing one. 2. Choose a template or start with a blank project. ### [](https://docs.webstudio.is/university/integrations/flotiq#create-a-dynamic-page) **Create a Dynamic Page** [Dynamic pages](https://docs.webstudio.is/university/foundations/cms) in Webstudio allow you to create a single template that dynamically changes based on the currently viewed URL. To create a page with a dynamic path, go to **Pages > Add New Page**. In the **Dynamic Path** field, use a parameter to represent the dynamic part of the URL, such as the slug of your blog posts. ![Create a Page with a Dynamic Path](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FWTOBuocjaSoJHvBcu6AF%252Fimage.jpeg%3Falt%3Dmedia%26token%3D75d29619-e7c2-4341-bf0f-9ab103d5eb15&width=768&dpr=4&quality=100&sign=41f7e092&sv=2) In the [Address Bar](https://docs.webstudio.is/university/foundations/cms#address-bar) , provide a test value. ![Set the dynamic path](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Ffvew0vAzhinywFpUmtwn%252Fimage-3.png%3Falt%3Dmedia%26token%3Da363a1f9-48c4-4abb-96ca-3739f1f487ff&width=768&dpr=4&quality=100&sign=225c81c8&sv=2) ### [](https://docs.webstudio.is/university/integrations/flotiq#add-a-graphql-data-variable) **Add a GraphQL Data Variable** [GraphQL Data Variables](https://docs.webstudio.is/university/foundations/variables#graphql) fetch external content. Go to `Page Settings > Data Variables > Add New Variable`. Next, configure the variable: * **Name**: A custom name for the variable. * **Type**: Use `GraphQL` for this integration. * **URL**: Set to `https://api.flotiq.com/api/graphql`. * **Headers**: Add a header with `X-Auth-Token` as the key and your Flotiq API Key as the value. * **Query**: Use a GraphQL query to fetch data. Here’s an example for the `Blogpost` template: Copy query Post($slug: String = "") { blogpost(field: "slug", value: $slug) { id title slug excerpt headerImage { alt url } } } * **GraphQL Variables**: Bind the `slug` from the dynamic path: Copy { "slug": system.params.slug } The variable should be configured as shown in the screenshot below: ![Configure a data variable](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252F2bABhncCqZPP7I5rXu51%252Fimage-4.png%3Falt%3Dmedia%26token%3Dd778bdd9-726e-4991-b029-797ab035884a&width=768&dpr=4&quality=100&sign=559ea479&sv=2) Test the variable - if it is configured correctly, the fetched Flotiq content will appear in the **Inspect Tool**. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FIIR9UjveXf9bU7nCyWuK%252Fimage-5.png%3Falt%3Dmedia%26token%3D12b29587-fe51-4b4d-925c-c15b6a91f353&width=768&dpr=4&quality=100&sign=d800317a&sv=2) ### [](https://docs.webstudio.is/university/integrations/flotiq#bind-flotiq-data-to-your-page) **Bind Flotiq data to your page** Once your Flotiq data is fetched, you can [bind](https://docs.webstudio.is/university/foundations/cms#binding-data) it to your components and page settings. #### [](https://docs.webstudio.is/university/integrations/flotiq#bind-data-to-components) **Bind data to components** Add components such as headings or images to your page. To bind data: * Select a component and navigate to its settings. * Click the "+" button next to the desired property (e.g., **Text Content**). * Open the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) and map values from your Flotiq data variable, for example, `VariableName.data.data.blogpost.title`. > For images add an **Image Component**, and bind the **Source Property** to the image URL: `"https://api.flotiq.com/" + VariableName.data.data.blogpost.headerImage[0].url`. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252Fa6KkdRfLz6T49Xoo7GnJ%252Fimage.gif%3Falt%3Dmedia%26token%3D94117471-848d-4493-85e6-01417cf0d9c1&width=768&dpr=4&quality=100&sign=15d9d054&sv=2) ### [](https://docs.webstudio.is/university/integrations/flotiq#create-a-listing-page) **Create a listing page** Showcase multiple content items, like blog posts or portfolio entries, on a single page by fetching and displaying a list of data. #### [](https://docs.webstudio.is/university/integrations/flotiq#add-a-new-data-variable) **Add a new Data Variable** This variable will fetch a list of all objects from your Flotiq content type. Example query for `BlogpostList`: Copy query Posts { blogpostList { id title slug excerpt headerImage { alt url } } } #### [](https://docs.webstudio.is/university/integrations/flotiq#add-a-collection-component) **Add a collection component** * Bind the list (array) of items from the Data Variable to the collection: `.data.data.List`. * The collection component iterates over each item and replicates your design. Bind the **collectionItem** to get the current iteration's data. #### [](https://docs.webstudio.is/university/integrations/flotiq#customize-the-collection) **Customize the collection** Add components to the collection item (e.g., cards with titles, excerpts, and images). Editing one item applies the same layout to all items. ![Create overwiev page](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FimwgVvDVVBvOKgPQxQKt%252Fimage-2.gif%3Falt%3Dmedia%26token%3D50b5a793-0f00-4144-92ed-8eefd02d184b&width=768&dpr=4&quality=100&sign=2f883ed0&sv=2) [](https://docs.webstudio.is/university/integrations/flotiq#conclusion) Conclusion --------------------------------------------------------------------------------------- Now you should have your content from Flotiq displayed on Webstudio on both a listing page and a dynamic page that changes depending on the slug viewed. [PreviousHow to integrate Webhook Form with N8N](https://docs.webstudio.is/university/integrations/n8n) [NextCraft](https://docs.webstudio.is/university/craft) Last updated 6 months ago Was this helpful? --- # How to build a WordPress frontend using Webstudio (no-code builder) | Webstudio Documentation ![Page cover](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FLY3TW7y7g3PbcHbCRpzA%252Fheadless-wordpress-cover.png%3Falt%3Dmedia%26token%3D76927f9c-a99d-430e-bf84-8b65391a1e99&width=1248&dpr=4&quality=100&sign=3f09008a&sv=2) A lightweight WordPress template is in the Marketplace. To start a new project, [clone the template](https://wstd.us/wordpress-template) . To integrate with an existing project, visit the Marketplace and insert the various pages. By the end of this tutorial, you will have the following using [WordPress](https://wordpress.org/) and [Webstudio](https://webstudio.is/) : * **Headless WordPress CMS** – Make your WordPress website headless. * **An overview page** – One page that contains all the Posts in WordPress, each with a link to view that Post on a blog page (a dynamic page). * **A blog page** – A template displaying the Post matching the URL viewed. If the user is on /blogs/mouse, the Dynamic Page will fetch the WordPress Post with the slug "mouse" and display its contents. * **A sitemap** – A dynamic sitemap containing the Posts in WordPress. [](https://docs.webstudio.is/university/integrations/wordpress#video-tutorial) Video Tutorial -------------------------------------------------------------------------------------------------- [](https://docs.webstudio.is/university/integrations/wordpress#webstudio-is-a-visual-builder-that-connects-to-headless-wordpress) **Webstudio is a visual builder that connects to headless WordPress** ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Webstudio is solely focused on creating a visual builder for the frontend. It's backend agnostic, meaning we don't lock you into using any one backend/CMS/database. In the case of WordPress, this enables you to leverage your blog data and the WordPress blogging engine without having to use WordPress page builders and lackluster performance. Webstudio enables you to build a custom frontend for headless WordPress without writing code. It's an alternative to a WordPress headless framework that requires a time-consuming custom-coded frontend. Webstudio is open source, has all CSS properties, and is dynamic at the speed of static. [](https://docs.webstudio.is/university/integrations/wordpress#why-headless-wordpress) **Why Headless WordPress** ---------------------------------------------------------------------------------------------------------------------- 1. You already use WordPress and want to keep your blog data there using it as a headless CMS. 2. You want to start a new blog and like the flexibility of WordPress. Overall, you want to use the WordPress CMS and not the page builders or WordPress themes. Instead, you want something that uses next-gen infrastructure, such as a Webstudio that leverages the Cloudflare Edge to create fast user experiences. This setup lets you take advantage of the flexible blogging capabilities without bloating your site with WordPress Plugins that come with a traditional WordPress setup. [](https://docs.webstudio.is/university/integrations/wordpress#steps-to-building-a-wordpress-frontend-using-webstudio) **Steps to building a WordPress frontend using Webstudio** -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/integrations/wordpress#id-1-create-a-dynamic-page) **1 Create a dynamic page** In this step, you will create a [Dynamic Page](https://docs.webstudio.is/university/foundations/cms#dynamic-pages) in Webstudio. Think of it as your Post template – one page that dynamically changes based on the URL. The URL will contain a dynamic path, and its value will be used to fetch the Post from WordPress. Go to your Webstudio project > Pages > Create a new page. Add a path with at least two segments in the Dynamic Path field. This example uses the path `/blogs/:slug`. ![Dynamic path of /blogs/:slug](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fba336c21-4155-4020-995b-7f071e281b77.png&width=768&dpr=4&quality=100&sign=72ed9db4&sv=2) Dynamic path of /blogs/:slug 1. The first segment should be something to describe your records (e.g., blogs) 2. The second is a dynamic component. You can name it whatever. This example uses `:slug`. The value will be used in the following steps. ### [](https://docs.webstudio.is/university/integrations/wordpress#id-2-make-wordpress-headless) 2 Make WordPress headless In this step, head over to your WordPress dashboard and install the [WordPress GraphQL plugin](https://wordpress.org/plugins/wp-graphql/) . ![WPGraphQL plugin](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F5e293200-6226-4143-b60a-62c081fa255c.png&width=768&dpr=4&quality=100&sign=9ed23c6d&sv=2) WPGraphQL plugin While you can use the WordPress REST API, the GraphQL API is preferred as it lets you fetch the data you need and nothing more. Webstudio also supports the WordPress REST API if you wish to use it. Once installed, activate the WordPress plugin. The data available in the GraphQL API will include the default WordPress fields. If you have added plugins that extend the Post fields, such as Rank Math and Advanced Custom Fields, you'll need to install additional [GraphQL plugins](https://www.wpgraphql.com/extensions) to make their data available. You now have a headless WordPress setup that is ready to be your content management system. If you are converting an existing WordPress site to leverage the headless WordPress architecture, make sure you go back and remove any of the plugins, themes, pages, and anything else that is no longer needed. Eliminating unnecessary items will lead to improved performance and security. ### [](https://docs.webstudio.is/university/integrations/wordpress#id-3-fetch-wordpress-data) **3 Fetch WordPress data** In this step, you will configure a [Resource](https://docs.webstudio.is/university/foundations/variables#graphql) in Webstudio to fetch data from your headless WordPress site. **Create a GraphQL Resource variable** Go to the Navigator on the left > select Body > Settings on the right > and create a new variable with any name, and in type, use GraphQL. **URL** In the URL field, add your WordPress website's URL and append `/graphql`, an endpoint the GraphQL plugin makes available. If your WordPress website is available at `wordpress.example.com`, you can use `wordpress.example.com/graphql`. **Query** Next, assemble a GraphQL query using Query Composer, located in GraphQL > Query Composer. You will use this feature to construct a query without writing any code. Under Post (note, it's singular Post, not Posts), click the checkbox of every field you want to fetch. Some fields have some gotchas, so look out for these scenarios: * Some fields, such as "content", have a "format" child option once checked. Always check this and select "Rendered". * When requesting an image, such as a featured image, select four child values: altText, sourceUrl, width, and height (those dimensions are within mediaDetails). * The data you need is often in "child" fields. Look around and keep checking boxes until you get what you need. ![GraphQL query composer in WordPress](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F975a4db1-eb8e-4883-bb22-703485564a51.png&width=768&dpr=4&quality=100&sign=215b647&sv=2) GraphQL query composer in WordPress Once you have selected all the data you want to fetch, it's time to tell this query which Post you wish to fetch. The Post fetched will be determined when someone views a URL on your website. Therefore, the query needs to be dynamic. In the Query Composer, ensure the `id` is selected and click the `$` next to it. This informs the query that the `id` will be variable/dynamic. Next, you must tell it what kind of `id` you will pass it. Select `idType` and select SLUG from the dropdown. ![Dynamic Slug in query composer](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F4e483d04-bdfb-4f7b-8a50-b5ae741e88fd.png&width=768&dpr=4&quality=100&sign=4007e20b&sv=2) Dynamic Slug in query composer Now the query says, "I will get X, Y, and Z fields of the Post whose slug is equal to some slug you'll give me later". Copy the query from WordPress and paste it into the query field in Webstudio. **Variables** Next, it's time to inform the query what the slug will be. When defining the dynamic page, the dynamic part (the parameter) was `slug`. The value of `slug` will be whatever URL is currently viewed. In the variables field of the Resource, expand Expression Editor by clicking the "+". In there, type or paste in the following: Copy { id: system.params.slug } Here's what that looks like: ![Variable in Webstudio to fetch WordPress Post](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F0a19498d-ebd6-43ed-a519-c66fd8d7b8a9.png&width=768&dpr=4&quality=100&sign=3398a379&sv=2) Variable in Webstudio to fetch WordPress Post This is where the magic happens. It says, "Query, I know you are looking for an id, so use the value of the current slug". Whatever value is in the URL will be used to fetch data from WordPress. **Add a test URL** The actual value of the slug will be what's in the URL, but in the editor, you can provide a test value by going to the [Address Bar](https://docs.webstudio.is/university/foundations/cms#address-bar) and entering a slug from one of your WordPress Posts. ![Test WordPress slug/param in Address Bar](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fc8e9f29f-8d15-45fd-acd6-f3eedf791dc6.png&width=768&dpr=4&quality=100&sign=c3b7679a&sv=2) Test WordPress slug/param in Address Bar Once entered, you can inspect the variable you created to ensure Post data is returned. ![Response from headless WordPress](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F9c264960-d13c-4e76-baf5-44e88801bc13.png&width=768&dpr=4&quality=100&sign=c14242b9&sv=2) Response from headless WordPress If you are not seeing data, then there is likely an issue with mapping the value from your dynamic path to the dynamic URL. If you see an error, read it and try to correct it. Now that you are getting data, you can move to the next step, mapping or "binding" the data to the various components within Webstudio. ### [](https://docs.webstudio.is/university/integrations/wordpress#id-4-bind-wordpress-data-to-webstudio-components) **4 Bind WordPress data to Webstudio components** [Binding](https://docs.webstudio.is/university/foundations/expression-editor#binding) enables you to connect or map values from the WordPress response (aka the WordPress data) to the Webstudio components to build your frontend. **Bind data to components** First, add the various [Components](https://docs.webstudio.is/university/core-components) you want to your page. For each Component, go to Settings and the field to which you want to attach an external value and click the "+" to open [Bindings](https://docs.webstudio.is/university/foundations/expression-editor#expressions) . In the [Expression Editor](https://docs.webstudio.is/university/foundations/expression-editor) , click or type the variable you created previously. From there, "drill down" or access the child fields within the variable by typing a period and selecting the field (repeat until you get the value). Here is what that looks like: ![Headless WordPress data bound to the heading component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F1de33845-8e71-49c7-846f-d7bf17cc62e5.png&width=768&dpr=4&quality=100&sign=e663b032&sv=2) Headless WordPress data bound to the heading component Continue this process for all components. All fields in Webstudio can have WordPress fields bound to them, including page fields like Title. There are two particular Components to make note of: 1. [**Content Embed**](https://docs.webstudio.is/university/core-components/content-embed) – Use this to bind your WordPress content that contains rich text. Content Embed enables you to style the various elements of the rich text using the style panel. ![Content Embed with H2 styled using Tokens](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Ff2540183-10ce-4ed1-a140-402a84a28a94.png&width=768&dpr=4&quality=100&sign=dc3bbe88&sv=2) Content Embed with H2 styled using Tokens 2. **Time** – Use this to format incoming dates/times. When stored in the WordPress backend, they are "ugly," this Component will make them human-readable. ![Formatted published date using Webstudio time component](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F2b46b9a8-cdb0-47e8-9c52-3d33df847bef.png&width=768&dpr=4&quality=100&sign=1781ed39&sv=2) Formatted published date using Webstudio time component **Bind data to Page Settings** Here are the Page Settings bound to WordPress values: ![Headless WordPress data bound to Webstudio page settings](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fd326b624-1c87-4ac3-bac1-d291a6c82fec.png&width=768&dpr=4&quality=100&sign=86621ae8&sv=2) Headless WordPress data bound to Webstudio page settings There is one more place to bind: the status code. You want to ensure that if there is no matching value within WordPress, the page returns a 404, not a 200. To do this, go to Page Settings > Status Code > "+" and enter an expression. The format will be like this: Copy ? 200 : 404 For this example, it looks like this: ![Dynamic status code](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F31e0d23f-9915-4bef-994b-452d8f957137.png&width=768&dpr=4&quality=100&sign=84efb44e&sv=2) Dynamic status code In plain text, the expression says, "If the WordPress value exists, return 200 (found); otherwise, return 404 (not found). Well done! So far, you have successfully created a Dynamic Page, fetched the data from WordPress, and bound the data to Webstudio Components. In the following steps, these concepts will be used to create an overview page with your various Posts on one page and a sitemap for search engines. ### [](https://docs.webstudio.is/university/integrations/wordpress#id-5-create-an-overview-page) **5 Create an overview page** In this step, you will create a page that lists the various WordPress Posts and links them so that users can click on them and land on the Dynamic Page containing the proper data. ![Posts showing from Headless WordPress on Webstudio](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Fdbc24bba-597f-444a-8f07-2da835baf45e.png&width=768&dpr=4&quality=100&sign=d73b6a19&sv=2) Posts showing from Headless WordPress on Webstudio **Create a new page** Create a new page and ideally give it the base path of the Dynamic Page. So, if the Dynamic Page uses `/blogs/:slug`, this new page should use `/blogs`. **Create a new Resource variable** Create a new variable, same as last time, except there will not be any variables. It should always return a list of Posts. To do this, create a new query using the Query Composer and select Posts (plural) this time. Select the fields you want to include, such as title, featured image, and slug. Test the query and ensure you receive a list of Posts within the inspect tool. **Setup a Collection** Add the **Collection** component, which will iterate over a list of the Posts. Once you design what a Post should look like, it will be replicated for each Post. You need to bind the list of records to the Collection. Here's what that looks like: ![Collection for WordPress Posts](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2Ff5449704-e78c-4a4a-adb2-212fa59162ad.png&width=768&dpr=4&quality=100&sign=fadf515&sv=2) Collection for WordPress Posts The Collection has a default variable containing the value of the current iteration's record. The default name is "Collection Item"; however, you can rename it to "WordPress Post" for clarity. **Bind data to components** Next, bind the various values to the components, as you learned previously. You'll need to do something special for the link: prefix the slug with the base path. Here is what that looks like in this example: ![Dynamic link](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2Fimages.surferseo.art%2F4cd48715-f2b1-40f9-8d67-2ab180068eda.png&width=768&dpr=4&quality=100&sign=912dcc6b&sv=2) Dynamic link Note that the static value is in quotes ("/blogs/"), and there is a "+" to glue it together with the dynamic slug value. This page is great for letting users browse your Posts, but you need to create a sitemap for search engines. ### [](https://docs.webstudio.is/university/integrations/wordpress#id-6-create-a-sitemap) **6 Create a sitemap** Webstudio enables you to visually build a dynamic sitemap using **Collections** and [**XML Nodes**](https://docs.webstudio.is/university/core-components/xml-node) . Here's how to do it: 1. Go to Marketplace > Pages > CMS Sitemap > and click Sitemap. This will insert a template sitemap as a new page. 2. Add a new Resource that fetches your slugs and, optionally, the record's updated time to inform search engines when the last edit was made. 3. Bind those values. Refer to [this video chapter](https://www.youtube.com/watch?v=QC6Y7BHduLw&t=975s) for a full demonstration of building a sitemap. [](https://docs.webstudio.is/university/integrations/wordpress#start-using-webstudio-as-a-frontend-for-your-headless-wordpress-site) **Start using Webstudio as a frontend for your headless WordPress site** ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ In this headless WordPress tutorial, you learned how to set up a WordPress site to be headless, use GraphQL to fetch data, and build a frontend using [Webstudio](https://apps.webstudio.is/dashboard) (no need for React, Vue, Next.js or any other JavaScript frameworks). Additional info: * The flexibility of Resources enables you to fetch exactly what you need from WordPress and even multiple content management systems/databases (e.g., Airtable for team members and WordPress for blog posts). * Webstudio does not charge by site, meaning you can build frontends for many headless WordPress sites. * Content creation/editing continues to exist in your WordPress dashboard. There is no need to republish Webstudio upon publishing/updating WordPress content. This is because Webstudio does _not_ use static site generation – it's dynamic. [](https://docs.webstudio.is/university/integrations/wordpress#pagination) Pagination ------------------------------------------------------------------------------------------ The demo did not show how to paginate your WordPress content, so this section will show you. Use pagination only if necessary. Users and search engines prefer minimal navigation. First, start by going to the Marketplace > WordPress > and insert the Posts page. The Posts page contains: * A query ready for pagination * A `Posts Per Page` variable on the body that lets you define how many posts should display * Accessibility and SEO-friendly pagination that will display if the amount of posts in WordPress exceeds the `Posts Per Page` number * First/Next buttons with conditional display to hide the links if at the beginning or end This method of pagination relies on [cursors](https://www.wpgraphql.com/2020/03/26/forward-and-backward-pagination-with-wpgraphql) , which define the last ID on the page, letting you fetch the next batch of posts after that ID when navigating. The template has intentionally left out a previous button because going backward causes two URLs per page, such as `?after=abc` and `?before=ghi`, which is not good for SEO. Users can, however, use their browser back feature. If you want to use an alternative method for pagination, check out the [WP GraphQL Offset plugin](https://github.com/valu-digital/wp-graphql-offset-pagination) . This method uses an offset to skip posts depending on which page you are on. It also enables the use of a previous button if that's important to you. The [Hygraph](https://docs.webstudio.is/university/integrations/hygraph) template uses this method to give you an idea of how to implement it. ### [](https://docs.webstudio.is/university/integrations/wordpress#converting-your-existing-query) Converting your existing query If you have an existing query, it will need to be modified if it uses `posts.nodes`, and not `posts.edges.node`. If your query looks like this: Copy query Posts { ... posts { nodes { title(format: RENDERED) slug ... } } } It will now look like this: Copy query Posts($search: String = "", $first: Int, $after: String) { posts(where: {search: $search}, first: $first, after: $after) { pageInfo { hasNextPage hasPreviousPage startCursor endCursor } edges { cursor, node { title(format: RENDERED) slug ... } } } } The contents of `posts.edges.node` in the second query are exactly the same as the contents of `posts.nodes` from the first query. Therefore, you can copy the contents of `posts.nodes` and paste them into `posts.edges.node`. The rest of the second query provides context about whether there are previous or next pages and introduces filters to fetch the next batch of content. If you already setup a page using `posts.nodes`, you will need to rebind the values on your page because the Resource response will be different. For example, `Post Item.node.title` instead of `Post Item.title`. [PreviousHow to build a frontend for Hygraph using Webstudio](https://docs.webstudio.is/university/integrations/hygraph) [NextHow to integrate a Notion database with Webstudio](https://docs.webstudio.is/university/integrations/notion) Last updated 1 year ago Was this helpful? --- # Craft | Webstudio Documentation Contribute changes to Craft by commenting on this [GitHub Discussion](https://wstd.us/discuss-craft) . When building highly maintainable and scaleable websites, some conventions prove to work well. Plus, when collaborating with team members and other creators, a standardized system results in a smoother learning curve and easier sharing, such as through the [Marketplace](https://docs.webstudio.is/university/marketplace) . **Craft contains a set of standards, CSS variables, and Tokens that make building websites fast, maintainable, and reusable.** It also enables sharing Projects without mixing different naming conventions. While Craft is not mandatory, it’s the recommended way to build in Webstudio. Here are the standards and guidelines of Craft. [](https://docs.webstudio.is/university/craft#css-variables) CSS Variables ------------------------------------------------------------------------------- Craft uses [Open Props](https://open-props.style/) , an MIT-licensed library of CSS variables that helps accelerate adaptive and consistent design. In addition to the Open Props variables, Craft includes the following CSS variables: Copy --foreground-primary --foreground-secondary --foreground-accent --foreground-muted --foreground-border --background-primary --background-secondary --background-accent --background-card --gap-xs --gap-s --gap-m --gap-l --focus-color --focus-width --focus-offset --duration-default --easing-default Insert Craft from the Marketplace, and it will add the CSS variables to your Global Root. To match your branding, you can customize the values, such as colors, gradients, and more. You can also add custom variables. CSS Props doesn't impose style opinions on your site. This library contains variables like `--size-4` and `--gradient-5`. Then, it's up to you to customize their values or use the defaults. Type Rule Examples Size and color palettes Use numbers. `--size-4` `--blue-10` [](https://docs.webstudio.is/university/craft#tokens) Tokens ----------------------------------------------------------------- Type Casing Examples Purpose Help Utility Kebab `margin-auto` `container` `button` Used for layout and styling purposes without conveying any inherent meaning about the content it contains. Semantic Title `Card` `Pricing Table` Conveys meaning and context about the content it contains. Semantic Child Title Indicates that the Token is a child of a parent semantic Token. What should we do here? Some examples/options: `Card Header` `Card - Header` `Card / Header`. What happens if it’s multiple levels deep? Maybe we only reference the top-most Token such as `Card` or the most relevant? Variant Kebab `is-button-secondary` `is-pricing-table-small` This indicates that the Token is intended to be used with another Token. For example, `button` is the “base” Token that carries the default styles and `is-button-secondary` uses some of the base styles and modifies or adds others. The variant should never be used without the base. Size Kebab `button-x-small|small|medium|large` Appending a size modifier to the end of a Token. “T-shirt” sizing is the accepted naming convention. Abbreviations are allowed here. ### [](https://docs.webstudio.is/university/craft#when-to-use-tokens-vs-local) When to use Tokens vs Local? **Use** [**Tokens**](https://docs.webstudio.is/university/craft#tokens) **for the following scenarios:** * There are multiple styles and at least one of which has many options for the value (e.g., size and colors) as opposed to something like text alignment. * When there is a common use case that takes more time to select Local and apply manually than using a Token, such as setting the margin left and right to auto. **Don't use Tokens for the following scenarios:** * When you can click an item in the Style Panel, such as text alignment or display flex. * When there is only one style (use [CSS variables](https://docs.webstudio.is/university/craft#css-variables) ). **More info:** Tokens are great for reusing styles, so you don't have to remember values. They shouldn't be used for simple tasks like centering text since that can be done with a button, and when switching between breakpoints, you may want to adjust the alignment. However, Tokens can be helpful for flex layouts, for example, when they fall into this rule: > Common use case that takes more time to select Local and apply manually than using a Token. For example, it's common to use a flex wrapper to add a gap to the content, which typically requires setting display to flex, direction to vertical, and adding a gap. It's faster to create a utility token like `flex-gap-small` that handles all this in one go. [](https://docs.webstudio.is/university/craft#internal-style-guide) Internal Style Guide --------------------------------------------------------------------------------------------- The page on the site is used to display and design the various HTML elements like headings, components, brand elements, and more. Type Rule Casing Examples Purpose Tokens (for style guide) Prefix with double underscore. Kebab `__badge` `__outline` A convention for indicating that the Token is merely for the purpose of dressing up the style guide and _not_ to be used on the actual site. Page Name Style Guide Title [](https://docs.webstudio.is/university/craft#navigator) Navigator ----------------------------------------------------------------------- * **Casing**: Title Item Rule Examples Why Labels If using a custom name, use semantic names. `Page Wrapper` `Cards` `Team Member` Default components are title case and the navigator is for humans to understand the structure and purpose. Box, Slot, HTML Embed, and Collection * Always create a custom name. * For Boxes, avoid layout-oriented naming such as 1/2 or left. Instead, use a name based on the content like Image Wrapper. `Wrapper` `Card` `Animation Script` The purpose of these components are not clear without a custom name. Parent > Child Use plural for parent and singular for children when they are related. `Cards Card Card` Helps indicate the relationship of instances. Sections Prefix Boxes that have the section tag with "Section ". `Section Hero` Indicatees where the section is at without digging into settings. ### [](https://docs.webstudio.is/university/craft#structure) Structure * Page Wrapper * Slot * Global Styles * Nav * Main * Section (generally, but not always) * Container * Slot * Footer [](https://docs.webstudio.is/university/craft#misc) Misc ------------------------------------------------------------- ### [](https://docs.webstudio.is/university/craft#abbreviations) Abbreviations Avoid abbreviations unless otherwise noted. Universal clarity is a priority, and abbreviations may be counterproductive. ### [](https://docs.webstudio.is/university/craft#html-embed) HTML Embed * 1 instance = 1 purpose * Start the code with a comment about its purpose [](https://docs.webstudio.is/university/craft#changelog) Changelog ----------------------------------------------------------------------- ### [](https://docs.webstudio.is/university/craft#id-1.2) 1.2 * Changed `container` token to use flex for proper compatibility with Craft Library. To adopt this change, go to any container token and set display flex, flex-direction column, and gap to `var(--gap-m)` . Any containers that need a horizontal layout will need to be manually set on Local, such as the style guide navigation. ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FOojGOb0Yi5CErhKkzuFy%252F1.2.png%3Falt%3Dmedia%26token%3D833d65ea-11c6-48d3-afaf-efce5e5095a7&width=300&dpr=4&quality=100&sign=1c546f72&sv=2) ### [](https://docs.webstudio.is/university/craft#id-1.1) 1.1 * Added `—spacing-default`. Common use cases include left/right padding on containers and card padding. Improves consistency within the site and enables marketplace sections to adapt to our default spacing rather than introducing random spacing that deviates from the preferred. ### [](https://docs.webstudio.is/university/craft#id-1.0) 1.0 * Release [](https://docs.webstudio.is/university/craft#craft-library) Craft Library ------------------------------------------------------------------------------- Craft Library is a collection of pre-built section templates built to Craft standards, available in the [Marketplace](https://docs.webstudio.is/university/marketplace) . ![](https://docs.webstudio.is/~gitbook/image?url=https%3A%2F%2F330243581-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FTep4EGj6hSC54ozHujyK%252Fuploads%252FJ1zBWFqN1iM6WdqcR4KM%252Fcraft-library.png%3Falt%3Dmedia%26token%3D63fb23a8-51b8-4179-a1d8-a8fc71ec8091&width=768&dpr=4&quality=100&sign=e72f2426&sv=2) Craft Library in the Marketplace Templates contain no hardcoded values such as colors or sizes. They rely entirely on [Craft CSS variables](https://docs.webstudio.is/university/craft#css-variables) , so each section adapts to your site’s design system. The library speeds up development while keeping your project clean and fully customizable. This post demonstrates Craft Library getting inserted on two completely different sites: [PreviousHow to integrate Flotiq with Webstudio](https://docs.webstudio.is/university/integrations/flotiq) [NextContributing for Designers](https://docs.webstudio.is/contributing/contributing-for-designers) Last updated 5 months ago Was this helpful? --- # Email Protection | Cloudflare Please enable cookies. Email Protection ================ You are unable to access this email address docs.webstudio.is ------------------------------------------------------------- The website from which you got to this page is protected by Cloudflare. Email addresses on that page have been hidden in order to keep them from being accessed by malicious bots. **You must enable Javascript in your browser in order to decode the e-mail address**. If you have a website and are interested in protecting it in a similar way, you can [sign up for Cloudflare](https://www.cloudflare.com/sign-up?utm_source=email_protection) . * [How does Cloudflare protect email addresses on website from spammers?](https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/) * [Can I sign up for Cloudflare?](https://developers.cloudflare.com/fundamentals/setup/account/create-account/) Cloudflare Ray ID: **9812e30b1a9582c9** • Your IP: Click to reveal 54.237.218.47 • Performance & security by [Cloudflare](https://www.cloudflare.com/5xx-error-landing) ---