👁️ Preview Mode

Overview

Preview Mode lets you see your formatted text rendered instantly as you type. The preview button is added to the Text Formatter toolbar, giving you a seamless way to check how your markdown formatting will look before saving.

Key Features

• Integrated with Text Formatter - Preview button appears in the formatting toolbar
• Live Preview Panel - Floating panel shows rendered formatting in real-time
• Real-Time Updates - Preview updates instantly as you type
• Intelligent Positioning - Panel automatically positions to stay visible
• Rich Markdown Support - Renders bold, italic, underline, strikethrough, headings, lists, tables, links, alerts, and colored text
• Theme Integration - Adapts to Dark Mode and Custom Theme settings
• Click to Toggle - Click preview button again to close the preview

Getting Started

Prerequisites

• JT Power Tools extension installed from Chrome Web Store
• Active Pro license (see Premium Features)
• Text Formatter enabled (required - Preview Mode won't work without it)
• Access to JobTread budget or daily log pages

Enabling Preview Mode

1. Enable Text Formatter First
   Open the JT Power Tools popup and enable "Text Formatter" - this is required
2. Enable Preview Mode
   Locate "Preview Mode" (marked with Pro badge) and toggle it ON
3. Navigate to a Compatible Page
   Go to any JobTread budget or daily log page
4. Click in a Text Field
   The Text Formatter toolbar appears with the preview button (eye icon) on the right

Using Preview Mode

Opening the Preview Panel

1. Click inside a budget description field or daily log field
2. The Text Formatter toolbar appears above the field
3. Look for the eye icon (👁️) button on the right side of the toolbar
4. Click the eye icon to open the preview panel
5. The preview panel opens next to the textarea
6. Start typing to see live updates in the preview

Closing the Preview Panel

There are several ways to close the preview panel:

• Click the preview button again - Toggles the preview off
• Click outside the textarea - Preview closes when focus leaves the field
• Press Escape - Keyboard shortcut to close the preview

Supported Markdown Formatting

Text Styling

Markdown	Result	Description
*bold text*	bold text	Bold formatting
^italic text^	italic text	Italic formatting
_underlined text_	underlined text	Underline formatting
~strikethrough~	strikethrough	Strikethrough formatting

Headings

Markdown	Description
# Heading 1	Large heading for main sections
## Heading 2	Medium heading for subsections
### Heading 3	Small heading for minor sections

Lists

Bullet Lists

- First item
- Second item
- Third item

Numbered Lists

1. First step
2. Second step
3. Third step

Text Alignment

Markdown	Description
--: Centered text	Center align the text
---: Right aligned	Right align the text

Colors

Add color to your text with the color syntax:

[!color:red] This text will be red
[!color:blue] This text will be blue
[!color:green] This text will be green
[!color:orange] This text will be orange
[!color:purple] This text will be purple

Links

[Link text](https://example.com)

Tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Blockquotes

> This is a quote
> It can span multiple lines

Alerts

Create visually distinct alert boxes:

> [!color:blue] ### [!icon: info] Information
> This is an informational alert

> [!color:yellow] ### [!icon: exclamationTriangle] Warning
> This is a warning alert

> [!color:red] ### [!icon: octogonAlert] Danger
> This is a danger alert

> [!color:green] ### [!icon: checkCircle] Success
> This is a success alert

Available Alert Icons

• lightbulb - Light bulb icon
• info / infoCircle - Information icon
• exclamationTriangle - Warning triangle
• checkCircle - Success checkmark
• octogonAlert - Danger/alert icon

Available Alert Colors

• blue - Information (blue background)
• yellow - Warning (yellow background)
• red - Danger (red background)
• green - Success (green background)
• orange - Notice (orange background)
• purple - Custom (purple background)

Preview Panel Features

Intelligent Positioning

The preview panel automatically positions itself to ensure maximum visibility:

• Right of textarea - Default position if space available
• Left of textarea - If not enough space on the right
• Below textarea - If not enough space on left or right
• Above textarea - If would go off bottom of viewport
• Scrolls with page - Panel stays visible when scrolling

Real-Time Updates

The preview updates instantly as you type:

• No need to click "refresh" or "preview"
• See changes immediately as you format text
• Perfect for experimenting with formatting
• Helps catch formatting errors before saving

Theme Integration

Preview Mode adapts to your appearance settings:

• Dark Mode - Dark preview panel with light text
• Custom Theme - Matches your custom color palette
• Default Theme - Clean white background with dark text

Where It Works

Compatible Fields

Preview Mode works on text fields where the Text Formatter toolbar appears:

• Budget Pages - Description fields for line items and groups
• Daily Log Fields - All daily log text entry fields

Not Compatible With

• Message fields (use Message Counter & Templates instead)
• Single-line input fields
• Read-only or disabled fields

Troubleshooting

Preview Button Doesn't Appear

Most Common Cause: Text Formatter is not enabled.

Solution:

• Enable Text Formatter - This is required for Preview Mode to work
• Verify Preview Mode is also enabled in extension popup
• Ensure you have an active Pro license
• Refresh the JobTread page
• Make sure you're on a budget or daily log page

Preview Panel Not Opening

Solution:

• Try clicking the preview button again
• Make sure the textarea has content (empty fields show "No content to preview")
• Check browser console (F12) for JavaScript errors
• Reload the extension from chrome://extensions

Preview Not Updating

Solution:

• Close and reopen the preview panel
• Verify the textarea still has focus
• Try typing in the field to trigger an update
• Refresh the page if updates seem stuck

Formatting Not Rendering in Preview

Solution:

• Check that you're using the correct markdown syntax (see supported formatting above)
• Tables need proper pipe alignment to render correctly
• Try simpler formatting first to isolate the issue
• Refer to the Text Formatter guide for proper syntax

Keyboard Shortcuts

Action	How To
Open/Close Preview	Click the eye icon in the Text Formatter toolbar
Close Preview	Press Escape
Close Preview	Click outside the text field

Best Practices

Workflow

1. Enable both Text Formatter and Preview Mode in the extension popup
2. Click in a text field - the toolbar appears with formatting buttons and the preview icon
3. Use the toolbar buttons to add formatting (or type markdown manually)
4. Click the eye icon to see how your formatted text will look
5. Make adjustments based on the preview
6. Close preview and save when satisfied

Tips

• Preview Before Saving - Always check complex formatting before saving
• Check Tables - Tables can be tricky; preview ensures they render correctly
• Test Alert Colors - Preview shows which alert colors work best for your message
• Close When Done - Close preview when not needed to keep your workspace clean

Related Guides

• Text Formatter - Required for Preview Mode - learn markdown syntax
• Premium Features - Activate your Pro license
• Dark Mode - Preview panel adapts to dark theme
• Custom Theme - Preview panel matches your custom colors
• Installation & Setup - Get started with JT Power Tools