Anatomy
In Weaverse, every component's behavior and interactivity within the Weaverse Studio is determined by its schema. This schema, named HydrogenComponentSchema, acts as a blueprint for your component, ensuring a consistent and user-friendly experience.
Before diving into the individual properties, let's get an overview of the full schema structure:
Properties
With that in mind, let's dive deeper into its properties:
title and type
-
title: A user-friendly name for the component, displayed within the Weaverse Studio in the Page Outline section.
-
type: A unique identifier for the component, ensuring differentiation between various components.
inspector
An array of InspectorGroup, where each group organizes a set of inputs for the Weaverse Studio Inspector.
The InspectorGroup structure is:
-
group: A label categorizing a set of inputs. -
inputs: An array of input configurations. For an in-depth look intoBasicInput, check out the Input Settings article.
childTypes
This optional property lists the types of child components that can be nested within the parent component.
presets
This optional property defines default configurations for components, determining their initial appearance and behavior.
The structure for HydrogenComponentPresets is:
limit
This optional property limits the number of times this component can appear on a page.
enabledOn
Defines where the component can be used. The PageType can be values like INDEX, PRODUCT, COLLECTION, and more.
toolbar
Determines the available actions (like duplicate, delete, general settings) for the component in the studio.
Example
To make all of this a bit more tangible, let's take a look at a real-world example of a component schema:
Remember, this is just an example, the complexity and properties of the schema can vary based on the component's requirements.
Conclusion
The HydrogenComponentSchema provides an extensive blueprint for your Weaverse components. By understanding its structure and properties, developers can ensure a dynamic and consistent experience for users within the Weaverse Studio.
For a detailed look into the intricacies of inputs and their configurations, check out the Input Settings article.