[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-clidesigner-extension":3,"mdc--9uoogc-key":40,"related-org-webflow-webflow-clidesigner-extension":2905,"related-repo-webflow-webflow-clidesigner-extension":3083},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":35,"sourceUrl":38,"mdContent":39},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,20,23,26],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"TypeScript","typescript",{"name":21,"slug":22,"type":16},"CLI","cli",{"name":24,"slug":25,"type":16},"Plugin Development","plugin-development",{"name":10,"slug":9,"type":16},107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-05-18T06:47:43.853573",null,17,[33,34],"agent","skills",{"repoUrl":28,"stars":27,"forks":31,"topics":36,"description":37},[33,34],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fdesigner-extension-command","---\nname: webflow-cli:designer-extension\ndescription: Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.\n---\n\n# Designer Extension\n\nCreate and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.\n\n## Important Note\n\n**ALWAYS use Bash tool for all Webflow CLI operations:**\n- Execute `webflow extension` commands via Bash tool\n- Use Read tool to examine generated files and schema (never modify)\n- Use Glob tool to discover project files\n- Verify CLI installation: `webflow --version`\n- Check authentication: `webflow auth login` (if needed)\n- DO NOT use Webflow MCP tools for CLI workflows\n- All CLI commands require proper descriptions (not context parameters)\n\n**Package Manager Detection:**\n- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)\n- If no lock file found, ask user which package manager to use (npm\u002Fpnpm\u002Fyarn)\n- Use detected package manager for all install\u002Fbuild commands\n\n## Instructions\n\n### Phase 1: Environment Verification\n1. **Verify CLI installed**: Run `webflow --version` to confirm CLI is installed\n2. **Check project state**: Check if already in an extension project (look for webflow.json with extension schema)\n3. **Identify operation type**: Determine if user wants to:\n   - List available templates\n   - Initialize new extension\n   - Bundle existing extension\n   - Serve extension locally\n\n### Phase 2: Template Listing & Selection\n4. **List templates** (if user asks or before init): Run `webflow extension list`\n5. **Show available templates**:\n   - `default` - Basic HTML\u002FCSS\u002FJavaScript template\n   - `react` - React-based template\n   - `typescript-alt` - Alternative TypeScript template\n6. **Ask user to select template** if initializing new extension\n\n### Phase 3: Extension Initialization\n7. **Choose project name**: Ask user for project directory name\n8. **Run init command**: Execute `webflow extension init \u003Cproject-name> \u003Ctemplate>`\n9. **Read generated schema**: Use Read tool to examine webflow.json\n10. **Show schema structure**: Display the 5 schema fields:\n    - `name` (required) - Extension name as it appears in Webflow\n    - `apiVersion` (required) - API version (2)\n    - `publicDir` (required) - Directory to build from (dist)\n    - `appIntents` (optional) - Element types that can create connections\n    - `appConnections` (optional) - Connection configurations\n11. **Install dependencies**: Run `npm install` in project directory\n\n### Phase 4: Local Development\n12. **Start dev server**: Execute `webflow extension serve [port]`\n13. **Show dev server info**:\n    - Default port: 1337 (unless user specifies different port)\n    - Local URL: http:\u002F\u002Flocalhost:[port]\n    - How to load in Designer\n14. **Provide loading instructions**:\n    - Open Webflow Designer\n    - Load extension from local URL\n    - Test functionality\n\n### Phase 5: Bundling for Upload\n15. **Run bundle command**: Execute `webflow extension bundle`\n16. **Show bundle output**: Display bundle.zip location and size\n17. **Provide upload instructions**: Guide for uploading to Webflow\n18. **Document next steps**: Testing and distribution guidance\n\n## Examples\n\n### Example 1: List Available Templates\n\n**User prompt:**\n```\nShow me the available Designer Extension templates\n```\n\n**Response:**\n```\n🔍 Designer Extension Templates\n\nListing available templates...\nExecuting: webflow extension list\n\nOutput:\nAvailable templates:\n1. default        - Basic HTML, CSS, and JavaScript\n2. react          - React-based extension\n3. typescript-alt - Alternative TypeScript template\n\nTo create a new extension:\nwebflow extension init \u003Cproject-name> \u003Ctemplate>\n\nExample:\nwebflow extension init my-extension react\n```\n\n### Example 2: Initialize New Extension\n\n**User prompt:**\n```\nCreate a new Designer Extension called gallery-manager using React\n```\n\n**Step 1: Initialize Project**\n```\n📋 Initialize Designer Extension\n\nProject name: gallery-manager\nTemplate: react\n\nExecuting: webflow extension init gallery-manager react\n\nOutput:\n✓ Created extension project at .\u002Fgallery-manager\n✓ Generated project structure\n✓ Created webflow.json with extension schema\n✓ Set up React template\n\n📁 Project Structure:\n.\u002Fgallery-manager\u002F\n├── webflow.json         # Extension schema\n├── package.json         # Dependencies\n├── src\u002F\n│   ├── index.html\n│   ├── index.tsx\n│   └── styles.css\n├── dist\u002F                # Build output\n└── README.md\n\nInstalling dependencies...\nExecuting: cd gallery-manager && npm install\n\n✓ Dependencies installed (45 packages)\n```\n\n**Step 2: Show Schema**\n```\n📋 Extension Schema (webflow.json)\n\nReading webflow.json...\n\n{\n  \"name\": \"Gallery Manager\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {},\n  \"appConnections\": []\n}\n\nSchema Fields:\n✓ name (required)      - Extension name in Webflow\n✓ apiVersion (required) - API version: 2\n✓ publicDir (required)  - Build directory: dist\n  appIntents (optional) - Element connection types\n  appConnections (optional) - Connection configs\n\nExtension ready for development!\n```\n\n### Example 3: Serve Extension Locally\n\n**User prompt:**\n```\nRun the extension on my local dev server\n```\n\n**Default Port (1337):**\n```\n🚀 Starting Development Server\n\nExecuting: webflow extension serve\n\nOutput:\n✓ Building extension\n✓ Starting dev server\n✓ Extension ready\n\n📋 Development Server Running\n\nLocal URL: http:\u002F\u002Flocalhost:1337\nStatus: ✓ Active\n\nHow to Load in Designer:\n1. Open Webflow Designer\n2. Open any site\n3. Load extension from URL: http:\u002F\u002Flocalhost:1337\n\nPress Ctrl+C to stop server\n```\n\n**Custom Port:**\n```\nUser: \"Run on port 3000 instead\"\n\n🚀 Starting Development Server\n\nExecuting: webflow extension serve 3000\n\nOutput:\n✓ Building extension\n✓ Starting dev server on port 3000\n✓ Extension ready\n\n📋 Development Server Running\n\nLocal URL: http:\u002F\u002Flocalhost:3000\nStatus: ✓ Active\n\nLoad in Designer: http:\u002F\u002Flocalhost:3000\n```\n\n### Example 4: Bundle Extension\n\n**User prompt:**\n```\nBundle my extension for upload\n```\n\n**Step 1: Bundle**\n```\n📦 Bundling Extension\n\nExecuting: webflow extension bundle\n\nOutput:\n✓ Building production bundle\n✓ Creating bundle.zip\n✓ Bundle created successfully\n\nBundle Details:\n- File: bundle.zip\n- Location: .\u002Fdist\u002Fbundle.zip\n- Size: 245 KB\n\n✅ Bundle ready for upload!\n```\n\n**Step 2: Upload Instructions**\n```\n📤 Upload Instructions\n\nYour extension is bundled and ready to upload.\n\nUpload Steps:\n1. Go to Webflow Designer Extensions dashboard\n2. Upload bundle.zip\n3. Test the extension\n4. Submit for review (if distributing)\n\nBundle location: .\u002Fdist\u002Fbundle.zip\n```\n\n### Example 5: Complete Workflow\n\n**User prompt:**\n```\nCreate a new Designer Extension for managing colors\n```\n\n**Step 1: List Templates**\n```\n🔍 Designer Extension Workflow\n\nFirst, let me show available templates.\n\nExecuting: webflow extension list\n\nAvailable templates:\n1. default        - Basic HTML\u002FCSS\u002FJavaScript\n2. react          - React-based (recommended)\n3. typescript-alt - TypeScript alternative\n\nWhich template would you like to use? (default\u002Freact\u002Ftypescript-alt)\n```\n\n*User selects: react*\n\n**Step 2: Initialize**\n```\n📋 Creating Extension\n\nProject name: color-manager\nTemplate: react\n\nExecuting: webflow extension init color-manager react\n\n✓ Project created at .\u002Fcolor-manager\n✓ webflow.json generated\n✓ React template configured\n\nInstalling dependencies...\n✓ npm install complete\n\n📋 Extension Schema:\n{\n  \"name\": \"Color Manager\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {},\n  \"appConnections\": []\n}\n```\n\n**Step 3: Start Development**\n```\n🚀 Starting Dev Server\n\nExecuting: webflow extension serve\n\n✓ Server running at http:\u002F\u002Flocalhost:1337\n\nLoad in Designer:\n1. Open Webflow Designer\n2. Load extension from: http:\u002F\u002Flocalhost:1337\n3. Start developing!\n\nServer running... (Press Ctrl+C to stop)\n```\n\n## Guidelines\n\n### Phase 1: CLI Verification\n\n**Installation Check:**\n```bash\n# Check if CLI is installed\nwebflow --version\n\n# If not installed, guide user:\nnpm install -g @webflow\u002Fcli\n```\n\n**Authentication (if needed):**\n```bash\n# Site authentication if required\nwebflow auth login\n```\n\n### Phase 2: Template Management\n\n**List Templates Command:**\n```bash\nwebflow extension list\n```\n\n**Available Templates:**\n- **default** - Basic HTML, CSS, and JavaScript template\n- **react** - React-based extension with modern tooling\n- **typescript-alt** - Alternative TypeScript template\n\n### Phase 3: Initialization\n\n**Init Command:**\n```bash\nwebflow extension init \u003Cproject-name> \u003Ctemplate>\n```\n\n**Arguments:**\n- `\u003Cproject-name>` (required) - Name of the new project directory\n- `\u003Ctemplate>` (required) - One of: default, react, typescript-alt\n\n**Example Commands:**\n```bash\n# Initialize with default template\nwebflow extension init my-extension default\n\n# Initialize with React template\nwebflow extension init my-extension react\n\n# Initialize with TypeScript template\nwebflow extension init my-extension typescript-alt\n```\n\n**Project Structure After Init:**\n```\n\u002Fproject-name\u002F\n├── webflow.json         # Extension schema (required)\n├── package.json         # Dependencies\n├── src\u002F                 # Source files\n│   ├── index.html\n│   ├── index.tsx (or .js)\n│   └── styles.css\n├── dist\u002F                # Build output directory\n└── README.md\n```\n\n### Phase 4: Extension Schema\n\n**Schema in webflow.json:**\n```json\n{\n  \"name\": \"\u003CYour Extension Name>\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {\n    \"image\": [\"manage\"],\n    \"form\": [\"manage\"]\n  },\n  \"appConnections\": [\n    \"myAppImageConnection\",\n    \"myAppFormConnection\"\n  ]\n}\n```\n\n**Schema Fields:**\n\n| Field            | Description                                         | Default | Required |\n| ---------------- | --------------------------------------------------- | ------- | -------- |\n| `name`           | Extension name as it appears in Webflow             | -       | Yes      |\n| `apiVersion`     | API version to use for extension                    | `2`     | Yes      |\n| `publicDir`      | Directory to build and serve extension from         | `dist`  | Yes      |\n| `appIntents`     | Element types that can create connections           | `{}`    | No       |\n| `appConnections` | Connection configurations for extension             | `[]`    | No       |\n\n**Required Fields:**\n- `name` - Must be unique and descriptive\n- `apiVersion` - Currently must be \"2\"\n- `publicDir` - Directory where built files are placed (default: \"dist\")\n\n**Optional Fields:**\n- `appIntents` - Defines which element types can connect to your extension\n  - Example: `{\"image\": [\"manage\"], \"form\": [\"manage\"]}`\n- `appConnections` - Array of connection identifiers\n  - Example: `[\"myAppImageConnection\", \"myAppFormConnection\"]`\n\n### Phase 5: Local Development\n\n**Serve Command:**\n```bash\n# Serve on default port (1337)\nwebflow extension serve\n\n# Serve on custom port\nwebflow extension serve 3000\n```\n\n**Arguments:**\n- `[port]` (optional) - Port number to serve on (default: 1337)\n\n**Development Server:**\n- Default URL: http:\u002F\u002Flocalhost:1337\n- Custom port: http:\u002F\u002Flocalhost:[port]\n- Auto-rebuilds on file changes\n- Hot reload for faster development\n\n**Loading in Designer:**\n1. Open Webflow Designer\n2. Open any site\n3. Go to Extensions menu\n4. Load extension from local URL: http:\u002F\u002Flocalhost:[port]\n5. Extension appears in Designer\n\n### Phase 6: Bundling\n\n**Bundle Command:**\n```bash\nwebflow extension bundle\n```\n\n**Output:**\n- Creates `bundle.zip` file in project directory\n- Contains all built files from `publicDir`\n- Ready to upload to Webflow\n\n**Bundle Contents:**\n- Built JavaScript and CSS files\n- HTML entry points\n- Assets from publicDir\n- Extension schema\n\n### Error Handling\n\n**CLI Not Installed:**\n```\n❌ Webflow CLI Not Found\n\nDesigner Extensions require the Webflow CLI.\n\nInstallation:\nnpm install -g @webflow\u002Fcli\n\nAfter installation, verify:\nwebflow --version\n\nDocumentation: https:\u002F\u002Fdevelopers.webflow.com\u002Fcli\n```\n\n**Invalid Template:**\n```\n❌ Invalid Template\n\nError: Template \"vue\" not found\n\nAvailable templates:\n- default\n- react\n- typescript-alt\n\nRetry with valid template:\nwebflow extension init my-extension react\n```\n\n**Port Already in Use:**\n```\n❌ Development Server Failed to Start\n\nError: Port 1337 is already in use\n\nSolutions:\n1. Stop other process on port 1337\n2. Use different port:\n   webflow extension serve 3000\n\nFind process using port:\nlsof -ti:1337 | xargs kill -9\n```\n\n**Missing webflow.json:**\n```\n❌ Extension Schema Not Found\n\nError: webflow.json not found in current directory\n\nThis directory is not an extension project.\n\nSolutions:\n1. Initialize new extension:\n   webflow extension init \u003Cname> \u003Ctemplate>\n2. Navigate to existing extension directory\n3. Create webflow.json with required schema\n```\n\n**Bundle Failed:**\n```\n❌ Bundle Creation Failed\n\nError: Build failed with errors\n\nCommon Causes:\n- Missing dependencies (run: npm install)\n- Build errors in source files\n- Invalid webflow.json schema\n- Missing publicDir directory\n\nFix errors and retry:\nwebflow extension bundle\n```\n\n### File Operations\n\n**Reading Extension Files:**\nAlways use Read tool (never modify):\n```\n# View extension schema\nRead: webflow.json\n\n# View package dependencies\nRead: package.json\n\n# View source files\nRead: src\u002Findex.html\nRead: src\u002Findex.tsx\n```\n\n**Discovering Project Files:**\nUse Glob tool to find files:\n```\n# Find all source files\nGlob: src\u002F**\u002F*\n\n# Find configuration files\nGlob: *.json\n\n# Find built files\nGlob: dist\u002F**\u002F*\n```\n\n**Never Use Write\u002FEdit Tools:**\n- Don't create or modify webflow.json with Write tool\n- Don't edit generated files\n- Let CLI generate all project files\n- Only read files to show content\n\n### Progress Indicators\n\n**For Init:**\n```\n📋 Creating Extension...\n\n[████████████████████████] 100%\n\n✓ Project created\n✓ Dependencies installed\nElapsed: 12s\n```\n\n**For Bundle:**\n```\n📦 Bundling Extension...\n\n[████████████████████████] 100%\n\n✓ Bundle created: bundle.zip\nElapsed: 5s\n```\n\n**For Serve:**\n```\n🚀 Starting Server...\n\n[████████████████████████] 100%\n\n✓ Server ready at http:\u002F\u002Flocalhost:1337\nElapsed: 3s\n```\n\n### Best Practices\n\n**Template Selection:**\n- Use **react** template for modern component-based development\n- Use **default** template for simple extensions or learning\n- Use **typescript-alt** for TypeScript-based projects\n\n**Development Workflow:**\n1. List available templates\n2. Initialize project with chosen template\n3. Install dependencies\n4. Serve locally for development\n5. Test in Designer\n6. Bundle for upload\n7. Upload to Webflow\n\n**Schema Configuration:**\n- Always include required fields: name, apiVersion, publicDir\n- Set appropriate appIntents if your extension connects to elements\n- Define appConnections for element integrations\n- Keep name descriptive and unique\n\n**Local Development:**\n- Use default port 1337 for consistency\n- Keep dev server running during development\n- Test frequently in Designer\n- Check console for errors\n\n**Bundling:**\n- Bundle only when ready for upload or distribution\n- Verify build completes without errors\n- Check bundle.zip size\n- Test bundled version before uploading\n\n## Quick Reference\n\n**Workflow:** list templates → init → serve → develop → bundle → upload\n\n**Key Commands:**\n- `webflow extension list` - Show available templates\n- `webflow extension init \u003Cproject-name> \u003Ctemplate>` - Create new extension\n- `webflow extension serve [port]` - Start dev server (default: 1337)\n- `webflow extension bundle` - Create bundle.zip for upload\n\n**Templates:** default, react, typescript-alt\n\n**Schema Fields (webflow.json):**\n- `name` (required) - Extension name\n- `apiVersion` (required) - API version (2)\n- `publicDir` (required) - Build directory\n- `appIntents` (optional) - Element connection types\n- `appConnections` (optional) - Connection configs\n\n**Dev Server:** http:\u002F\u002Flocalhost:1337 (or custom port)\n\n**Bundle Output:** bundle.zip in project directory\n\n**Documentation:** https:\u002F\u002Fdevelopers.webflow.com\u002Fdesigner\u002Freference\u002Fintroduction\n",{"data":41,"body":42},{"name":5,"description":7},{"type":43,"children":44},"root",[45,54,60,67,76,139,147,189,195,202,266,272,347,353,478,484,567,573,622,628,634,642,654,662,671,677,684,693,701,710,718,727,733,740,749,757,766,774,783,789,796,805,813,822,830,839,845,852,861,869,878,887,895,904,912,921,927,933,941,1019,1027,1059,1065,1073,1097,1105,1134,1140,1148,1211,1219,1244,1252,1372,1380,1389,1395,1403,1732,1740,1919,1927,1960,1968,2018,2024,2032,2100,2107,2121,2129,2164,2172,2205,2211,2219,2242,2250,2281,2289,2312,2318,2326,2335,2343,2352,2360,2369,2377,2386,2394,2403,2409,2419,2428,2438,2447,2455,2478,2484,2492,2501,2509,2518,2526,2535,2541,2549,2583,2591,2627,2635,2658,2666,2689,2697,2720,2726,2736,2744,2787,2797,2805,2857,2874,2884,2899],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"designer-extension",[51],{"type":52,"value":53},"text","Designer Extension",{"type":46,"tag":55,"props":56,"children":57},"p",{},[58],{"type":52,"value":59},"Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.",{"type":46,"tag":61,"props":62,"children":64},"h2",{"id":63},"important-note",[65],{"type":52,"value":66},"Important Note",{"type":46,"tag":55,"props":68,"children":69},{},[70],{"type":46,"tag":71,"props":72,"children":73},"strong",{},[74],{"type":52,"value":75},"ALWAYS use Bash tool for all Webflow CLI operations:",{"type":46,"tag":77,"props":78,"children":79},"ul",{},[80,95,100,105,116,129,134],{"type":46,"tag":81,"props":82,"children":83},"li",{},[84,86,93],{"type":52,"value":85},"Execute ",{"type":46,"tag":87,"props":88,"children":90},"code",{"className":89},[],[91],{"type":52,"value":92},"webflow extension",{"type":52,"value":94}," commands via Bash tool",{"type":46,"tag":81,"props":96,"children":97},{},[98],{"type":52,"value":99},"Use Read tool to examine generated files and schema (never modify)",{"type":46,"tag":81,"props":101,"children":102},{},[103],{"type":52,"value":104},"Use Glob tool to discover project files",{"type":46,"tag":81,"props":106,"children":107},{},[108,110],{"type":52,"value":109},"Verify CLI installation: ",{"type":46,"tag":87,"props":111,"children":113},{"className":112},[],[114],{"type":52,"value":115},"webflow --version",{"type":46,"tag":81,"props":117,"children":118},{},[119,121,127],{"type":52,"value":120},"Check authentication: ",{"type":46,"tag":87,"props":122,"children":124},{"className":123},[],[125],{"type":52,"value":126},"webflow auth login",{"type":52,"value":128}," (if needed)",{"type":46,"tag":81,"props":130,"children":131},{},[132],{"type":52,"value":133},"DO NOT use Webflow MCP tools for CLI workflows",{"type":46,"tag":81,"props":135,"children":136},{},[137],{"type":52,"value":138},"All CLI commands require proper descriptions (not context parameters)",{"type":46,"tag":55,"props":140,"children":141},{},[142],{"type":46,"tag":71,"props":143,"children":144},{},[145],{"type":52,"value":146},"Package Manager Detection:",{"type":46,"tag":77,"props":148,"children":149},{},[150,179,184],{"type":46,"tag":81,"props":151,"children":152},{},[153,155,161,163,169,171,177],{"type":52,"value":154},"Check for lock files: ",{"type":46,"tag":87,"props":156,"children":158},{"className":157},[],[159],{"type":52,"value":160},"package-lock.json",{"type":52,"value":162}," (npm), ",{"type":46,"tag":87,"props":164,"children":166},{"className":165},[],[167],{"type":52,"value":168},"pnpm-lock.yaml",{"type":52,"value":170}," (pnpm), ",{"type":46,"tag":87,"props":172,"children":174},{"className":173},[],[175],{"type":52,"value":176},"yarn.lock",{"type":52,"value":178}," (yarn)",{"type":46,"tag":81,"props":180,"children":181},{},[182],{"type":52,"value":183},"If no lock file found, ask user which package manager to use (npm\u002Fpnpm\u002Fyarn)",{"type":46,"tag":81,"props":185,"children":186},{},[187],{"type":52,"value":188},"Use detected package manager for all install\u002Fbuild commands",{"type":46,"tag":61,"props":190,"children":192},{"id":191},"instructions",[193],{"type":52,"value":194},"Instructions",{"type":46,"tag":196,"props":197,"children":199},"h3",{"id":198},"phase-1-environment-verification",[200],{"type":52,"value":201},"Phase 1: Environment Verification",{"type":46,"tag":203,"props":204,"children":205},"ol",{},[206,223,233],{"type":46,"tag":81,"props":207,"children":208},{},[209,214,216,221],{"type":46,"tag":71,"props":210,"children":211},{},[212],{"type":52,"value":213},"Verify CLI installed",{"type":52,"value":215},": Run ",{"type":46,"tag":87,"props":217,"children":219},{"className":218},[],[220],{"type":52,"value":115},{"type":52,"value":222}," to confirm CLI is installed",{"type":46,"tag":81,"props":224,"children":225},{},[226,231],{"type":46,"tag":71,"props":227,"children":228},{},[229],{"type":52,"value":230},"Check project state",{"type":52,"value":232},": Check if already in an extension project (look for webflow.json with extension schema)",{"type":46,"tag":81,"props":234,"children":235},{},[236,241,243],{"type":46,"tag":71,"props":237,"children":238},{},[239],{"type":52,"value":240},"Identify operation type",{"type":52,"value":242},": Determine if user wants to:\n",{"type":46,"tag":77,"props":244,"children":245},{},[246,251,256,261],{"type":46,"tag":81,"props":247,"children":248},{},[249],{"type":52,"value":250},"List available templates",{"type":46,"tag":81,"props":252,"children":253},{},[254],{"type":52,"value":255},"Initialize new extension",{"type":46,"tag":81,"props":257,"children":258},{},[259],{"type":52,"value":260},"Bundle existing extension",{"type":46,"tag":81,"props":262,"children":263},{},[264],{"type":52,"value":265},"Serve extension locally",{"type":46,"tag":196,"props":267,"children":269},{"id":268},"phase-2-template-listing-selection",[270],{"type":52,"value":271},"Phase 2: Template Listing & Selection",{"type":46,"tag":203,"props":273,"children":275},{"start":274},4,[276,292,337],{"type":46,"tag":81,"props":277,"children":278},{},[279,284,286],{"type":46,"tag":71,"props":280,"children":281},{},[282],{"type":52,"value":283},"List templates",{"type":52,"value":285}," (if user asks or before init): Run ",{"type":46,"tag":87,"props":287,"children":289},{"className":288},[],[290],{"type":52,"value":291},"webflow extension list",{"type":46,"tag":81,"props":293,"children":294},{},[295,300,302],{"type":46,"tag":71,"props":296,"children":297},{},[298],{"type":52,"value":299},"Show available templates",{"type":52,"value":301},":\n",{"type":46,"tag":77,"props":303,"children":304},{},[305,316,326],{"type":46,"tag":81,"props":306,"children":307},{},[308,314],{"type":46,"tag":87,"props":309,"children":311},{"className":310},[],[312],{"type":52,"value":313},"default",{"type":52,"value":315}," - Basic HTML\u002FCSS\u002FJavaScript template",{"type":46,"tag":81,"props":317,"children":318},{},[319,324],{"type":46,"tag":87,"props":320,"children":322},{"className":321},[],[323],{"type":52,"value":15},{"type":52,"value":325}," - React-based template",{"type":46,"tag":81,"props":327,"children":328},{},[329,335],{"type":46,"tag":87,"props":330,"children":332},{"className":331},[],[333],{"type":52,"value":334},"typescript-alt",{"type":52,"value":336}," - Alternative TypeScript template",{"type":46,"tag":81,"props":338,"children":339},{},[340,345],{"type":46,"tag":71,"props":341,"children":342},{},[343],{"type":52,"value":344},"Ask user to select template",{"type":52,"value":346}," if initializing new extension",{"type":46,"tag":196,"props":348,"children":350},{"id":349},"phase-3-extension-initialization",[351],{"type":52,"value":352},"Phase 3: Extension Initialization",{"type":46,"tag":203,"props":354,"children":356},{"start":355},7,[357,367,383,393,461],{"type":46,"tag":81,"props":358,"children":359},{},[360,365],{"type":46,"tag":71,"props":361,"children":362},{},[363],{"type":52,"value":364},"Choose project name",{"type":52,"value":366},": Ask user for project directory name",{"type":46,"tag":81,"props":368,"children":369},{},[370,375,377],{"type":46,"tag":71,"props":371,"children":372},{},[373],{"type":52,"value":374},"Run init command",{"type":52,"value":376},": Execute ",{"type":46,"tag":87,"props":378,"children":380},{"className":379},[],[381],{"type":52,"value":382},"webflow extension init \u003Cproject-name> \u003Ctemplate>",{"type":46,"tag":81,"props":384,"children":385},{},[386,391],{"type":46,"tag":71,"props":387,"children":388},{},[389],{"type":52,"value":390},"Read generated schema",{"type":52,"value":392},": Use Read tool to examine webflow.json",{"type":46,"tag":81,"props":394,"children":395},{},[396,401,403],{"type":46,"tag":71,"props":397,"children":398},{},[399],{"type":52,"value":400},"Show schema structure",{"type":52,"value":402},": Display the 5 schema fields:\n",{"type":46,"tag":77,"props":404,"children":405},{},[406,417,428,439,450],{"type":46,"tag":81,"props":407,"children":408},{},[409,415],{"type":46,"tag":87,"props":410,"children":412},{"className":411},[],[413],{"type":52,"value":414},"name",{"type":52,"value":416}," (required) - Extension name as it appears in Webflow",{"type":46,"tag":81,"props":418,"children":419},{},[420,426],{"type":46,"tag":87,"props":421,"children":423},{"className":422},[],[424],{"type":52,"value":425},"apiVersion",{"type":52,"value":427}," (required) - API version (2)",{"type":46,"tag":81,"props":429,"children":430},{},[431,437],{"type":46,"tag":87,"props":432,"children":434},{"className":433},[],[435],{"type":52,"value":436},"publicDir",{"type":52,"value":438}," (required) - Directory to build from (dist)",{"type":46,"tag":81,"props":440,"children":441},{},[442,448],{"type":46,"tag":87,"props":443,"children":445},{"className":444},[],[446],{"type":52,"value":447},"appIntents",{"type":52,"value":449}," (optional) - Element types that can create connections",{"type":46,"tag":81,"props":451,"children":452},{},[453,459],{"type":46,"tag":87,"props":454,"children":456},{"className":455},[],[457],{"type":52,"value":458},"appConnections",{"type":52,"value":460}," (optional) - Connection configurations",{"type":46,"tag":81,"props":462,"children":463},{},[464,469,470,476],{"type":46,"tag":71,"props":465,"children":466},{},[467],{"type":52,"value":468},"Install dependencies",{"type":52,"value":215},{"type":46,"tag":87,"props":471,"children":473},{"className":472},[],[474],{"type":52,"value":475},"npm install",{"type":52,"value":477}," in project directory",{"type":46,"tag":196,"props":479,"children":481},{"id":480},"phase-4-local-development",[482],{"type":52,"value":483},"Phase 4: Local Development",{"type":46,"tag":203,"props":485,"children":487},{"start":486},12,[488,503,540],{"type":46,"tag":81,"props":489,"children":490},{},[491,496,497],{"type":46,"tag":71,"props":492,"children":493},{},[494],{"type":52,"value":495},"Start dev server",{"type":52,"value":376},{"type":46,"tag":87,"props":498,"children":500},{"className":499},[],[501],{"type":52,"value":502},"webflow extension serve [port]",{"type":46,"tag":81,"props":504,"children":505},{},[506,511,512],{"type":46,"tag":71,"props":507,"children":508},{},[509],{"type":52,"value":510},"Show dev server info",{"type":52,"value":301},{"type":46,"tag":77,"props":513,"children":514},{},[515,520,535],{"type":46,"tag":81,"props":516,"children":517},{},[518],{"type":52,"value":519},"Default port: 1337 (unless user specifies different port)",{"type":46,"tag":81,"props":521,"children":522},{},[523,525,533],{"type":52,"value":524},"Local URL: ",{"type":46,"tag":526,"props":527,"children":530},"a",{"rel":528},[529],"nofollow",[531],{"type":52,"value":532},"http:\u002F\u002Flocalhost:[port",{"type":52,"value":534},"]",{"type":46,"tag":81,"props":536,"children":537},{},[538],{"type":52,"value":539},"How to load in Designer",{"type":46,"tag":81,"props":541,"children":542},{},[543,548,549],{"type":46,"tag":71,"props":544,"children":545},{},[546],{"type":52,"value":547},"Provide loading instructions",{"type":52,"value":301},{"type":46,"tag":77,"props":550,"children":551},{},[552,557,562],{"type":46,"tag":81,"props":553,"children":554},{},[555],{"type":52,"value":556},"Open Webflow Designer",{"type":46,"tag":81,"props":558,"children":559},{},[560],{"type":52,"value":561},"Load extension from local URL",{"type":46,"tag":81,"props":563,"children":564},{},[565],{"type":52,"value":566},"Test functionality",{"type":46,"tag":196,"props":568,"children":570},{"id":569},"phase-5-bundling-for-upload",[571],{"type":52,"value":572},"Phase 5: Bundling for Upload",{"type":46,"tag":203,"props":574,"children":576},{"start":575},15,[577,592,602,612],{"type":46,"tag":81,"props":578,"children":579},{},[580,585,586],{"type":46,"tag":71,"props":581,"children":582},{},[583],{"type":52,"value":584},"Run bundle command",{"type":52,"value":376},{"type":46,"tag":87,"props":587,"children":589},{"className":588},[],[590],{"type":52,"value":591},"webflow extension bundle",{"type":46,"tag":81,"props":593,"children":594},{},[595,600],{"type":46,"tag":71,"props":596,"children":597},{},[598],{"type":52,"value":599},"Show bundle output",{"type":52,"value":601},": Display bundle.zip location and size",{"type":46,"tag":81,"props":603,"children":604},{},[605,610],{"type":46,"tag":71,"props":606,"children":607},{},[608],{"type":52,"value":609},"Provide upload instructions",{"type":52,"value":611},": Guide for uploading to Webflow",{"type":46,"tag":81,"props":613,"children":614},{},[615,620],{"type":46,"tag":71,"props":616,"children":617},{},[618],{"type":52,"value":619},"Document next steps",{"type":52,"value":621},": Testing and distribution guidance",{"type":46,"tag":61,"props":623,"children":625},{"id":624},"examples",[626],{"type":52,"value":627},"Examples",{"type":46,"tag":196,"props":629,"children":631},{"id":630},"example-1-list-available-templates",[632],{"type":52,"value":633},"Example 1: List Available Templates",{"type":46,"tag":55,"props":635,"children":636},{},[637],{"type":46,"tag":71,"props":638,"children":639},{},[640],{"type":52,"value":641},"User prompt:",{"type":46,"tag":643,"props":644,"children":648},"pre",{"className":645,"code":647,"language":52},[646],"language-text","Show me the available Designer Extension templates\n",[649],{"type":46,"tag":87,"props":650,"children":652},{"__ignoreMap":651},"",[653],{"type":52,"value":647},{"type":46,"tag":55,"props":655,"children":656},{},[657],{"type":46,"tag":71,"props":658,"children":659},{},[660],{"type":52,"value":661},"Response:",{"type":46,"tag":643,"props":663,"children":666},{"className":664,"code":665,"language":52},[646],"🔍 Designer Extension Templates\n\nListing available templates...\nExecuting: webflow extension list\n\nOutput:\nAvailable templates:\n1. default        - Basic HTML, CSS, and JavaScript\n2. react          - React-based extension\n3. typescript-alt - Alternative TypeScript template\n\nTo create a new extension:\nwebflow extension init \u003Cproject-name> \u003Ctemplate>\n\nExample:\nwebflow extension init my-extension react\n",[667],{"type":46,"tag":87,"props":668,"children":669},{"__ignoreMap":651},[670],{"type":52,"value":665},{"type":46,"tag":196,"props":672,"children":674},{"id":673},"example-2-initialize-new-extension",[675],{"type":52,"value":676},"Example 2: Initialize New Extension",{"type":46,"tag":55,"props":678,"children":679},{},[680],{"type":46,"tag":71,"props":681,"children":682},{},[683],{"type":52,"value":641},{"type":46,"tag":643,"props":685,"children":688},{"className":686,"code":687,"language":52},[646],"Create a new Designer Extension called gallery-manager using React\n",[689],{"type":46,"tag":87,"props":690,"children":691},{"__ignoreMap":651},[692],{"type":52,"value":687},{"type":46,"tag":55,"props":694,"children":695},{},[696],{"type":46,"tag":71,"props":697,"children":698},{},[699],{"type":52,"value":700},"Step 1: Initialize Project",{"type":46,"tag":643,"props":702,"children":705},{"className":703,"code":704,"language":52},[646],"📋 Initialize Designer Extension\n\nProject name: gallery-manager\nTemplate: react\n\nExecuting: webflow extension init gallery-manager react\n\nOutput:\n✓ Created extension project at .\u002Fgallery-manager\n✓ Generated project structure\n✓ Created webflow.json with extension schema\n✓ Set up React template\n\n📁 Project Structure:\n.\u002Fgallery-manager\u002F\n├── webflow.json         # Extension schema\n├── package.json         # Dependencies\n├── src\u002F\n│   ├── index.html\n│   ├── index.tsx\n│   └── styles.css\n├── dist\u002F                # Build output\n└── README.md\n\nInstalling dependencies...\nExecuting: cd gallery-manager && npm install\n\n✓ Dependencies installed (45 packages)\n",[706],{"type":46,"tag":87,"props":707,"children":708},{"__ignoreMap":651},[709],{"type":52,"value":704},{"type":46,"tag":55,"props":711,"children":712},{},[713],{"type":46,"tag":71,"props":714,"children":715},{},[716],{"type":52,"value":717},"Step 2: Show Schema",{"type":46,"tag":643,"props":719,"children":722},{"className":720,"code":721,"language":52},[646],"📋 Extension Schema (webflow.json)\n\nReading webflow.json...\n\n{\n  \"name\": \"Gallery Manager\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {},\n  \"appConnections\": []\n}\n\nSchema Fields:\n✓ name (required)      - Extension name in Webflow\n✓ apiVersion (required) - API version: 2\n✓ publicDir (required)  - Build directory: dist\n  appIntents (optional) - Element connection types\n  appConnections (optional) - Connection configs\n\nExtension ready for development!\n",[723],{"type":46,"tag":87,"props":724,"children":725},{"__ignoreMap":651},[726],{"type":52,"value":721},{"type":46,"tag":196,"props":728,"children":730},{"id":729},"example-3-serve-extension-locally",[731],{"type":52,"value":732},"Example 3: Serve Extension Locally",{"type":46,"tag":55,"props":734,"children":735},{},[736],{"type":46,"tag":71,"props":737,"children":738},{},[739],{"type":52,"value":641},{"type":46,"tag":643,"props":741,"children":744},{"className":742,"code":743,"language":52},[646],"Run the extension on my local dev server\n",[745],{"type":46,"tag":87,"props":746,"children":747},{"__ignoreMap":651},[748],{"type":52,"value":743},{"type":46,"tag":55,"props":750,"children":751},{},[752],{"type":46,"tag":71,"props":753,"children":754},{},[755],{"type":52,"value":756},"Default Port (1337):",{"type":46,"tag":643,"props":758,"children":761},{"className":759,"code":760,"language":52},[646],"🚀 Starting Development Server\n\nExecuting: webflow extension serve\n\nOutput:\n✓ Building extension\n✓ Starting dev server\n✓ Extension ready\n\n📋 Development Server Running\n\nLocal URL: http:\u002F\u002Flocalhost:1337\nStatus: ✓ Active\n\nHow to Load in Designer:\n1. Open Webflow Designer\n2. Open any site\n3. Load extension from URL: http:\u002F\u002Flocalhost:1337\n\nPress Ctrl+C to stop server\n",[762],{"type":46,"tag":87,"props":763,"children":764},{"__ignoreMap":651},[765],{"type":52,"value":760},{"type":46,"tag":55,"props":767,"children":768},{},[769],{"type":46,"tag":71,"props":770,"children":771},{},[772],{"type":52,"value":773},"Custom Port:",{"type":46,"tag":643,"props":775,"children":778},{"className":776,"code":777,"language":52},[646],"User: \"Run on port 3000 instead\"\n\n🚀 Starting Development Server\n\nExecuting: webflow extension serve 3000\n\nOutput:\n✓ Building extension\n✓ Starting dev server on port 3000\n✓ Extension ready\n\n📋 Development Server Running\n\nLocal URL: http:\u002F\u002Flocalhost:3000\nStatus: ✓ Active\n\nLoad in Designer: http:\u002F\u002Flocalhost:3000\n",[779],{"type":46,"tag":87,"props":780,"children":781},{"__ignoreMap":651},[782],{"type":52,"value":777},{"type":46,"tag":196,"props":784,"children":786},{"id":785},"example-4-bundle-extension",[787],{"type":52,"value":788},"Example 4: Bundle Extension",{"type":46,"tag":55,"props":790,"children":791},{},[792],{"type":46,"tag":71,"props":793,"children":794},{},[795],{"type":52,"value":641},{"type":46,"tag":643,"props":797,"children":800},{"className":798,"code":799,"language":52},[646],"Bundle my extension for upload\n",[801],{"type":46,"tag":87,"props":802,"children":803},{"__ignoreMap":651},[804],{"type":52,"value":799},{"type":46,"tag":55,"props":806,"children":807},{},[808],{"type":46,"tag":71,"props":809,"children":810},{},[811],{"type":52,"value":812},"Step 1: Bundle",{"type":46,"tag":643,"props":814,"children":817},{"className":815,"code":816,"language":52},[646],"📦 Bundling Extension\n\nExecuting: webflow extension bundle\n\nOutput:\n✓ Building production bundle\n✓ Creating bundle.zip\n✓ Bundle created successfully\n\nBundle Details:\n- File: bundle.zip\n- Location: .\u002Fdist\u002Fbundle.zip\n- Size: 245 KB\n\n✅ Bundle ready for upload!\n",[818],{"type":46,"tag":87,"props":819,"children":820},{"__ignoreMap":651},[821],{"type":52,"value":816},{"type":46,"tag":55,"props":823,"children":824},{},[825],{"type":46,"tag":71,"props":826,"children":827},{},[828],{"type":52,"value":829},"Step 2: Upload Instructions",{"type":46,"tag":643,"props":831,"children":834},{"className":832,"code":833,"language":52},[646],"📤 Upload Instructions\n\nYour extension is bundled and ready to upload.\n\nUpload Steps:\n1. Go to Webflow Designer Extensions dashboard\n2. Upload bundle.zip\n3. Test the extension\n4. Submit for review (if distributing)\n\nBundle location: .\u002Fdist\u002Fbundle.zip\n",[835],{"type":46,"tag":87,"props":836,"children":837},{"__ignoreMap":651},[838],{"type":52,"value":833},{"type":46,"tag":196,"props":840,"children":842},{"id":841},"example-5-complete-workflow",[843],{"type":52,"value":844},"Example 5: Complete Workflow",{"type":46,"tag":55,"props":846,"children":847},{},[848],{"type":46,"tag":71,"props":849,"children":850},{},[851],{"type":52,"value":641},{"type":46,"tag":643,"props":853,"children":856},{"className":854,"code":855,"language":52},[646],"Create a new Designer Extension for managing colors\n",[857],{"type":46,"tag":87,"props":858,"children":859},{"__ignoreMap":651},[860],{"type":52,"value":855},{"type":46,"tag":55,"props":862,"children":863},{},[864],{"type":46,"tag":71,"props":865,"children":866},{},[867],{"type":52,"value":868},"Step 1: List Templates",{"type":46,"tag":643,"props":870,"children":873},{"className":871,"code":872,"language":52},[646],"🔍 Designer Extension Workflow\n\nFirst, let me show available templates.\n\nExecuting: webflow extension list\n\nAvailable templates:\n1. default        - Basic HTML\u002FCSS\u002FJavaScript\n2. react          - React-based (recommended)\n3. typescript-alt - TypeScript alternative\n\nWhich template would you like to use? (default\u002Freact\u002Ftypescript-alt)\n",[874],{"type":46,"tag":87,"props":875,"children":876},{"__ignoreMap":651},[877],{"type":52,"value":872},{"type":46,"tag":55,"props":879,"children":880},{},[881],{"type":46,"tag":882,"props":883,"children":884},"em",{},[885],{"type":52,"value":886},"User selects: react",{"type":46,"tag":55,"props":888,"children":889},{},[890],{"type":46,"tag":71,"props":891,"children":892},{},[893],{"type":52,"value":894},"Step 2: Initialize",{"type":46,"tag":643,"props":896,"children":899},{"className":897,"code":898,"language":52},[646],"📋 Creating Extension\n\nProject name: color-manager\nTemplate: react\n\nExecuting: webflow extension init color-manager react\n\n✓ Project created at .\u002Fcolor-manager\n✓ webflow.json generated\n✓ React template configured\n\nInstalling dependencies...\n✓ npm install complete\n\n📋 Extension Schema:\n{\n  \"name\": \"Color Manager\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {},\n  \"appConnections\": []\n}\n",[900],{"type":46,"tag":87,"props":901,"children":902},{"__ignoreMap":651},[903],{"type":52,"value":898},{"type":46,"tag":55,"props":905,"children":906},{},[907],{"type":46,"tag":71,"props":908,"children":909},{},[910],{"type":52,"value":911},"Step 3: Start Development",{"type":46,"tag":643,"props":913,"children":916},{"className":914,"code":915,"language":52},[646],"🚀 Starting Dev Server\n\nExecuting: webflow extension serve\n\n✓ Server running at http:\u002F\u002Flocalhost:1337\n\nLoad in Designer:\n1. Open Webflow Designer\n2. Load extension from: http:\u002F\u002Flocalhost:1337\n3. Start developing!\n\nServer running... (Press Ctrl+C to stop)\n",[917],{"type":46,"tag":87,"props":918,"children":919},{"__ignoreMap":651},[920],{"type":52,"value":915},{"type":46,"tag":61,"props":922,"children":924},{"id":923},"guidelines",[925],{"type":52,"value":926},"Guidelines",{"type":46,"tag":196,"props":928,"children":930},{"id":929},"phase-1-cli-verification",[931],{"type":52,"value":932},"Phase 1: CLI Verification",{"type":46,"tag":55,"props":934,"children":935},{},[936],{"type":46,"tag":71,"props":937,"children":938},{},[939],{"type":52,"value":940},"Installation Check:",{"type":46,"tag":643,"props":942,"children":946},{"className":943,"code":944,"language":945,"meta":651,"style":651},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Check if CLI is installed\nwebflow --version\n\n# If not installed, guide user:\nnpm install -g @webflow\u002Fcli\n","bash",[947],{"type":46,"tag":87,"props":948,"children":949},{"__ignoreMap":651},[950,962,977,987,995],{"type":46,"tag":951,"props":952,"children":955},"span",{"class":953,"line":954},"line",1,[956],{"type":46,"tag":951,"props":957,"children":959},{"style":958},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[960],{"type":52,"value":961},"# Check if CLI is installed\n",{"type":46,"tag":951,"props":963,"children":965},{"class":953,"line":964},2,[966,971],{"type":46,"tag":951,"props":967,"children":969},{"style":968},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[970],{"type":52,"value":9},{"type":46,"tag":951,"props":972,"children":974},{"style":973},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[975],{"type":52,"value":976}," --version\n",{"type":46,"tag":951,"props":978,"children":980},{"class":953,"line":979},3,[981],{"type":46,"tag":951,"props":982,"children":984},{"emptyLinePlaceholder":983},true,[985],{"type":52,"value":986},"\n",{"type":46,"tag":951,"props":988,"children":989},{"class":953,"line":274},[990],{"type":46,"tag":951,"props":991,"children":992},{"style":958},[993],{"type":52,"value":994},"# If not installed, guide user:\n",{"type":46,"tag":951,"props":996,"children":998},{"class":953,"line":997},5,[999,1004,1009,1014],{"type":46,"tag":951,"props":1000,"children":1001},{"style":968},[1002],{"type":52,"value":1003},"npm",{"type":46,"tag":951,"props":1005,"children":1006},{"style":973},[1007],{"type":52,"value":1008}," install",{"type":46,"tag":951,"props":1010,"children":1011},{"style":973},[1012],{"type":52,"value":1013}," -g",{"type":46,"tag":951,"props":1015,"children":1016},{"style":973},[1017],{"type":52,"value":1018}," @webflow\u002Fcli\n",{"type":46,"tag":55,"props":1020,"children":1021},{},[1022],{"type":46,"tag":71,"props":1023,"children":1024},{},[1025],{"type":52,"value":1026},"Authentication (if needed):",{"type":46,"tag":643,"props":1028,"children":1030},{"className":943,"code":1029,"language":945,"meta":651,"style":651},"# Site authentication if required\nwebflow auth login\n",[1031],{"type":46,"tag":87,"props":1032,"children":1033},{"__ignoreMap":651},[1034,1042],{"type":46,"tag":951,"props":1035,"children":1036},{"class":953,"line":954},[1037],{"type":46,"tag":951,"props":1038,"children":1039},{"style":958},[1040],{"type":52,"value":1041},"# Site authentication if required\n",{"type":46,"tag":951,"props":1043,"children":1044},{"class":953,"line":964},[1045,1049,1054],{"type":46,"tag":951,"props":1046,"children":1047},{"style":968},[1048],{"type":52,"value":9},{"type":46,"tag":951,"props":1050,"children":1051},{"style":973},[1052],{"type":52,"value":1053}," auth",{"type":46,"tag":951,"props":1055,"children":1056},{"style":973},[1057],{"type":52,"value":1058}," login\n",{"type":46,"tag":196,"props":1060,"children":1062},{"id":1061},"phase-2-template-management",[1063],{"type":52,"value":1064},"Phase 2: Template Management",{"type":46,"tag":55,"props":1066,"children":1067},{},[1068],{"type":46,"tag":71,"props":1069,"children":1070},{},[1071],{"type":52,"value":1072},"List Templates Command:",{"type":46,"tag":643,"props":1074,"children":1076},{"className":943,"code":1075,"language":945,"meta":651,"style":651},"webflow extension list\n",[1077],{"type":46,"tag":87,"props":1078,"children":1079},{"__ignoreMap":651},[1080],{"type":46,"tag":951,"props":1081,"children":1082},{"class":953,"line":954},[1083,1087,1092],{"type":46,"tag":951,"props":1084,"children":1085},{"style":968},[1086],{"type":52,"value":9},{"type":46,"tag":951,"props":1088,"children":1089},{"style":973},[1090],{"type":52,"value":1091}," extension",{"type":46,"tag":951,"props":1093,"children":1094},{"style":973},[1095],{"type":52,"value":1096}," list\n",{"type":46,"tag":55,"props":1098,"children":1099},{},[1100],{"type":46,"tag":71,"props":1101,"children":1102},{},[1103],{"type":52,"value":1104},"Available Templates:",{"type":46,"tag":77,"props":1106,"children":1107},{},[1108,1117,1126],{"type":46,"tag":81,"props":1109,"children":1110},{},[1111,1115],{"type":46,"tag":71,"props":1112,"children":1113},{},[1114],{"type":52,"value":313},{"type":52,"value":1116}," - Basic HTML, CSS, and JavaScript template",{"type":46,"tag":81,"props":1118,"children":1119},{},[1120,1124],{"type":46,"tag":71,"props":1121,"children":1122},{},[1123],{"type":52,"value":15},{"type":52,"value":1125}," - React-based extension with modern tooling",{"type":46,"tag":81,"props":1127,"children":1128},{},[1129,1133],{"type":46,"tag":71,"props":1130,"children":1131},{},[1132],{"type":52,"value":334},{"type":52,"value":336},{"type":46,"tag":196,"props":1135,"children":1137},{"id":1136},"phase-3-initialization",[1138],{"type":52,"value":1139},"Phase 3: Initialization",{"type":46,"tag":55,"props":1141,"children":1142},{},[1143],{"type":46,"tag":71,"props":1144,"children":1145},{},[1146],{"type":52,"value":1147},"Init Command:",{"type":46,"tag":643,"props":1149,"children":1151},{"className":943,"code":1150,"language":945,"meta":651,"style":651},"webflow extension init \u003Cproject-name> \u003Ctemplate>\n",[1152],{"type":46,"tag":87,"props":1153,"children":1154},{"__ignoreMap":651},[1155],{"type":46,"tag":951,"props":1156,"children":1157},{"class":953,"line":954},[1158,1162,1166,1171,1177,1182,1188,1193,1197,1202,1206],{"type":46,"tag":951,"props":1159,"children":1160},{"style":968},[1161],{"type":52,"value":9},{"type":46,"tag":951,"props":1163,"children":1164},{"style":973},[1165],{"type":52,"value":1091},{"type":46,"tag":951,"props":1167,"children":1168},{"style":973},[1169],{"type":52,"value":1170}," init",{"type":46,"tag":951,"props":1172,"children":1174},{"style":1173},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1175],{"type":52,"value":1176}," \u003C",{"type":46,"tag":951,"props":1178,"children":1179},{"style":973},[1180],{"type":52,"value":1181},"project-nam",{"type":46,"tag":951,"props":1183,"children":1185},{"style":1184},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1186],{"type":52,"value":1187},"e",{"type":46,"tag":951,"props":1189,"children":1190},{"style":1173},[1191],{"type":52,"value":1192},">",{"type":46,"tag":951,"props":1194,"children":1195},{"style":1173},[1196],{"type":52,"value":1176},{"type":46,"tag":951,"props":1198,"children":1199},{"style":973},[1200],{"type":52,"value":1201},"templat",{"type":46,"tag":951,"props":1203,"children":1204},{"style":1184},[1205],{"type":52,"value":1187},{"type":46,"tag":951,"props":1207,"children":1208},{"style":1173},[1209],{"type":52,"value":1210},">\n",{"type":46,"tag":55,"props":1212,"children":1213},{},[1214],{"type":46,"tag":71,"props":1215,"children":1216},{},[1217],{"type":52,"value":1218},"Arguments:",{"type":46,"tag":77,"props":1220,"children":1221},{},[1222,1233],{"type":46,"tag":81,"props":1223,"children":1224},{},[1225,1231],{"type":46,"tag":87,"props":1226,"children":1228},{"className":1227},[],[1229],{"type":52,"value":1230},"\u003Cproject-name>",{"type":52,"value":1232}," (required) - Name of the new project directory",{"type":46,"tag":81,"props":1234,"children":1235},{},[1236,1242],{"type":46,"tag":87,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":52,"value":1241},"\u003Ctemplate>",{"type":52,"value":1243}," (required) - One of: default, react, typescript-alt",{"type":46,"tag":55,"props":1245,"children":1246},{},[1247],{"type":46,"tag":71,"props":1248,"children":1249},{},[1250],{"type":52,"value":1251},"Example Commands:",{"type":46,"tag":643,"props":1253,"children":1255},{"className":943,"code":1254,"language":945,"meta":651,"style":651},"# Initialize with default template\nwebflow extension init my-extension default\n\n# Initialize with React template\nwebflow extension init my-extension react\n\n# Initialize with TypeScript template\nwebflow extension init my-extension typescript-alt\n",[1256],{"type":46,"tag":87,"props":1257,"children":1258},{"__ignoreMap":651},[1259,1267,1292,1299,1307,1331,1339,1347],{"type":46,"tag":951,"props":1260,"children":1261},{"class":953,"line":954},[1262],{"type":46,"tag":951,"props":1263,"children":1264},{"style":958},[1265],{"type":52,"value":1266},"# Initialize with default template\n",{"type":46,"tag":951,"props":1268,"children":1269},{"class":953,"line":964},[1270,1274,1278,1282,1287],{"type":46,"tag":951,"props":1271,"children":1272},{"style":968},[1273],{"type":52,"value":9},{"type":46,"tag":951,"props":1275,"children":1276},{"style":973},[1277],{"type":52,"value":1091},{"type":46,"tag":951,"props":1279,"children":1280},{"style":973},[1281],{"type":52,"value":1170},{"type":46,"tag":951,"props":1283,"children":1284},{"style":973},[1285],{"type":52,"value":1286}," my-extension",{"type":46,"tag":951,"props":1288,"children":1289},{"style":973},[1290],{"type":52,"value":1291}," default\n",{"type":46,"tag":951,"props":1293,"children":1294},{"class":953,"line":979},[1295],{"type":46,"tag":951,"props":1296,"children":1297},{"emptyLinePlaceholder":983},[1298],{"type":52,"value":986},{"type":46,"tag":951,"props":1300,"children":1301},{"class":953,"line":274},[1302],{"type":46,"tag":951,"props":1303,"children":1304},{"style":958},[1305],{"type":52,"value":1306},"# Initialize with React template\n",{"type":46,"tag":951,"props":1308,"children":1309},{"class":953,"line":997},[1310,1314,1318,1322,1326],{"type":46,"tag":951,"props":1311,"children":1312},{"style":968},[1313],{"type":52,"value":9},{"type":46,"tag":951,"props":1315,"children":1316},{"style":973},[1317],{"type":52,"value":1091},{"type":46,"tag":951,"props":1319,"children":1320},{"style":973},[1321],{"type":52,"value":1170},{"type":46,"tag":951,"props":1323,"children":1324},{"style":973},[1325],{"type":52,"value":1286},{"type":46,"tag":951,"props":1327,"children":1328},{"style":973},[1329],{"type":52,"value":1330}," react\n",{"type":46,"tag":951,"props":1332,"children":1334},{"class":953,"line":1333},6,[1335],{"type":46,"tag":951,"props":1336,"children":1337},{"emptyLinePlaceholder":983},[1338],{"type":52,"value":986},{"type":46,"tag":951,"props":1340,"children":1341},{"class":953,"line":355},[1342],{"type":46,"tag":951,"props":1343,"children":1344},{"style":958},[1345],{"type":52,"value":1346},"# Initialize with TypeScript template\n",{"type":46,"tag":951,"props":1348,"children":1350},{"class":953,"line":1349},8,[1351,1355,1359,1363,1367],{"type":46,"tag":951,"props":1352,"children":1353},{"style":968},[1354],{"type":52,"value":9},{"type":46,"tag":951,"props":1356,"children":1357},{"style":973},[1358],{"type":52,"value":1091},{"type":46,"tag":951,"props":1360,"children":1361},{"style":973},[1362],{"type":52,"value":1170},{"type":46,"tag":951,"props":1364,"children":1365},{"style":973},[1366],{"type":52,"value":1286},{"type":46,"tag":951,"props":1368,"children":1369},{"style":973},[1370],{"type":52,"value":1371}," typescript-alt\n",{"type":46,"tag":55,"props":1373,"children":1374},{},[1375],{"type":46,"tag":71,"props":1376,"children":1377},{},[1378],{"type":52,"value":1379},"Project Structure After Init:",{"type":46,"tag":643,"props":1381,"children":1384},{"className":1382,"code":1383,"language":52},[646],"\u002Fproject-name\u002F\n├── webflow.json         # Extension schema (required)\n├── package.json         # Dependencies\n├── src\u002F                 # Source files\n│   ├── index.html\n│   ├── index.tsx (or .js)\n│   └── styles.css\n├── dist\u002F                # Build output directory\n└── README.md\n",[1385],{"type":46,"tag":87,"props":1386,"children":1387},{"__ignoreMap":651},[1388],{"type":52,"value":1383},{"type":46,"tag":196,"props":1390,"children":1392},{"id":1391},"phase-4-extension-schema",[1393],{"type":52,"value":1394},"Phase 4: Extension Schema",{"type":46,"tag":55,"props":1396,"children":1397},{},[1398],{"type":46,"tag":71,"props":1399,"children":1400},{},[1401],{"type":52,"value":1402},"Schema in webflow.json:",{"type":46,"tag":643,"props":1404,"children":1408},{"className":1405,"code":1406,"language":1407,"meta":651,"style":651},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"name\": \"\u003CYour Extension Name>\",\n  \"apiVersion\": \"2\",\n  \"publicDir\": \"dist\",\n  \"appIntents\": {\n    \"image\": [\"manage\"],\n    \"form\": [\"manage\"]\n  },\n  \"appConnections\": [\n    \"myAppImageConnection\",\n    \"myAppFormConnection\"\n  ]\n}\n","json",[1409],{"type":46,"tag":87,"props":1410,"children":1411},{"__ignoreMap":651},[1412,1420,1462,1498,1534,1558,1602,1643,1651,1676,1697,1715,1723],{"type":46,"tag":951,"props":1413,"children":1414},{"class":953,"line":954},[1415],{"type":46,"tag":951,"props":1416,"children":1417},{"style":1173},[1418],{"type":52,"value":1419},"{\n",{"type":46,"tag":951,"props":1421,"children":1422},{"class":953,"line":964},[1423,1428,1433,1438,1443,1448,1453,1457],{"type":46,"tag":951,"props":1424,"children":1425},{"style":1173},[1426],{"type":52,"value":1427},"  \"",{"type":46,"tag":951,"props":1429,"children":1431},{"style":1430},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1432],{"type":52,"value":414},{"type":46,"tag":951,"props":1434,"children":1435},{"style":1173},[1436],{"type":52,"value":1437},"\"",{"type":46,"tag":951,"props":1439,"children":1440},{"style":1173},[1441],{"type":52,"value":1442},":",{"type":46,"tag":951,"props":1444,"children":1445},{"style":1173},[1446],{"type":52,"value":1447}," \"",{"type":46,"tag":951,"props":1449,"children":1450},{"style":973},[1451],{"type":52,"value":1452},"\u003CYour Extension Name>",{"type":46,"tag":951,"props":1454,"children":1455},{"style":1173},[1456],{"type":52,"value":1437},{"type":46,"tag":951,"props":1458,"children":1459},{"style":1173},[1460],{"type":52,"value":1461},",\n",{"type":46,"tag":951,"props":1463,"children":1464},{"class":953,"line":979},[1465,1469,1473,1477,1481,1485,1490,1494],{"type":46,"tag":951,"props":1466,"children":1467},{"style":1173},[1468],{"type":52,"value":1427},{"type":46,"tag":951,"props":1470,"children":1471},{"style":1430},[1472],{"type":52,"value":425},{"type":46,"tag":951,"props":1474,"children":1475},{"style":1173},[1476],{"type":52,"value":1437},{"type":46,"tag":951,"props":1478,"children":1479},{"style":1173},[1480],{"type":52,"value":1442},{"type":46,"tag":951,"props":1482,"children":1483},{"style":1173},[1484],{"type":52,"value":1447},{"type":46,"tag":951,"props":1486,"children":1487},{"style":973},[1488],{"type":52,"value":1489},"2",{"type":46,"tag":951,"props":1491,"children":1492},{"style":1173},[1493],{"type":52,"value":1437},{"type":46,"tag":951,"props":1495,"children":1496},{"style":1173},[1497],{"type":52,"value":1461},{"type":46,"tag":951,"props":1499,"children":1500},{"class":953,"line":274},[1501,1505,1509,1513,1517,1521,1526,1530],{"type":46,"tag":951,"props":1502,"children":1503},{"style":1173},[1504],{"type":52,"value":1427},{"type":46,"tag":951,"props":1506,"children":1507},{"style":1430},[1508],{"type":52,"value":436},{"type":46,"tag":951,"props":1510,"children":1511},{"style":1173},[1512],{"type":52,"value":1437},{"type":46,"tag":951,"props":1514,"children":1515},{"style":1173},[1516],{"type":52,"value":1442},{"type":46,"tag":951,"props":1518,"children":1519},{"style":1173},[1520],{"type":52,"value":1447},{"type":46,"tag":951,"props":1522,"children":1523},{"style":973},[1524],{"type":52,"value":1525},"dist",{"type":46,"tag":951,"props":1527,"children":1528},{"style":1173},[1529],{"type":52,"value":1437},{"type":46,"tag":951,"props":1531,"children":1532},{"style":1173},[1533],{"type":52,"value":1461},{"type":46,"tag":951,"props":1535,"children":1536},{"class":953,"line":997},[1537,1541,1545,1549,1553],{"type":46,"tag":951,"props":1538,"children":1539},{"style":1173},[1540],{"type":52,"value":1427},{"type":46,"tag":951,"props":1542,"children":1543},{"style":1430},[1544],{"type":52,"value":447},{"type":46,"tag":951,"props":1546,"children":1547},{"style":1173},[1548],{"type":52,"value":1437},{"type":46,"tag":951,"props":1550,"children":1551},{"style":1173},[1552],{"type":52,"value":1442},{"type":46,"tag":951,"props":1554,"children":1555},{"style":1173},[1556],{"type":52,"value":1557}," {\n",{"type":46,"tag":951,"props":1559,"children":1560},{"class":953,"line":1333},[1561,1566,1571,1575,1579,1584,1588,1593,1597],{"type":46,"tag":951,"props":1562,"children":1563},{"style":1173},[1564],{"type":52,"value":1565},"    \"",{"type":46,"tag":951,"props":1567,"children":1568},{"style":968},[1569],{"type":52,"value":1570},"image",{"type":46,"tag":951,"props":1572,"children":1573},{"style":1173},[1574],{"type":52,"value":1437},{"type":46,"tag":951,"props":1576,"children":1577},{"style":1173},[1578],{"type":52,"value":1442},{"type":46,"tag":951,"props":1580,"children":1581},{"style":1173},[1582],{"type":52,"value":1583}," [",{"type":46,"tag":951,"props":1585,"children":1586},{"style":1173},[1587],{"type":52,"value":1437},{"type":46,"tag":951,"props":1589,"children":1590},{"style":973},[1591],{"type":52,"value":1592},"manage",{"type":46,"tag":951,"props":1594,"children":1595},{"style":1173},[1596],{"type":52,"value":1437},{"type":46,"tag":951,"props":1598,"children":1599},{"style":1173},[1600],{"type":52,"value":1601},"],\n",{"type":46,"tag":951,"props":1603,"children":1604},{"class":953,"line":355},[1605,1609,1614,1618,1622,1626,1630,1634,1638],{"type":46,"tag":951,"props":1606,"children":1607},{"style":1173},[1608],{"type":52,"value":1565},{"type":46,"tag":951,"props":1610,"children":1611},{"style":968},[1612],{"type":52,"value":1613},"form",{"type":46,"tag":951,"props":1615,"children":1616},{"style":1173},[1617],{"type":52,"value":1437},{"type":46,"tag":951,"props":1619,"children":1620},{"style":1173},[1621],{"type":52,"value":1442},{"type":46,"tag":951,"props":1623,"children":1624},{"style":1173},[1625],{"type":52,"value":1583},{"type":46,"tag":951,"props":1627,"children":1628},{"style":1173},[1629],{"type":52,"value":1437},{"type":46,"tag":951,"props":1631,"children":1632},{"style":973},[1633],{"type":52,"value":1592},{"type":46,"tag":951,"props":1635,"children":1636},{"style":1173},[1637],{"type":52,"value":1437},{"type":46,"tag":951,"props":1639,"children":1640},{"style":1173},[1641],{"type":52,"value":1642},"]\n",{"type":46,"tag":951,"props":1644,"children":1645},{"class":953,"line":1349},[1646],{"type":46,"tag":951,"props":1647,"children":1648},{"style":1173},[1649],{"type":52,"value":1650},"  },\n",{"type":46,"tag":951,"props":1652,"children":1654},{"class":953,"line":1653},9,[1655,1659,1663,1667,1671],{"type":46,"tag":951,"props":1656,"children":1657},{"style":1173},[1658],{"type":52,"value":1427},{"type":46,"tag":951,"props":1660,"children":1661},{"style":1430},[1662],{"type":52,"value":458},{"type":46,"tag":951,"props":1664,"children":1665},{"style":1173},[1666],{"type":52,"value":1437},{"type":46,"tag":951,"props":1668,"children":1669},{"style":1173},[1670],{"type":52,"value":1442},{"type":46,"tag":951,"props":1672,"children":1673},{"style":1173},[1674],{"type":52,"value":1675}," [\n",{"type":46,"tag":951,"props":1677,"children":1679},{"class":953,"line":1678},10,[1680,1684,1689,1693],{"type":46,"tag":951,"props":1681,"children":1682},{"style":1173},[1683],{"type":52,"value":1565},{"type":46,"tag":951,"props":1685,"children":1686},{"style":973},[1687],{"type":52,"value":1688},"myAppImageConnection",{"type":46,"tag":951,"props":1690,"children":1691},{"style":1173},[1692],{"type":52,"value":1437},{"type":46,"tag":951,"props":1694,"children":1695},{"style":1173},[1696],{"type":52,"value":1461},{"type":46,"tag":951,"props":1698,"children":1700},{"class":953,"line":1699},11,[1701,1705,1710],{"type":46,"tag":951,"props":1702,"children":1703},{"style":1173},[1704],{"type":52,"value":1565},{"type":46,"tag":951,"props":1706,"children":1707},{"style":973},[1708],{"type":52,"value":1709},"myAppFormConnection",{"type":46,"tag":951,"props":1711,"children":1712},{"style":1173},[1713],{"type":52,"value":1714},"\"\n",{"type":46,"tag":951,"props":1716,"children":1717},{"class":953,"line":486},[1718],{"type":46,"tag":951,"props":1719,"children":1720},{"style":1173},[1721],{"type":52,"value":1722},"  ]\n",{"type":46,"tag":951,"props":1724,"children":1726},{"class":953,"line":1725},13,[1727],{"type":46,"tag":951,"props":1728,"children":1729},{"style":1173},[1730],{"type":52,"value":1731},"}\n",{"type":46,"tag":55,"props":1733,"children":1734},{},[1735],{"type":46,"tag":71,"props":1736,"children":1737},{},[1738],{"type":52,"value":1739},"Schema Fields:",{"type":46,"tag":1741,"props":1742,"children":1743},"table",{},[1744,1773],{"type":46,"tag":1745,"props":1746,"children":1747},"thead",{},[1748],{"type":46,"tag":1749,"props":1750,"children":1751},"tr",{},[1752,1758,1763,1768],{"type":46,"tag":1753,"props":1754,"children":1755},"th",{},[1756],{"type":52,"value":1757},"Field",{"type":46,"tag":1753,"props":1759,"children":1760},{},[1761],{"type":52,"value":1762},"Description",{"type":46,"tag":1753,"props":1764,"children":1765},{},[1766],{"type":52,"value":1767},"Default",{"type":46,"tag":1753,"props":1769,"children":1770},{},[1771],{"type":52,"value":1772},"Required",{"type":46,"tag":1774,"props":1775,"children":1776},"tbody",{},[1777,1804,1832,1860,1890],{"type":46,"tag":1749,"props":1778,"children":1779},{},[1780,1789,1794,1799],{"type":46,"tag":1781,"props":1782,"children":1783},"td",{},[1784],{"type":46,"tag":87,"props":1785,"children":1787},{"className":1786},[],[1788],{"type":52,"value":414},{"type":46,"tag":1781,"props":1790,"children":1791},{},[1792],{"type":52,"value":1793},"Extension name as it appears in Webflow",{"type":46,"tag":1781,"props":1795,"children":1796},{},[1797],{"type":52,"value":1798},"-",{"type":46,"tag":1781,"props":1800,"children":1801},{},[1802],{"type":52,"value":1803},"Yes",{"type":46,"tag":1749,"props":1805,"children":1806},{},[1807,1815,1820,1828],{"type":46,"tag":1781,"props":1808,"children":1809},{},[1810],{"type":46,"tag":87,"props":1811,"children":1813},{"className":1812},[],[1814],{"type":52,"value":425},{"type":46,"tag":1781,"props":1816,"children":1817},{},[1818],{"type":52,"value":1819},"API version to use for extension",{"type":46,"tag":1781,"props":1821,"children":1822},{},[1823],{"type":46,"tag":87,"props":1824,"children":1826},{"className":1825},[],[1827],{"type":52,"value":1489},{"type":46,"tag":1781,"props":1829,"children":1830},{},[1831],{"type":52,"value":1803},{"type":46,"tag":1749,"props":1833,"children":1834},{},[1835,1843,1848,1856],{"type":46,"tag":1781,"props":1836,"children":1837},{},[1838],{"type":46,"tag":87,"props":1839,"children":1841},{"className":1840},[],[1842],{"type":52,"value":436},{"type":46,"tag":1781,"props":1844,"children":1845},{},[1846],{"type":52,"value":1847},"Directory to build and serve extension from",{"type":46,"tag":1781,"props":1849,"children":1850},{},[1851],{"type":46,"tag":87,"props":1852,"children":1854},{"className":1853},[],[1855],{"type":52,"value":1525},{"type":46,"tag":1781,"props":1857,"children":1858},{},[1859],{"type":52,"value":1803},{"type":46,"tag":1749,"props":1861,"children":1862},{},[1863,1871,1876,1885],{"type":46,"tag":1781,"props":1864,"children":1865},{},[1866],{"type":46,"tag":87,"props":1867,"children":1869},{"className":1868},[],[1870],{"type":52,"value":447},{"type":46,"tag":1781,"props":1872,"children":1873},{},[1874],{"type":52,"value":1875},"Element types that can create connections",{"type":46,"tag":1781,"props":1877,"children":1878},{},[1879],{"type":46,"tag":87,"props":1880,"children":1882},{"className":1881},[],[1883],{"type":52,"value":1884},"{}",{"type":46,"tag":1781,"props":1886,"children":1887},{},[1888],{"type":52,"value":1889},"No",{"type":46,"tag":1749,"props":1891,"children":1892},{},[1893,1901,1906,1915],{"type":46,"tag":1781,"props":1894,"children":1895},{},[1896],{"type":46,"tag":87,"props":1897,"children":1899},{"className":1898},[],[1900],{"type":52,"value":458},{"type":46,"tag":1781,"props":1902,"children":1903},{},[1904],{"type":52,"value":1905},"Connection configurations for extension",{"type":46,"tag":1781,"props":1907,"children":1908},{},[1909],{"type":46,"tag":87,"props":1910,"children":1912},{"className":1911},[],[1913],{"type":52,"value":1914},"[]",{"type":46,"tag":1781,"props":1916,"children":1917},{},[1918],{"type":52,"value":1889},{"type":46,"tag":55,"props":1920,"children":1921},{},[1922],{"type":46,"tag":71,"props":1923,"children":1924},{},[1925],{"type":52,"value":1926},"Required Fields:",{"type":46,"tag":77,"props":1928,"children":1929},{},[1930,1940,1950],{"type":46,"tag":81,"props":1931,"children":1932},{},[1933,1938],{"type":46,"tag":87,"props":1934,"children":1936},{"className":1935},[],[1937],{"type":52,"value":414},{"type":52,"value":1939}," - Must be unique and descriptive",{"type":46,"tag":81,"props":1941,"children":1942},{},[1943,1948],{"type":46,"tag":87,"props":1944,"children":1946},{"className":1945},[],[1947],{"type":52,"value":425},{"type":52,"value":1949}," - Currently must be \"2\"",{"type":46,"tag":81,"props":1951,"children":1952},{},[1953,1958],{"type":46,"tag":87,"props":1954,"children":1956},{"className":1955},[],[1957],{"type":52,"value":436},{"type":52,"value":1959}," - Directory where built files are placed (default: \"dist\")",{"type":46,"tag":55,"props":1961,"children":1962},{},[1963],{"type":46,"tag":71,"props":1964,"children":1965},{},[1966],{"type":52,"value":1967},"Optional Fields:",{"type":46,"tag":77,"props":1969,"children":1970},{},[1971,1995],{"type":46,"tag":81,"props":1972,"children":1973},{},[1974,1979,1981],{"type":46,"tag":87,"props":1975,"children":1977},{"className":1976},[],[1978],{"type":52,"value":447},{"type":52,"value":1980}," - Defines which element types can connect to your extension\n",{"type":46,"tag":77,"props":1982,"children":1983},{},[1984],{"type":46,"tag":81,"props":1985,"children":1986},{},[1987,1989],{"type":52,"value":1988},"Example: ",{"type":46,"tag":87,"props":1990,"children":1992},{"className":1991},[],[1993],{"type":52,"value":1994},"{\"image\": [\"manage\"], \"form\": [\"manage\"]}",{"type":46,"tag":81,"props":1996,"children":1997},{},[1998,2003,2005],{"type":46,"tag":87,"props":1999,"children":2001},{"className":2000},[],[2002],{"type":52,"value":458},{"type":52,"value":2004}," - Array of connection identifiers\n",{"type":46,"tag":77,"props":2006,"children":2007},{},[2008],{"type":46,"tag":81,"props":2009,"children":2010},{},[2011,2012],{"type":52,"value":1988},{"type":46,"tag":87,"props":2013,"children":2015},{"className":2014},[],[2016],{"type":52,"value":2017},"[\"myAppImageConnection\", \"myAppFormConnection\"]",{"type":46,"tag":196,"props":2019,"children":2021},{"id":2020},"phase-5-local-development",[2022],{"type":52,"value":2023},"Phase 5: Local Development",{"type":46,"tag":55,"props":2025,"children":2026},{},[2027],{"type":46,"tag":71,"props":2028,"children":2029},{},[2030],{"type":52,"value":2031},"Serve Command:",{"type":46,"tag":643,"props":2033,"children":2035},{"className":943,"code":2034,"language":945,"meta":651,"style":651},"# Serve on default port (1337)\nwebflow extension serve\n\n# Serve on custom port\nwebflow extension serve 3000\n",[2036],{"type":46,"tag":87,"props":2037,"children":2038},{"__ignoreMap":651},[2039,2047,2063,2070,2078],{"type":46,"tag":951,"props":2040,"children":2041},{"class":953,"line":954},[2042],{"type":46,"tag":951,"props":2043,"children":2044},{"style":958},[2045],{"type":52,"value":2046},"# Serve on default port (1337)\n",{"type":46,"tag":951,"props":2048,"children":2049},{"class":953,"line":964},[2050,2054,2058],{"type":46,"tag":951,"props":2051,"children":2052},{"style":968},[2053],{"type":52,"value":9},{"type":46,"tag":951,"props":2055,"children":2056},{"style":973},[2057],{"type":52,"value":1091},{"type":46,"tag":951,"props":2059,"children":2060},{"style":973},[2061],{"type":52,"value":2062}," serve\n",{"type":46,"tag":951,"props":2064,"children":2065},{"class":953,"line":979},[2066],{"type":46,"tag":951,"props":2067,"children":2068},{"emptyLinePlaceholder":983},[2069],{"type":52,"value":986},{"type":46,"tag":951,"props":2071,"children":2072},{"class":953,"line":274},[2073],{"type":46,"tag":951,"props":2074,"children":2075},{"style":958},[2076],{"type":52,"value":2077},"# Serve on custom port\n",{"type":46,"tag":951,"props":2079,"children":2080},{"class":953,"line":997},[2081,2085,2089,2094],{"type":46,"tag":951,"props":2082,"children":2083},{"style":968},[2084],{"type":52,"value":9},{"type":46,"tag":951,"props":2086,"children":2087},{"style":973},[2088],{"type":52,"value":1091},{"type":46,"tag":951,"props":2090,"children":2091},{"style":973},[2092],{"type":52,"value":2093}," serve",{"type":46,"tag":951,"props":2095,"children":2097},{"style":2096},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2098],{"type":52,"value":2099}," 3000\n",{"type":46,"tag":55,"props":2101,"children":2102},{},[2103],{"type":46,"tag":71,"props":2104,"children":2105},{},[2106],{"type":52,"value":1218},{"type":46,"tag":77,"props":2108,"children":2109},{},[2110],{"type":46,"tag":81,"props":2111,"children":2112},{},[2113,2119],{"type":46,"tag":87,"props":2114,"children":2116},{"className":2115},[],[2117],{"type":52,"value":2118},"[port]",{"type":52,"value":2120}," (optional) - Port number to serve on (default: 1337)",{"type":46,"tag":55,"props":2122,"children":2123},{},[2124],{"type":46,"tag":71,"props":2125,"children":2126},{},[2127],{"type":52,"value":2128},"Development Server:",{"type":46,"tag":77,"props":2130,"children":2131},{},[2132,2143,2154,2159],{"type":46,"tag":81,"props":2133,"children":2134},{},[2135,2137],{"type":52,"value":2136},"Default URL: ",{"type":46,"tag":526,"props":2138,"children":2141},{"href":2139,"rel":2140},"http:\u002F\u002Flocalhost:1337",[529],[2142],{"type":52,"value":2139},{"type":46,"tag":81,"props":2144,"children":2145},{},[2146,2148,2153],{"type":52,"value":2147},"Custom port: ",{"type":46,"tag":526,"props":2149,"children":2151},{"rel":2150},[529],[2152],{"type":52,"value":532},{"type":52,"value":534},{"type":46,"tag":81,"props":2155,"children":2156},{},[2157],{"type":52,"value":2158},"Auto-rebuilds on file changes",{"type":46,"tag":81,"props":2160,"children":2161},{},[2162],{"type":52,"value":2163},"Hot reload for faster development",{"type":46,"tag":55,"props":2165,"children":2166},{},[2167],{"type":46,"tag":71,"props":2168,"children":2169},{},[2170],{"type":52,"value":2171},"Loading in Designer:",{"type":46,"tag":203,"props":2173,"children":2174},{},[2175,2179,2184,2189,2200],{"type":46,"tag":81,"props":2176,"children":2177},{},[2178],{"type":52,"value":556},{"type":46,"tag":81,"props":2180,"children":2181},{},[2182],{"type":52,"value":2183},"Open any site",{"type":46,"tag":81,"props":2185,"children":2186},{},[2187],{"type":52,"value":2188},"Go to Extensions menu",{"type":46,"tag":81,"props":2190,"children":2191},{},[2192,2194,2199],{"type":52,"value":2193},"Load extension from local URL: ",{"type":46,"tag":526,"props":2195,"children":2197},{"rel":2196},[529],[2198],{"type":52,"value":532},{"type":52,"value":534},{"type":46,"tag":81,"props":2201,"children":2202},{},[2203],{"type":52,"value":2204},"Extension appears in Designer",{"type":46,"tag":196,"props":2206,"children":2208},{"id":2207},"phase-6-bundling",[2209],{"type":52,"value":2210},"Phase 6: Bundling",{"type":46,"tag":55,"props":2212,"children":2213},{},[2214],{"type":46,"tag":71,"props":2215,"children":2216},{},[2217],{"type":52,"value":2218},"Bundle Command:",{"type":46,"tag":643,"props":2220,"children":2222},{"className":943,"code":2221,"language":945,"meta":651,"style":651},"webflow extension bundle\n",[2223],{"type":46,"tag":87,"props":2224,"children":2225},{"__ignoreMap":651},[2226],{"type":46,"tag":951,"props":2227,"children":2228},{"class":953,"line":954},[2229,2233,2237],{"type":46,"tag":951,"props":2230,"children":2231},{"style":968},[2232],{"type":52,"value":9},{"type":46,"tag":951,"props":2234,"children":2235},{"style":973},[2236],{"type":52,"value":1091},{"type":46,"tag":951,"props":2238,"children":2239},{"style":973},[2240],{"type":52,"value":2241}," bundle\n",{"type":46,"tag":55,"props":2243,"children":2244},{},[2245],{"type":46,"tag":71,"props":2246,"children":2247},{},[2248],{"type":52,"value":2249},"Output:",{"type":46,"tag":77,"props":2251,"children":2252},{},[2253,2266,2276],{"type":46,"tag":81,"props":2254,"children":2255},{},[2256,2258,2264],{"type":52,"value":2257},"Creates ",{"type":46,"tag":87,"props":2259,"children":2261},{"className":2260},[],[2262],{"type":52,"value":2263},"bundle.zip",{"type":52,"value":2265}," file in project directory",{"type":46,"tag":81,"props":2267,"children":2268},{},[2269,2271],{"type":52,"value":2270},"Contains all built files from ",{"type":46,"tag":87,"props":2272,"children":2274},{"className":2273},[],[2275],{"type":52,"value":436},{"type":46,"tag":81,"props":2277,"children":2278},{},[2279],{"type":52,"value":2280},"Ready to upload to Webflow",{"type":46,"tag":55,"props":2282,"children":2283},{},[2284],{"type":46,"tag":71,"props":2285,"children":2286},{},[2287],{"type":52,"value":2288},"Bundle Contents:",{"type":46,"tag":77,"props":2290,"children":2291},{},[2292,2297,2302,2307],{"type":46,"tag":81,"props":2293,"children":2294},{},[2295],{"type":52,"value":2296},"Built JavaScript and CSS files",{"type":46,"tag":81,"props":2298,"children":2299},{},[2300],{"type":52,"value":2301},"HTML entry points",{"type":46,"tag":81,"props":2303,"children":2304},{},[2305],{"type":52,"value":2306},"Assets from publicDir",{"type":46,"tag":81,"props":2308,"children":2309},{},[2310],{"type":52,"value":2311},"Extension schema",{"type":46,"tag":196,"props":2313,"children":2315},{"id":2314},"error-handling",[2316],{"type":52,"value":2317},"Error Handling",{"type":46,"tag":55,"props":2319,"children":2320},{},[2321],{"type":46,"tag":71,"props":2322,"children":2323},{},[2324],{"type":52,"value":2325},"CLI Not Installed:",{"type":46,"tag":643,"props":2327,"children":2330},{"className":2328,"code":2329,"language":52},[646],"❌ Webflow CLI Not Found\n\nDesigner Extensions require the Webflow CLI.\n\nInstallation:\nnpm install -g @webflow\u002Fcli\n\nAfter installation, verify:\nwebflow --version\n\nDocumentation: https:\u002F\u002Fdevelopers.webflow.com\u002Fcli\n",[2331],{"type":46,"tag":87,"props":2332,"children":2333},{"__ignoreMap":651},[2334],{"type":52,"value":2329},{"type":46,"tag":55,"props":2336,"children":2337},{},[2338],{"type":46,"tag":71,"props":2339,"children":2340},{},[2341],{"type":52,"value":2342},"Invalid Template:",{"type":46,"tag":643,"props":2344,"children":2347},{"className":2345,"code":2346,"language":52},[646],"❌ Invalid Template\n\nError: Template \"vue\" not found\n\nAvailable templates:\n- default\n- react\n- typescript-alt\n\nRetry with valid template:\nwebflow extension init my-extension react\n",[2348],{"type":46,"tag":87,"props":2349,"children":2350},{"__ignoreMap":651},[2351],{"type":52,"value":2346},{"type":46,"tag":55,"props":2353,"children":2354},{},[2355],{"type":46,"tag":71,"props":2356,"children":2357},{},[2358],{"type":52,"value":2359},"Port Already in Use:",{"type":46,"tag":643,"props":2361,"children":2364},{"className":2362,"code":2363,"language":52},[646],"❌ Development Server Failed to Start\n\nError: Port 1337 is already in use\n\nSolutions:\n1. Stop other process on port 1337\n2. Use different port:\n   webflow extension serve 3000\n\nFind process using port:\nlsof -ti:1337 | xargs kill -9\n",[2365],{"type":46,"tag":87,"props":2366,"children":2367},{"__ignoreMap":651},[2368],{"type":52,"value":2363},{"type":46,"tag":55,"props":2370,"children":2371},{},[2372],{"type":46,"tag":71,"props":2373,"children":2374},{},[2375],{"type":52,"value":2376},"Missing webflow.json:",{"type":46,"tag":643,"props":2378,"children":2381},{"className":2379,"code":2380,"language":52},[646],"❌ Extension Schema Not Found\n\nError: webflow.json not found in current directory\n\nThis directory is not an extension project.\n\nSolutions:\n1. Initialize new extension:\n   webflow extension init \u003Cname> \u003Ctemplate>\n2. Navigate to existing extension directory\n3. Create webflow.json with required schema\n",[2382],{"type":46,"tag":87,"props":2383,"children":2384},{"__ignoreMap":651},[2385],{"type":52,"value":2380},{"type":46,"tag":55,"props":2387,"children":2388},{},[2389],{"type":46,"tag":71,"props":2390,"children":2391},{},[2392],{"type":52,"value":2393},"Bundle Failed:",{"type":46,"tag":643,"props":2395,"children":2398},{"className":2396,"code":2397,"language":52},[646],"❌ Bundle Creation Failed\n\nError: Build failed with errors\n\nCommon Causes:\n- Missing dependencies (run: npm install)\n- Build errors in source files\n- Invalid webflow.json schema\n- Missing publicDir directory\n\nFix errors and retry:\nwebflow extension bundle\n",[2399],{"type":46,"tag":87,"props":2400,"children":2401},{"__ignoreMap":651},[2402],{"type":52,"value":2397},{"type":46,"tag":196,"props":2404,"children":2406},{"id":2405},"file-operations",[2407],{"type":52,"value":2408},"File Operations",{"type":46,"tag":55,"props":2410,"children":2411},{},[2412,2417],{"type":46,"tag":71,"props":2413,"children":2414},{},[2415],{"type":52,"value":2416},"Reading Extension Files:",{"type":52,"value":2418},"\nAlways use Read tool (never modify):",{"type":46,"tag":643,"props":2420,"children":2423},{"className":2421,"code":2422,"language":52},[646],"# View extension schema\nRead: webflow.json\n\n# View package dependencies\nRead: package.json\n\n# View source files\nRead: src\u002Findex.html\nRead: src\u002Findex.tsx\n",[2424],{"type":46,"tag":87,"props":2425,"children":2426},{"__ignoreMap":651},[2427],{"type":52,"value":2422},{"type":46,"tag":55,"props":2429,"children":2430},{},[2431,2436],{"type":46,"tag":71,"props":2432,"children":2433},{},[2434],{"type":52,"value":2435},"Discovering Project Files:",{"type":52,"value":2437},"\nUse Glob tool to find files:",{"type":46,"tag":643,"props":2439,"children":2442},{"className":2440,"code":2441,"language":52},[646],"# Find all source files\nGlob: src\u002F**\u002F*\n\n# Find configuration files\nGlob: *.json\n\n# Find built files\nGlob: dist\u002F**\u002F*\n",[2443],{"type":46,"tag":87,"props":2444,"children":2445},{"__ignoreMap":651},[2446],{"type":52,"value":2441},{"type":46,"tag":55,"props":2448,"children":2449},{},[2450],{"type":46,"tag":71,"props":2451,"children":2452},{},[2453],{"type":52,"value":2454},"Never Use Write\u002FEdit Tools:",{"type":46,"tag":77,"props":2456,"children":2457},{},[2458,2463,2468,2473],{"type":46,"tag":81,"props":2459,"children":2460},{},[2461],{"type":52,"value":2462},"Don't create or modify webflow.json with Write tool",{"type":46,"tag":81,"props":2464,"children":2465},{},[2466],{"type":52,"value":2467},"Don't edit generated files",{"type":46,"tag":81,"props":2469,"children":2470},{},[2471],{"type":52,"value":2472},"Let CLI generate all project files",{"type":46,"tag":81,"props":2474,"children":2475},{},[2476],{"type":52,"value":2477},"Only read files to show content",{"type":46,"tag":196,"props":2479,"children":2481},{"id":2480},"progress-indicators",[2482],{"type":52,"value":2483},"Progress Indicators",{"type":46,"tag":55,"props":2485,"children":2486},{},[2487],{"type":46,"tag":71,"props":2488,"children":2489},{},[2490],{"type":52,"value":2491},"For Init:",{"type":46,"tag":643,"props":2493,"children":2496},{"className":2494,"code":2495,"language":52},[646],"📋 Creating Extension...\n\n[████████████████████████] 100%\n\n✓ Project created\n✓ Dependencies installed\nElapsed: 12s\n",[2497],{"type":46,"tag":87,"props":2498,"children":2499},{"__ignoreMap":651},[2500],{"type":52,"value":2495},{"type":46,"tag":55,"props":2502,"children":2503},{},[2504],{"type":46,"tag":71,"props":2505,"children":2506},{},[2507],{"type":52,"value":2508},"For Bundle:",{"type":46,"tag":643,"props":2510,"children":2513},{"className":2511,"code":2512,"language":52},[646],"📦 Bundling Extension...\n\n[████████████████████████] 100%\n\n✓ Bundle created: bundle.zip\nElapsed: 5s\n",[2514],{"type":46,"tag":87,"props":2515,"children":2516},{"__ignoreMap":651},[2517],{"type":52,"value":2512},{"type":46,"tag":55,"props":2519,"children":2520},{},[2521],{"type":46,"tag":71,"props":2522,"children":2523},{},[2524],{"type":52,"value":2525},"For Serve:",{"type":46,"tag":643,"props":2527,"children":2530},{"className":2528,"code":2529,"language":52},[646],"🚀 Starting Server...\n\n[████████████████████████] 100%\n\n✓ Server ready at http:\u002F\u002Flocalhost:1337\nElapsed: 3s\n",[2531],{"type":46,"tag":87,"props":2532,"children":2533},{"__ignoreMap":651},[2534],{"type":52,"value":2529},{"type":46,"tag":196,"props":2536,"children":2538},{"id":2537},"best-practices",[2539],{"type":52,"value":2540},"Best Practices",{"type":46,"tag":55,"props":2542,"children":2543},{},[2544],{"type":46,"tag":71,"props":2545,"children":2546},{},[2547],{"type":52,"value":2548},"Template Selection:",{"type":46,"tag":77,"props":2550,"children":2551},{},[2552,2563,2573],{"type":46,"tag":81,"props":2553,"children":2554},{},[2555,2557,2561],{"type":52,"value":2556},"Use ",{"type":46,"tag":71,"props":2558,"children":2559},{},[2560],{"type":52,"value":15},{"type":52,"value":2562}," template for modern component-based development",{"type":46,"tag":81,"props":2564,"children":2565},{},[2566,2567,2571],{"type":52,"value":2556},{"type":46,"tag":71,"props":2568,"children":2569},{},[2570],{"type":52,"value":313},{"type":52,"value":2572}," template for simple extensions or learning",{"type":46,"tag":81,"props":2574,"children":2575},{},[2576,2577,2581],{"type":52,"value":2556},{"type":46,"tag":71,"props":2578,"children":2579},{},[2580],{"type":52,"value":334},{"type":52,"value":2582}," for TypeScript-based projects",{"type":46,"tag":55,"props":2584,"children":2585},{},[2586],{"type":46,"tag":71,"props":2587,"children":2588},{},[2589],{"type":52,"value":2590},"Development Workflow:",{"type":46,"tag":203,"props":2592,"children":2593},{},[2594,2598,2603,2607,2612,2617,2622],{"type":46,"tag":81,"props":2595,"children":2596},{},[2597],{"type":52,"value":250},{"type":46,"tag":81,"props":2599,"children":2600},{},[2601],{"type":52,"value":2602},"Initialize project with chosen template",{"type":46,"tag":81,"props":2604,"children":2605},{},[2606],{"type":52,"value":468},{"type":46,"tag":81,"props":2608,"children":2609},{},[2610],{"type":52,"value":2611},"Serve locally for development",{"type":46,"tag":81,"props":2613,"children":2614},{},[2615],{"type":52,"value":2616},"Test in Designer",{"type":46,"tag":81,"props":2618,"children":2619},{},[2620],{"type":52,"value":2621},"Bundle for upload",{"type":46,"tag":81,"props":2623,"children":2624},{},[2625],{"type":52,"value":2626},"Upload to Webflow",{"type":46,"tag":55,"props":2628,"children":2629},{},[2630],{"type":46,"tag":71,"props":2631,"children":2632},{},[2633],{"type":52,"value":2634},"Schema Configuration:",{"type":46,"tag":77,"props":2636,"children":2637},{},[2638,2643,2648,2653],{"type":46,"tag":81,"props":2639,"children":2640},{},[2641],{"type":52,"value":2642},"Always include required fields: name, apiVersion, publicDir",{"type":46,"tag":81,"props":2644,"children":2645},{},[2646],{"type":52,"value":2647},"Set appropriate appIntents if your extension connects to elements",{"type":46,"tag":81,"props":2649,"children":2650},{},[2651],{"type":52,"value":2652},"Define appConnections for element integrations",{"type":46,"tag":81,"props":2654,"children":2655},{},[2656],{"type":52,"value":2657},"Keep name descriptive and unique",{"type":46,"tag":55,"props":2659,"children":2660},{},[2661],{"type":46,"tag":71,"props":2662,"children":2663},{},[2664],{"type":52,"value":2665},"Local Development:",{"type":46,"tag":77,"props":2667,"children":2668},{},[2669,2674,2679,2684],{"type":46,"tag":81,"props":2670,"children":2671},{},[2672],{"type":52,"value":2673},"Use default port 1337 for consistency",{"type":46,"tag":81,"props":2675,"children":2676},{},[2677],{"type":52,"value":2678},"Keep dev server running during development",{"type":46,"tag":81,"props":2680,"children":2681},{},[2682],{"type":52,"value":2683},"Test frequently in Designer",{"type":46,"tag":81,"props":2685,"children":2686},{},[2687],{"type":52,"value":2688},"Check console for errors",{"type":46,"tag":55,"props":2690,"children":2691},{},[2692],{"type":46,"tag":71,"props":2693,"children":2694},{},[2695],{"type":52,"value":2696},"Bundling:",{"type":46,"tag":77,"props":2698,"children":2699},{},[2700,2705,2710,2715],{"type":46,"tag":81,"props":2701,"children":2702},{},[2703],{"type":52,"value":2704},"Bundle only when ready for upload or distribution",{"type":46,"tag":81,"props":2706,"children":2707},{},[2708],{"type":52,"value":2709},"Verify build completes without errors",{"type":46,"tag":81,"props":2711,"children":2712},{},[2713],{"type":52,"value":2714},"Check bundle.zip size",{"type":46,"tag":81,"props":2716,"children":2717},{},[2718],{"type":52,"value":2719},"Test bundled version before uploading",{"type":46,"tag":61,"props":2721,"children":2723},{"id":2722},"quick-reference",[2724],{"type":52,"value":2725},"Quick Reference",{"type":46,"tag":55,"props":2727,"children":2728},{},[2729,2734],{"type":46,"tag":71,"props":2730,"children":2731},{},[2732],{"type":52,"value":2733},"Workflow:",{"type":52,"value":2735}," list templates → init → serve → develop → bundle → upload",{"type":46,"tag":55,"props":2737,"children":2738},{},[2739],{"type":46,"tag":71,"props":2740,"children":2741},{},[2742],{"type":52,"value":2743},"Key Commands:",{"type":46,"tag":77,"props":2745,"children":2746},{},[2747,2757,2767,2777],{"type":46,"tag":81,"props":2748,"children":2749},{},[2750,2755],{"type":46,"tag":87,"props":2751,"children":2753},{"className":2752},[],[2754],{"type":52,"value":291},{"type":52,"value":2756}," - Show available templates",{"type":46,"tag":81,"props":2758,"children":2759},{},[2760,2765],{"type":46,"tag":87,"props":2761,"children":2763},{"className":2762},[],[2764],{"type":52,"value":382},{"type":52,"value":2766}," - Create new extension",{"type":46,"tag":81,"props":2768,"children":2769},{},[2770,2775],{"type":46,"tag":87,"props":2771,"children":2773},{"className":2772},[],[2774],{"type":52,"value":502},{"type":52,"value":2776}," - Start dev server (default: 1337)",{"type":46,"tag":81,"props":2778,"children":2779},{},[2780,2785],{"type":46,"tag":87,"props":2781,"children":2783},{"className":2782},[],[2784],{"type":52,"value":591},{"type":52,"value":2786}," - Create bundle.zip for upload",{"type":46,"tag":55,"props":2788,"children":2789},{},[2790,2795],{"type":46,"tag":71,"props":2791,"children":2792},{},[2793],{"type":52,"value":2794},"Templates:",{"type":52,"value":2796}," default, react, typescript-alt",{"type":46,"tag":55,"props":2798,"children":2799},{},[2800],{"type":46,"tag":71,"props":2801,"children":2802},{},[2803],{"type":52,"value":2804},"Schema Fields (webflow.json):",{"type":46,"tag":77,"props":2806,"children":2807},{},[2808,2818,2827,2837,2847],{"type":46,"tag":81,"props":2809,"children":2810},{},[2811,2816],{"type":46,"tag":87,"props":2812,"children":2814},{"className":2813},[],[2815],{"type":52,"value":414},{"type":52,"value":2817}," (required) - Extension name",{"type":46,"tag":81,"props":2819,"children":2820},{},[2821,2826],{"type":46,"tag":87,"props":2822,"children":2824},{"className":2823},[],[2825],{"type":52,"value":425},{"type":52,"value":427},{"type":46,"tag":81,"props":2828,"children":2829},{},[2830,2835],{"type":46,"tag":87,"props":2831,"children":2833},{"className":2832},[],[2834],{"type":52,"value":436},{"type":52,"value":2836}," (required) - Build directory",{"type":46,"tag":81,"props":2838,"children":2839},{},[2840,2845],{"type":46,"tag":87,"props":2841,"children":2843},{"className":2842},[],[2844],{"type":52,"value":447},{"type":52,"value":2846}," (optional) - Element connection types",{"type":46,"tag":81,"props":2848,"children":2849},{},[2850,2855],{"type":46,"tag":87,"props":2851,"children":2853},{"className":2852},[],[2854],{"type":52,"value":458},{"type":52,"value":2856}," (optional) - Connection configs",{"type":46,"tag":55,"props":2858,"children":2859},{},[2860,2865,2867,2872],{"type":46,"tag":71,"props":2861,"children":2862},{},[2863],{"type":52,"value":2864},"Dev Server:",{"type":52,"value":2866}," ",{"type":46,"tag":526,"props":2868,"children":2870},{"href":2139,"rel":2869},[529],[2871],{"type":52,"value":2139},{"type":52,"value":2873}," (or custom port)",{"type":46,"tag":55,"props":2875,"children":2876},{},[2877,2882],{"type":46,"tag":71,"props":2878,"children":2879},{},[2880],{"type":52,"value":2881},"Bundle Output:",{"type":52,"value":2883}," bundle.zip in project directory",{"type":46,"tag":55,"props":2885,"children":2886},{},[2887,2892,2893],{"type":46,"tag":71,"props":2888,"children":2889},{},[2890],{"type":52,"value":2891},"Documentation:",{"type":52,"value":2866},{"type":46,"tag":526,"props":2894,"children":2897},{"href":2895,"rel":2896},"https:\u002F\u002Fdevelopers.webflow.com\u002Fdesigner\u002Freference\u002Fintroduction",[529],[2898],{"type":52,"value":2895},{"type":46,"tag":2900,"props":2901,"children":2902},"style",{},[2903],{"type":52,"value":2904},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2906,"total":3082},[2907,2926,2941,2949,2966,2982,2998,3012,3026,3038,3052,3068],{"slug":2908,"name":2909,"fn":2910,"description":2911,"org":2912,"tags":2913,"stars":27,"repoUrl":28,"updatedAt":2925},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2914,2915,2918,2921,2924],{"name":21,"slug":22,"type":16},{"name":2916,"slug":2917,"type":16},"Cloud","cloud",{"name":2919,"slug":2920,"type":16},"Deployment","deployment",{"name":2922,"slug":2923,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":2927,"name":2928,"fn":2929,"description":2930,"org":2931,"tags":2932,"stars":27,"repoUrl":28,"updatedAt":2940},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2933,2934,2935,2936,2939],{"name":21,"slug":22,"type":16},{"name":2919,"slug":2920,"type":16},{"name":14,"slug":15,"type":16},{"name":2937,"slug":2938,"type":16},"UI Components","ui-components",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:41.421071",{"slug":4,"name":5,"fn":6,"description":7,"org":2942,"tags":2943,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2944,2945,2946,2947,2948],{"name":21,"slug":22,"type":16},{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},{"slug":2950,"name":2951,"fn":2952,"description":2953,"org":2954,"tags":2955,"stars":27,"repoUrl":28,"updatedAt":2965},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2956,2957,2960,2963,2964],{"name":21,"slug":22,"type":16},{"name":2958,"slug":2959,"type":16},"Frontend","frontend",{"name":2961,"slug":2962,"type":16},"Next.js","next-js",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":2967,"name":2968,"fn":2969,"description":2970,"org":2971,"tags":2972,"stars":27,"repoUrl":28,"updatedAt":2981},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2973,2974,2977,2980],{"name":21,"slug":22,"type":16},{"name":2975,"slug":2976,"type":16},"Configuration","configuration",{"name":2978,"slug":2979,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":2983,"name":2984,"fn":2985,"description":2986,"org":2987,"tags":2988,"stars":27,"repoUrl":28,"updatedAt":2997},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2989,2992,2995,2996],{"name":2990,"slug":2991,"type":16},"Architecture","architecture",{"name":2993,"slug":2994,"type":16},"Code Analysis","code-analysis",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":2999,"name":3000,"fn":3001,"description":3002,"org":3003,"tags":3004,"stars":27,"repoUrl":28,"updatedAt":3011},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3005,3006,3007,3010],{"name":2958,"slug":2959,"type":16},{"name":14,"slug":15,"type":16},{"name":3008,"slug":3009,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",{"slug":3013,"name":3014,"fn":3015,"description":3016,"org":3017,"tags":3018,"stars":27,"repoUrl":28,"updatedAt":3025},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3019,3022,3023,3024],{"name":3020,"slug":3021,"type":16},"Migration","migration",{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:52.523608",{"slug":3027,"name":3028,"fn":3029,"description":3030,"org":3031,"tags":3032,"stars":27,"repoUrl":28,"updatedAt":3037},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3033,3034,3035,3036],{"name":2919,"slug":2920,"type":16},{"name":2958,"slug":2959,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":3039,"name":3040,"fn":3041,"description":3042,"org":3043,"tags":3044,"stars":27,"repoUrl":28,"updatedAt":3051},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3045,3046,3049,3050],{"name":2975,"slug":2976,"type":16},{"name":3047,"slug":3048,"type":16},"Local Development","local-development",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":3053,"name":3054,"fn":3055,"description":3056,"org":3057,"tags":3058,"stars":27,"repoUrl":28,"updatedAt":3067},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3059,3060,3063,3066],{"name":2919,"slug":2920,"type":16},{"name":3061,"slug":3062,"type":16},"QA","qa",{"name":3064,"slug":3065,"type":16},"Validation","validation",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:51.300653",{"slug":3069,"name":3070,"fn":3071,"description":3072,"org":3073,"tags":3074,"stars":27,"repoUrl":28,"updatedAt":3081},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3075,3076,3077,3080],{"name":2978,"slug":2979,"type":16},{"name":2919,"slug":2920,"type":16},{"name":3078,"slug":3079,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571",28,{"items":3084,"total":3082},[3085,3093,3101,3109,3117,3124,3131],{"slug":2908,"name":2909,"fn":2910,"description":2911,"org":3086,"tags":3087,"stars":27,"repoUrl":28,"updatedAt":2925},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3088,3089,3090,3091,3092],{"name":21,"slug":22,"type":16},{"name":2916,"slug":2917,"type":16},{"name":2919,"slug":2920,"type":16},{"name":2922,"slug":2923,"type":16},{"name":10,"slug":9,"type":16},{"slug":2927,"name":2928,"fn":2929,"description":2930,"org":3094,"tags":3095,"stars":27,"repoUrl":28,"updatedAt":2940},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3096,3097,3098,3099,3100],{"name":21,"slug":22,"type":16},{"name":2919,"slug":2920,"type":16},{"name":14,"slug":15,"type":16},{"name":2937,"slug":2938,"type":16},{"name":10,"slug":9,"type":16},{"slug":4,"name":5,"fn":6,"description":7,"org":3102,"tags":3103,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3104,3105,3106,3107,3108],{"name":21,"slug":22,"type":16},{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},{"slug":2950,"name":2951,"fn":2952,"description":2953,"org":3110,"tags":3111,"stars":27,"repoUrl":28,"updatedAt":2965},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3112,3113,3114,3115,3116],{"name":21,"slug":22,"type":16},{"name":2958,"slug":2959,"type":16},{"name":2961,"slug":2962,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":2967,"name":2968,"fn":2969,"description":2970,"org":3118,"tags":3119,"stars":27,"repoUrl":28,"updatedAt":2981},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3120,3121,3122,3123],{"name":21,"slug":22,"type":16},{"name":2975,"slug":2976,"type":16},{"name":2978,"slug":2979,"type":16},{"name":10,"slug":9,"type":16},{"slug":2983,"name":2984,"fn":2985,"description":2986,"org":3125,"tags":3126,"stars":27,"repoUrl":28,"updatedAt":2997},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3127,3128,3129,3130],{"name":2990,"slug":2991,"type":16},{"name":2993,"slug":2994,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":2999,"name":3000,"fn":3001,"description":3002,"org":3132,"tags":3133,"stars":27,"repoUrl":28,"updatedAt":3011},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3134,3135,3136,3137],{"name":2958,"slug":2959,"type":16},{"name":14,"slug":15,"type":16},{"name":3008,"slug":3009,"type":16},{"name":10,"slug":9,"type":16}]