Skills Development Website Builder Editor SDK Utilities

Website Builder Editor SDK Utilities

v20260424
webiny-admin-website-builder-catalog
This SDK provides a comprehensive set of abstractions and utilities for programmatically controlling the behavior and structure of an admin-side website builder. Developers can use these functions to create, delete, select, query, and update elements, manage input states, and interact with the editor's state management system, making it ideal for extending the core website editing functionality.
Get Skill
449 downloads
Overview

admin/website-builder

How to Use

  1. Find the abstraction you need below
  2. You MUST read the source file to get the exact interface and types!
  3. Import: import { Name } from "<importPath>";

Abstractions


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: 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


Info
Category Development
Name webiny-admin-website-builder-catalog
Version v20260424
Size 12.17KB
Updated At 2026-04-28
Language