# webstudio-is/webstudio **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/webstudio-is-webstudio).** 8,240 stars · 1,432 forks · TypeScript · agpl-3.0 ## Links - GitHub: https://github.com/webstudio-is/webstudio - Homepage: https://webstudio.is - awesome-repositories: https://awesome-repositories.com/repository/webstudio-is-webstudio.md ## Topics `accessibility` `alternative` `cloudflare` `cloudflare-workers` `design` `free` `frontend` `open-source` `radix-ui` `react` `remix` `web-development` `webflow` `website-builder` `website-development` `websites` `webstudio` ## Description Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The system covers a broad range of capabilities, including dynamic content integration, frontend performance optimization, and multi-platform site deployment. It provides tools for visual website development, motion and animation sequencing, and comprehensive search engine optimization. Users can publish projects to static hosts, serverless platforms, or self-managed infrastructure via Docker. ## Tags ### User Interface & Experience - [Visual Design Editors](https://awesome-repositories.com/f/user-interface-experience/ui-styling/visual-design-editors.md) — Provides a visual canvas for arranging and styling component instances to build complete user interfaces. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Visual Website Builders](https://awesome-repositories.com/f/user-interface-experience/visual-website-builders.md) — Provides a visual editor and drag-and-drop canvas for building responsive web layouts and interfaces. - [Component Property Configurators](https://awesome-repositories.com/f/user-interface-experience/component-property-systems/component-property-configurators.md) — Provides an interface to adjust the settings and behavior of components to customize appearance and functionality. ([source](https://docs.webstudio.is/basics/building-your-first-site.md)) - [GraphQL Data Fetching](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/server-side-data-fetching/graphql-data-fetching.md) — Queries remote GraphQL endpoints using schemas and variables to populate site content. ([source](https://docs.webstudio.is/university/foundations/variables.md)) - [Custom Component Builders](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions/custom-component-builders.md) — Combines visual design workflows with direct code access to create high-logic custom components. ([source](https://docs.webstudio.is/basics/intro.md)) - [Data Binding Engines](https://awesome-repositories.com/f/user-interface-experience/data-binding-engines.md) — Maps external API responses and GraphQL queries to visual components via a variable binding system. - [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Uses a standardized naming system for utility and semantic tokens to maintain consistent visual styling. ([source](https://docs.webstudio.is/university/craft.md)) - [CSS Variable Token Mappings](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens/css-variable-token-mappings.md) — Binds design tokens to CSS variables to create a flexible, global system for colors and spacing. ([source](https://docs.webstudio.is/university/craft.md)) - [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Implements a comprehensive design token system to maintain visual consistency and synchronize styles across projects. - [Design Token Theming](https://awesome-repositories.com/f/user-interface-experience/design-token-theming.md) — Switches site appearance between light and dark modes by updating shared semantic design tokens. ([source](https://docs.webstudio.is/university/craft.md)) - [Dynamic Text Interpolation](https://awesome-repositories.com/f/user-interface-experience/dynamic-text-interpolation.md) — Binds heading text dynamically to content collections, page variables, or URL parameters. ([source](https://docs.webstudio.is/university/core-components/heading.md)) - [Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/grid-layouts.md) — Generates two-dimensional layouts using a variety of presets and custom track configurations. ([source](https://docs.webstudio.is/university/foundations/css-grid.md)) - [Breakpoint Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/breakpoint-configurations.md) — Sets specific screen width thresholds to apply different styles based on the device size. ([source](https://docs.webstudio.is/university/foundations/breakpoints.md)) - [Flexbox](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/flexbox.md) — Provides comprehensive Flexbox controls for aligning children along axes and managing content wrapping. ([source](https://docs.webstudio.is/university/foundations/layout-and-flexbox.md)) - [Page Layout Templates](https://awesome-repositories.com/f/user-interface-experience/page-layout-templates.md) — Allows the definition of single page layouts that serve as blueprints for dynamic content based on URL paths. ([source](https://docs.webstudio.is/university/integrations/notion.md)) - [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Provides tools to switch between screen size presets to verify and adjust responsive design behavior. ([source](https://docs.webstudio.is/university/foundations/shortcuts.md)) - [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Defines custom breakpoints and media query conditions to adapt layouts for different screens. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Responsive Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layouts.md) — Implements a mobile-first cascading system to ensure adaptive layouts across all devices. ([source](https://docs.webstudio.is/university/foundations/responsive-design.md)) - [Style Configurations](https://awesome-repositories.com/f/user-interface-experience/style-configurations.md) — Allows defining project-wide CSS variables and root font sizes to maintain global visual consistency. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Atomic CSS Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/atomic-css-generators.md) — Compiles design tokens into deduplicated atomic CSS utility classes to optimize page load speeds. - [CSS Variable Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems.md) — Offers precision inputs to modify CSS properties, spacing, and variables for granular visual control. ([source](https://docs.webstudio.is/university/foundations/shortcuts.md)) - [Style Object Managers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/inline-and-object-styling/style-object-managers.md) — Defines named values and style collections that apply consistently across elements and update globally. ([source](https://docs.webstudio.is/university/foundations/reusability.md)) - [CSS Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems.md) — Enables arranging child elements using CSS Grid or Flexbox systems to precisely control alignment. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Visual Layout Construction](https://awesome-repositories.com/f/user-interface-experience/visual-layout-construction.md) — Enables construction of layouts, component styling, and element animations through a visual interface. ([source](https://docs.webstudio.is/basics/intro.md)) - [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Implements a drag-and-drop canvas for arranging layout elements and designing pages without code. ([source](https://docs.webstudio.is/basics/building-your-first-site.md)) - [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Allows customization of element appearance using local styles, CSS variables, and reusable style tokens. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Visual Styling Rules](https://awesome-repositories.com/f/user-interface-experience/visual-styling-rules.md) — Provides a visual interface to adjust CSS properties for precise control over layout and typography. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Accordions](https://awesome-repositories.com/f/user-interface-experience/accordions.md) — Provides interactive accordion components that support keyboard navigation for expanding and collapsing content. ([source](https://docs.webstudio.is/university/radix/accordion.md)) - [Animation Properties](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties.md) — Controls CSS variables to drive synchronized animations across a composition from a single source. ([source](https://docs.webstudio.is/university/core-components/animation-group.md)) - [Border Utilities](https://awesome-repositories.com/f/user-interface-experience/border-utilities.md) — Provides controls for defining the thickness, color, and style of element borders and outer outlines. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Provides customizable button controls that trigger user actions like form submissions or page navigation. ([source](https://docs.webstudio.is/university/core-components/button.md)) - [Centered Page Containers](https://awesome-repositories.com/f/user-interface-experience/centered-page-containers.md) — Combines full-width background wrappers with max-width inner containers to keep content centered. ([source](https://docs.webstudio.is/university/foundations/layout-and-flexbox.md)) - [Collapsible UI Components](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components.md) — Ships toggleable interface elements that hide or reveal content blocks to reduce visual clutter. ([source](https://docs.webstudio.is/university/radix/collapsible.md)) - [HTML Element Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/html-element-wrappers.md) — Renders valid HTML tags as visual components, updating attributes based on the element type for semantic accuracy. ([source](https://docs.webstudio.is/university/core-components/element.md)) - [Style Inheritance Coordination](https://awesome-repositories.com/f/user-interface-experience/component-child-utilities/style-inheritance-coordination.md) — Controls the appearance of child elements by updating CSS variables defined on a parent component. ([source](https://docs.webstudio.is/university/foundations/css-variables.md)) - [Component Slot Systems](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems.md) — Synchronizes content across the site by mirroring elements within shared template slots. - [Transition Timings](https://awesome-repositories.com/f/user-interface-experience/component-transitions/reusable-transition-definitions/transition-timings.md) — Defines smooth property transitions by specifying exact durations, timing functions, and delays. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Dynamic Element Animation](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation.md) — Applies visual motion effects to text, video, and component groups, including support for staggered timing. ([source](https://docs.webstudio.is/university/core-components.md)) - [Element Manipulation Utilities](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/element-manipulation-utilities.md) — Provides tools for copying, duplicating, and wrapping components directly within the visual editor. ([source](https://docs.webstudio.is/university/foundations/shortcuts.md)) - [Delivery Optimizations](https://awesome-repositories.com/f/user-interface-experience/css-styling/critical-style-extraction/delivery-optimizations.md) — Reuses style classes across the project using an atomic compiler to improve load times. ([source](https://docs.webstudio.is/university/foundations/project-settings.md)) - [Custom CSS Variable Definitions](https://awesome-repositories.com/f/user-interface-experience/custom-css-variable-definitions.md) — Allows users to set arbitrary CSS properties and define custom CSS variables for site-wide application. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/data-display-components/tabbed-interfaces.md) — Creates tabbed interfaces that allow users to switch between different content panels via triggers. ([source](https://docs.webstudio.is/university/radix/tabs.md)) - [Design Generators](https://awesome-repositories.com/f/user-interface-experience/design-generators.md) — Generates multiple visual layout variants from text prompts using AI models and aesthetic presets. ([source](https://docs.webstudio.is/university/inception.md)) - [Design Import Tools](https://awesome-repositories.com/f/user-interface-experience/design-import-tools.md) — Allows importing compatible HTML and CSS from external sources into the workspace for further visual editing. ([source](https://docs.webstudio.is/university/inception.md)) - [Conflict Resolution](https://awesome-repositories.com/f/user-interface-experience/design-token-management/conflict-resolution.md) — Automatically merges identical design tokens or assigns suffixes to resolve collisions when copying content. ([source](https://docs.webstudio.is/university/foundations/design-tokens.md)) - [Design Token Synchronization](https://awesome-repositories.com/f/user-interface-experience/design-token-synchronization.md) — Imports and exports design tokens using a universal data format to maintain visual consistency across projects. ([source](https://docs.webstudio.is/university/foundations/design-tokens.md)) - [Display Mode Definitions](https://awesome-repositories.com/f/user-interface-experience/display-mode-definitions.md) — Enables setting the positioning mode of elements and their children using modes like Block or Grid. ([source](https://docs.webstudio.is/university/foundations/layout-and-flexbox.md)) - [Form and Input Management](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management.md) — Constructs complete data collection interfaces using mixed input types with integrated webhook support. ([source](https://docs.webstudio.is/university/core-components.md)) - [Form Input Controls](https://awesome-repositories.com/f/user-interface-experience/form-input-controls.md) — Collects user data through a variety of form controls including text, numbers, emails, and passwords. ([source](https://docs.webstudio.is/university/core-components/input.md)) - [Grid Area Assignments](https://awesome-repositories.com/f/user-interface-experience/grid-area-assignments.md) — Enables assigning labels to specific grid regions to position child elements by name. ([source](https://docs.webstudio.is/university/foundations/css-grid.md)) - [2D and 3D Element Transformations](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/2d-and-3d-element-transformations.md) — Supports moving, rotating, scaling, and skewing elements in both 2D and 3D space. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Grid Layout Visualizers](https://awesome-repositories.com/f/user-interface-experience/grid-layout-visualizers.md) — Includes a visual alignment widget for positioning children accurately within grid cells. ([source](https://docs.webstudio.is/university/foundations/css-grid.md)) - [Item Positioning](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning.md) — Provides mechanisms for placing individual elements within a grid using line numbers or named areas. ([source](https://docs.webstudio.is/university/foundations/css-grid.md)) - [Grid Gap Management](https://awesome-repositories.com/f/user-interface-experience/grid-systems/grid-gap-management.md) — Allows setting horizontal and vertical gaps between grid tracks to manage whitespace. ([source](https://docs.webstudio.is/university/foundations/css-grid.md)) - [Interactive Design Previews](https://awesome-repositories.com/f/user-interface-experience/interactive-design-previews.md) — Provides a dedicated preview mode to test navigation, interactions, and responsive layouts without editing controls. ([source](https://docs.webstudio.is/university/foundations/modes.md)) - [Keyframe Animation Engines](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines.md) — Supports the definition of complex animations for child elements using keyframes and view-based triggers. ([source](https://docs.webstudio.is/university/core-components/animation-group.md)) - [Style Bindings](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/data-binding-syntax/style-bindings.md) — Allows mapping API responses and data properties directly to CSS styles for dynamic theming. ([source](https://docs.webstudio.is/university/foundations/css-variables.md)) - [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Includes components for creating modal dialogs that overlay the page with a backdrop for focused interaction. ([source](https://docs.webstudio.is/university/radix/dialog.md)) - [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Creates accessible multi-level navigation structures, including complex dropdowns and mega menus. ([source](https://docs.webstudio.is/university/radix/navigation-menu.md)) - [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Provides interactive floating panels that appear relative to a trigger element via user interaction. ([source](https://docs.webstudio.is/university/radix/popover.md)) - [Animation Sequencing](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/transition-effects/animation-sequencing.md) — Coordinates the timing and order of multiple animations to create sequential cascade effects on child elements. ([source](https://docs.webstudio.is/university/foundations/animations.md)) - [Dimension Constraints](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/dimension-constraints.md) — Allows setting fixed, minimum, and maximum width and height bounds to constrain element dimensions. ([source](https://docs.webstudio.is/university/foundations/layout-and-flexbox.md)) - [Responsive Design Utilities](https://awesome-repositories.com/f/user-interface-experience/responsive-design-utilities.md) — Simulates specific media conditions and screen widths directly within the design canvas for testing. ([source](https://docs.webstudio.is/university/foundations/responsive-design.md)) - [Rich Text Renderers](https://awesome-repositories.com/f/user-interface-experience/rich-text-renderers.md) — Transforms and displays structured rich text data using various HTML elements within the user interface. ([source](https://docs.webstudio.is/university/core-components/text.md)) - [Rich Text Styling](https://awesome-repositories.com/f/user-interface-experience/rich-text-styling.md) — Allows the application of inline formatting such as bold, italic, and custom colors to text blocks. ([source](https://docs.webstudio.is/university/core-components/inline-text.md)) - [Scroll Animations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations.md) — Triggers visual transitions and effects based on element visibility and scroll position within the viewport. ([source](https://docs.webstudio.is/university/foundations/animations.md)) - [Slide-Out Panels](https://awesome-repositories.com/f/user-interface-experience/slide-out-panels.md) — Provides UI panels that slide in from the screen edge to offer additional context without leaving the page. ([source](https://docs.webstudio.is/university/radix/sheet.md)) - [Slot-Based Content Mirroring](https://awesome-repositories.com/f/user-interface-experience/slot-based-content-mirroring.md) — Uses slots to share and synchronize the same set of elements across different areas of a page. ([source](https://docs.webstudio.is/university/how-tos/how-to-create-responsive-navigation.md)) - [Style Composition Engines](https://awesome-repositories.com/f/user-interface-experience/style-composition-engines.md) — Combines multiple design tokens on a single element to create complex visual variations. ([source](https://docs.webstudio.is/university/foundations/design-tokens.md)) - [State-Based Style Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application.md) — Triggers visual style changes based on detected device capabilities and user preferences. ([source](https://docs.webstudio.is/university/foundations/responsive-design.md)) - [Synchronized Layout Sections](https://awesome-repositories.com/f/user-interface-experience/synchronized-layout-sections.md) — Allows designers to define a content area once and synchronize changes across every instance of that section. ([source](https://docs.webstudio.is/university/core-components/slot.md)) - [Text Animations](https://awesome-repositories.com/f/user-interface-experience/text-animations.md) — Automatically splits text into characters or words to apply staggered and sequential animations. ([source](https://docs.webstudio.is/university/foundations/animations.md)) - [Typography Components](https://awesome-repositories.com/f/user-interface-experience/typography-components.md) — Provides standardized elements for rendering headings, paragraphs, and blockquotes to create structured textual content. ([source](https://docs.webstudio.is/university/core-components.md)) - [Typography Settings](https://awesome-repositories.com/f/user-interface-experience/typography-settings.md) — Controls comprehensive text appearance including font family, weight, size, and line height. ([source](https://docs.webstudio.is/university/foundations/style-panel.md)) - [Design-to-Code Generators](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/workflow-automation-tools/design-to-code-tools/design-to-code-generators.md) — Provides the ability to export generated layouts as structured HTML and CSS for use in external environments. ([source](https://docs.webstudio.is/university/inception.md)) - [Conditional Rendering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/conditional-rendering.md) — Evaluates conditional expressions to dynamically show or hide components based on data values or system parameters. ([source](https://docs.webstudio.is/university/foundations/expression-editor.md)) - [Video Players](https://awesome-repositories.com/f/user-interface-experience/video-players.md) — Provides components for embedding self-hosted videos with support for autoplay and looping. ([source](https://docs.webstudio.is/university/core-components/video.md)) - [Visual Component Importers](https://awesome-repositories.com/f/user-interface-experience/visual-component-importers.md) — Converts external CSS, HTML, and Markdown into native visual components via a simple copy-paste action. ([source](https://docs.webstudio.is/university/foundations/copy-paste.md)) - [Visual Design Iteration Tools](https://awesome-repositories.com/f/user-interface-experience/visual-design-iteration-tools.md) — Implements an automated design critique and improvement process to refine AI-generated visual layouts. ([source](https://docs.webstudio.is/university/inception.md)) - [Visual Element Transforms](https://awesome-repositories.com/f/user-interface-experience/visual-element-transforms.md) — Provides visual transforms to rotate, scale, skew, or move elements on the canvas. ([source](https://docs.webstudio.is/university/foundations/transforms.md)) - [Visual Style References](https://awesome-repositories.com/f/user-interface-experience/visual-styling-systems/visual-style-references.md) — Provides a system for analyzing reference images and text to create style briefs for AI-generated designs. ([source](https://docs.webstudio.is/university/inception.md)) ### Artificial Intelligence & ML - [AI Design Generation](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-design-generation.md) — Creates and refines website layouts and visual styles using artificial intelligence and text prompts. - [Image Editing](https://awesome-repositories.com/f/artificial-intelligence-ml/image-generation/image-editing.md) — Uses generative AI models to regenerate, replace, or modify specific regions of images via text prompts. ([source](https://docs.webstudio.is/university/inception.md)) - [Targeted Element Refinement](https://awesome-repositories.com/f/artificial-intelligence-ml/targeted-element-refinement.md) — The product modifies specific components, text, or layouts within a design by applying targeted prompts to a selected area. ([source](https://docs.webstudio.is/university/inception.md)) ### Part of an Awesome List - [AI Design Tools](https://awesome-repositories.com/f/awesome-lists/ai/ai-design-tools.md) — Uses generative models to create layout variants, analyze styles, and refine website designs from text prompts. - [Image Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/image-optimization.md) — Automatically converts images to modern formats and generates responsive versions to optimize web performance and layout stability. ([source](https://docs.webstudio.is/university/foundations/performance.md)) - [Scroll-Based Animations](https://awesome-repositories.com/f/awesome-lists/devtools/scroll-based-animations.md) — Triggers automatic video playback based on the user's scroll position and specified animation settings. ([source](https://docs.webstudio.is/university/core-components/video-animation.md)) - [Animation & Transitions](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions.md) — Integrates external animation libraries to create interactive transitions and complex movements within layouts. ([source](https://docs.webstudio.is/university/how-tos.md)) ### Content Management & Publishing - [Content Authoring and Editing](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing.md) — Provides a visual editing interface for updating text, images, and inserting pre-defined design templates. ([source](https://docs.webstudio.is/university/foundations/modes.md)) - [Dynamic Text Population](https://awesome-repositories.com/f/content-management-publishing/dynamic-text-population.md) — The product connects a text element to a collection field to automatically populate content. ([source](https://docs.webstudio.is/university/core-components/paragraph.md)) - [Headless Visual CMS](https://awesome-repositories.com/f/content-management-publishing/headless-visual-cms.md) — Maps external data sources to visual components and automates form submissions via webhooks. - [Headless CMS Connectors](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/headless-cms-connectors.md) — Connects to headless CMS providers to pull external content into visual site templates. ([source](https://docs.webstudio.is/university/integrations.md)) - [Website Publishing Workflows](https://awesome-repositories.com/f/content-management-publishing/website-publishing-workflows.md) — Provides a workflow to preview designs and deploy the final website to a live production environment. ([source](https://docs.webstudio.is/basics/building-your-first-site.md)) - [Content Editor Permissions](https://awesome-repositories.com/f/content-management-publishing/content-editor-permissions.md) — Implements granular permissions that allow editors to manage content while protecting structural design settings. ([source](https://docs.webstudio.is/university/foundations/page-templates.md)) - [Content Pattern Libraries](https://awesome-repositories.com/f/content-management-publishing/content-pattern-libraries.md) — Allows editors to insert pre-styled layout components from a designer-defined library into pages. ([source](https://docs.webstudio.is/university/core-components/content-block.md)) - [Cross-Page Content Mirroring](https://awesome-repositories.com/f/content-management-publishing/content-synchronization-tools/cross-page-content-mirroring.md) — Allows rendering source page content within other pages so that updates are automatically synchronized. ([source](https://docs.webstudio.is/university/foundations/reusability.md)) - [Hierarchical Page Managers](https://awesome-repositories.com/f/content-management-publishing/page-sequence-managers/hierarchical-page-managers.md) — Provides tools to organize web pages and folders into a recursive tree structure for site management. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Document Page Organizations](https://awesome-repositories.com/f/content-management-publishing/page-sequence-managers/hierarchical-page-managers/document-page-organizations.md) — Organizes and nests page elements through a hierarchical tree view for structural management. ([source](https://docs.webstudio.is/university/foundations/navigator.md)) - [Search Visibility Optimizations](https://awesome-repositories.com/f/content-management-publishing/search-visibility-optimizations.md) — Enables configuration of meta titles, descriptions, and canonical URLs to improve search engine visibility. ([source](https://docs.webstudio.is/university/foundations/seo-settings.md)) - [SEO Metadata Management](https://awesome-repositories.com/f/content-management-publishing/seo-metadata-management.md) — Configures head components and metadata slots to optimize search engine visibility and social sharing. ([source](https://docs.webstudio.is/university/core-components.md)) ### Data & Databases - [Data Source Connectivity Tools](https://awesome-repositories.com/f/data-databases/data-source-connectivity-tools.md) — Establishes connections to external databases and APIs to fetch structured content for web pages. ([source](https://docs.webstudio.is/university/integrations/supabase.md)) - [Page-Scoped Data Variables](https://awesome-repositories.com/f/data-databases/database-record-management/record-to-page-bindings/page-scoped-data-variables.md) — Defines variables and resources scoped to a single page to fetch and bind specific data. ([source](https://docs.webstudio.is/university/foundations/page-settings.md)) ### Development Tools & Productivity - [Dynamic Page Generators](https://awesome-repositories.com/f/development-tools-productivity/page-skeleton-generators/dynamic-page-generators.md) — Generates page templates that dynamically change content based on URL parameters to display individual database records. ([source](https://docs.webstudio.is/university/foundations/cms.md)) - [REST API Clients](https://awesome-repositories.com/f/development-tools-productivity/rest-api-clients.md) — Fetches, maps, and displays data from external REST and GraphQL endpoints within visual components. - [REST Data Fetching Utilities](https://awesome-repositories.com/f/development-tools-productivity/rest-apis/rest-data-fetching-utilities.md) — Retrieves information from remote REST endpoints using configurable methods and secure headers. ([source](https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content.md)) - [Template Publishing](https://awesome-repositories.com/f/development-tools-productivity/template-standards/template-publishing.md) — Enables users to publish reusable website layouts and components to a community gallery. ([source](https://docs.webstudio.is/contributing/contributing-for-designers)) ### DevOps & Infrastructure - [Cloud Synchronization Tools](https://awesome-repositories.com/f/devops-infrastructure/cloud-synchronization-tools.md) — Synchronizes a local development environment with a cloud project to manage published changes. ([source](https://docs.webstudio.is/university/self-hosting/cli.md)) - [Static Site Deployments](https://awesome-repositories.com/f/devops-infrastructure/deployment-management-strategies/static-site-deployments.md) — Uploads exported project files to hosting providers to make the static website publicly accessible. ([source](https://docs.webstudio.is/university/self-hosting/cloudflare-pages.md)) - [Docker Container Deployments](https://awesome-repositories.com/f/devops-infrastructure/container-orchestration/container-runtimes/runtime-configuration-interfaces/docker-socket-orchestrators/docker-target-configurators/docker-container-deployments.md) — Packages projects into Docker images for deployment to VPS environments with reverse proxy support. ([source](https://docs.webstudio.is/university/self-hosting/vps-with-docker.md)) - [Containerized Application Deployments](https://awesome-repositories.com/f/devops-infrastructure/containerized-application-deployments.md) — Supports deploying the application as a portable container image using Dockerfiles across various cloud providers. ([source](https://docs.webstudio.is/university/self-hosting.md)) - [Visual Design Synchronization](https://awesome-repositories.com/f/devops-infrastructure/deployment-management-strategies/static-site-deployments/visual-design-synchronization.md) — Pulls updated design data from the visual editor to automatically rebuild the project for deployment. ([source](https://docs.webstudio.is/university/self-hosting/netlify.md)) - [Edge Network Deployment](https://awesome-repositories.com/f/devops-infrastructure/edge-network-deployment.md) — Deploys published websites across a global edge network to minimize latency for end users. - [Multi-Platform Site Deployment](https://awesome-repositories.com/f/devops-infrastructure/multi-platform-site-deployment.md) — Publishes web projects to static hosts, serverless platforms, or self-managed infrastructure using Docker. - [Project File Extraction](https://awesome-repositories.com/f/devops-infrastructure/project-file-extraction.md) — Extracts designed projects as static files or dynamic applications via CLI or download. ([source](https://docs.webstudio.is/university/self-hosting.md)) - [Self-Hosted Deployment Platforms](https://awesome-repositories.com/f/devops-infrastructure/self-hosted-deployment-platforms.md) — Allows the entire platform to be installed on self-managed infrastructure for total environment control. ([source](https://docs.webstudio.is/)) - [Self-Hosted Deployment Tools](https://awesome-repositories.com/f/devops-infrastructure/self-hosted-deployment-tools.md) — Provides the capability to export project files for deployment on private, self-hosted servers. ([source](https://docs.webstudio.is/university/self-hosting/hetzner-coolify.md)) - [Serverless Deployment](https://awesome-repositories.com/f/devops-infrastructure/serverless-deployment.md) — Pushes application code to serverless providers for automatic infrastructure management and scaling. ([source](https://docs.webstudio.is/university/self-hosting.md)) ### Software Engineering & Architecture - [Component Data Bindings](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/component-state-bindings/component-data-bindings.md) — Maps fetched data variables from APIs directly to visual component properties like text and image sources. ([source](https://docs.webstudio.is/university/foundations/cms.md)) ### Web Development - [Collection Iterators](https://awesome-repositories.com/f/web-development/collection-iterators.md) — Iterates over fetched data collections to replicate a visual design across multiple content items. ([source](https://docs.webstudio.is/university/integrations/flotiq.md)) - [Dynamic Content Loading](https://awesome-repositories.com/f/web-development/dynamic-content-loading.md) — Connects websites to external REST or GraphQL APIs to display data and render dynamic pages. - [Dynamic Content Mapping](https://awesome-repositories.com/f/web-development/dynamic-content-mapping.md) — Maps remote API response fields directly to visual UI components for dynamic content updates. ([source](https://docs.webstudio.is/university/integrations/notion.md)) - [Dynamic List Rendering](https://awesome-repositories.com/f/web-development/dynamic-list-rendering.md) — Renders structured information by generating lists and collections from dynamic data sources. ([source](https://docs.webstudio.is/university/core-components.md)) - [External API Integrations](https://awesome-repositories.com/f/web-development/external-api-integrations.md) — Fetches data from any third-party system that exposes a REST or GraphQL HTTP API. ([source](https://docs.webstudio.is/university/foundations/cms.md)) - [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Optimizes image delivery and generates atomic CSS to improve page load speeds and core web vitals. - [Page Routing Configurations](https://awesome-repositories.com/f/web-development/page-routing-configurations.md) — Implements a system for associating variable URL segments with specific page renderers to create dynamic content. ([source](https://docs.webstudio.is/university/integrations/wordpress.md)) - [Static Site Generation](https://awesome-repositories.com/f/web-development/static-site-generation.md) — Generates a static build of HTML, CSS, and JS for deployment to any external hosting platform. ([source](https://docs.webstudio.is/university/self-hosting/download.md)) - [Visual-to-Code Compilers](https://awesome-repositories.com/f/web-development/visual-to-code-compilers.md) — Converts drag-and-drop canvas arrangements and style configurations into production-ready HTML and CSS. - [Application Deployment](https://awesome-repositories.com/f/web-development/application-deployment.md) — Publishes JavaScript-based applications to hosting providers to enable server or client-side interactivity. ([source](https://docs.webstudio.is/university/self-hosting/netlify.md)) - [Custom Domain Hosting](https://awesome-repositories.com/f/web-development/custom-domain-hosting.md) — Facilitates publishing projects to custom domains or staging environments as JavaScript applications. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Document Head Management](https://awesome-repositories.com/f/web-development/document-head-management.md) — Provides a visual interface to manage meta tags, canonical URLs, and resource hints for SEO optimization. ([source](https://docs.webstudio.is/university/core-components/head-slot.md)) - [Dynamic Field Expressions](https://awesome-repositories.com/f/web-development/dynamic-field-expressions.md) — Runs expressions to perform string manipulations and evaluate operators for dynamic component behavior. ([source](https://docs.webstudio.is/university/foundations/expression-editor.md)) - [API Integration Templates](https://awesome-repositories.com/f/web-development/external-api-integrations/api-integration-templates.md) — Provides deployable page templates with preconfigured backend API connections to external data sources. ([source](https://docs.webstudio.is/university/marketplace.md)) - [Image Optimization Tools](https://awesome-repositories.com/f/web-development/image-optimization-tools.md) — Resizes, compresses, and converts images to modern formats based on the user's device size for optimal delivery. ([source](https://docs.webstudio.is/university/core-components/image.md)) - [Markup Importers](https://awesome-repositories.com/f/web-development/markup-importers.md) — Converts pasted HTML and CSS markup into native editable visual components on the design canvas. ([source](https://docs.webstudio.is/university/foundations/copy-paste/html-with-css.md)) - [Visual Transform Transitions](https://awesome-repositories.com/f/web-development/page-transition-controls/visual-transform-transitions.md) — Combines visual transforms with timed transitions for smooth motion during user interactions like hover or focus. ([source](https://docs.webstudio.is/university/foundations/transforms.md)) - [Server-Side Rendering](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering.md) — Generates complete HTML markup on the server to improve initial page load and SEO. - [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Produces complete HTML on the server before delivery to improve indexing and first content paint. ([source](https://docs.webstudio.is/university/foundations/performance.md)) - [Static Asset Management](https://awesome-repositories.com/f/web-development/static-asset-management.md) — Manages and stores static assets like images and fonts to be referenced across site instances. ([source](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md)) - [Sitemap Generators](https://awesome-repositories.com/f/web-development/web-standards/search-engine-optimization/sitemap-generators.md) — Automatically generates XML sitemaps by binding lists of dynamic data records for search engine indexing. ([source](https://docs.webstudio.is/university/integrations/notion.md)) ### Graphics & Multimedia - [Image Optimization Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-optimization-tools.md) — Increases page speed by compressing image files and implementing lazy loading for viewport entry. ([source](https://docs.webstudio.is/university/foundations/seo-settings.md)) - [Video Embeddings](https://awesome-repositories.com/f/graphics-multimedia/video-embeddings.md) — Integrates Vimeo players as standalone video elements or as looping background visuals. ([source](https://docs.webstudio.is/university/core-components/vimeo.md)) ### Networking & Communication - [Custom Domains](https://awesome-repositories.com/f/networking-communication/networking/custom-domains.md) — Enables mapping of user-owned business domains to published projects via DNS records. ([source](https://docs.webstudio.is/university/foundations/publishing-and-custom-domains.md)) ### Security & Cryptography - [Role-Based Access Control](https://awesome-repositories.com/f/security-cryptography/role-based-access-control.md) — Manages workspace collaboration by inviting users via email and assigning roles to control project access. ([source](https://docs.webstudio.is/university/foundations/dashboard.md)) ### System Administration & Monitoring - [Robot Indexing Control](https://awesome-repositories.com/f/system-administration-monitoring/robot-indexing-control.md) — Generates robots.txt files and sitemaps to control how search engine crawlers index the website. ([source](https://docs.webstudio.is/university/foundations/seo-settings.md))