> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mastermindcms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor components

> Editor-oriented web components (msc-*) shipped together with msm-components

`msc-*` components are Lit-based web components mainly used in MastermindCMS editor/templates.

Many `msc-*` components mirror `msm-*` web components. When an `msm-*` counterpart exists, start with its documentation (same suffix, `msm-` prefix).

Choose a component:

export const components = ["msc-active-filters", "msc-add-to-cart", "msc-alphabet-groups", "msc-attributes", "msc-attributes-viewer", "msc-blog-article", "msc-blog-article-image", "msc-breadcrumbs", "msc-brick-style-blocks", "msc-bulletpoint", "msc-bullet-points", "msc-bulletpoints-list", "msc-button", "msc-button-form", "msc-catalog", "msc-catalog-card", "msc-catalog-item", "msc-category-filters", "msc-cdek-widget", "msc-centered-image", "msc-checkbox", "msc-checkbox-field-form", "msc-checkout", "msc-chip", "msc-click-handler", "msc-column", "msc-common-searches", "msc-comparison-table", "msc-condition-handler", "msc-consent-banner", "msc-contact-person-block", "msc-container", "msc-content-divider", "msc-cookies-preferences", "msc-counter", "msc-covered-image", "msc-data-grid", "msc-deploy-contract-web3", "msc-documents-upload", "msc-documents-upload-field-form", "msc-documents-viewer", "msc-dropdown", "msc-dropdown-filter", "msc-enumeration", "msc-footer", "msc-form-field", "msc-group-filter", "msc-header", "msc-hero-container", "msc-icon-article", "msc-icon-articles", "msc-icon-bar", "msc-icon-link", "msc-image-article", "msc-image-background-banner", "msc-image-process", "msc-images-upload", "msc-images-upload-field-form", "msc-image-upload", "msc-input-chips", "msc-input-chips-field-form", "msc-introduction-banner", "msc-language-switcher", "msc-link", "msc-list-filters", "msc-listing-feature", "msc-listing-feature-csr", "msc-listing-form", "msc-listing-form-buttons", "msc-listing-form-feature", "msc-listing-form-feature-csr", "msc-listing-page", "msc-logical-filters", "msc-login-form", "msc-logo-bars", "msc-main-container", "msc-menu-block", "msc-menu-card", "msc-mint-nft-web3", "msc-mobile-menu", "msc-mobile-menu-link", "msc-multiple-columns", "msc-notification-alert", "msc-numeric-group-filter", "msc-order-details", "msc-overlay", "msc-password-field-form", "msc-process", "msc-product-filters", "msc-profile-orders", "msc-property-filter", "msc-quote", "msc-radio-button", "msc-range", "msc-range-filter", "msc-rating", "msc-registration-form", "msc-registration-form-buttons", "msc-related-items", "msc-reset-password", "msc-review", "msc-reviews-viewer", "msc-row", "msc-salutation-field-form", "msc-search-bar", "msc-search-card", "msc-search-filters", "msc-search-page", "msc-search-pagination", "msc-search-results", "msc-select", "msc-select-field-form", "msc-select-item", "msc-seller", "msc-seller-feature", "msc-seller-page", "msc-shopping-cart", "msc-shopping-cart-button", "msc-simple-process", "msc-single-page-app", "msc-sku-filter", "msc-sku-page", "msc-small-container", "msc-ssr", "msc-story-card", "msc-story-viewer", "msc-subscribe-form", "msc-swiper", "msc-switcher", "msc-table-row", "msc-tabs", "msc-telephone-field", "msc-telephone-field-form", "msc-text-field", "msc-text-field-form", "msc-three-cards", "msc-typography", "msc-user-account", "msc-user-account-button", "msc-user-delivery", "msc-user-login-modal", "msc-user-logout-button", "msc-user-profile", "msc-user-profile-editor", "msc-vertical-bulletpoints", "msc-video-block", "msc-wallet-web3", "msc-widget-router", "msc-window-modal", "msc-yookassa-widget"];

export const uniqueComponents = new Set(["msc-active-filters", "msc-attributes-viewer", "msc-catalog", "msc-catalog-card", "msc-catalog-item", "msc-click-handler", "msc-condition-handler", "msc-container", "msc-documents-upload-field-form", "msc-documents-viewer", "msc-footer", "msc-header", "msc-hero-container", "msc-icon-link", "msc-images-upload-field-form", "msc-listing-feature-csr", "msc-listing-form", "msc-listing-form-buttons", "msc-listing-form-feature-csr", "msc-overlay", "msc-registration-form", "msc-registration-form-buttons", "msc-reviews-viewer", "msc-search-page", "msc-seller", "msc-seller-feature", "msc-sku-filter", "msc-swiper", "msc-widget-router"]);

export const msmNameFor = mscName => mscName.replace("msc-", "msm-");

export const descriptionFor = mscName => {
  if (uniqueComponents.has(mscName)) return "Editor-only component.";
  return `Mirrors ${msmNameFor(mscName)} (functional overlap with msm-*).`;
};

export const hrefFor = mscName => {
  if (uniqueComponents.has(mscName)) return `/en/development/web-components/${mscName}`;
  return `/en/development/web-components/${msmNameFor(mscName)}`;
};

<CardGroup cols="3">
  {components.map((name) => (
      <Card
        key={name}
        title={name}
        icon="pen-to-square"
        href={hrefFor(name)}
      >
        {descriptionFor(name)}
      </Card>
    ))}
</CardGroup>