Docs
Manage Your Content

Add photos and videos

How to make Moroc help pages and tutorials more visual.

Visual content makes help pages easier to follow, especially for non-technical users.

Images

For images that belong to the docs site itself, place files in public/media/ and reference them like this:

![Editing your page](/media/editing-your-page.jpg)

Use images when you want to show:

  • where a button lives
  • what a finished result should look like
  • the difference between two states

Videos

When a task is easier to show than explain, use an MDX page and drop in the reusable video component.

import VideoEmbed from '@/components/VideoEmbed';

<VideoEmbed
  title="Editing your Moroc page"
  src="https://www.youtube.com/embed/VIDEO_ID"
/>

Replace the src value with your real video URL before publishing.

Keep tutorials easy to follow

  • use one main point per image or video
  • keep page sections short
  • do not overload one page with too many media items

On this page