Editing HTML

Modify captured HTML demos with CSS overrides, element hiding, text replacement, and data anonymization.

After capturing an HTML Demo, you can modify its content directly in the editor without re-capturing. Edits are applied as a layer on top of the original capture.

CSS overrides

Add custom CSS rules that override the captured styles. This is useful for:

• Changing colors to match a prospect's brand.
• Hiding navigation elements that aren't relevant to the demo.
• Adjusting layout for a cleaner presentation.

To add CSS overrides:

1. Open your HTML Demo in the editor.
2. Click Customize > CSS.
3. Write your CSS rules in the editor panel.
4. Changes preview in real-time.

/* Hide the sidebar navigation */
.sidebar-nav {
  display: none !important;
}

/* Expand main content to fill the space */
.main-content {
  margin-left: 0 !important;
  width: 100% !important;
}

Element hiding

For a no-code approach to hiding elements:

1. Click the Hide Element tool in the toolbar.
2. Click any element on the page to toggle its visibility.
3. Hidden elements are listed in the Hidden Elements panel where you can restore them.

Text replacement

Replace text content across the captured page:

1. Open Customize > Text.
2. Click any text element to edit its content inline.
3. Or use Find & Replace to change all instances of a string.

Text replacement supports personalization variables ({{company_name}}, {{industry}}, etc.) so each viewer sees contextually relevant content.

Data anonymization

The anonymization tool detects and replaces personally identifiable information:

1. Click Customize > Anonymize.
2. Demoship scans the page for names, email addresses, phone numbers, and other PII.
3. Review detected items and confirm replacements.
4. Replacements use realistic fake data that matches the format of the original (e.g., real-looking email addresses, properly formatted phone numbers).

Note: All edits are versioned. Open the History panel to review changes or revert to any previous state.