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:
- Make your desired changes to your documentation
- Click the "Preview" button in the bottom nav
- 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:
- Headers are properly nested
- Sections are clearly delineated
- Content flows logically down the page
Interactive Elements
Test all interactive components of your documentation:
- Click through internal links to verify they connect to the right pages
- Test external links to ensure they open correctly
- Verify that code blocks display with proper syntax highlighting
- Check that tables are formatted correctly and remain readable
Media and Assets
Confirm that all media elements are displaying properly:
- Images should load and appear at the correct size
- Diagrams should be clear and readable
- Any embedded content should render as expected
Making Adjustments
If you notice any issues during preview:
- Return to the editor by clicking the "Edit" button
- Make your necessary corrections
- Return to preview mode to verify your changes
- 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:
- Verify sidebar navigation
- Check breadcrumb functionality
- Test search features if enabled
- Ensure proper scroll behavior
Best Practices
To make the most of the preview feature:
- Preview changes frequently as you work
- Test navigation between related pages
- View your content on different screen sizes
- Check both light and dark modes if enabled
- 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.