{"version":1,"pages":[{"id":"HVtpisSC4bN1NeFqC98v","title":"Welcome","pathname":"/","siteSpaceId":"sitesp_CHe0S","emoji":"1f44b","description":"New to Webstudio?","breadcrumbs":[{"label":"Basics"}]},{"id":"gw12qWhux3q4NxTSwYME","title":"Intro","pathname":"/basics/intro","siteSpaceId":"sitesp_CHe0S","emoji":"1f525","description":"","breadcrumbs":[{"label":"Basics"}]},{"id":"DSnM361MrQuNrZ7bTZeZ","title":"Building your first site","pathname":"/basics/building-your-first-site","siteSpaceId":"sitesp_CHe0S","emoji":"1f393","description":"","breadcrumbs":[{"label":"Basics"}]},{"id":"nxjnnbnUqfxga4HpKSK4","title":"Courses","pathname":"/basics/courses","siteSpaceId":"sitesp_CHe0S","emoji":"1f913","description":"Community-made courses","breadcrumbs":[{"label":"Basics"}]},{"id":"a8zU2j4OtceZ1tDkngsa","title":"Roadmap & Links","pathname":"/basics/roadmap-and-links","siteSpaceId":"sitesp_CHe0S","emoji":"1f517","description":"","breadcrumbs":[{"label":"Basics"}]},{"id":"tw1M9XIBhalXZrLNN3zp","title":"FAQs","pathname":"/basics/faq","siteSpaceId":"sitesp_CHe0S","emoji":"2753","description":"","breadcrumbs":[{"label":"Basics"}]},{"id":"SfKu4dh5vMVhYKIXk2hN","title":"Foundations","pathname":"/university/foundations","siteSpaceId":"sitesp_CHe0S","emoji":"269b","description":"","breadcrumbs":[{"label":"university"}]},{"id":"W6NLQ8xE131ne2GknDks","title":"Dashboard","pathname":"/university/foundations/dashboard","siteSpaceId":"sitesp_CHe0S","emoji":"1f3e0","description":"The Dashboard is your central hub for managing all your Webstudio projects, featuring workspaces, search, organization with tags, and multiple view options.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"gWk5LWLMojqZypn1DiPC","title":"Anatomy of the Webstudio builder","pathname":"/university/foundations/anatomy-of-the-webstudio-builder","siteSpaceId":"sitesp_CHe0S","emoji":"1f6e0","description":"This guide discusses the anatomy of the Webstudio Builder, an all-in-one visual development platform that allows you to build advanced websites.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"5occG3clyMf8nVb0BCH5","title":"Navigator","pathname":"/university/foundations/navigator","siteSpaceId":"sitesp_CHe0S","emoji":"1f5fa","description":"Use the Navigator to view, select, and organize instances on your page.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"37MML0SpSvAHMjHAZLov","title":"Layout & Flexbox","pathname":"/university/foundations/layout-and-flexbox","siteSpaceId":"sitesp_CHe0S","emoji":"1f4d0","description":"Learn how to create multi-column layouts and control element positioning using Flexbox in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"jthHJ1KUeIqIKesR8Tga","title":"Layout & Grid","pathname":"/university/foundations/css-grid","siteSpaceId":"sitesp_CHe0S","emoji":"1f4d0","description":"Learn how to create two-dimensional layouts using CSS Grid in Webstudio — define columns, rows, named areas, and position child elements visually.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"SMjeuYTVOj3kddYANpd5","title":"Responsive design","pathname":"/university/foundations/responsive-design","siteSpaceId":"sitesp_CHe0S","icon":"mobile-screen","emoji":"1f4f1","description":"Learn how breakpoints work in Webstudio to create responsive designs that adapt to any screen size.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"sNGpg1SCNixEJP8cmkTw","title":"Breakpoints","pathname":"/university/foundations/breakpoints","siteSpaceId":"sitesp_CHe0S","emoji":"1f4f1","description":"Add, edit, and manage breakpoints to control how your site responds to different screen sizes and conditions.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"uYZ35ePvw8AH9gDOcQXO","title":"CSS variables","pathname":"/university/foundations/css-variables","siteSpaceId":"sitesp_CHe0S","emoji":"1f9f1","description":"CSS variables allow you to attach a value to a variable and reuse that variable throughout the Style Panel inputs.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"bZ5bEQZSTGdtoAnBB8DA","title":"Design tokens","pathname":"/university/foundations/design-tokens","siteSpaceId":"sitesp_CHe0S","emoji":"1f58c","description":"Tokens package reusable style declarations that stay synchronized across every instance where they are applied.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"3lZFwO3MSNLaJenrCA4c","title":"Style panel","pathname":"/university/foundations/style-panel","siteSpaceId":"sitesp_CHe0S","emoji":"1f3a8","description":"Use the Style Panel to apply CSS styles to any instance on your page.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"LaJk0Imqj9575DHZNdCJ","title":"States and selectors","pathname":"/university/foundations/states-and-selectors","siteSpaceId":"sitesp_CHe0S","emoji":"1f3af","description":"Style elements differently based on user interaction (hover, focus, active) or target virtual parts of an element (::before, ::after) using states and selectors.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"zrAAfdIUeGKRarVi8Ulx","title":"Data variables","pathname":"/university/foundations/variables","siteSpaceId":"sitesp_CHe0S","emoji":"1f521","description":"Data variables enable the definition and use of a value throughout the page.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"rOfjNC98NZMAsf6wSZzS","title":"Expression editor","pathname":"/university/foundations/expression-editor","siteSpaceId":"sitesp_CHe0S","emoji":"2795","description":"Create logical expressions directly in the UI, enabling conditional display, fallback values, concatenation, and more.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"Xtj8Z4w7V2dCH5oQk7QX","title":"Custom classes & attributes","pathname":"/university/foundations/custom-classes-and-attributes","siteSpaceId":"sitesp_CHe0S","icon":"code","emoji":"1f3a8","description":"custom classes, IDs, and data attributes allow you to target elements with custom code, animation libraries, and external scripts.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"X2ihE0wV5DYBQxIbikEc","title":"Transforms","pathname":"/university/foundations/transforms","siteSpaceId":"sitesp_CHe0S","icon":"arrows-rotate","emoji":"1f504","description":"CSS Transforms enable you to rotate, scale, skew, and translate elements to create dynamic visual effects.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"11SC2sKf8QtsO6d5BRt8","title":"Animations","pathname":"/university/foundations/animations","siteSpaceId":"sitesp_CHe0S","icon":"arrow-up-big-small","emoji":"1f3ac","description":"Scroll-Driven animations are currently the main focus of Webstudio animations.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"NWE7BTYGPm7c6owvJAJf","title":"CMS","pathname":"/university/foundations/cms","siteSpaceId":"sitesp_CHe0S","emoji":"1f4be","description":"Connect to your existing CMS or the one that works best for you.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"jDuiGT8K6rtNrl7DsVZf","title":"Reusability & maintainability","pathname":"/university/foundations/reusability","siteSpaceId":"sitesp_CHe0S","emoji":"267b","description":"","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"2tP4arpLdkZdYCxzk0Pq","title":"Copy-Paste","pathname":"/university/foundations/copy-paste","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Webstudio supports copy-pasting within the platform and from external sources.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"gpF7j4xSpL3Rf3j8uKiR","title":"CSS","pathname":"/university/foundations/copy-paste/css","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Paste CSS into Webstudio, and it'll be translated to the various fields in the Style Panel.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"NQakCzy6YxVpC7thH065","title":"HTML with CSS","pathname":"/university/foundations/copy-paste/html-with-css","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Paste HTML with style blocks and convert CSS classes into Webstudio styles.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"EAQzIEHMn5DFGmayQNbU","title":"HTML with Tailwind","pathname":"/university/foundations/copy-paste/html-with-tailwind","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Paste HTML with Tailwind CSS classes and convert utilities into Webstudio styles.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"Dr0lYHGPyBgrdNEeFvgW","title":"Markdown","pathname":"/university/foundations/copy-paste/markdown","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Pasting Markdown automatically adds the respective components.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"sv5Bkjd5wjEKzqtQ8kvd","title":"Webflow","pathname":"/university/foundations/copy-paste/webflow","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Webstudio supports pasting Webflow Elements, converting them from Webflow format to Webstudio format.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"NngIcOJf3CW992YNz4Sy","title":"SVG","pathname":"/university/foundations/copy-paste/svg","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Paste SVG code into Webstudio as native SVG components.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"wOMjwstO9dAIN6WF6SNu","title":"Referenced Images","pathname":"/university/foundations/copy-paste/images","siteSpaceId":"sitesp_CHe0S","emoji":"2194","description":"Understand how referenced images are handled when pasting content.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Copy-Paste","emoji":"2194"}]},{"id":"wz3tgGLzRzYbcpeG6cHy","title":"Commands & search","pathname":"/university/foundations/commands-and-search","siteSpaceId":"sitesp_CHe0S","icon":"arrow-turn-down-left","emoji":"1f50d","description":"The Commands & search Panel is a centralized place to navigate the builder and perform actions such as switching pages and adding components — all with the keyboard.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"s7wrX3GXWXDmhB1BtXx5","title":"Assets","pathname":"/university/foundations/assets","siteSpaceId":"sitesp_CHe0S","emoji":"1f5c2","description":"Upload and manage images, fonts, and other files used in your project.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"GwX9OpOEr7gQqvaBq2wz","title":"Content Engine","pathname":"/university/foundations/content-engine","siteSpaceId":"sitesp_CHe0S","emoji":"1f4da","description":"Create a file-based blog with Markdown or MDX, Assets queries, and dynamic pages.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"N0zlsCGMiOOv3QBocQP8","title":"Content Engine reference","pathname":"/university/foundations/content-engine/content-engine-reference","siteSpaceId":"sitesp_CHe0S","description":"Query Markdown, MDX, and JSON Assets with the Content Engine.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"},{"label":"Content Engine","emoji":"1f4da"}]},{"id":"IXTuflumgHpMapfKa1ZT","title":"SEO settings","pathname":"/university/foundations/seo-settings","siteSpaceId":"sitesp_CHe0S","emoji":"1f3af","description":"Webstudio provides comprehensive SEO features.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"rfoQY73YRQ9zLpVSXJZW","title":"Performance","pathname":"/university/foundations/performance","siteSpaceId":"sitesp_CHe0S","emoji":"26a1","description":"Achieve perfect Lighthouse scores with Webstudio's built-in optimizations and best practices.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"uqSIHA6qTMB3tdBV8Tgb","title":"Shortcuts","pathname":"/university/foundations/shortcuts","siteSpaceId":"sitesp_CHe0S","icon":"command","emoji":"2328","description":"The list of keyboard shortcuts to build in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"37qyBnrPiThtIGe307Lo","title":"Page settings","pathname":"/university/foundations/page-settings","siteSpaceId":"sitesp_CHe0S","emoji":"1f4c4","description":"Configure per-page settings such as path, SEO, authentication, redirects, and metadata.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"DcY0pVanQxbflhoplLSg","title":"Page templates","pathname":"/university/foundations/page-templates","siteSpaceId":"sitesp_CHe0S","emoji":"1f4c4","description":"Create reusable page blueprints inside a project.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"Fle5lPeggLTWPlu0RYPf","title":"Project settings","pathname":"/university/foundations/project-settings","siteSpaceId":"sitesp_CHe0S","emoji":"2699","description":"Set project-wide configuration, including redirects, authentication, and publishing options.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"o7wRtKAe7k78J7XeVdD7","title":"Modes","pathname":"/university/foundations/modes","siteSpaceId":"sitesp_CHe0S","icon":"paintbrush-fine","description":"Modes change the Builder’s behavior, such as previewing your site without distractions.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"kqo6OJJGoFd6tYSEi7lI","title":"Share links","pathname":"/university/foundations/share-links","siteSpaceId":"sitesp_CHe0S","icon":"clone","emoji":"1f517","description":"Share links enable you to share your Webstudio Project with other people, set permissions, and create cloneable project copies.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"HO5k2SucEYS6ecG6TUlw","title":"Publishing & custom domains","pathname":"/university/foundations/publishing-and-custom-domains","siteSpaceId":"sitesp_CHe0S","emoji":"1f310","description":"Learn how to connect a custom domain to your Project.","breadcrumbs":[{"label":"university"},{"label":"Foundations","emoji":"269b"}]},{"id":"FB2rVGXCaiQmkeNhPk48","title":"Core Components","pathname":"/university/core-components","siteSpaceId":"sitesp_CHe0S","emoji":"1f9e9","description":"","breadcrumbs":[{"label":"university"}]},{"id":"Sk7hzOrDaMiFuKkkzo4I","title":"Element","pathname":"/university/core-components/element","siteSpaceId":"sitesp_CHe0S","emoji":"1f4e6","description":"The Element component is a flexible container for building layouts in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"TZ7hcLgqE8jU8bD6uZ6m","title":"Link","pathname":"/university/core-components/link","siteSpaceId":"sitesp_CHe0S","emoji":"1f517","description":"Link lets you link to websites, pages, emails, and more from text, images, and more.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"N9DKWseeQcjmwIK9xRYa","title":"Slot","pathname":"/university/core-components/slot","siteSpaceId":"sitesp_CHe0S","emoji":"1f532","description":"Slots are containers for anything that you want to re-use across your site, like a nav menu.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"lM2LMMBJ130cb38sUqSI","title":"Separator","pathname":"/university/core-components/separator","siteSpaceId":"sitesp_CHe0S","emoji":"2796","description":"Add visual dividers between content sections in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"XFm8GHdex2OUxUA2lKnK","title":"Text","pathname":"/university/core-components/text","siteSpaceId":"sitesp_CHe0S","emoji":"1f4dd","description":"Add and style text content in Webstudio with the Text component.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"wFg7U52qiJJVFSwun6ok","title":"Heading","pathname":"/university/core-components/heading","siteSpaceId":"sitesp_CHe0S","emoji":"1f524","description":"Add headings (H1-H6) to structure content in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"OcJl23ZxHHhv5cDspnoH","title":"Paragraph","pathname":"/university/core-components/paragraph","siteSpaceId":"sitesp_CHe0S","emoji":"1f4c4","description":"Add paragraph text blocks to your Webstudio pages.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"fe3CHNggzMoUS0jCH8k1","title":"Inline Text","pathname":"/university/core-components/inline-text","siteSpaceId":"sitesp_CHe0S","emoji":"270f","description":"Style inline text spans within paragraphs in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"nmE51aHGEzWPAY4dcNG5","title":"Blockquote","pathname":"/university/core-components/blockquote","siteSpaceId":"sitesp_CHe0S","emoji":"1f4ac","description":"Display quotations with the Blockquote component in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"aX5wNZ2Wfj3REenltVbt","title":"Alert","pathname":"/university/core-components/alert","siteSpaceId":"sitesp_CHe0S","emoji":"26a0","description":"Highlight notes, tips, warnings, and other important information with the Alert component.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"o5NMv3wcYYITlzpTVZhN","title":"Code Text","pathname":"/university/core-components/code-text","siteSpaceId":"sitesp_CHe0S","emoji":"1f4c4","description":"Display source code with language-aware syntax highlighting.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"HwAtOOccOx1wYGY7bh7h","title":"Form","pathname":"/university/core-components/form","siteSpaceId":"sitesp_CHe0S","emoji":"270d","description":"Forms are used for searches, filters, and custom functionality.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"BOLzVr7aUHMk0zUSkMl7","title":"Webhook Form","pathname":"/university/core-components/webhook-form","siteSpaceId":"sitesp_CHe0S","emoji":"270d","description":"Webhook Forms enable form submissions to get sent to an email address and optionally third-party services like Airtable, n8n, or Zapier.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"Oz6BOSZJhZpx64TpG0Ml","title":"Button","pathname":"/university/core-components/button","siteSpaceId":"sitesp_CHe0S","emoji":"1f518","description":"Add clickable buttons to your Webstudio site with the Button component.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"WzhGVdLng4qXTu9snXnX","title":"Label","pathname":"/university/core-components/label","siteSpaceId":"sitesp_CHe0S","emoji":"1f3f7","description":"Add accessible labels to form inputs in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"06fXxOPXdChiFDydmTZo","title":"Input","pathname":"/university/core-components/input","siteSpaceId":"sitesp_CHe0S","emoji":"1f4dd","description":"Add text input fields to forms in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"JgU3Dgc7kIXClZ6W4sKN","title":"Text Area","pathname":"/university/core-components/textarea","siteSpaceId":"sitesp_CHe0S","emoji":"1f4dd","description":"Add multi-line text input fields to forms in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"LGKAegoKjDzSgR3mpzek","title":"Select","pathname":"/university/core-components/select","siteSpaceId":"sitesp_CHe0S","emoji":"1f4cb","description":"Add dropdown select inputs to forms in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"6xmgZiWICewvgFF1iuSu","title":"Checkbox","pathname":"/university/core-components/checkbox","siteSpaceId":"sitesp_CHe0S","emoji":"2611","description":"Add checkbox inputs to forms in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"4A3Vx4JveHaTeVS26BFp","title":"Radio Button","pathname":"/university/core-components/radio-button","siteSpaceId":"sitesp_CHe0S","emoji":"1f518","description":"Add radio button inputs for single-choice selections in Webstudio forms.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"PhkOpX8lc9hlJ0GnCNQa","title":"Image","pathname":"/university/core-components/image","siteSpaceId":"sitesp_CHe0S","emoji":"1f5bc","description":"In this article, we will learn how to render optimized, responsive images for a site using the Image Component in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"cMoGj8hFEzE6k3zhLNGv","title":"Video","pathname":"/university/core-components/video","siteSpaceId":"sitesp_CHe0S","emoji":"1f3ac","description":"Embed self-hosted videos in Webstudio pages.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"dqNIXEVNYE2dOJos7WOS","title":"Vimeo","pathname":"/university/core-components/vimeo","siteSpaceId":"sitesp_CHe0S","emoji":"23ef","description":"Embed Vimeo videos in your Webstudio pages.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"9igw0rr0C6wHbPBq0ThA","title":"Vimeo Background Video","pathname":"/university/core-components/vimeo-background-video","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to use the Vimeo Component as a background video on your site.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"0hvPWmXMoJEBwuZmOBAS","title":"YouTube","pathname":"/university/core-components/youtube","siteSpaceId":"sitesp_CHe0S","icon":"youtube","emoji":"25b6","description":"The YouTube component provides extensive options to embed YouTube videos and playlists on your site.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"upvKD5ydTvwgUhafJuAW","title":"Collection","pathname":"/university/core-components/collection","siteSpaceId":"sitesp_CHe0S","emoji":"1f4be","description":"Use Collection to iterate over data and repeat the same structure but with different data for each iteration.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"2pY5IGDefvOgBTofmVWY","title":"Content Embed","pathname":"/university/core-components/content-embed","siteSpaceId":"sitesp_CHe0S","emoji":"1fa9c","description":"Content Embed allows styling HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"kuK1zd7s0VXAsx4PszQD","title":"Markdown Embed","pathname":"/university/core-components/markdown-embed","siteSpaceId":"sitesp_CHe0S","emoji":"1fa9c","description":"Markdown Embed converts Markdown to HTML and enables styling it.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"U0d7kLBu3b0nNI9hCxKk","title":"Content Block","pathname":"/university/core-components/content-block","siteSpaceId":"sitesp_CHe0S","icon":"pen-to-square","description":"Content Block designates regions on the page where pre-styled instances can be inserted in Content mode.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"cpsvtS3mPDmYsoEOnQ6Z","title":"List","pathname":"/university/core-components/list","siteSpaceId":"sitesp_CHe0S","emoji":"1f4c3","description":"The List Component is used to create lists that structure and organize content within a webpage. You can create a list in your Webstudio project with the “List” and “List Item” Components.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"rHKKkqfgRmjo89BY2EvK","title":"HTML Embed","pathname":"/university/core-components/html-embed","siteSpaceId":"sitesp_CHe0S","emoji":"2328","description":"Embed custom HTML, CSS, and JavaScript in Webstudio pages.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"Yfv03kfWfUlmBnoYqXVf","title":"Animation Group","pathname":"/university/core-components/animation-group","siteSpaceId":"sitesp_CHe0S","emoji":"1f3ac","description":"The foundation of all animations in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"ISNW9VxhCN1YXwcidiCV","title":"Text Animation","pathname":"/university/core-components/text-animation","siteSpaceId":"sitesp_CHe0S","icon":"t","description":"The Text Animation component simplifies animating text by automatically splitting it into individual words or characters, allowing for dynamic effects without manual wrapping.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"WYUnslrPc46HYwpJtJ9O","title":"Video Animation","pathname":"/university/core-components/video-animation","siteSpaceId":"sitesp_CHe0S","emoji":"1f3a5","description":"The Video Animation component renders a video and starts it based on Animation Group settings.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"ZY6DAFsn3VqTb2FMcovV","title":"Stagger Animation","pathname":"/university/core-components/stagger-animation","siteSpaceId":"sitesp_CHe0S","emoji":"1f468-1f468-1f466-1f466","description":"Creates a cascading effect by animating child elements sequentially.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"Xtn1EdVs7W75EqJFrsZf","title":"Head Slot","pathname":"/university/core-components/head-slot","siteSpaceId":"sitesp_CHe0S","icon":"box-archive","emoji":"1f5c2","description":"Head Slot is a component that enables visually customizing the <head> on a per-page basis. It’s useful for setting canonical URLs, alternate links, and more.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"Zp9VA5IoAAeLIN31AOWw","title":"JSON-LD","pathname":"/university/core-components/json-ld","siteSpaceId":"sitesp_CHe0S","emoji":"1f3f7","description":"Add structured data to a page with valid JSON-LD in the document head.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"A1to1BfBfppRrPS83ZHe","title":"XML Node","pathname":"/university/core-components/xml-node","siteSpaceId":"sitesp_CHe0S","emoji":"1f4d8","description":"The XML Node is used to create an XML document, such as a sitemap.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"fo6zO5SRfhux7NXvKMWo","title":"XML Time","pathname":"/university/core-components/xml-time","siteSpaceId":"sitesp_CHe0S","emoji":"1f550","description":"Format dates in XML sitemaps and RSS feeds using the XML Time component.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"0qe4pwKjR4vSyNucg4pr","title":"Time","pathname":"/university/core-components/time","siteSpaceId":"sitesp_CHe0S","emoji":"1f550","description":"Display dates and times with semantic markup using the Time component in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"u2cLeae6PQSb2ULS756A","title":"Built with Webstudio","pathname":"/university/core-components/built-with-webstudio","siteSpaceId":"sitesp_CHe0S","emoji":"1f4db","description":"Display a 'Built with Webstudio' badge on your site.","breadcrumbs":[{"label":"university"},{"label":"Core Components","emoji":"1f9e9"}]},{"id":"MGbnT1ttJc5oaRzOij1H","title":"CLI","pathname":"/university/cli","siteSpaceId":"sitesp_CHe0S","emoji":"2b1b","description":"Webstudio's Command Line Interface (CLI) allows you to interact directly with your Projects from the command line.","breadcrumbs":[{"label":"university"}]},{"id":"229aqLw5WSsMMwl7v1F3","title":"MCP","pathname":"/university/mcp","siteSpaceId":"sitesp_CHe0S","icon":"robot","description":"Connect AI agents and automation to a Webstudio Project through MCP or direct CLI tool calls.","breadcrumbs":[{"label":"university"}]},{"id":"sGAlO4KEzkyukQJleP83","title":"Inception","pathname":"/university/inception","siteSpaceId":"sitesp_CHe0S","emoji":"2728","description":"Generate, compare, refine, and reuse AI design directions with Inception.","breadcrumbs":[{"label":"university"}]},{"id":"uQirhP7Wx6TZdVPdCcPA","title":"Radix UI Components","pathname":"/university/radix","siteSpaceId":"sitesp_CHe0S","emoji":"25ab","description":"","breadcrumbs":[{"label":"university"}]},{"id":"yCEp2exf8mAXzngL30QI","title":"Accordion","pathname":"/university/radix/accordion","siteSpaceId":"sitesp_CHe0S","description":"A vertically stacked set of interactive headings that each reveal an associated section of content.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"Eld4wPgbkaqA0zDAMdBX","title":"Checkbox","pathname":"/university/radix/checkbox","siteSpaceId":"sitesp_CHe0S","description":"Add accessible checkbox controls with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"DXGahaqmEaSxMj2SPsOV","title":"Collapsible","pathname":"/university/radix/collapsible","siteSpaceId":"sitesp_CHe0S","description":"An interactive component which expands/collapses a panel.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"q6KfGO4f0CsVpfuCsAdv","title":"Dialog","pathname":"/university/radix/dialog","siteSpaceId":"sitesp_CHe0S","description":"Create modal dialogs and popups with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"FNY7GXMvVecUxunhqEyU","title":"Label","pathname":"/university/radix/label","siteSpaceId":"sitesp_CHe0S","description":"Add accessible form labels with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"nrShNzIPhQjWlMl8ahc6","title":"Navigation Menu","pathname":"/university/radix/navigation-menu","siteSpaceId":"sitesp_CHe0S","description":"Build accessible navigation menus with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"iU8mWzSc3dVTTUXXUGbr","title":"Popover","pathname":"/university/radix/popover","siteSpaceId":"sitesp_CHe0S","description":"Create floating popover elements with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"g3eG1MbkEDpfY2X0e2ZS","title":"Radio Group","pathname":"/university/radix/radio-group","siteSpaceId":"sitesp_CHe0S","description":"Add accessible radio button groups with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"LoysCfVww5rmhA6evxbi","title":"Select","pathname":"/university/radix/select","siteSpaceId":"sitesp_CHe0S","description":"Create accessible dropdown selects with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"ys1XyXIOoRnb0BvXMUni","title":"Sheet","pathname":"/university/radix/sheet","siteSpaceId":"sitesp_CHe0S","description":"Build slide-out panels and drawers with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"cm5yQfOV5hrF685Hj9Xf","title":"Switch","pathname":"/university/radix/switch","siteSpaceId":"sitesp_CHe0S","description":"Add toggle switches with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"yiXrYTMR7S6xIuRsC35C","title":"Tabs","pathname":"/university/radix/tabs","siteSpaceId":"sitesp_CHe0S","description":"Create tabbed interfaces with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"LBobTcFZWOZe5ONJLMVa","title":"Tooltip","pathname":"/university/radix/tooltip","siteSpaceId":"sitesp_CHe0S","description":"Add informational tooltips with Radix UI in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"Radix UI Components","emoji":"25ab"}]},{"id":"tQrdfGrQBblL34KdHOwX","title":"Marketplace","pathname":"/university/marketplace","siteSpaceId":"sitesp_CHe0S","icon":"puzzle","description":"The Marketplace is integrated into the Builder and offers templates contributed by Webstudio and the community.","breadcrumbs":[{"label":"university"}]},{"id":"9YfveWy01NU7EntqIU45","title":"Webstudio AI","pathname":"/university/webstudio-ai","siteSpaceId":"sitesp_CHe0S","emoji":"1f916","description":"","breadcrumbs":[{"label":"university"}]},{"id":"dCgydekXrUUDkt0F6JFD","title":"Self-Hosting","pathname":"/university/self-hosting","siteSpaceId":"sitesp_CHe0S","emoji":"1f4e4","description":"Webstudio can be self-hosted, putting you in control of your hosting, pricing, security, and compliance.","breadcrumbs":[{"label":"university"}]},{"id":"5hoYpamempoBRSyQ3Iyb","title":"Download","pathname":"/university/self-hosting/download","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Export your Webstudio Project with a click of a button.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"TeSYeEUu0WYU4uGb2ggd","title":"Cloudflare Pages","pathname":"/university/self-hosting/cloudflare-pages","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to deploy your static site to Cloudflare Pages.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"lJviNK2UJBkCJOFtQR8r","title":"GitHub Pages","pathname":"/university/self-hosting/github-pages","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to deploy your project to GitHub Pages.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"NTtYU4Aze2YAnbMZoV7F","title":"Netlify","pathname":"/university/self-hosting/netlify","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to deploy your project to Netlify.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"5yi7Mh0tJVVIHIzqZhol","title":"Vercel","pathname":"/university/self-hosting/vercel","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to deploy your project to Vercel.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"UImt0ieCrBOqxbGfVo4i","title":"AWS with Flightcontrol (Docker)","pathname":"/university/self-hosting/flightcontrol","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"How to deploy your Website Project to Flightcontrol using the Docker template.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"jAkS5WG17HPsBKBCzmVh","title":"Digital Ocean with Coolify (Docker)","pathname":"/university/self-hosting/digital-ocean-coolify","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"How to deploy your Website Project to Digital Ocean using Coolify.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"FHq8oPPQN1zZG18yLRiR","title":"Hetzner with Coolify (Docker)","pathname":"/university/self-hosting/hetzner-coolify","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"How to deploy your Webstudio Project to Hetzner using Coolify.","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"UQLxTRJ8hUSAeyMJM6M5","title":"VPS with Docker","pathname":"/university/self-hosting/vps-with-docker","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"","breadcrumbs":[{"label":"university"},{"label":"Self-Hosting","emoji":"1f4e4"}]},{"id":"bDIsvM8oJ65CIk3moc4h","title":"How-Tos","pathname":"/university/how-tos","siteSpaceId":"sitesp_CHe0S","emoji":"1f9d1-1f3eb","description":"","breadcrumbs":[{"label":"university"}]},{"id":"pJvnYVClwiuhjxmLtnJp","title":"How to add icons","pathname":"/university/how-tos/how-to-add-icons","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Add icons to your Webstudio site using SVGs and icon libraries.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"KLMAdMUxtEjIqTdtg4xC","title":"How to use custom fonts","pathname":"/university/how-tos/how-to-use-custom-fonts","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Add custom fonts to your Webstudio site.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"2JLUp14gG1xB4tDALmhb","title":"How to create fluid video backgrounds with Vimeo","pathname":"/university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Create fluid video backgrounds in Webstudio using Vimeo.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"PUQDOqHw8snjKXLofn18","title":"How to crop an image without cropping the original","pathname":"/university/how-tos/how-to-crop-an-image-with-out-cropping-the-original-image","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Crop images visually in Webstudio without modifying the original file.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"JsyZodpQ13iRwTpH7GD3","title":"How to create responsive navigation","pathname":"/university/how-tos/how-to-create-responsive-navigation","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Learn how to build a responsive navigation menu with desktop links and a mobile hamburger menu using Webstudio.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"1lrDrmR0QAxpjPFi5OTd","title":"How to add a GSAP animation","pathname":"/university/how-tos/how-to-add-a-gsap-animation","siteSpaceId":"sitesp_CHe0S","emoji":"1f340","description":"Add GSAP animations to your Webstudio site with custom code.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"B6Ap8qXUS2CUOn6LCjqH","title":"How to make a custom 404 page","pathname":"/university/how-tos/how-to-make-a-custom-404-page","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Create a custom 404 error page in Webstudio.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"8mHNVHLr2mPTvbp1hRJk","title":"Build Your Own Directory Website with Airtable","pathname":"/university/how-tos/build-your-own-directory-website-with-airtable","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"Build a directory website in Webstudio using Airtable as a CMS.","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"pxNuyR62Ob5V9kg72FCP","title":"Using filters to dynamically display content","pathname":"/university/how-tos/using-filters-to-dynamically-display-content","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"When building with Webstudio, you get dynamic, not static. This enables providing search and filters to your visitors. Whether you want to filter your blog or create a dashboard, you can use Webstudio","breadcrumbs":[{"label":"university"},{"label":"How-Tos","emoji":"1f9d1-1f3eb"}]},{"id":"QBO45dANZ7aAa2PvblYx","title":"Integrations","pathname":"/university/integrations","siteSpaceId":"sitesp_CHe0S","emoji":"1f517","description":"This page contains a list of guides on connecting to various systems. The list is not exhaustive, as Webstudio supports fetching data from any HTTP API.","breadcrumbs":[{"label":"university"}]},{"id":"EPdNU3GOECTaju5RDXtu","title":"How to build a frontend for Supabase using Webstudio","pathname":"/university/integrations/supabase","siteSpaceId":"sitesp_CHe0S","description":"Use Supabase as a backend database for your Webstudio site.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"EGhPsSOaHXQOzIb1h4Nj","title":"How to build a frontend for Airtable using Webstudio","pathname":"/university/integrations/airtable-frontend","siteSpaceId":"sitesp_CHe0S","description":"Learn how to use Webstudio's advanced visual builder to create an Airtable frontend without writing code, including an overview page with filters, a details page, and a sitemap.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"diJl5lfExfjTLx2ViVw0","title":"How to integrate a Webhook Form with Airtable","pathname":"/university/integrations/airtable-form-webhook","siteSpaceId":"sitesp_CHe0S","description":"This article will explore the process for integrating your Webstudio Form with Airtable using a simple automation.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"HqvO4l47ste6jMq0C4mc","title":"How to build a frontend for Baserow using Webstudio","pathname":"/university/integrations/baserow","siteSpaceId":"sitesp_CHe0S","description":"Learn how to use Webstudio's visual builder to create a Baserow frontend with filters and dynamic pages.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"NIrm2pMEEmEwlSK43YWB","title":"How to build a frontend for Hygraph using Webstudio","pathname":"/university/integrations/hygraph","siteSpaceId":"sitesp_CHe0S","description":"Learn how to use Webstudio's advanced visual builder to create a Hygraph frontend without writing code, including a blog overview page, a blog page, and a sitemap.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"hmTs4rI6uLsa9TEvwiMS","title":"How to build a WordPress frontend using Webstudio (no-code builder)","pathname":"/university/integrations/wordpress","siteSpaceId":"sitesp_CHe0S","description":"Learn how to use Webstudio's advanced visual builder to create a WordPress frontend without writing code, including an overview page, a blog page, and a sitemap.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"Du7T4BVOhqJq6Ol6Bnvq","title":"How to integrate a Notion database with Webstudio","pathname":"/university/integrations/notion","siteSpaceId":"sitesp_CHe0S","description":"Learn how to use Webstudio's advanced website builder to create a Notion frontend, including an overview page with filters, a details page, and a sitemap.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"c29t9f9201jj9nRirH4X","title":"How to integrate Webhook Form with Pabbly","pathname":"/university/integrations/pabbly","siteSpaceId":"sitesp_CHe0S","description":"Connect Webstudio forms to Pabbly Connect for automation.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"0nikbt4a2gipqozdi6Lj","title":"How to integrate Webhook Form with Zapier","pathname":"/university/integrations/zapier","siteSpaceId":"sitesp_CHe0S","description":"Connect Webstudio forms to Zapier for workflow automation.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"i5adOICnCPXgHgzl51aS","title":"How to integrate Webhook Form with N8N","pathname":"/university/integrations/n8n","siteSpaceId":"sitesp_CHe0S","description":"Connect Webstudio forms to n8n for workflow automation.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"ecyt3iivAlgpkEPUCial","title":"How to integrate Flotiq with Webstudio","pathname":"/university/integrations/flotiq","siteSpaceId":"sitesp_CHe0S","description":"Learn how to integrate Flotiq with Webstudio to build dynamic,  content-driven websites—visually.","breadcrumbs":[{"label":"university"},{"label":"Integrations","emoji":"1f517"}]},{"id":"rTijqEDpmcrCmmGwL8U8","title":"Craft","pathname":"/university/craft","siteSpaceId":"sitesp_CHe0S","icon":"ruler-triangle","description":"Craft is the standard for building maintainable and reusable projects with Webstudio.","breadcrumbs":[{"label":"university"}]},{"id":"0HA03Tic1wwF9SIYM528","title":"Use Craft","pathname":"/university/craft/craft-guide","siteSpaceId":"sitesp_CHe0S","description":"Apply the Craft specification in a Webstudio project.","breadcrumbs":[{"label":"university"},{"label":"Craft","icon":"ruler-triangle"}]},{"id":"0SvjDEeMt9RqXSjrBVE2","title":"Craft changelog","pathname":"/university/craft/craft-changelog","siteSpaceId":"sitesp_CHe0S","description":"Review changes to the Craft specification.","breadcrumbs":[{"label":"university"},{"label":"Craft","icon":"ruler-triangle"}]},{"id":"KZYMDX8bhjifbYsOh1YB","title":"Contributions","pathname":"/contributing/contributions","siteSpaceId":"sitesp_CHe0S","description":"","breadcrumbs":[{"label":"Contributing"}]},{"id":"AKSwRfjXlEHM0UrTs5fj","title":"Contributing to the Marketplace","pathname":"/contributing/marketplace","siteSpaceId":"sitesp_CHe0S","icon":"puzzle","description":"You can contribute free or paid templates by creating a Project and submitting it for review. Approved templates will appear in the Marketplace.","breadcrumbs":[{"label":"Contributing"}]},{"id":"Gv3EkpXQlhxtNYeieeOw","title":"Errors","pathname":"/errors","siteSpaceId":"sitesp_CHe0S","emoji":"26a0","description":"This page will help you better understand error messages you may encounter."},{"id":"tht4YSNQmu8GmmCAVTAB","title":"Connecting your Hostinger Domain to Webstudio","pathname":"/errors/connecting-your-hostinger-domain-to-webstudio","siteSpaceId":"sitesp_CHe0S","emoji":"25b6","description":"","breadcrumbs":[{"label":"Errors","emoji":"26a0"}]},{"id":"QQ3HRBKRZ8lXvLIakNKv","title":"Worker not found","pathname":"/errors/worker-not-found","siteSpaceId":"sitesp_CHe0S","emoji":"1f50c","description":"","breadcrumbs":[{"label":"Errors","emoji":"26a0"}]},{"id":"FYWaJL6S0WyobN3GM5of","title":"Misc","pathname":"/misc","siteSpaceId":"sitesp_CHe0S","description":""},{"id":"bM3kwS7KDj5G5kOtUBIu","title":"Account Limits","pathname":"/misc/account-limits","siteSpaceId":"sitesp_CHe0S","emoji":"1f4ca","description":"","breadcrumbs":[{"label":"Misc"}]},{"id":"pKwIGwNpiI2Y6JXjvQgu","title":"Webstudio Support Process","pathname":"/misc/webstudio-support-process","siteSpaceId":"sitesp_CHe0S","emoji":"1f198","description":"This page highlights where to get support for all Webstudio customers.","breadcrumbs":[{"label":"Misc"}]},{"id":"4Fete1XeSGtDlldPDFqw","title":"Fixing overflow issues","pathname":"/misc/fixing-overflow-issues","siteSpaceId":"sitesp_CHe0S","icon":"computer-mouse-scrollwheel","description":"How to fix overflowing content so the screen doesn't scroll horizontally.","breadcrumbs":[{"label":"Misc"}]}]}