# Build page components

Build [Canvas](/start-here/glossary/#drupal-canvas) components that editors place on pages, and manage components, pages, and regions as code. The [quickstart](/source-cms/canvas-components/quickstart/) ships your first component; [push to a live site](/source-cms/canvas-components/push-to-a-live-site/) covers every push after that, once the site has real pages on it; [component development](/source-cms/canvas-components/guide/) turns the hello-world component into real props, slots, and styled compositions.

- [Quickstart](/source-cms/canvas-components/quickstart/): Scaffold a component project from the Nebula template, build one component, and push it to your site's component library. All in under 10 minutes.
- [Push to a live site](/source-cms/canvas-components/push-to-a-live-site/): What canvas push does to a site that already has pages on it: reading the plan before it applies, pushing a component disabled, what the site does when you delete a component an editor placed, and how to get back to a known-good state.
- [Component development](/source-cms/canvas-components/guide/): Define props and slots in component.yml, style with Tailwind and per-component CSS, compose cards into listings, and pull AI agent context from your site.
- [Content templates](/source-cms/canvas-components/content-templates/): Bind component props to entity fields so one template renders every article. Discover bindable fields with agents-context, author the binding as code, and push it.
- [Version pages and regions as code](/source-cms/canvas-components/pages-and-regions/): Pull the pages and header/footer regions editors build in Canvas into your repository, edit them as JSON specs, push changes back, and reconcile external images.