skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-admin-website-builder-catalog

Catalogs 65 abstractions for extending the Webiny Website Builder admin editor.

8.0k|673|Updated Jan 9, 2018
Search Tags:#website builder#React hooks#lexical#webiny#admin extensions#import catalog#page editor
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-website-builder-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-admin-website-builder-catalog
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/generated/admin/website-builder
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-website-builder-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers extending the Webiny Website Builder admin app struggle to discover which hooks, components, and editor utilities exist and where to import them from. This Skill provides a searchable catalog of 65 abstractions with exact import paths and source file locations.

Core Features & Use Cases

  • Editor State Utilities: Lists document-level operations like $createElement, $deleteElement, $moveElement, and $updateElementInputs for programmatic page editing.
  • React Hooks Index: Covers hooks such as useDocumentEditor, useActiveElement, useElementInputs, and useSelectFromDocument for building custom editor UI.
  • Lexical Rich-Text Exports: Catalogs LexicalEditor, LexicalHtmlRenderer, and related hooks for rich text integration.
  • Use Case: When building a custom page element or sidebar panel, look up the right hook (e.g., useElementInputs), read its source file for exact types, and import it from the documented path.

Quick Start

Ask the AI to find the right Webiny Website Builder abstraction and import path for programmatically updating a page element's inputs in the editor.

Frequently Asked Questions about webiny-admin-website-builder-catalog

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I programmatically update a page element in the Webiny Website Builder editor?▼

Use $updateElementInputs with a callback that mutates a deep object of the element's inputs, or use the useUpdateElement hook from React components. For preview-only changes without touching document state, use $previewElementInputs which applies JSON patches to the preview iframe.

What hooks are available for the Webiny page editor?▼

The catalog lists hooks including useDocumentEditor, useActiveElement, useElementInputs, useSelectFromDocument, useCreateElement, useDeleteElement, and useUpdateElement. Each entry includes the import path and source file so you can read exact signatures.

How do I create custom page elements in Webiny Website Builder?▼

Use createElement from the website-builder SDK along with $createElement and $addElementReferenceToParent editor utilities to insert elements into the document. Component manifests can be retrieved via useElementComponentManifest or $getComponentManifestByElementId.

Does Webiny Website Builder support Lexical rich text editing?▼

Yes, the catalog includes LexicalEditor, LexicalEditorConfig, LexicalHtmlRenderer, and hooks like useRichTextEditor and useCurrentSelection exported from the lexical import path. These support rich text inputs and HTML rendering.

How do I subscribe to editor document state changes in Webiny?▼

Use useSelectFromDocument or useSelectFromEditor to subscribe to specific parts of the document state. These hooks let components re-render only when the selected slice of editor state changes.

Related Skills

Explore More Software Engineering Skills→
fycd2006fycd2006

admin-developer

Build and wire admin features with React views, DI, and MobX.

Community
Advanced
wixwix
25

wix-cli-site-plugin

Create Wix Site Plugins that inject custom elements into UI slots.

Official
Advanced
webinywebiny
8.0k

backend-developer

Implement backend API features using Webiny architecture and GraphQL schemas.

Official
Advanced
vtexdocsvtexdocs
39

vtex-io-react-apps

Builds VTEX IO React components for storefront blocks and admin panels using interfaces.json and GraphQL data fetching via useQuery.

Official
Advanced