Webstudio Documentation

Webstudio is an open-source visual development platform designed to bridge the gap between design and code. It allows users to build responsive web designs visually while maintaining full control over the underlying HTML, CSS, and JavaScript.

Key benefits include:

• For Designers: A visual interface for constructing layouts, styling components, and animating elements in real-time on a live canvas, enabling rapid iteration without extensive coding knowledge.
• For Developers: Flexibility to use visual workflows while retaining full access to code. Developers can extend the platform by creating custom components with complex logic or specific integrations.

Radix is an open-source UI component library built directly into Webstudio. It is designed for building high-quality, accessible design systems and web applications. Radix components are optimized for fast development and easy maintenance, providing a low-level foundation that allows for full CSS customization while ensuring all components are WAI-ARIA compliant. This means they come with built-in support for keyboard navigation and screen readers.

For a detailed overview of how these components function within the Webstudio environment, refer to the Radix in Webstudio documentation.

Webstudio provides a wide range of built-in SEO and performance features, including:

• Metadata: Meta titles, descriptions, Open Graph, and custom meta tags.
• Indexing & Discovery: Sitemap generation (including custom sitemats), noindex support, and automatic exclusion of noindex pages from sitemaps.
• Canonicalization: Default canonical tags with customization via the Head Slot.
• Structured Data: WebSite structured data and Href lang tags.
• Performance & Core Web Vitals: Auto image conversion/compression, automatic width/height attributes (to prevent CLS), and lazy/eager loading options.
• Redirects & Security: 301 and 302 redirects, SSL, and Robots.txt.
• Accessibility: Aria labels and semantic tags.

Webstudio supports copy-pasting content both within the platform and from various external sources. The platform provides specialized handling for different content types to ensure they are correctly integrated into your Webstudio project. Supported formats include:

• CSS: Copying raw CSS styles.
• HTML with CSS: Copying HTML structures along with their associated styles.
• HTML with Tailwind: Copying HTML that utilizes Tailwind CSS utility classes.
• Markdown: Copying Markdown-formatted text.
• Webflow: Importing content specifically from Webflow.
• SVG: Copying vector graphics code.
• Images: Copying and pasting image assets.

The Input component creates an HTML <input> element used to collect user data within a Form or Webhook Form. It supports various data types such as text, numbers, emails, and passwords.

Form
├── Label (for: email-input)
├── Input (id: email-input, name: email, type: email)
├── Label (for: password-input)
├── Input (id: password-input, name: password, type: password)
└── Button (type: submit)

Webstudio provides structured learning paths through its 'University' documentation. You can explore specialized topics including:

• Foundations: Core principles of using Webstudio.
• Core Components: Deep dives into the building blocks of your design.
• CLI: Using the Command Line Interface for Webstudio tasks.
• Inception: Getting started from the ground up.
• Radix: Integration or usage related to Radix.
• Marketplace: How to use and interact with the Webstudio marketplace.
• Self-hosting: Instructions for running Webstudio on your own infrastructure.
• How-tos: Practical guides for specific tasks.
• Integrations: Connecting Webstudio with other tools and services.
• Craft: Advanced design and development techniques.

To get started with Webstudio, you can follow these related learning paths:

• Building your first site: A quick video series for beginners.
• Intro: An overview of Webstudio tailored for both designers and developers.
• Anatomy of the Webstudio builder: A deep dive into understanding the builder interface.
• FAQs: Answers to common questions about the platform.

The Radix UI Accordion component in Webstudio supports the following capabilities:

• Keyboard Navigation: Full support for keyboard-based interaction.
• Orientation: Supports both horizontal and vertical layouts.
• Directionality: Supports Right to Left (RTL) direction.
• Expansion Modes: Can be configured to expand a single item or multiple items simultaneously.
• Control Modes: Supports both controlled and uncontrolled states.