ImagePlaceholder

Drafting a deck usually outruns collecting its assets. You know a product screenshot belongs on page four before you have the screenshot, and leaving that page empty makes it easy to forget while a lorem-ipsum grey box makes it easy to ship by accident.

ImagePlaceholder renders a sized, dashed box carrying a description of what belongs there, and the inspector can swap it for the real thing in one action.

import { ImagePlaceholder } from '@beem-slide/core';

const Hero = () => (
  <ImagePlaceholder hint="Product hero screenshot" width={1280} height={720} />
);

export default [Hero];

Props

type ImagePlaceholderProps = {
  /** What belongs here. Becomes the alt text on the replacement <img>. Required. */
  hint: string;
  /** Box width in px. Omit to fill the parent. */
  width?: number;
  /** Box height in px. Omit to fill the parent. */
  height?: number;
  /** Inline styles, merged after the placeholder's own. */
  style?: CSSProperties;
  className?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>;

With both width and height set, the box prints its dimensions under the hint — enough to judge an aspect ratio while the page is still moving around.

Two sizing modes

A fixed box, when the layout has a real slot: a hero card, a logo lockup at a known size.

<ImagePlaceholder hint="Q3 revenue chart" width={960} height={540} />

Filling the parent, when a flex or grid cell already decides the size. Omit both dimensions and it takes width: 100%; height: 100%.

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
  <ImagePlaceholder hint="Before — the old dashboard" />
  <ImagePlaceholder hint="After — the new dashboard" />
</div>

Write the hint about the content, not the slot. "Q3 revenue chart" tells whoever fills it what to go and find; "hero image" tells them nothing they could not see.

Replacing it

Upload the file through the assets panel, click the placeholder with Inspect on, and pick Replace…. The op behind it does three things:

1. Checks the element it was pointed at really is an <ImagePlaceholder>.
2. Adds import <ident> from './assets/<file>' if that asset is not already imported.
3. Rewrites the element:

<img src={<ident>} alt="<hint>" style={{ width, height, objectFit: 'cover' }} />

The asset has to live under the deck's own ./assets/. Doing it by hand is fine — the snippet above is exactly what the op writes, so there is no state to keep in sync.

When not to use it

A placeholder is a task you are handing to your future self, so only create one where a specific image is genuinely required: one screenshot per feature in a product walkthrough, the team photo in an offsite recap, the customer's logo in a case study.

Not for decoration, not for stock filler, and not anywhere type or a diagram would carry the page better. An empty placeholder someone has to clear is worse than a page that never asked for a picture.

The slide-authoring guide carries the editorial version of that rule, which is the one an agent reads before it puts one on a page.