Editable Components

Some components are hard to design because their content depends on interaction or on data that arrives at runtime. The $editor object lets you preview them in the Lediv editor without changing the exported project.

A dropdown stays closed until someone clicks it. A video player is empty until a mount script starts it. A notification can be info, warning or error depending on data you do not have while editing. $editor lets you see and style each of these states while you design.

The $editor object

$editor is available in every page and component template, with three properties.

$editor is for design time only. Preview mode and the exported project both show the Base view, so rely on le-else branches or real data for the final site.

Test $editor values as true or false. The exported project does not define $editor at all, so its properties read as undefined. A check like $editor.isActive === false or $editor.variant === '' never matches there.

Show editor-only content

A component that relies on a mount script or on external data can look empty or broken in the editor. Use $editor.isActive to show a placeholder you can design around.

<!-- 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 size it to match the real content. In the exported project the le-else branch renders and the mount script takes over.

$editor.isActive means "rendered on the Lediv editor canvas", not "dev mode". It is off on a local dev server of the exported project too.

Editor-only styles

The placeholder above has no size of its own. A <style editor> block styles it in the editor only.

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

<style editor> never reaches Preview or the built site. The block stays in the source files you download, and the build leaves it out. Use it for CSS that only makes sense while editing, like placeholder sizes, outlines for elements that are normally hidden, or hints for content that loads at runtime.

Preview component variants

Some states depend on 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 cannot trigger them in the editor, but you still need to see and style them. Declare those states as variants, and the toolbar shows a selector to switch between them while you design.

Declare and use variants

In the component's <script> block, assign $editor.variants an array of strings. Read the selected one with $editor.variant in the template.

<!-- 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 by 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 has to be a top-level assignment of a literal array of strings. Dynamic values and references to other variables are not read.

Style different visual states

Variants can also preview different styles of the same component, like a notification that changes with 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, each variant previews one style. In the exported project $editor.variant is empty, so $props.type sets the class instead.

Switch variants in the toolbar

Select an element inside a component that declares $editor.variants, and the toolbar shows one button per declared value plus Base.

• Base leaves $editor.variant empty. The exported project always shows this view.
• Any declared variant sets $editor.variant to that value for that component instance.

Each instance keeps its own variant, so the same component used twice on a page can show two variants at once.

Design components so the Base view is the final output. If a state has to be active at runtime, drive it with real data, such as props, context or mount scripts, not with $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 when you change page or reload.

Next steps