Setting the file. One moment.
Subchapter 2.59
references/editor-react-component/COMPONENT-CONFIGURATION.mdMarkdown5 KBView on GitHub
After scaffolding the component and running npx wix build && npx wix generate manifest,
configure the component’s behavior in the editor by writing partial
manifest overrides in the component’s hand-edited extension file
(<ComponentName>.extension.ts). That file imports the auto-generated
manifest and spreads it; specific fields are overridden inline. Re-running
this command regenerates each <ComponentName>.generated.ts
companion but never touches the overrides authored in the extension file.
Set installation.initialSize.height.sizingType based on whether the
component’s own content decides how tall it is.
Does the component’s own content decide how tall it is?
LAYOUT.SIZING_TYPE.content. Omit pixels.LAYOUT.SIZING_TYPE.pixels. Provide a pixels default that matches its natural visual size.Tiebreaker: if a designer would drag a handle to set the height, it’s pixels. If the height should just fit whatever is inside, it’s content.
import { extensions } from '@wix/astro/builders';
import { LAYOUT } from '@wix/react-component-schema';
import { manifest } from './ComponentName.generated';
const componentExtension = extensions.editorReactComponent({
// …other fields…
installation: {
initialSize: {
width: {
sizingType: LAYOUT.SIZING_TYPE.pixels,
pixels: 250,
},
height: {
sizingType: LAYOUT.SIZING_TYPE.updateMe,
},
},
},
});Content-driven (LAYOUT.SIZING_TYPE.content) — testimonial card,
FAQ accordion, pricing tier, blog-post body, list/grid of arbitrary
children:
height: {
sizingType: LAYOUT.SIZING_TYPE.content,
}Framed visual (LAYOUT.SIZING_TYPE.pixels) — hero banner with a
fixed image, video embed, color-picker swatch grid, OTP input, empty
placeholder slot:
height: {
sizingType: LAYOUT.SIZING_TYPE.pixels,
pixels: 320,
}Set editorElement.layout.resizeDirection based on which axes the
designer should be able to control with a drag handle. Allow an axis
if dragging it produces a meaningful, intended change. Disallow it if
dragging would do nothing visible or would break the component’s
identity.
| Choice | When to use |
|---|---|
horizontalAndVertical | Content fills or stretches in both axes. Hero, carousel, gallery, card grid, embed, form control, any framed visual. Default for most components. |
horizontal | Height is rigid/intrinsic — cannot meaningfully stretch. Breadcrumb, tag row, nav bar, single-line input, slider rail. |
vertical | Width is rigid/intrinsic. Vertical stack, ribbon, sidebar rail. |
aspectRatio | Distortion breaks identity — logo, illustration, animation. |
none | Size fully owned by a parent layout. Never for top-level components. |
Tiebreaker: if a drag handle on an axis would feel inert or wrong to a designer, take it away.
import { extensions } from '@wix/astro/builders';
import { LAYOUT } from '@wix/react-component-schema';
import { manifest } from './ComponentName.generated';
const componentExtension = extensions.editorReactComponent({
// …other fields…
editorElement: {
...manifest.editorElement,
layout: {
resizeDirection: LAYOUT.RESIZE_DIRECTION._selectedResizeDirection_,
},
},
});// hero, carousel, gallery, card grid, embed, form
resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
// breadcrumb, tag row, nav bar, slider rail
resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
// logo, illustration, animation
resizeDirection: LAYOUT.RESIZE_DIRECTION.aspectRatio,defaultProps from <componentName>.props.ts — this is the single source of truth used by both component.tsx and the extension file.componentUrl from './component.tsx?url' (the wrapped component), not from './ComponentName.tsx?url' (the raw component).editorElement with withEditorElementDefaults using the same defaultProps.import { withEditorElementDefaults } from '@wix/react-component-utils';
import componentUrl from './component.tsx?url';
import { defaultProps } from './<componentName>.props';
// in the extension:
editorElement: withEditorElementDefaults({
...manifest.editorElement,
}, defaultProps),
resources: {
...manifest.resources,
client: { componentUrl },
},Always include "staticContainer": "HOMEPAGE" in installation so the
component is automatically installed on the Harmony editor.
const componentExtension = extensions.editorReactComponent({
// …other fields…
installation: {
// …other fields…
staticContainer: 'HOMEPAGE',
},
});