Frames & image slots

DocMosaic ships two "frame" tools. Editor.FrameToolButton draws a container frame - a box that owns whatever you drop inside it, so the group moves, duplicates, and deletes as one unit and the frame's fill/border sits behind its children. Editor.ImageFrameToolButton draws a placeholder frame - a shaped image slot (rectangle, circle, or line) you fill by dropping a photo, the same pattern Canva uses for layouts.

Use container frames to build cards, panels, and repeatable layout blocks; use placeholder frames for avatars, badges, and shaped photo grids.

Code

'use client';

import { Editor } from '@docmosaic/react';
import '@docmosaic/react/styles.css';

export default function FramesEditor() {
    return (
        <Editor.Root>
            <Editor.Properties />
            <Editor.Toolbar>
                <Editor.UndoButton />
                <Editor.RedoButton />
                <Editor.AddImageButton />
                <Editor.AddTextButton />
                <Editor.FrameToolButton />
                <Editor.ImageFrameToolButton />
                <Editor.DownloadButton />
            </Editor.Toolbar>
            <Editor.Pages />
            <Editor.Canvas>
                <Editor.Section />
            </Editor.Canvas>
            <Editor.Preview />
        </Editor.Root>
    );
}

Arm Editor.FrameToolButton and drag to place a frame, then drop images or text inside it - each becomes a child (parentFrameId). Drag the frame and its contents follow; delete it and they go too. Give the frame a fill or border from its floating toolbar and it renders behind its children.

Arm Editor.ImageFrameToolButton, pick a shape from its dropdown, and drag to place a slot. Drop a photo in and it's clipped to the shape - swap it any time.

Try it

Related

• Frames - container vs. placeholder frames
• Editor.FrameToolButton
• Editor.ImageFrameToolButton