#F5F5F5
Adobe Experience Manager Sites Features

Developer tools

Experience Manager Sites gives you pre-optimized code and flexible tools to let you build the highest performing webpages. With Edge Delivery Services, you can achieve peak web performance scores without sacrificing any design, feature, or content.

Explore developer tools.

https://main--bacom--adobecom.hlx.page/fragments/products/modal/videos/adobe-experience-manager/sites/developer-tools/graphql#graphql |

GraphQL

Experience Manager’s GraphQL API gives developers an industry standard, application-agnostic query language format to query and retrieve content. It’s designed to be compact and efficient, returning just the content requested, so responses match the format and needs of the requesting app. Queries can also return nested content and multiple related items in one call, significantly reducing the time and bandwidth required to retrieve content and app needs. The result is quick, app-like experiences across all digital channels that are responsive and on brand.

  • Headless content delivery. Deliver content to all your apps in JSON format using GraphQL’s query language with Experience Manager’s headless APIs.
  • Relevant data. Query Experience Manager Content Fragments with all the elements, variations, and nested references required for rendering by an app.
  • Fast, scalable performance. Persistent queries ensure the fastest customer experiences with cacheable content queries designed for web architecture as well as caching in CDNs.
  • Tool and language options. GraphQL is front-end agnostic and limits dependencies on SDKs, allowing developers to work with the language or tools they choose (React, Angular, iOS).
  • Powerful structured content. Content Fragment models support many field types and the ability to create interrelationships, making it easy to create powerful and reusable content models and atomic content.
https://business.adobe.com/fragments/products/modal/videos/adobe-experience-manager/sites/developer-tools/out-of-the-box-components#box |

Out-of-the-box blocks

Create pages with backward-compatible and flexible out-of-the-box components like breadcrumbs, forms, page navigation, search teasers, and search. This makes it easy for authors to build pages while developers increase productivity and save time creating custom text or image components.

  • Functional components. Each out-of-the-box component is a collection of scripts that completely delivers a specific function.
  • Inherit relationships. Components preserve inheritance even as they’re used across different web pages and channels.
  • Lower cost of ownership. Experience Manager Sites components are upgradeable, backwards compatible, and regularly versioned. This allows you to save money when upgrading to the newest release or enhancing site functionality.
  • Components you can trust. With our pretested, production-ready components, you can rest assured these components will work as expected. This helps you spend less time on quality assurance, testing, and maintenance and more time on what really matters.
https://business.adobe.com/fragments/products/modal/videos/adobe-experience-manager/sites/developer-tools/single-page-app-editing#spa |

Single-page app editing

Edit and manage single-page applications (SPAs) built on open-source frameworks like React and Angular with the same drag-and-drop editor you use for websites.

  • Seamless layout. Deliver the capabilities of Experience Manager Sites through the drag-and-drop services available in our SPA editor.
  • CMS governance. Marketers and non-coders can use the CMS capabilities in Experience Manager Sites to edit and manage SPAs.
  • Edit in context. Allow authors to edit changes while previewing how it will look, even for web applications that consume the content as JSON.
Separation of concerns.

Separation of concerns

Separation between code, content, and design enables content authoring to occur in parallel with design and development, making the process more modular and agile. Further, this separation simplifies maintenance by making it easier to develop, debug and update web applications, improving development speed and efficiency.

Optimized boilerplate code.

Optimized boilerplate code

Jumpstart development with our boilerplate code foundation — performance-optimized blueprints for projects. Boilerplate code foundation aligns around best practices and provides the best possible starting point for building high performing experiences. Developers can use it to get projects started easily, minimize unnecessary code, and achieve fast page load time.

#F1F1F1

Learn how to use developer tools.

Find what you need in Experience League, our vast collection of how-to content — including documentation, tutorials and user guides.

Learn more