Images and Links

Enhance your documents with images and links.

Links

Creating Links

Method 1: Toolbar

1. Select the text you want to link
2. Click the Link (🔗) button in the toolbar
3. Enter the URL in the dialog
4. Click Insert

Method 2: Paste

1. Copy a URL
2. Select text in the editor
3. Paste (Ctrl/Cmd + V)
4. The text becomes a link

Method 3: Auto-Link Simply paste a URL and it automatically becomes clickable:

https://example.com → https://example.com (clickable)

Link Behavior

All links in ArchDoc:

• Open in a new tab (target="_blank")
• Have security attributes (rel="noopener noreferrer")
• Are styled with underline

Editing Links

1. Click on an existing link
2. A popover appears with options:
   • Edit: Change the URL
   • Remove: Remove the link (keep text)
   • Open: Visit the link

Link Examples

• External: ArchDoc Documentation
• Internal: Sign-off Guide
• Email: mailto:support@scribe.app
• Anchor: Jump to Images

Best Practices for Links

Do:

• Use descriptive link text
• Link to authoritative sources
• Check that links work

Don't:

• Use "click here" as link text
• Link every mention of a term
• Use broken or outdated links

Images

Inserting Images

Method 1: Toolbar

1. Place cursor where you want the image
2. Click the Image (🖼️) button in the toolbar
3. Enter the image URL
4. Click Insert

Method 2: Paste

1. Copy an image URL
2. Use Ctrl/Cmd + V in the editor

Supported Formats

Image URLs

Images must be hosted online. Options include:

1. Your own server: Upload to your hosting
2. Cloud storage: AWS S3, Google Cloud, Azure
3. Image hosting: Imgur, Cloudinary
4. CDN: Content delivery networks

Image Sizing

Images automatically resize to fit the content width. For best results:

• Use images at least 800px wide for full-width display
• Optimize images for web (compress without losing quality)
• Consider retina displays (2x resolution)

Screenshots

For documentation, screenshots are valuable:

1. Capture the relevant area only
2. Highlight important elements
3. Crop unnecessary UI
4. Use consistent sizing

Diagrams as Images

You can also embed diagrams:

• Export from design tools (Figma, Sketch)
• Export from diagramming tools (Draw.io, Lucidchart)
• Or use Excalidraw directly in ArchDoc!

Best Practices

Optimize Images

• Compress images before uploading
• Use appropriate formats (JPEG for photos, PNG for screenshots)
• Consider WebP for smaller file sizes

Use Alt Text (Coming Soon)

When alt text support is added:

• Describe the image content
• Keep it concise but descriptive
• Important for accessibility

Don't Over-Image

• Use images when they add value
• Text is often clearer for simple concepts
• Balance visuals with written content

Host Reliably

• Use permanent, reliable hosting
• Avoid links that may expire
• Consider your organization's image hosting policy

Common Issues

Image Not Showing

• Check the URL is correct and accessible
• Ensure the hosting service allows embedding
• Try opening the URL directly in browser

Image Too Large

• Compress the image
• Use a smaller resolution
• Consider cropping

Broken Images

• The source may have moved or been deleted
• Re-upload to reliable hosting
• Update the URL in your document

Coming Soon

Future image features:

• Direct image upload
• Alt text support
• Image resizing controls
• Image captions