Menu
admin/website-builder โ 63 abstractions.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Building a New Entry Wizard for the Headless CMS. Use this skill when the developer wants to show a custom wizard UI before the entry form when creating new CMS entries -- collecting fields like title, slug, or category upfront, then pre-filling the entry form. Covers ContentEntryEditorConfig.NewEntryWizard, createFeature, FormModelFactory, createReactiveComponent, useContentEntryFormPresenter, and the dirty-flag on setData.
Building forms with the FormModel system โ field types, renderers, layout, validation, conditional rules, computed fields, and dynamic zones. Use this skill when the developer needs to define form fields with the builder API, choose renderers, build layouts with tabs/rows/separators, add validation (Zod or imperative), use conditional visibility/disable rules, create computed fields, or work with object fields and templates (dynamic zones).
api โ 21 abstractions.
api/webhooks โ 15 abstractions.
Admin-side architecture patterns for Webiny extensions. Use this skill when building frontend features with headless features (UseCase/Repository/Gateway), presentation features (Presenter/ViewModel/hooks/components), MobX-based presenters, RegisterFeature, and Admin BuildParams. Covers the admin/ directory structure for both features/ and presentation/ layers.
Covers the PreviewUrlModifier extension point in Website Builder. Use when a user wants to inject custom query parameters into live preview URLs โ e.g. signed tokens, tenant identifiers, feature flags โ from their Webiny project. Handles the full registration pattern: implementing the interface, wiring via createFeature + RegisterFeature, and registering via webiny.config.tsx. Supports async modifier methods (e.g. remote token fetch).
| name | webiny-admin-website-builder-catalog |
| context | webiny-api |
| description | admin/website-builder โ 63 abstractions. |
import { Name } from "<importPath>";Name: $addElementReferenceToParent
Import: import { $addElementReferenceToParent } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $createElement
Import: import { $createElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $deleteElement
Import: import { $deleteElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $deselectElement
Import: import { $deselectElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getActiveElementId
Import: import { $getActiveElementId } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getComponentManifestByElementId
Import: import { $getComponentManifestByElementId } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getElementById
Import: import { $getElementById } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getElementInputValues
Import: import { $getElementInputValues } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getElementsOfType
Import: import { $getElementsOfType } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $getFirstElementOfType
Import: import { $getFirstElementOfType } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $highlightElement
Import: import { $highlightElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $moveElement
Import: import { $moveElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $previewElementInputs
Import: import { $previewElementInputs } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Description: Programmatically update an element's inputs in the preview iframe only (via JSON patch).
Does NOT write to the editor document state.
Name: $removeElementReferenceFromParent
Import: import { $removeElementReferenceFromParent } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $selectElement
Import: import { $selectElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Name: $updateElementInputs
Import: import { $updateElementInputs } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/utils/index.ts
Description: Programmatically update an element's inputs using a callback-based API.
The updater receives a deep object representation of the element's inputs
which can be mutated in place.
Name: Commands
Import: import { Commands } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/index.tsx
Name: CompactEditorConfig
Import: import { CompactEditorConfig } from "webiny/admin/website-builder/lexical"
Source: @webiny/app-website-builder/inputRenderers/LexicalInput/LexicalEditorConfig.tsx
Name: createCommand
Import: import { createCommand } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/editorSdk/createCommand.ts
Name: createElement
Import: import { createElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/website-builder-sdk/index.ts
Name: Divider
Import: import { Divider } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: DropDown
Import: import { DropDown } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: DropDownItem
Import: import { DropDownItem } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: EcommerceIntegration
Import: import { EcommerceIntegration } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/ecommerce/index.tsx
Name: ElementInputs
Import: import { ElementInputs } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx
Name: ExpandedEditorConfig
Import: import { ExpandedEditorConfig } from "webiny/admin/website-builder/lexical"
Source: @webiny/app-website-builder/inputRenderers/LexicalInput/LexicalEditorConfig.tsx
Name: getNodeFromSelection
Import: import { getNodeFromSelection } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: HasPermission
Import: import { HasPermission } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/presentation/security/HasPermission.tsx
Name: Klass
Kind: type
Import: import type { Klass } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: LexicalHtmlRenderer
Import: import { LexicalHtmlRenderer } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: LexicalNode
Kind: type
Import: import type { LexicalNode } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: PageEditorConfig
Import: import { PageEditorConfig } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/modules/pages/PageEditor/PageEditorConfig.tsx
Name: PageListConfig
Import: import { PageListConfig } from "webiny/admin/website-builder/page/list"
Source: @webiny/app-website-builder/index.ts
Name: pagePathFromTitle
Import: import { pagePathFromTitle } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/index.ts
Name: PageSettingsGroup
Import: import { PageSettingsGroup } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/modules/pages/PageEditor/PageSettings/index.ts
Name: PageSettingsGroupModifier
Import: import { PageSettingsGroupModifier } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/modules/pages/PageEditor/PageSettings/index.ts
Name: PageType
Import: import { PageType } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/presentation/pages/CreatePage/abstractions.ts
Name: PageTypeProvider
Import: import { PageTypeProvider } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/presentation/pages/CreatePage/abstractions.ts
Name: RedirectListConfig
Import: import { RedirectListConfig } from "webiny/admin/website-builder/redirect/list"
Source: @webiny/app-website-builder/index.ts
Name: Routes
Import: import { Routes } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/routes.ts
Name: useActiveElement
Import: import { useActiveElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useActiveElement.ts
Name: useComponent
Import: import { useComponent } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useComponent.ts
Name: useCreateElement
Import: import { useCreateElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useCreateElement.ts
Name: useCurrentElement
Import: import { useCurrentElement } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useCurrentSelection
Import: import { useCurrentSelection } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useDeleteElement
Import: import { useDeleteElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useDeleteElement.ts
Name: useDeriveValueFromSelection
Import: import { useDeriveValueFromSelection } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useDocumentEditor
Import: import { useDocumentEditor } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/DocumentEditor/index.ts
Name: useElementComponentManifest
Import: import { useElementComponentManifest } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.ts
Name: useElementInputs
Import: import { useElementInputs } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useElementInputs.ts
Description: Returns the resolved input values for the given element, plus an updater callback.
Name: useElementOverlay
Import: import { useElementOverlay } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useElementOverlay.ts
Name: useFontColorPicker
Import: import { useFontColorPicker } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useHighlightedElement
Import: import { useHighlightedElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useHighlightedElement.ts
Name: useIsMounted
Import: import { useIsMounted } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useLexicalEditorConfig
Import: import { useLexicalEditorConfig } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: usePageEditorConfig
Import: import { usePageEditorConfig } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/modules/pages/PageEditor/usePageEditorConfig.ts
Name: usePermissions
Import: import { usePermissions } from "webiny/admin/website-builder"
Source: @webiny/app-website-builder/presentation/security/usePermissions.ts
Name: useRichTextEditor
Import: import { useRichTextEditor } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useSelectFromDocument
Import: import { useSelectFromDocument } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useSelectFromDocument.ts
Description: Subscribe to part of the document state.
Name: useSelectFromEditor
Import: import { useSelectFromEditor } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useSelectFromEditor.ts
Description: Subscribe to part of the document state.
Name: useTextAlignmentAction
Import: import { useTextAlignmentAction } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useTypographyAction
Import: import { useTypographyAction } from "webiny/admin/website-builder/lexical"
Source: @webiny/lexical-editor/exports/admin/lexical.ts
Name: useUpdateElement
Import: import { useUpdateElement } from "webiny/admin/website-builder/page/editor"
Source: @webiny/app-website-builder/BaseEditor/hooks/useUpdateElement.ts