Overview

Mocksi Lite is a Chrome extension designed to help you create, edit, and manage demo environments with ease. This guide will walk you through the installation process, the basic functionality of the extension, and how to use it effectively.

Getting Started

Installation

1. Go to the Link: Click here to open the Chrome Web Store page for Mocksi Lite. Note that this link will only work while logged into a Google Chrome profile with the email you provided.
2. Add to Chrome: Click on "Add to Chrome" and follow the prompts to install the extension.

Pin Mocksi Lite

For easy access, you’ll want to pin the Mocksi Chrome extension in the Extensions toolbar.

1. Open Extensions Menu: Click the puzzle piece icon next to your profile picture in Chrome's toolbar.

2. Find Mocksi Lite: Look for Mocksi Lite in the list of extensions.
3. Pin the Extension: Click the pin icon next to Mocksi Lite to add it to your Chrome toolbar for easy access.

First Login

1. Open Mocksi Lite: Click the Mocksi Lite icon in your Chrome toolbar.
2. Login Page: You will be directed to a login page where you'll be prompted to enter your work email address.

3. Enter Email: Type in your work email address and click "Next."
4. Verify Email: Check your email inbox for a verification code.

5. Enter Code: Copy and paste the code from your email into the login page.

6. Access Granted: Once verified, you are now logged into Mocksi Lite.

Creating Demos

1. Navigate to Your Target Page: Go to the webpage you want to create a demo for.
2. Open Mocksi Lite: Click the extension icon to open the interface.
3. Start Recording:
1. Click the Start Recording button to begin capturing the current page state. Note: this is a placeholder for future functionality and nothing is being recorded at this time.

2. You will see a "Recording in progress" indicator. You can stop recording at any time by clicking the Stop button.

4. Create New Demo:
• Click "Create New Demo."

• Enter a Name for the demo and the Company you’re presenting to.

• The new demo will now appear in the list within the admin panel.

Edit Mode

To start customizing your demo:

1. Click "Edit" next to your demo

2. You’ll see:
• A header bar at the top with undo and navigation options
• A toolbar at the bottom containing your editing tools


Tip: If the header is in your way, click the arrow to close/open it

Using the Toolbar

Navigation Tool (Pointer)

The pointer is your default tool for previewing your demo:

• Use it to browse the page normally
• Test links and interactions
• See how your changes will appear to others
• Click the target button to enable precise editing of individual elements.

Selection Tool (Target)

The target tool lets you edit specific elements on the page:

• Hover over content to see what's editable
• Highlight boxes show both the element and its container

When using the target tool, you can:

Edit Text:

• Click any text to open the editor
• Use the editor controls:
• View toggle: Shows/hides the editing box
• Undo: Reverts your last change
• X (Cancel): Closes without saving
• ✓ (Save): Commits your changes to the demo

Replace Images:

• Click any image to open the replacement modal
• Click "Choose File" to select a new image
• Click "Upload" to replace the image
• Click "Cancel" to close without changes

Find and Replace Tool

For changing multiple instances of text:

1. Click the cursor icon in the toolbar
2. Enter your search and replacement text
3. Use "Match Case" for precise matching

AI Assistant (Alpha)

Let AI help customize your content:

1. Click the AI icon to open the prompt interface
2. Type in your request for how you want the content modified

Note: This feature is in alpha and will improve with usage. Your feedback helps us enhance its performance.

Undoing Changes

• Changes are automatically saved as you make them
• Click the Undo button in the header to revert changes

Exit Edit Mode

• To exit Edit Mode, click 'X' in the header

Playing Demos

• Click "Play" next to any demo to see your changes in action

• The director box provides controls to:
• Stop the demo
• Return to edit mode
• Hide the box during presentations (click the "X")
• Take snapshots of your modified pages image
• NEW IN 1.2.7! The snapshot tool will:
• Temporarily hide the Mocksi UI elements
• Add a subtle Mocksi watermark to the bottom-right corner
• Capture the entire visible area of the webpage
• Save automatically as a PNG file (format: mocksi-export-{timestamp}.png)

💡

Snapshots are perfect for:

• Creating step-by-step guides
• Documenting workflows
• Sharing examples safely
• Building training materials

Managing Demos

• Create as many demos as needed across different domains.
• Only demos related to the current domain will be displayed.
• To delete a demo:
• Click the trash can icon on the admin panel

• And click the “Delete” button next to the demo you want to delete


Note: this action can’t be undone.

Additional Notes

• Recording Feature: The "Record" button is currently a placeholder and does not perform any recording actions in this version of Mocksi Lite. It is intended for future updates.
• Domains: Demos are domain-specific. When you switch to another domain, Mocksi Lite will display demos relevant to that domain.

Known Bugs

• There’s a freezing bug when you open the image replacement modal and close it by clicking outside of the modal.
• The app becomes disconnected with inactivity. If you have Edit open when the app disconnects, clicking X to get out of edit mode won’t remove the toolbar.
• Find/replace doesn’t always revert when you leave edit mode — refresh the page to revert these changes.

Limitations

• Highly dynamic apps with large configurable panes (Figma, Notion, Miro) are not supported
• Currently only supports the latest version of Chrome

Coming Soon

• Continued AI stability / repeatability enhancements
• We’d love to hear from you!
• More editable elements (graphs, tables)
• AI scoping (tell AI which parts of the page to modify)
• Quick-access menu items for common AI tasks
• Team collaboration features

Need help? Contact support@mocksi.ai