logo
Code EditorImages & Media
Code Editor

Images & Media in Code Editor

Add and manage images and media files when working with code editors and Documentation.AI

Images & Media in Code Editor

Add images and media to your documentation using markdown syntax and the Documentation.AI Image component. Unlike the web editor's drag-and-drop uploads, code editors require manual file management and component syntax.

Code Editor vs Web Editor

Code Editor Approach:

  • Reference external CDN URLs or upload to Documentation.AI first
  • Use Image component syntax manually
  • Commit image references to Git
  • Organize image URLs in your content

Web Editor Approach (comparison):

  • Drag-and-drop upload with automatic CDN hosting
  • Visual image insertion and resizing
  • Automatic optimization and uid generation

Adding Images

Using Documentation.AI Image Component

The preferred method is using Documentation.AI's Image component with CDN URLs:

<Image 
  uid="unique-id-from-upload"
  src="https://your-cdn.com/image.png" 
  alt="Description of the image"
  width="800"
  height="600"
/>

To get CDN URLs:

  1. Upload images via the Documentation.AI web editor first
  2. Copy the generated src and uid values
  3. Use these in your MDX files

Basic Markdown Images

For simple images without advanced features:

![Alt text](https://external-cdn.com/image.png)

Image Component Properties

Documentation.AI Image component supports these properties:

<Image 
  uid="fcb073e1-1a69-4d5b-86e8-41b52dac9802"
  src="https://cdn-url.com/image.webp" 
  alt="Descriptive alt text for accessibility"
  width="672"
  height="343"
  style="width: 400px; margin: 0 auto;"
  priority={true}
  fetchpriority="high"
/>

Key properties:

  • src (required) - CDN URL for the image
  • alt (required) - Accessibility description
  • uid - Unique identifier from Documentation.AI upload
  • width/height - Dimensions for layout optimization
  • style - CSS for alignment and sizing
  • priority - Load immediately (for above-fold images)

See the Image component reference for all options.

Videos and Media

Video Component

Add videos using the Documentation.AI Video component:

<Video 
  src="https://cdn-url.com/demo-video.mp4"
  poster="https://cdn-url.com/video-poster.jpg" 
  controls={true}
  autoPlay={false}
/>

External Video Platforms

Embed videos from external platforms:

<Video 
  src="https://www.youtube.com/embed/VIDEO_ID"
  platform="youtube"
  title="API Integration Tutorial"
  width="100%"
  height="400"
/>

See the Videos and Iframes component reference for all options.

Workflow for Code Editors

Recommended Process

  1. Upload images via Documentation.AI web editor to get CDN URLs
  2. Copy the generated markup from web editor
  3. Paste into your MDX files in code editor
  4. Commit and push changes

Alternative: External CDNs

Host images on external CDNs and reference directly:

<Image 
  src="https://your-cdn.com/image.png" 
  alt="Description"
  width="600"
  height="400"
/>

Note: External images won't have Documentation.AI's automatic optimization.

Media Management Tips

Image Organization

For team workflows:

  • Upload images through web editor for automatic CDN hosting
  • Share CDN URLs with team members
  • Keep a reference document of commonly used image URLs
  • Use descriptive alt text for accessibility

Version Control

What to commit:

  • MDX files with image component syntax
  • Updated documentation.json navigation

What NOT to commit:

  • Large image files (use CDN URLs instead)
  • Temporary image assets

Performance Considerations

  • Use priority={true} only for above-fold images
  • Include width and height to prevent layout shift
  • Optimize images before uploading to CDN
  • Use appropriate image formats (WebP, PNG, JPG, SVG)

Next Steps

Powered by Documentation.AI