> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/elements-language/guides.md). # Guides - [Building Complex Components](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/guides.md): Learn how real Elements components combine properties, hooks, collections, and templates — through guided tours of the open-source Core Pack. - [Tutorial: Build an FAQ Component](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/tutorial.md): Build a complete FAQ accordion component from scratch in four hands-on parts - [Part 1: Scaffolding & Properties](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/tutorial/part-1-scaffolding-and-properties.md): Scaffold the FAQ component, define its inspector controls, and render a static themed accordion - [Part 2: Collections & Dynamic Dropzones](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/tutorial/part-2-collections-and-dropzones.md): Drive the FAQ from a questions collection and let individual answers become dropzones - [Part 3: Interactivity with Alpine.js](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/tutorial/part-3-interactivity.md): Bring the accordion to life with an Alpine.js factory, one-open-at-a-time state, and collapse transitions - [Part 4: Edit Mode, Theming & Polish](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/tutorial/part-4-edit-mode-and-polish.md): Perfect the edit canvas, add dark mode and an advanced escape hatch, emit FAQPage structured data, and ship - [Interactive Components with Alpine.js](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/interactive-components-with-alpine.md): Structure stateful, interactive components using Alpine.js factories - [Modals, Overlays & Portals](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/modals-overlays-and-portals.md): Build overlay components that escape the layout using @portal - [Collection-Driven Dropzones](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/collection-driven-dropzones.md): Generate repeating layouts with user-managed dropzones from collections - [Component Suites & Cross-Component Communication](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/component-suites.md): Design families of components that work together - [Designing the Edit-Mode Experience](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/edit-mode-experience.md): Make components feel great on the editing canvas with placeholders, preview data, and editor styles - [Editor Live Preview](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/editor-live-preview.md): Run Three.js and other ES modules live on the editing canvas - [Integrating JavaScript Libraries](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/integrating-javascript-libraries.md): Ship third-party JavaScript libraries with your components - [Responsive Images & Media](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/responsive-images-and-media.md): Combine responsive properties, theme breakpoints, and resizeResource to build responsive media components - [Galleries & Resource Collections](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/galleries-and-resource-collections.md): Build media components around project resources, folders, and drag-and-drop - [Server-Side PHP Components](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/server-side-php-components.md): Advanced PHP patterns — runtime rendering, @raw tokens, caching, and requiresPhp - [Building Form Components](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/building-form-components.md): Build a form suite with a parent form, field children, and a secure PHP backend - [External Data Sources](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/external-data-sources.md): Feed components from CSV files, remote URLs, and other external data - [Navigation & Recursive Templates](https://docs.realmacsoftware.com/elements-docs/elements-language/guides/navigation-and-recursive-templates.md): Build navigation components with rw.pages and recursive includes --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.realmacsoftware.com/elements-docs/elements-language/guides.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.