Editable Components

Some components are hard to design because their content depends on runtime interaction or external data. The $editor object gives you tools to preview those components inside the Lediv editor, without affecting the exported project.

A dropdown menu is closed until the user clicks it. A video player is empty until a mount script initializes it. A notification can be info, warning, or error depending on data you don't have while editing. $editor fills these gaps so you can see and style every visual state during design.

The $editor object

$editor is automatically available in every page and component template. It has three properties:

Everything in $editor is for design-time preview only. The exported project always gets the defaults shown in the right column. Your templates should use le-else branches or real data for the final site.

Show editor-only content

When a component relies on a mount script or external data that isn't available in the editor, the design view may be empty or broken. Use $editor.isActive to display a placeholder that helps you design the layout.

<!-- VideoEmbed.html -->
<div class="video-embed">
  <div le-if="$editor.isActive" class="video-embed__placeholder">
    Video player, loads at runtime
  </div>
  <div le-else class="video-embed__player" id="player"></div>
</div>

In the editor, you see the placeholder and can style it to match the expected dimensions. In the exported project, $editor.isActive is false, so the le-else branch renders and the mount script takes over.

$editor.isActive means "rendered inside the Lediv editor", not "dev mode". It is false even when running a local dev server from the exported project.

Editor-only styles

The placeholder from the previous example has no dimensions by default. Add a <style editor> block to style it for the editor without affecting the exported project.

<!-- VideoEmbed.html -->
<div class="video-embed">
  <div le-if="$editor.isActive" class="video-embed__placeholder">
    Video player, loads at runtime
  </div>
  <div le-else class="video-embed__player" id="player"></div>
</div>

<style editor>
  .video-embed__placeholder {
    min-height: 300px;
    background: #1a1a2e;
    display: grid;
    place-items: center;
    border-radius: 8px;
  }
</style>

The <style editor> block is excluded from the exported project. Use it whenever you need CSS that only makes sense during editing, like placeholder sizing, visible outlines for elements that are normally hidden, or layout hints for content that loads at runtime.

Preview component variants

Some components have visual states that depend on user interaction, like a dropdown that opens on click, a modal that appears on a button press or a notification that changes color with its type. You can't trigger these interactions in the editor, but you still need to see and style each state.

Variants solve this. You declare the possible states, and the editor shows a selector in the toolbar so you can switch between them while designing.

Declare and use variants

Inside a component's <script> block, assign $editor.variants with an array of strings. Use $editor.variant in the template to read the currently selected value.

<!-- Dropdown.html -->
<script>
  $editor.variants = ['open'];
</script>

<div class="dropdown {$editor.variant === 'open' ? 'dropdown--open' : ''}">
  <button class="dropdown__trigger">Options</button>
  <ul class="dropdown__menu">
    <li class="dropdown__item">Edit</li>
    <li class="dropdown__item">Duplicate</li>
    <li class="dropdown__item dropdown__item--danger">Delete</li>
  </ul>
</div>

The menu items are always in the markup so they exist at runtime. The variant only toggles a CSS class that previews the open state. With Base, the menu is hidden via CSS. Switch to Open in the toolbar to see the expanded menu and style its items. At runtime, the mount script toggles the same class on click.

$editor.variants must be a top-level assignment with a literal array of strings. Dynamic values or references to other variables are not read.

Style different visual states

Variants aren't limited to showing and hiding elements. Use them to preview different visual styles on the same component. For example, a notification that changes appearance based on its type.

<!-- Alert.html -->
<script>
  $editor.variants = ['success', 'warning', 'error'];
</script>

<div class="alert alert--{$editor.variant || $props.type || 'info'}">
  <span class="alert__icon"></span>
  <p class="alert__message">{$props.message || 'Alert message'}</p>
</div>

In the editor, switching between variants previews each notification style. In the exported project, $editor.variant is empty, so $props.type controls the class instead.

Switch variants in the toolbar

When you select an element inside a component that declares $editor.variants, the toolbar shows a variant selector with one button per declared value, plus a Base option.

• Base: $editor.variant is an empty string. This is what the exported project always shows.
• Any declared variant: sets $editor.variant to that value for that component instance.

Each component instance tracks its own variant. The same component used twice on a page can be previewed in different variants at the same time.

Design your components so the Base view is the final user-facing output. If a state needs to be active at runtime, drive it with real data (props, context, or mount scripts) instead of $editor.variant.

Good to know

• $editor is a reserved name. Do not declare a variable called $editor in your scripts.
• $editor is not available in mount scripts or in the exported build.
• Variant selections are not saved. They reset on page change or reload.

Next steps