--- title: UI Mockup Library slug: rm/ui-mockup-library docTags: createdAt: 2026-06-09T13:38:48.708Z --- | **Image** | **Name** | **Description** | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753306481/ui-mockup-browser-frame.png" alt caption width="73" height="75"} | Browser Frame | A browser frame with standard browser iconography. The title and URL can be directly edited. Scrollbars can be added under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753312823/ui-mockup-frame.png" alt caption width="74" height="75"} | Frame | A frame with editable left-aligned text. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753319076/ui-mockup-label.png" alt caption width="74" height="43"} | Label | A label with editable font. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753326502/ui-mockup-hyperlink.png" alt caption width="73" height="64"} | Hyperlink | A hyperlink that can be configured, formatted, and activated under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753335109/ui-mockup-paragraph.png" alt caption width="82" height="77"} | Paragraph | A paragraph placeholder with default 'lorem ipsum' text that can be edited directly in the canvas. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753341189/ui-mockup-image-placeholder.png" alt caption width="73" height="73"} | Image Placeholder | An image placeholder. Image files cannot be attached to the image. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753347140/ui-mockup-ico.png" alt caption width="73" height="72"} | Icon | An icon placeholder. When dragged and dropped onto the canvas, click the search icon under the placeholder to display the Icon Picker modal and select one of the numerous standard icons available. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753354649/ui-mockup-progress-bar.png" alt caption width="71" height="30"} | Progress Bar | A progress bar. The position of the progress bar can be directly edited. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753360822/ui-mockup-horizontal-scrollbar.png" alt caption width="73" height="30"} | Horizontal Scrollbar | A horizontal scrollbar. The position of the scrollbar can be directly configured. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753367345/ui-mockup-vertical-scrollbar.png" alt caption width="30" height="70"} | Vertical Scrollbar | A vertical scrollbar. The position of the scrollbar can be directly configured. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753374162/ui-mockup-text-box.png" alt caption width="71" height="50"} | Text Box | A text box. The text can be directly edited on the canvas. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753380762/ui-mockup-butto.png" alt caption width="71" height="51"} | Button | A button placeholder with editable text. A hotspot with a hyperlink can also be configured under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753387373/ui-mockup-radio-buttons.png" alt caption width="70" height="65"} | Radio Buttons | Radio buttons. Further options can be added by clicking Add Radio Button (there is a maximum of 100). The state of each button (such as selected or disabled) can also be customized under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753395736/ui-mockup-dropdown-buttons.png" alt caption width="74" height="34"} | Dropdown Buttons | Dropdown buttons with editable text. Options can be added or removed by clicking the add or delete icons under the dropdown buttons icon. Variations and states can also be customized under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753415549/ui-mockup-hotspot.png" alt caption width="73" height="73"} | Hotspot | A hotspot with editable text directly in the canvas. A hyperlink can be configured under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753423191/ui-mockup-date-picker.png" alt caption width="75" height="75"} | Date Picker | A date picker with a calender icon and single line of text that can be configured in the canvas. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753428417/ui-mockup-horizontal-slider.png" alt caption width="77" height="45"} | Horizontal Slider | A horizontal slider. The position of the slider can be directly edited in the canvas. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753434581/ui-mockup-vertical-slider.png" alt caption width="43" height="75"} | Vertical Slider | A vertical slider. The position of the slider can be directly edited in the canvas. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753514233/ui-mockup-numeric-spinner.png" alt caption width="73" height="43"} | Numeric Spinner | A numeric spinner. The value displayed on the canvas can only be configured under the Format Shape tab in the Utility Panel. | | :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753473157/ui-mockup-data-table.png" alt caption width="73" height="73"} | Data Table | A data table. Each cell can be annotated and both columns and rows can be easily added and deleted. Using Ctrl (Win) or Command (Mac), multiple cells can be selected and edited in bulk. |