Previewing Pages

Before publishing changes to your live documentation, Playbook provides a powerful preview system that lets you see exactly how your content will appear to users. This ensures your documentation maintains a professional appearance and functions as intended.

Understanding Preview Mode

Preview mode is your quality assurance tool, showing a real-time representation of how your documentation will look when published. It renders your content exactly as it will appear on your live site, including all formatting, images, and interactive elements.

Using the Preview Feature

Accessing preview mode is straightforward:

1. Make your desired changes to your documentation
2. Click the "Preview" button in the bottom nav
3. Review your changes in the preview environment

The preview environment is completely separate from your live documentation, allowing you to experiment freely without affecting your published content.

What to Check in Preview

When reviewing your content in preview mode, pay attention to these key aspects:

Content Formatting

Verify that all your text formatting appears as intended. This includes headers, paragraphs, bold and italic text, and any special formatting you've applied.

Page Structure

Ensure your content hierarchy makes sense visually. Check that:

1. Headers are properly nested
2. Sections are clearly delineated
3. Content flows logically down the page

Interactive Elements

Test all interactive components of your documentation:

1. Click through internal links to verify they connect to the right pages
2. Test external links to ensure they open correctly
3. Verify that code blocks display with proper syntax highlighting
4. Check that tables are formatted correctly and remain readable

Media and Assets

Confirm that all media elements are displaying properly:

1. Images should load and appear at the correct size
2. Diagrams should be clear and readable
3. Any embedded content should render as expected

Making Adjustments

If you notice any issues during preview:

1. Return to the editor by clicking the "Edit" button
2. Make your necessary corrections
3. Return to preview mode to verify your changes
4. Repeat this process until you're satisfied with the result

Preview Environment Features

The preview environment offers several helpful features:

Responsive Testing

View your documentation at different screen sizes to ensure it looks good on all devices. The preview mode accurately represents how your content will adapt to different viewport sizes.

Navigation Testing

Test the full navigation experience of your documentation:

1. Verify sidebar navigation
2. Check breadcrumb functionality
3. Test search features if enabled
4. Ensure proper scroll behavior

Best Practices

To make the most of the preview feature:

1. Preview changes frequently as you work
2. Test navigation between related pages
3. View your content on different screen sizes
4. Check both light and dark modes if enabled
5. Verify all interactive elements work as expected

Remember that preview mode is a safe space to experiment with your documentation. Take advantage of this feature to ensure your content is polished and professional before publishing to your live site.