> ## 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.

# UI Studio

> Build interactive search experience pages with drag-and-drop canvas sections, pre-built components, and no-code configuration.

UI Studio lets you create and publish search experience pages without writing code. Arrange pre-built components on visual canvas sections, connect them to your datastore, and deploy directly to your users.

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

  <Tab title="UI Studio drag-and-drop" icon="hand">
    <Frame caption="Drag components from the left panel onto canvas sections to arrange your page layout.">
      <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/compositions-drag-and-drop.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=85ce313569760f8be0725e14640bb7b4" alt="" width="2048" height="1036" data-path="assets/images/lw-platform/ui-studio/compositions-drag-and-drop.png" />
    </Frame>
  </Tab>

  <Tab title="UI Studio editor" icon="pencil">
    <Frame caption="The UI Studio editor, with the component palette on the left and the Customize panel on the right.">
      <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/add-facets.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=99c08be5a277270ba2b2e55f5c11ff02" alt="" width="2048" height="1036" data-path="assets/images/lw-platform/ui-studio/add-facets.png" />
    </Frame>
  </Tab>
</Tabs>

## How UI Studio works

**Compositions are standalone web experiences.** A composition works like a self-contained website, made up of one or more pages, each with its own URL. Arrange components on each page's canvas sections, configure them independently, and publish when ready.

**Components reflect your data.** Components retrieve and display data from a configured datastore. Your datastore changes update automatically.

**Configuration is visual.** Use the Customize panel to adjust component settings, styling, and behavior without editing code.

**Your changes are backed up automatically.** UI Studio saves your composition history as you work. If you need to revert a critical change, contact your Lucidworks representative.

**Publishing generates a public URL.** When you publish, your composition is hosted and immediately available to your users.

## Get started

<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>

## Build your app

<Card title="Compositions" icon="table-columns" horizontal href="/docs/lw-platform/lw-ui-studio/compositions">
  Arrange and manage page layouts using composition canvas sections.
</Card>

## Components

Use pre-built components to build interactive search experiences.

<Columns cols={2}>
  <Card title="Search Bar" icon="search" href="/docs/lw-platform/lw-ui-studio/components/search-bar">
    Accept user queries and trigger search across your datastore.
  </Card>

  <Card title="Results" icon="list" href="/docs/lw-platform/lw-ui-studio/components/results">
    Display search results views with sorting and pagination.
  </Card>

  <Card title="Facets" icon="filter" href="/docs/lw-platform/lw-ui-studio/components/facets">
    Let users narrow results by filtering on field values.
  </Card>

  <Card title="Button" icon="hand-pointer" href="/docs/lw-platform/lw-ui-studio/components/button">
    Add navigation, export, or action buttons to your pages.
  </Card>

  <Card title="Image" icon="image" href="/docs/lw-platform/lw-ui-studio/components/image">
    Display images with optional links, borders, and fallback support.
  </Card>

  <Card title="Text" icon="font" href="/docs/lw-platform/lw-ui-studio/components/text">
    Add static or dynamic text content with rich styling options.
  </Card>
</Columns>