# Webiny New Entry Wizard

Building a New Entry Wizard for the Headless CMS.

- 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-new-entry-wizard -g -a claude-code -y`
Codex: `npx skills add webiny/webiny-js --skill webiny-new-entry-wizard -g -a codex -y`
Cursor: `npx skills add webiny/webiny-js --skill webiny-new-entry-wizard -g -a cursor -y`
Gemini CLI: `npx skills add webiny/webiny-js --skill webiny-new-entry-wizard -g -a gemini-cli -y`

## Description

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.

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

# New Entry Wizard

## TL;DR

A New Entry Wizard intercepts the "create new entry" flow in the Headless CMS and shows a custom form before the full entry editor. The wizard collects initial values (title, slug, category, etc.), then calls `formPresenter.newEntry(initialValues)` to pre-fill the entry form and transition to the editor. The form is automatically marked as dirty so the user sees unsaved changes.

A wizard extension has five files:

1. **`abstractions.ts`** -- DI token and presenter interface (ALWAYS a standalone file)
2. **`feature.ts`** -- `createFeature` wiring (ALWAYS a standalone file)
3. **Presenter** -- owns the wizard form (fields, layout, validation) via `FormModelFactory`
4. **View** -- renders the wizard UI using `FormView` and `FormErrors`
5. **Registration** -- plugs the wizard into specific content models via `ContentEntryEditorConfig.NewEntryWizard`

## Registration

```tsx
// extensions/myWizard/index.tsx
import React from "react";
import { RegisterFeature } from "webiny/admin";
import { ContentEntryEditorConfig } from "webiny/admin/cms/entry/editor";
import { MyWizardFeature } from "./feature.js";
import { MyWizardForm } from "./MyWizardForm.js";

const MyWizardExtension = () => {
  return (
    <>
      <RegisterFeature feature={MyWizardFeature} />
      <ContentEntryEditorConfig>
        <ContentEntryEditorConfig.NewEntryWizard
          element={<MyWizardForm />}
          modelIds={["article", "blogPost"]}
        />
      </ContentEntryEditorConfig>
    </>
  );
};

export default MyWizardExtension;
```

### Props

The rest: https://github.com/webiny/webiny-js/blob/HEAD/skills/user-skills/admin/new-entry-wizard/SKILL.md