Webiny Website Builder
Building Website Builder editor components, theming, and CMS integration using...
Install
npx skills add webiny/webiny-js --skill webiny-website-builder -g -a claude-code -y- Repository
- webiny/webiny-js8.1k
- Category
- Design
- Updated
- 5d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Building Website Builder editor components, theming, and CMS integration using @webiny/website-builder-nextjs. Use this skill when the developer wants to create editor components for the Website Builder, register components with createComponent, define configurable inputs (text, number, boolean, color, select, file/image, slot, lexical, object, tags), type the component's props correctly (especially file/image inputs, which are objects with { src, width, height, ... } and NOT plain strings, and lexical inputs which are { html, state } objects), set up component groups, customize the theme (CSS variables, createTheme, Tailwind bridge, fonts), build Server Components that fetch CMS data, or understand the WB architecture (Admin iframe + Next.js). Also use for anything related to the Website Builder starter kit.
Website Builder
TL;DR
The Webiny Website Builder uses a unique architecture: the Admin editor loads your Next.js app inside an iframe. All component code and styles live in your Next.js project -- Webiny only stores the page structure (which components and what input values). You build editor components with @webiny/website-builder-nextjs, register them via createComponent(), define configurable inputs, and manage theming through CSS custom properties and createTheme().
Architecture
+----------------------------------------------------------+
| Webiny Admin |
| +----------------------------------------------------+ |
| | Website Builder Editor | |
| | | |
| | sidebar +------------------------------+ | |
| | (inputs) | your Next.js app (iframe) | | |
| | | real components | | |
| | | real styles | | |
| | +------------------------------+ | |
| +----------------------------------------------------+ |
+----------------------------------------------------------+
postMessage (SDK)
+----------------------------------------------------------+
| Your Next.js App (running separately) |
| @webiny/website-builder-nextjs SDK installed |
+----------------------------------------------------------+
Key implications:
- No style clashes -- your components, your styles, full ownership
- Genuine WYSIWYG -- editors see your real app, not a simulation
- Framework-owned code -- all React components live in your Next.js repo
Setup
Starter Kit
git clone https://github.com/webiny/website-builder-nextjs.git my-website
cd my-website
npm install
