Sitecore Component Generator
Generate a complete Sitecore Headless SXA component — datasource template, JSON Rendering, Rendering Parameters template, placeholder(s), dictionary entries, rendering variants, per-site wiring, and a starter Next.js .tsx component file — from a single guided wizard, without leaving VS Code. Works against SitecoreAI (XM Cloud) and classic XP/XM alike, and against both local (including Docker-based) and cloud-hosted CM instances.
No manual environment setup — and no CLI required either
Environments live in .sitecore/user.json — the same file Sitecore CLI's sitecore login / dotnet sitecore login manages — instead of a form you fill in by hand. There are two ways to get one there:
- Already use the CLI? Run
sitecore login (or dotnet sitecore login) in your Sitecore project as usual; the extension picks up whatever's in user.json, including its cached token.
- Don't have the CLI installed? Run Sitecore: Add Environment — it asks for a name, environment type, CM host (and an Identity Server authority for classic XP), and writes a new endpoint straight into
.sitecore/user.json itself, creating the file if it doesn't exist yet. No CLI install required. It's fully compatible with a real CLI too — both can read/write the same file without conflicting.
Either way:
- Set
sitecoreComponentGenerator.userConfigPath if your user.json isn't at the default .sitecore/user.json relative to the workspace root.
- Run Sitecore: Select Environment to pick which of
user.json's named endpoints to generate into (skip this if you just added one — it's made active automatically).
- Run Sitecore: Open Component Generator.
If that endpoint already has a valid accessToken/refreshToken from the CLI, you're connected immediately — no sign-in needed. Otherwise the extension runs the same interactive Device Code flow Sitecore's own CLI uses (a browser tab opens automatically; approve the code shown), and caches the result in VS Code's encrypted SecretStorage. Sign-in never writes back to user.json — only Sitecore: Add Environment does, and only to add the new endpoint you asked for.
Status bar
A status bar item (bottom right) always shows the active environment and its connection status — $(pass-filled) connected, $(warning) expired, $(circle-large-outline) signed out, $(circle-slash) nothing configured yet — turning its background yellow whenever it needs attention. Click it for a quick-action menu (open the wizard, switch environment, sign in/out of the active one, add an environment) without going through the Command Palette.
Commands
| Command |
Description |
Sitecore: Open Component Generator |
Opens the wizard. |
Sitecore: Add Environment |
Writes a new endpoint into user.json (creating it if needed) — no Sitecore CLI required. |
Sitecore: Select Environment |
Picks which user.json endpoint to generate into. |
Sitecore: Sign In |
Signs in to a specific endpoint without opening the wizard. |
Sitecore: Sign Out |
Clears a cached sign-in. |
Clicking the status bar item offers the same actions (plus "Sign In"/"Sign Out" acting directly on the active environment) as a single QuickPick, without needing the Command Palette.
Settings
| Setting |
Default |
Description |
sitecoreComponentGenerator.userConfigPath |
.sitecore/user.json |
Path to your Sitecore CLI user.json (absolute, or relative to the workspace root). |
sitecoreComponentGenerator.frontendOutputPath |
(none) |
Folder (absolute, or relative to the workspace root) where generated frontend component files are written directly. Each component gets its own kebab-case subfolder (e.g. hero-banner/HeroBanner.tsx). Leave unset to be prompted for a save location instead. |
What the wizard generates
Configure once in the Settings tab (Path Groups, Sites, Template Icons), then in the Generator tab:
- Template — component name, icon, datasource template fields (with optional sub-item templates for Multilist/Droplink sources).
- Rendering, Placeholders & Variants — JSS component name, placeholder(s), rendering variants.
- Dictionary — per-component dictionary entries.
- Paths, Folders & Sites — which Path Group to use, which sites to make the component available on, and which "Available Renderings" group it gets appended to per site.
- Review & Create — a GraphQL preview, a copyable Next.js starter component (Content SDK or classic JSS, Pages or App Router, quote style matched to the target project's own Prettier config), and the actual "Create component" action. Generation is resumable — retrying only re-runs steps that haven't already succeeded. The component file writes straight into
sitecoreComponentGenerator.frontendOutputPath if set, or prompts for a save location otherwise.
