Skip to main content

Embeds & Media

Copera documents support a variety of media types and embedded content. You can insert images, create diagrams, and embed content from popular third-party services --- all directly inside the editor without leaving the page.

Images​

Upload images directly into your document:

  1. Use the slash command /Image or click the image button in the toolbar.
  2. Select a file from your computer or paste an image from your clipboard.
  3. The image is uploaded and displayed inline in the document.

Images can be resized by dragging the corners, and they support alignment options (left, center, right). You can also add captions below images for additional context.

Drag and Drop​

You can drag an image file directly from your file system into the editor. Drop it at the position where you want it to appear, and the upload happens automatically.

Paste from Clipboard​

Copy an image from any application and paste it directly into the editor with Ctrl+V (Windows/Linux) or Cmd+V (Mac). The image is uploaded and inserted at the cursor position.

Mermaid Diagrams​

Create diagrams using Mermaid syntax without any external tools:

  1. Use the slash command /Mermaid to insert a Mermaid block.
  2. Write your diagram code using Mermaid syntax.
  3. The diagram renders in real time as you type.

Mermaid supports many diagram types, including:

  • Flowcharts --- Visualize processes and decision trees.
  • Sequence diagrams --- Show interactions between systems or participants.
  • Gantt charts --- Display project timelines.
  • Class diagrams --- Map out object-oriented structures.
  • Entity-relationship diagrams --- Model database schemas.
  • State diagrams --- Illustrate state transitions.

Example​

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

This renders as a flowchart directly in the document.

Third-Party Embeds​

Embed content from popular services by pasting a URL or using the slash command /Embed. Copera automatically detects the service and renders the appropriate embed. Supported services include:

ServiceWhat You Can Embed
YouTubeVideos
VimeoVideos
LoomScreen recordings
FigmaDesign files and prototypes
MiroWhiteboards and diagrams
Google DocsDocuments (view-only)
Google SheetsSpreadsheets (view-only)
Google SlidesPresentations (view-only)
AirtableShared views
CodePenCode snippets and demos
CodeSandboxDevelopment environments

How to Embed​

  1. Copy the URL of the content you want to embed.
  2. In the editor, use the slash command /Embed or paste the URL directly.
  3. The editor detects the service and renders an interactive embed.

Embeds are displayed inline in the document and can be resized to fit your layout.

Generic URL Embeds​

For services not in the supported list, you can still embed content using the generic embed block. Paste any URL that supports iframe embedding, and Copera will render it inside your document. This works for dashboards, analytics tools, and any web page that allows embedding.

Next Steps​