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

# Embeddables Builder

> Build and edit Embeddables visually in the Builder, with a 5-minute onboarding tour

export const TellaVideo = ({url}) => <div class="tella-video">
    <iframe style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
  borderRadius: "10px"
}} src={url} allowfullscreen allowtransparency></iframe>
  </div>;

The **Builder** is where you design pages, add logic, style components, and preview your Embeddable before publishing.

This tour covers:

* Overview of the Builder
* Sidebars and Top Bar
* Adding content, and navigating components and pages
* Styling your Embeddable
* Adding logic: show/hide conditions + split tests
* Custom code, analytics, and sending data to other services
* Saving, versions, drafts, pushing to staging + going live

## The Onboarding Tour

<TellaVideo url="https://www.tella.tv/video/cm8ypi49v000q09ldasr78vvz/embed?b=0&title=0&a=1&loop=0&t=0&muted=0&wt=1" />

## Key Builder topics

<CardGroup cols={2}>
  <Card title="Design" icon="palette" href="/features/design">
    Style components, layers, and layouts.
  </Card>

  <Card title="Saving and Version Control" icon="floppy-disk" href="/features/saving-and-version-control">
    Save drafts, manage versions, and publish changes.
  </Card>
</CardGroup>

## Dive deeper into those features

Now that you've watched the Onboarding Tour, these pages dive deeper into each of the features you just learned about:

<CardGroup cols={3}>
  <Card title="User Data" icon="database" href="/features/user-data">
    How data is stored
  </Card>

  <Card title="Conditions" icon="split" href="/features/conditions">
    Show/hide content
  </Card>

  <Card title="Split Testing" icon="flask" href="/features/split-testing">
    Test different versions
  </Card>

  <Card title="Computed Fields" icon="brackets-curly" href="/features/computed-fields">
    Compute new values from users' data
  </Card>

  <Card title="Actions" icon="code" href="/features/actions">
    Transform and send data to other services
  </Card>

  <Card title="Analytics" icon="chart-line-up" href="/features/analytics">
    Track your users and measure insights
  </Card>

  <Card title="Version Control" icon="floppy-disk" href="/features/saving-and-version-control">
    Drafts, saves & versions
  </Card>

  <Card title="URL Params" icon="vial" href="/features/url-params">
    Pass data from the URL
  </Card>

  <Card title="Going live" icon="rocket-launch" href="/features/publish-to-your-site">
    Publish to your website
  </Card>
</CardGroup>