mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-10 06:24:35 +09:00
## Summary - Document how people create, connect, edit, validate, and publish MDX-backed Content Blocks. - Document the complete MCP workflow, including scoped expression sources, frontmatter updates, diagnostics, conflicts, and disconnect behavior. - Add two focused screenshots for the human workflow. - Fix issues found by a low-reasoning MCP agent while executing every documented workflow. Ref #6182 ## Implementation notes - Connection confirmation uses the public `confirmReplacement` field because `confirm` is reserved as a hidden transport field. - MCP edits frontmatter with `update-content-block-frontmatter`; materialized MDX elements are not persistent targets for generic instance mutation tools. - Reload now intentionally discards a conflicted local source and accepts the Asset's latest storage revision before an edit is reapplied. - Generated MCP documentation and runtime contracts are updated from their source files. ## Checklist - [x] Document the human MDX Content Block workflow. - [x] Document MCP discovery, connection, editing, diagnostics, frontmatter, dynamic sources, conflicts, and disconnection. - [x] Add only screenshots that clarify otherwise hard-to-describe UI steps. - [x] Test every documented MDX capability through the local MCP CLI with a low-reasoning agent. - [x] Reproduce and fix the replacement-confirmation schema mismatch. - [x] Reproduce and fix persistent-session conflict reload and reapply. - [x] Add regression tests that failed before each product fix and pass afterward. - [x] Regenerate runtime contracts and generated MCP documentation. - [x] Review authoritative `docs/` content and update affected pages. - [x] Run affected tests, typechecks, formatting, and diff checks. ## Verification - Project Build: 208 affected tests passed. - Content Engine Asset session: 8 tests passed. - CLI documentation tests: 14 tests passed. - MCP docs generator: 3 tests passed. - Content Engine, Project Build, CLI, and MCP docs typechecks passed. - `pnpm oxfmt --check` passed. - `git diff --check` passed. - Low-reasoning MCP evaluation passed all documented workflows, including a real two-client revision conflict, reload, reapply, and final saved inspection.
9.8 KiB
9.8 KiB
Table of contents
Basics
university
- ⚛️ Foundations
- 🏠 Dashboard
- 🛠️ Anatomy of the Webstudio builder
- 🗺️ Navigator
- 📐 Layout & Flexbox
- 📐 Layout & Grid
- 📱 Responsive design
- 📱 Breakpoints
- 🧱 CSS variables
- 🖌️ Design tokens
- 🎨 Style panel
- 🎯 States and selectors
- 🔡 Data variables
- ➕ Expression editor
- 🎨 Custom classes & attributes
- 🔄 Transforms
- 🎬 Animations
- 💾 CMS
- ♻️ Reusability & maintainability
- ↔️ Copy-Paste
- 🔍 Commands & search
- 🗂️ Assets
- 📚 Content Engine
- 🎯 SEO settings
- ⚡ Performance
- ⌨️ Shortcuts
- 📄 Page settings
- 📄 Page templates
- ⚙️ Project settings
- 🎭 Modes
- 🔗 Share links
- 🌐 Publishing & custom domains
- 🧩 Core Components
- 📦 Element
- 🔗 Link
- 🔲 Slot
- ➖ Separator
- 📝 Text
- 🔤 Heading
- 📄 Paragraph
- ✏️ Inline Text
- 💬 Blockquote
- 📄 Code Text
- ✍️ Form
- ✍️ Webhook Form
- 🔘 Button
- 🏷️ Label
- 📝 Input
- 📝 Text Area
- 📋 Select
- ☑️ Checkbox
- 🔘 Radio Button
- 🖼️ Image
- 🎬 Video
- ⏯️ Vimeo
- ▶️ Vimeo Background Video
- ▶️ YouTube
- 💾 Collection
- 🪜 Content Embed
- 🪜 Markdown Embed
- 📝 Content Block
- 📃 List
- ⌨️ HTML Embed
- 🎬 Animation Group
- Text Animation
- 🎥 Video Animation
- 👨👨👦👦 Stagger Animation
- 🗂️ Head Slot
- 🏷️ JSON-LD
- 📘 XML Node
- 🕐 XML Time
- 🕐 Time
- 📛 Built with Webstudio
- ⬛ CLI
- 🤖 MCP
- ✨ Inception
- ▫️ Radix UI Components
- Marketplace
- 🤖 Webstudio AI
- 📤 Self-Hosting
- 🧑🏫 How-Tos
- ▶️ How to add icons
- ▶️ How to use custom fonts
- ▶️ How to create fluid video backgrounds with Vimeo
- ▶️ How to crop an image without cropping the original
- ▶️ How to create responsive navigation
- 🍀 How to add a GSAP animation
- ▶️ How to make a custom 404 page
- ▶️ Build Your Own Directory Website with Airtable
- ▶️ Using filters to dynamically display content
- 🔗 Integrations
- How to build a frontend for Supabase using Webstudio
- How to build a frontend for Airtable using Webstudio
- How to integrate a Webhook Form with Airtable
- How to build a frontend for Baserow using Webstudio
- How to build a frontend for Hygraph using Webstudio
- How to build a WordPress frontend using Webstudio (no-code builder)
- How to integrate a Notion database with Webstudio
- How to integrate Webhook Form with Pabbly
- How to integrate Webhook Form with Zapier
- How to integrate Webhook Form with N8N
- How to integrate Flotiq with Webstudio
- Craft