RWP Tutorial

RWP is a visual prototyping tool for webpage elements the browser exposes in the current document. It is not a source-code or application-code editor.

RWP works best with

• Visible HTML elements such as headings, paragraphs, buttons, links and containers.
• Standard images and video elements exposed in the page.
• Typography, color, backgrounds, sizing, spacing, position and other visual changes.
• Page structure you can reach through the Navigator, including moving to a parent when the first target is too specific.

Click an element on the page to select it. RWP outlines what it is targeting and shows the selected element in the Navigator.

• Click selects an element.
• Double-click text lets you edit visible text directly when the page structure allows it.
• Ctrl/Cmd + Click uses the page's real action instead of RWP selection.
• Delete on the keyboard removes the selected page element, unless you are actively editing text.

The Navigator helps you move through the page structure when clicking alone is not enough.

• Use ↑ Parent when the selected child is too specific.
• Use ↓ Select Beneath when an overlay or parent is blocking the item you want.
• Search the Navigator by text, class or ID.
• Reveal for Editing can temporarily expose hidden content; Restore Page State puts it back.
• Turn on Move Element to drag the selected element where the existing layout permits.

The Content & Typography section handles copy changes, text formatting and typography for the selected element.

• Use + Text, then click a container on the page to add new text.
• Edit the selected element's copy in the Text field.
• Apply bold, italic, underline, bulleted lists and numbered lists.
• Adjust font family, size, weight, line height, letter spacing, text color, alignment and transform.

Create a new text link

Highlight the words in the Text field under Content & Typography, click the Link button between Underline and the list controls, enter the URL, choose Open in new window if needed, then Apply.

Edit an existing link

Select the existing linked text on the webpage. The Edit Existing Link controls show its current destination and whether it opens in a new window.

Use + Image or + Video to insert media, or select existing media to edit it.

• Images can use a URL or a local image file.
• Add or change Alt text, Object fit and Object position.
• Object-position presets and X/Y values let you reposition the visible crop.
• Select an image and use Image Link to add a destination without changing the image's visual layout.
• Video accepts YouTube, Vimeo or direct video URLs, with poster/thumbnail support where available.
• Local files preview immediately and are copied into the prototype's assets folder when saved.

RWP exposes common layout controls so you can see the result immediately on the original page.

• Position supports static, relative, absolute, fixed and sticky, plus z-index.
• Set top, right, bottom and left offsets with units.
• Set width, height, minimum and maximum dimensions.
• The visual Box Model edits margin and padding while showing their relationship to the content.

Use the Background section for common visual changes. When the property you need is not exposed elsewhere, use Advanced CSS.

• Change background color.
• Use a background image URL or choose a local background image.
• Set background size and position.
• In Advanced CSS, enter a CSS property and value, then choose Apply.

Preview State lets you temporarily preview Hover or Click states for the selected element. These preview states are never saved.

While RWP is ON, normal page actions are generally frozen so a click selects instead of navigating away. Use Ctrl/Cmd + Click when you intentionally want to trigger the page's real action.

• Undo or Ctrl/Cmd + Z steps backward through RWP changes.
• Redo or Ctrl/Cmd + R restores changes you just undid while RWP is active.
• RWP keeps up to 50 Undo steps.
• Reset Page returns the page to its initial RWP state for the current session.
• Deselect clears the active page element.

Save uses one workflow for a single-page or multipage prototype. Give the project and page a name; additional pages can be saved into the same project folder.

Continue editing later

1. Open the saved HTML file from Downloads/Rapid-Web-Prototypes/[Project].
2. Turn RWP on.
3. Continue editing the local file.
4. Save using the same page filename to replace that page in the same project folder.

Original live-site navigation links are neutralized in saved prototypes. Links you deliberately create or edit in RWP, including links between local prototype pages, are preserved.

Open Settings from the cog in the RWP top bar. Version information, licensing, device management and resource links are kept separate from webpage editing.

• View license status and the current device slot.
• Manage Subscription ↗ opens Stripe's hosted subscription-management page.
• Name the current device so it is easy to recognize later.
• Refresh active devices or deactivate a device to release its slot.
• Website ↗ opens rapidwebprototype.com and Tutorials ↗ opens this tutorial.

Websites can be built in many different ways. RWP is designed around accessible webpage elements rather than every possible application architecture.

• Embedded iFrames: content inside third-party or cross-domain iFrames may not be selectable from the parent page.
• Runtime-generated or JavaScript-controlled content: some interfaces are created or replaced by JavaScript and may not behave like a normal editable HTML element.
• Interactive links: some text links act as JavaScript/CSS controls rather than normal navigation. If relinking does not work, replace the linked copy with plain text and create a new link from the Text editor.
• Canvas-rendered or encapsulated interfaces: visual content can exist without exposing individual HTML elements RWP can edit.

These limitations are about how the original website exposes its interface to the browser. They do not prevent RWP from working with standard DOM-based pages and components.