---
title: "Editor integration using metadata"
slug: "editor-integration-using-metadata"
abstract: "Overview of the architecture and APIs for integrating Content SDK Angular apps with the Page builder using metadata."
---
# Editor integration using metadata

This topic describes the metadata-based integration of Angular applications with the SitecoreAI Page builder. The Page builder uses the metadata provided by the layout service for placeholders, renderings, and fields to identify them and enable visual editing directly in the browser.

The following diagram illustrates the architecture of integrating a Content SDK Angular app with the Page builder:

![The architecture of integrating a Content SDK Angular app with the SitecoreAI Page builder using metadata.](https://doc.sitecore.com/api/markdown-image/sai/en/developers/content-sdk/angular/1x/images/editor-integration-using-metadata.png)

> [!important]
> Certain header configurations restrict the loading of `iframes` that can prevent metadata integration from working. For example:
>
> -   Setting the `X-Frame-Options` header to `"SAMEORIGIN"`.
>
> -   Setting the `Content-Security-Policy` header to `"frame-ancestors 'self'"`.
>
> To avoid this issue, ensure your response headers allow the Pages domain to load the response inside an iframe, either by adjusting these settings or adding exceptions as needed.

## API routes

The Angular Content SDK sample application uses two routes for the editing support:

- The Render API route, `/api/editing/render`, handles `GET` requests via the `editing-render-middleware`, initialized by `createEditingRenderMiddleware()` in `src/server.ts`. This route processes the editing data in the incoming editing request and prepares it to be correctly handled by Angular routing.
- The Config API route, `/api/editing/config` handles `GET` requests via `editing-config-middleware`, initialized by `createEditingConfigMiddleware` in `src/server.ts`. This route helps Pages identify the type of editing host it works with.

See [Angular middleware](https://doc.sitecore.com/sai/en/developers/content-sdk/angular/1x/angular-middleware.html) for more information.

## Sitecore editing secret

The Sitecore editing secret is a token for securing the Sitecore editor endpoints exposed by the Content SDK Angular apps through the middleware.

The middleware handler automatically validates the token. If validation fails, it returns a response with the HTTP status code `401`.

## Understanding data editing in Content SDK Angular

A `GET` request made by Pages to the render API route contains the required query string parameters to render a given page route.

The `SitecoreClient` uses those query string parameters to fetch editing data. The editing data contains the layout data necessary for rendering the page.

The following represents an example GET request to the editing render endpoint when using metadata-based integration:

```text
/api/editing/render?secret={EDITING_SECRET}&sc_site=my-app&sc_itemid=54C8E9B5-0B2C-5363-8FA6-D32A3A302F51&sc_lang=en&route=/&mode=edit&sc_version=latest&sc_variant={VARIANT_ID}&sc_layoutKind=shared
```

`sc_layoutKind` is an enum with a default value of `final`, but it can be set to `shared` instead if needed.

The `sc_version`, `sc_variant`, and `sc_layoutKind` parameters are all optional.