Chapter 5

Preview Bookmarklet

Test your styles without deploying

The OG+ Preview bookmarklet simulates the rendering environment in your browser so you can test ogplus: styles locally.

Get the bookmarklet

Usage

  1. Navigate to any page on your site
  2. Click the bookmarklet to open the consumer selection modal
  3. Select a consumer (LinkedIn, Twitter, Facebook, etc.) to preview those styles
  4. Press Esc to exit preview mode and remove the attribute

The bookmarklet sets data-ogplus on your <html> element, triggering your ogplus: styles.

What to check

When previewing, verify:

  • Navigation and footers hide correctly
  • Social card content appears
  • Padding and spacing look right per consumer
  • Text is readable at the rendered size

Troubleshooting

Nothing changes? Make sure you have ogplus: variants defined in your CSS.