[{"data":1,"prerenderedAt":518},["ShallowReactive",2],{"navigation_docs":3,"-guide-canvas":225,"-guide-canvas-surround":514},[4,27,77,123,157,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203,207],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":200,"path":201,"stem":202},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":204,"path":205,"stem":206},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":208,"path":209,"stem":210},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[217,221],{"title":218,"path":219,"stem":220},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":222,"path":223,"stem":224},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":226,"title":70,"body":227,"description":507,"extension":508,"links":509,"meta":510,"navigation":511,"path":71,"seo":512,"stem":72,"__hash__":513},"docs\u002F2.guide\u002F90.canvas.md",{"type":228,"value":229,"toc":493},"minimark",[230,235,251,256,268,271,282,286,295,332,346,351,364,368,381,411,419,423,427,430,437,441,444,479,482,486,489],[231,232,234],"h1",{"id":233},"decoupling-drupal-canvas","Decoupling Drupal Canvas",[236,237,238,244,245,250],"p",{},[239,240,70],"a",{"href":241,"rel":242},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcanvas",[243],"nofollow"," is Drupal's modern page builder (",[239,246,249],{"href":247,"rel":248},"https:\u002F\u002Fproject.pages.drupalcode.org\u002Fcanvas\u002F",[243],"docs","). When paired with Lupus Decoupled, Canvas becomes a powerful decoupled page builder that supports varying frontend frameworks.",[252,253,255],"h2",{"id":254},"how-it-works","How It Works",[236,257,258,259,263,264,267],{},"Canvas pages are built from components in Drupal's Canvas editor. In this context, a component can be a custom element (a Vue\u002FReact component provided by the frontend) or a regular Drupal block — which can render any Drupal content, including Views blocks that themselves output custom elements. While editing, the editor renders live previews of components via JavaScript using a preview provider (i.e. the frontend). Once published, the page is served through the CE API like any other content (e.g. ",[260,261,262],"code",{},"\u002Fce-api\u002Fpage\u002F{id}","), as regular ",[239,265,266],{"href":135},"custom elements API"," output, so components are regularly rendered by the frontend.",[252,269,74],{"id":270},"drupal-cms",[236,272,273,274,277,278,281],{},"When using ",[239,275,276],{"href":113},"Lupus Decoupled Starter"," or a similar site template based upon Lupus Decoupled, you get a fully working setup with Canvas pre-configured. Refer to the ",[239,279,280],{"href":75},"Drupal CMS page"," for details.",[252,283,285],{"id":284},"manual-setup","Manual Setup",[236,287,288,289,294],{},"Apply the ",[239,290,293],{"href":291,"rel":292},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_decoupled_recipe_canvas",[243],"Lupus Decoupled Canvas Recipe"," to set up the module and its dependencies with a single recipe apply:",[296,297,302],"pre",{"className":298,"code":299,"language":300,"meta":301,"style":301},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","composer require drupal\u002Flupus_decoupled_recipe_canvas\ndrush recipe ..\u002Frecipes\u002Flupus_decoupled_recipe_canvas\n","bash","",[260,303,304,320],{"__ignoreMap":301},[305,306,309,313,317],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"sBMFI","composer",[305,314,316],{"class":315},"sfazB"," require",[305,318,319],{"class":315}," drupal\u002Flupus_decoupled_recipe_canvas\n",[305,321,323,326,329],{"class":307,"line":322},2,[305,324,325],{"class":311},"drush",[305,327,328],{"class":315}," recipe",[305,330,331],{"class":315}," ..\u002Frecipes\u002Flupus_decoupled_recipe_canvas\n",[236,333,334,335,339,340,345],{},"This installs and configures ",[239,336,338],{"href":241,"rel":337},[243],"Canvas",", ",[239,341,344],{"href":342,"rel":343},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcanvas_extjs",[243],"Canvas ExtJS",", and the Lupus Decoupled Canvas sub-module.",[347,348,350],"h3",{"id":349},"configuring-the-editor-theme","Configuring the Editor Theme",[236,352,353,354,357,358,363],{},"Configure the theme used for Canvas editor previews at ",[260,355,356],{},"\u002Fadmin\u002Fconfig\u002Fsystem\u002Flupus-decoupled\u002Fsettings"," under \"Lupus Decoupled theme\". A minimal theme like Stark or ",[239,359,362],{"href":360,"rel":361},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_stark",[243],"Lupus Stark"," is recommended.",[252,365,367],{"id":366},"providing-components","Providing Components",[236,369,370,371,375,376,380],{},"Components are provided via a ",[372,373,374],"strong",{},"component index",": a JSON file listing available components, their props, and metadata. ",[239,377,379],{"href":342,"rel":378},[243],"Canvas External JS Components"," (a Canvas extension for integrating external JavaScript components) reads this index and makes the components available in the Canvas editor UI.",[382,383,384,402],"ul",{},[385,386,387,390,391,396,397,399,400],"li",{},[239,388,389],{"href":197},"Vue\u002FNuxt",": very well supported via ",[239,392,395],{"href":393,"rel":394},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview",[243],"nuxt-component-preview",", see ",[239,398,196],{"href":197}," and ",[239,401,192],{"href":193},[385,403,404,405,410],{},"React: no ready-made setup yet. ",[239,406,409],{"href":407,"rel":408},"https:\u002F\u002Fgithub.com\u002Ffullfatthings\u002Fdrupal-canvas-react",[243],"fullfatthings\u002Fdrupal-canvas-react"," provides a library for exposing React components and generating a component index, but some integration work is required to wire everything together.",[236,412,413,414,418],{},"For documentation on how to integrate other frontend frameworks, see ",[239,415,417],{"href":416},"\u002Fadvanced-topics\u002Fmulti-frontend#canvas-support","Multi-Frontend",".",[252,420,422],{"id":421},"component-registration","Component Registration",[347,424,426],{"id":425},"automatic-registration-via-lupus-csr-themes","Automatic Registration via Lupus CSR Themes",[236,428,429],{},"When a Lupus CSR-based theme is installed, components are automatically registered from the theme's bundled component-index. No manual steps are needed.",[236,431,432,433,436],{},"Automatic registration also works with a decoupled frontend when the ",[260,434,435],{},"lupus_decoupled_canvas"," module is installed, provided the configured frontend exposes a component index at the configured frontend base URL.",[347,438,440],{"id":439},"decoupled-frontends","Decoupled Frontends",[236,442,443],{},"When using a decoupled frontend (e.g. a dev server), component registration must be triggered manually:",[382,445,446,460,469],{},[385,447,448,451,452,455,456,459],{},[372,449,450],{},"UI",": Go to ",[372,453,454],{},"Administration > Appearance > Components > External JS"," (",[260,457,458],{},"\u002Fadmin\u002Fappearance\u002Fcomponent\u002Fextjs",")",[385,461,462,465,466],{},[372,463,464],{},"Drush",": ",[260,467,468],{},"drush canvas:extjs-auto-register",[385,470,471,474,475,478],{},[372,472,473],{},"Recipe config action",": Use ",[260,476,477],{},"lupus_decoupled_canvas:registerComponents"," after configuring the preview provider URL",[236,480,481],{},"When the frontend base URL is changed via the Lupus Decoupled settings form, a prompt will remind you to update the component registration.",[252,483,485],{"id":484},"relationship-to-canvas-code-components","Relationship to Canvas Code Components",[236,487,488],{},"Drupal Canvas has built-in support for (P)React \"code components\" with their own bundler. These components are purely client-side rendered and currently do not integrate with Lupus Decoupled's CE API pipeline. Adding support for embedding them as custom elements would be straightforward, but is not implemented yet.",[490,491,492],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":301,"searchDepth":322,"depth":322,"links":494},[495,496,497,501,502,506],{"id":254,"depth":322,"text":255},{"id":270,"depth":322,"text":74},{"id":284,"depth":322,"text":285,"children":498},[499],{"id":349,"depth":500,"text":350},3,{"id":366,"depth":322,"text":367},{"id":421,"depth":322,"text":422,"children":503},[504,505],{"id":425,"depth":500,"text":426},{"id":439,"depth":500,"text":440},{"id":484,"depth":322,"text":485},"Drupal Canvas is Drupal's modern page builder (docs). When paired with Lupus Decoupled, Canvas becomes a powerful decoupled page builder that supports varying frontend frameworks.","md",null,{},true,{"title":70,"description":507},"8dauv4eVoXkWq0fK6v_i3CTUdua_md7Wuo-Y32AHjb0",[515,516],{"title":66,"path":67,"stem":68,"description":301,"children":-1},{"title":74,"path":75,"stem":76,"description":517,"children":-1},"Drupal CMS is Drupal's user-friendly distribution aimed at marketers and content teams. Lupus Decoupled supports it via site templates, providing a fully decoupled setup out of the box.",1779292108598]