# Webiny Website Builder

Building Website Builder editor components, theming, and CMS integration using...

- Repository: https://github.com/webiny/webiny-js (8051 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add webiny/webiny-js --skill webiny-website-builder -g -a claude-code -y`
Codex: `npx skills add webiny/webiny-js --skill webiny-website-builder -g -a codex -y`
Cursor: `npx skills add webiny/webiny-js --skill webiny-website-builder -g -a cursor -y`
Gemini CLI: `npx skills add webiny/webiny-js --skill webiny-website-builder -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```bash
git clone https://github.com/webiny/website-builder-nextjs.git my-website
cd my-website
npm install
```

The rest: https://github.com/webiny/webiny-js/blob/HEAD/skills/user-skills/website-builder/SKILL.md