Mobile & touch support

@docmosaic/react 2.0 ships a responsive, touch-first editor. Below the desktop breakpoint (1024px), Editor.Root automatically swaps its three-pane app-shell for a phone/tablet layout - no configuration needed. The same component is the full editor on desktop and a touch editor on mobile, and the PDF output is identical on every device.

The responsive shell

Below 1024px the editor renders:

• A compact top bar - document name, undo / redo, download, and theme toggle. Page size, orientation, preview, and print move into a slide-up "Doc" sheet.
• A full-bleed canvas that fills the viewport.
• A horizontally-scrollable tool strip (select, image, text, shape, frame, image-frame, draw).
• Pages / Layers / Edit / Doc panels surfaced as slide-up bottom sheets instead of side rails.

The desktop three-pane layout (left rail · canvas · inspector) is unchanged at 1024px and up.

Touch interactions

Every touch path is gated on multi-pointer / isPrimary, so the desktop mouse experience is unchanged.

Usage

There is nothing to configure - the default editor is responsive:

'use client';

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

export default function MyEditor() {
    return <Editor.Root />;
}

Editor.Root reads the viewport internally and renders the desktop or mobile shell accordingly. Resize the window across 1024px to watch it switch.

View-only on small screens (optional)

If your product only wants viewing on phones (no editing), pass readOnly below a breakpoint. Selection, zoom, preview, print, and download still work from touch; the tool strip and editing affordances hide.

'use client';

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

export default function ResponsiveEditor({
    document,
    isMobile,
}: {
    document: Document;
    isMobile: boolean;
}) {
    return <Editor.Root defaultDocument={document} readOnly={isMobile} />;
}

isMobile would come from a media-query hook (or useSyncExternalStore against matchMedia).

Related

• Editor.Root - the responsive shell and the readOnly prop
• Read-only viewer - the view-only pattern