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 functionalities of the extension, and how to use it effectively.

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.

Usage

Logging In

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 and Managing 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.
5. Edit the Demo:
• Click "Edit" next to the newly created demo to enter the editing mode.

• You’ll now see a header bar at the top of the page and a toolbar at the bottom middle of the screen.
• If the toolbar is in your way, click the arrow to close/open it

• To use Find and Replace:
• Click the cursor button in the bottom toolbar.

• The Find and Replace menu will appear above the toolbar.

• Deselect the Match Case option as needed.
• Using AI to Modify Content (Alpha):
• Click the AI button to open the prompt interface.

• Type in your request for how you want the content modified.

• Note: This feature is in alpha and will improve with usage. Your feedback is valuable for enhancing its performance.
• Using Undo
• Changes are automatically saved as you make them.
• If you make a mistake or want to revert a change, look for the Undo button in the header on the top right of the screen.

• Click the Undo button to revert your last action.
6. Navigate Back:
• Once you've made your changes, click ‘X’ in the toolbar to leave edit mode.

Reviewing and Playing Demos

1. View Your Demos: In the admin panel, you will see a list of all demos you’ve created for the current domain.
2. Play a Demo:
• Click "Play" to see your changes in action.

• The director box will appear, allowing you to Stop the demo or return to edit mode.

• If you want to hide the director box during a live presentation, click the "X" in the corner.
3. 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 next to it.

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