> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Compositions

> A composition is the top-level container you build, version, and publish in UI Studio.

A composition contains one or more pages, each with its own URL. You arrange components on each page's canvas, configure them, and publish when ready. UI Studio tracks every save as a new version so you can view the full history of your work.

## The compositions list

The Compositions screen shows all compositions in your environment. Each row displays the composition name and the date and time it was last edited. Click any row to open the composition in the editor.

<Frame caption="The Compositions screen, where you create, manage, and publish your UI Studio compositions.">
  <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/compositions-main.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=4e2a0fab462abb87398b445b3907564d" alt="" width="2048" height="1036" data-path="assets/images/lw-platform/ui-studio/compositions-main.png" />
</Frame>

Use the search bar to filter compositions by name or description. Use the **Filters** button to filter by a date range for the Last Edited On column. Click the **Name** or **Last Edited On** column headers to sort the list.

## Build a composition

<Steps>
  <Step title="Open the Compositions screen" icon="table-columns">
    Navigate to **UI Studio** in the left navigation.
  </Step>

  <Step title="Select a composition" icon="list">
    Select a composition from the list.

    <Note>
      Compositions are currently created on your behalf by your Lucidworks client team. A self-service composition creation workflow is coming in a near-term product update.
    </Note>
  </Step>

  <Step title="Start building" icon="hammer">
    The new composition opens in the editor. Add pages and arrange components on the canvas.

    <Tree>
      <Tree.Folder name="Composition" defaultOpen>
        <Tree.Folder name="Search Page" defaultOpen>
          <Tree.File name="Search Bar" />

          <Tree.File name="Results" />

          <Tree.File name="Facets" />
        </Tree.Folder>

        <Tree.Folder name="Details Page" defaultOpen>
          <Tree.File name="Text" />

          <Tree.File name="Image" />

          <Tree.File name="Button" />
        </Tree.Folder>
      </Tree.Folder>
    </Tree>
  </Step>
</Steps>

## Manage pages

A composition contains one or more pages. Each page has a name and a URL path. One page is designated as the home page, which loads when a user visits the root of your published composition. Pages can also contain subpages, each with a URL path nested under the parent page's path.

<Frame caption="Page management in a composition.">
  <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/composition-pages.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=cff44ab14fc94ef0179f48d46dcd2dcd" alt="" width="823" height="473" data-path="assets/images/lw-platform/ui-studio/composition-pages.png" />
</Frame>

<ParamField path="Name" type="string" required>
  Display name for the page.
</ParamField>

<ParamField path="URL" type="string" required>
  URL path for the page, relative to the composition's root URL.
</ParamField>

<ParamField path="Home Page" type="boolean">
  When true, this page loads when a user visits the root of the published composition. Only one page can be the home page.
</ParamField>

<ParamField path="Subpages" type="array">
  Optional child pages nested under this page's URL path. Each subpage has the same configuration options as a top-level page.
</ParamField>

## Build your composition

Drag components from the left panel onto the canvas to build your page layout. Click any component to select it and configure it in the **Customize** panel. Repeat across pages until your composition is ready, then save your work. The Quickstart walks through this process end to end, and the component documentation covers every configuration option.

<Card title="Quickstart" icon="rocket" horizontal href="/docs/lw-platform/lw-ui-studio/quickstart">
  Get up and running with your first UI Studio page in minutes.
</Card>

<Card title="Components" icon="puzzle-piece" horizontal href="/docs/lw-platform/lw-ui-studio/components/search-bar">
  Browse available components and learn how to configure them.
</Card>

## Publish a composition

Publishing makes your composition available at a public URL in the format `YOUR_COMPANY.ui.lucidworks.com/COMPOSITION_NAME`.

<Steps>
  <Step title="Open the publish dialog">
    In the editor toolbar, click **Publish**.
  </Step>

  <Step title="Confirm publication details">
    Review and confirm your company name, composition name, and page title, then click **Publish**.
  </Step>
</Steps>

<Note>
  The published URL uses the composition name. To change the URL, update the composition name before publishing.
</Note>

## Composition settings

Settings apply at the composition level and affect all pages. Access settings from the editor toolbar.

### Branding

Upload a logo and favicon for your composition. These appear in the browser tab and any branded areas of your pages.

<ParamField path="Logo" type="file">
  Image file displayed in branded areas of your composition.
</ParamField>

<ParamField path="Favicon" type="file">
  Icon file displayed in the browser tab.
</ParamField>

### Localization

Configure the language, timezone, and date and time format for your composition. These settings affect how dates and times display across all pages.

<ParamField path="Language" type="string">
  Language code for the composition, for example, `en-US`.
</ParamField>

<ParamField path="Timezone" type="string">
  Timezone for the composition, for example, `America/Los_Angeles`.
</ParamField>

<ParamField path="Date and time format" type="string">
  Format string for displaying dates and times, for example, `MM/DD/YYYY h:mm A`.
</ParamField>

### Authentication

Configure single sign-on (SSO) for your composition using OIDC.

<ParamField path="Enabled" type="boolean">
  When true, SSO is required to access the composition.
</ParamField>

<ParamField path="Session duration" type="number">
  How long, in hours, a user session remains valid.
</ParamField>

<ParamField path="Session extension threshold" type="number">
  How many minutes before session expiry a session is eligible for extension.
</ParamField>

<ParamField path="OIDC" type="group">
  Identity provider configuration for the OIDC protocol.

  <Expandable title="OIDC settings">
    <ParamField path="Client ID" type="string" required>
      Client identifier registered with your identity provider.
    </ParamField>

    <ParamField path="Client secret" type="string" required>
      Client secret registered with your identity provider.
    </ParamField>

    <ParamField path="Issuer URI" type="string" required>
      Base URI of your identity provider.
    </ParamField>

    <ParamField path="Authorization URI" type="string" required>
      URI where users are redirected to authenticate.
    </ParamField>

    <ParamField path="Token URI" type="string" required>
      URI used to exchange authorization codes for tokens.
    </ParamField>

    <ParamField path="JWKS URI" type="string" required>
      URI of your identity provider's JSON Web Key Set.
    </ParamField>

    <ParamField path="Userinfo URI" type="string">
      URI used to retrieve user profile information.
    </ParamField>

    <ParamField path="End session endpoint" type="string">
      URI used to log users out of the identity provider.
    </ParamField>

    <ParamField path="Scopes" type="string[]">
      OAuth scopes to request from the identity provider, for example, `openid`, `profile`, `email`.
    </ParamField>
  </Expandable>
</ParamField>