What’s New: October 22, 2018

New Features


  • Snapping now prioritizes:
    • Distance snap over Object snap.
    • Snap to page’s Center/Edge over snap to Object.
  • You can now drag and resize a page ‘through’ an object ( i.e. when an object sits in front of the page-resize handles).
  • The Format Panel now displays the number of objects in a selection; this makes it easy to quickly check your selection before applying any style changes.
  • We’ve improved the performance of both the Image and Template Libraries.
  • The Dashboard is now faster when loading projects or switching teams.
  • Image uploads are quicker, both by drag & drop and by file.
  • When you use the Diagram Extenders to add new flowchart stencils to your diagram, the page automatically scrolls to the end of that flow.
  • Improved the behavior of Object Groups, both on the page, and in the Outline Panel.
  • The Grid stencil now has cell-padding options (in the Grid Style section of the Format Panel).
  • Google Web Fonts have been updated.

Bug Fixes

  • Previously, if you had an item selected in Templates Library, and then clicked the ‘Create a new folder’ button, the selected item was accidentally nested within the newly created folder.
  • Diagram Connectors are now displayed correctly in both Template Thumbnails and Export to HTML.
  • Images dragged and dropped onto the page – from outside the app – are no longer automatically added to the Image Library; this helps you avoid unwanted clutter in the library.
  • Fixed several issues with the Smart Connect and Replace Stencil features.
  • Fixed a bug that canceled image uploads if the user used drag-&-drop, and then switched pages before the upload was complete.
  • Previously, if you expanded a folder (or a series of nested pages) in the Pages Panel, that action accidentally expanded all the folders and nested pages within that Page Tree.
  • Using Shift + Clicking on the Zoom Icon automatically zooms in or out to fit the page within the Editor (or Viewer) window; that zoom now also correctly centers the page.
  • Fixed a bug that caused the Editor to get stuck in Read Mode if you exited Preview while using the grab cursor (hand) to pan the page.
  • Removed object highlights when using the touchpad zoom in Preview mode.

Check out other recent release notes in the What’s New section of our Help Center.

What’s New: September 25, 2018

New Features:

  • Supercharged Diagramming Tools:
    • Diagram Extenders:
      • Selecting a Flowchart Diagram stencil on the page will now reveal arrows on all four sides of that object. Clicking on any arrow will duplicate that object, automatically connect them, and then open the new object’s text-edit mode for quick renaming.
      • For lighting-fast, omnidirectional work, Shift + Alt/Option + Arrow keys also adds and connects objects.
      • When there is an object immediately adjacent from the one you are ‘extending’, clicking the extenders – or using the keystroke – will automatically connect those two objects.
    • Replace Stencils:
      • You can quickly update and replace any Flowchart Diagram stencils that are already part of a diagram on the page. Just drag the new stencil over an existing one, and drop when the ‘replace’ icon appears.
    • Swap Start & End Markers:
      • Hold down Shift + X to reverse the start and end markers of any connector; this is the same keystroke that reverses the Fill and Stroke style when an object is selected.
    • Connector Styling:
      • Now, after you style a connector, any subsequent connector you create will automatically adopt that style – until you change it again.
      • Previously, if you wanted to mass-style connectors that were already on the page, you had to select them individually; now selecting a group of objects and connectors will reveal the ‘Connector Style’ section of the Format Panel, and let you customize all the selected connectors at once.


  • Workspace > Advanced Settings
    • Some users prefer to work without object highlights, so now you can select or deselect ‘Highlight object while hovering’.
    • ‘Select behind Locked Objects’ is now turned OFF by default.
  • Various performance improvements

Bug Fixes:

  • The Presence Border now follows the selected object reliably, and no longer gets stuck in place when moving or zooming.
  • The New Project dialog no longer closes if you accidentally click outside its frame.
  • In the ‘Invalid file type’ warning dialog, the list of ‘currently supported files’ now includes SVG files.

Check out other recent release notes in the What’s New section of our Help Center.

What’s New: September 12, 2018

New Features

  • Object Highlights:
    • To make selection easier, objects will now be highlighted when hovered. This should especially make the selection of thin or small objects much easier and reduce missed clicks.


  • In the Pages, Templates, and Images panels, right-clicking on the empty space – at the end of the library or page-list – now displays the Context Menu and offers the option of creating a ‘New folder’. Previously, you had to use the icon in the toolbar to do this.
  • Thumbnail performance has been improved in the Pages, Templates, and Images panels.

Bug Fixes

  • Images and Templates Libraries:
    • Fixed a bug that prevented drag and drop of SVGs from the Images Library to the page.
    • When dragging and dropping an image onto the page, the mouse pointer remains on the upper-left object handle, and is no longer offset.
    • Fixed a bug that intermittently prevented the upload of images after they had been selected.
    • Added a reminder to the Templates Library that a project must be saved before a new template can be created; a similar prompt already existed for Images Library uploads.
    • When dragging multiple templates onto the page, all of them now remain selected.
    • In both libraries, when creating a ‘New folder from selection’, a bug permitted the folder to be accidentally relocated during the renaming process.
    • Fixed a bug that caused occasional errors when adding images or templates to the page.
    • Restored the double-click to add images or templates to the page – but only in Grid View.
    • Various performance improvements.
  • When using the Background Removal tool, right-clicking on an image now exits that mode and displays the Context Menu.
  • Even though ‘Select behind locked objects’ was de-selected in the Workspace > Advanced Settings, dragging still selected those objects.
  • Fixed a bug that caused the Group Border to crash when flipping an object within a group.
  • Undo now properly restores deleted Connectors along with the objects they connect.

Check out other recent release notes in the What’s New section of our Help Center.

All-Request Round-Up: 5 new features that you and your team will love!

One of the inspiring things about working at Moqups is the dedication of our core users. They don’t just like Moqups – they love it!

And that passion translates into a commitment to our product, and to its constant refinement. On a regular basis, we get their requests, suggestions, and demands.

Because our customers are often experienced UI/UX designers and developers, their suggestions are invariably on point and detailed – the kind of feedback that gets our attention and fast-tracks improvements.

So, today’s post is dedicated to you, and to new features developed specifically at your request.

Redesigned Image and Template Libraries


Users have rightly expected better asset management capability from these libraries. After all, if you can create and nest folders in your OS, it’s reasonable to expect that you could do so within Moqups too.

We heard you and, as a result, we’ve reimagined both libraries to make it easier to manage dozens – even hundreds – of assets.

It starts with the ability to create, organize, and nest folders. You’ll see the New Folder icon right in the library toolbar. And, in the ‘More actions’ menu, or by right-clicking, you’ll find the following additional options: New folder with selection, Rename, and Delete.

Quickly creating a folder from a selection of assets is not the only new mass-functionality. You can also select multiple images or templates via Ctrl/Cmd or Shift and perform bulk operations – dragging and dropping onto a page, reorganizing whole groups of assets, or quickly deleting multiple files.

And, to make it easier to find your images and templates, we’ve added the ability to toggle between Grid View and Tree View options.

For images, we’ve added a Download option so that you can download previously uploaded images and image-folders.

In addition to all these changes, we’ve introduced Team and Project categories to both the Image and Template libraries in order to give you and your team more workflow flexibility. A drop-down at the top of the panel lets you quickly choose between them.

The Team category allows you to upload and share commonly used assets – like logos and branded assets – with the rest of your team, and across all your projects. And, with the Project category, your team can streamline their workflow by assembling only those assets relevant to the project at hand.

Finally, we’ve changed the rules by which images are added to the library.

If you want an image added to the library, you can still use the Upload button, or simply drag and drop them directly onto the Image Panel itself – just as before. And from the library, you can add these images to the page by double-clicking or by drag-and-drop. No change here!

However, if you bypass the library step, by adding an image directly to a page from an external source (i.e. outside of the Image Library itself) – either by using copy-paste or drag-and-drop – that image will no longer be automatically added to your library.

We made this change because of a workflow our customers have adopted for brainstorming and competitor research. To create mood and idea boards, they quickly paste dozens of relevant screenshots onto a Moqups page. Once there, they can annotate and comment on the images to refine their ideas and build consensus.

However, the sheer volume of these ephemeral images can end up cluttering the ongoing Image Library. So, to avoid that problem, we’ve made it so that images that are copy-pasted or drag-and-dropped directly onto the page are not added automatically.

If, however, you want to add one of these temporary images to the permanent library, just right click on it, and select “Add to library…”

Copy & Paste Pages Between Projects


Users have long wanted the ability to share pages between projects – or break away selected pages for focused work, experimentation, and iteration.

In the past, the only way to transfer content from one project to another was to go page by page, select all the objects, and manually paste them into the new location. It was laborious, frustrating, and prone to all kinds of errors and omissions.

Now, it’s simple, quick, and foolproof:

  1. Select the pages and/or folders you wish to copy.
  2. Right-click and choose ‘Copy pages’ from the Context Menu.
  3. Select the browser tab of your destination project.
  4. Right-click on that project’s Pages Panel and choose ‘Paste pages’.
  5. To nest copied pages within an existing folder, click on that folder before you paste.

Within the same project, you can also use this feature to duplicate a whole section of the Page Tree, and paste it to a specific location within that project’s structure.

Touchpad Zoom


We know our users’ fingers were getting itchy, just waiting for this feature. After all, you inundated Support with requests. Making it happen was a genuine technical challenge, so we are thrilled to deliver it!

Now, you can Zoom in and out just by using two fingers on the touchpad (or Cmd/Ctrl + Mouse-Wheel). And zooming when using the keyboard or toolbar centers the zoom on an object when you have one selected.

This makes granular refinement and adjustment infinitely quicker and effortless.

Remove Background Color from Images & Improved Cropping


We’ve always designed Moqups so that you can stay within a single creative context for so many kinds of related work – charting, diagramming, wireframing, prototyping, and collaborating.

So when we heard that users were jumping out of Moqups because we lacked this specific image-editing capability, we resolved to do something about it.

Now, we’ve added this little bit of magic to our app so you can selectively remove any color from an image and make it transparent.

This is particularly useful during the creation of preliminary mockups, when you cobble together images, logos, and other kinds of visual references. Even though these elements are just temporary stand-ins for subsequent, more polished design elements, they still have to be slick and professional enough to be persuasive.

Inevitably that means cropping, stacking, adjusting, and grouping these assets to create a credible draft. You may need to quickly remove the background color from a logo, eliminate a distracting visual artifact, or see whether the product shots look better without their background. With Background Removal, all these tasks just got easier:

  1. Select an image to display the popover-toolbar for Crop & Background Removal.
  2. Enter Background Removal mode by clicking on the Magic-Wand icon.
  3. Click on the area of an image to remove a solid color, or click and drag to remove a color range.
  4. To apply the changes, click outside the image or click ‘Done’.
  5. ‘Reset’ returns the image to original.
  6. To save the altered image, right-click and select ‘Add to library’ option from the Context Menu.

Since Background Removal meant rethinking the popover-toolbar for images, we took that opportunity to improve our Image Crop feature as well. We’ve added a zoom-slider so you can seamlessly zoom in, relocate the crop area, and apply your changes.

Enhanced Real-time Editing


One consistent piece of feedback is that our users spend an increasing amount of time editing collaboratively and simultaneously – often from geographically dispersed locations.

And this has created a need for teams to see who’s currently at work on a project, jump to where specific colleagues are working, and identify who is making what changes, and in what order.

Our new Collaborator Presence answers those needs.

To show you who is working and where – and avoid overlap when editing in real time – a colored border with the collaborator’s name now appears around the objects they have selected.

And, in the Sharing window, hovering over a username provides a link to ‘Go to Page’ or ‘Go to Selection’ where the collaborator is currently at work.

Finally, to help the entire team with coordination, if multiple users select the same object, its presence border will display the last collaborator that selected it.

Thanks to all our users who took the time to write to us – and to explain their ideal workflow. All these changes are a consequence of your effort.

And to those users who have not yet written, please feel encouraged to write us at support@moqups.com – and let us know what changes would make your Moqups experience better!


What’s New: August 24, 2018


 New Features:

  • Templates Library now has the same functionality as the Image Library:
    • Save templates to both Project and Team categories.
    • Organize templates in folders, and nest them as needed.
    • Toggle between Grid View and Tree View options.
    • Perform bulk operations on templates – including dragging and dropping multiple templates onto a page.
    • Toolbar Menu includes new options: New Folder, New Folder from Selection, Rename, Delete.
    • New Right-click Context Menu includes New Folder from Selection, Rename, Delete.


  • We’ve reduced our application’s size by 1MB to enable faster page-loads and a smoother user experience.
  • In the Comment Panel, comments now have a full date and time stamp.

Bug Fixes:

  • Copy & Paste Project Pages:
    • Interactions are now properly included in the Copy & Paste function.
    • When a destination project lacks a font that’s included in a copy and paste, that font is now added along with the paste.
  • Fixed a bug in the Image Library that caused the renaming process to get stuck when renaming in search mode.
  • In the Project Recovery Window, the most recent projects are now properly labeled by the date on which they were saved.

Check out other recent release notes in the What’s New section of our Help Center.

What’s New: August 16, 2018

 New Features:

  • Touchpad Zoom
      • Zoom in and out by using two fingers on the touchpad (or Cmd/Ctrl + Mouse-Wheel).
    • Zooming by using the keyboard or toolbar centers the zoom on an object (when selected).
  • Copy & Paste Project Pages
      • You can now copy a selection of pages and folders between projects – or even to a different location within the same project.
      • Select the pages and/or folders you wish to copy, and select ‘Copy pages’ from the right-click Context Menu; then, go to the destination project’s Pages Panel and select ‘Paste pages’ from the Context Menu.
    • To nest copied pages within an existing folder, click on that folder before you paste.
  • Redesigned Image Library
      • Images Library has a new flexibility that allows images to be added to both Project and Team categories.
      • Organize images in folders and nest them as needed.
      • Toggle between Grid View and Tree View options.
      • Perform bulk operations on images – including dragging and dropping multiple images onto a page.
      • Toolbar Menu includes new options: New Folder, New Folder from Selection, Rename, Delete, Download.
      • New Right-click Context Menu includes: New Folder from Selection, Rename, Delete, Download.
      • Select and download previously uploaded images or image-folders for easy collaboration – and to keep the entire team in sync.
      • To avoid unwanted clutter, images pasted from the OS clipboard are no longer automatically added to the Image Library.
      • Add to library option from Context Menu to add an image pasted from clipboard (applicable for an image that is not in the Images Library).
    • Templates library will adopt the same functionality and design in the coming weeks.
  • Enhanced Image Cropping
      • Selecting an image displays a popover-toolbar for Crop & Background Removal.
    • You can now quickly zoom with the slider, relocate the crop area, and apply the crop.
  • Remove Background Color from Images
      • Selecting an image displays a popover-toolbar for Crop & Background Removal.
      • Enter BG Removal mode by clicking on the Magic-Wand icon; then, click on the area of an image to remove a solid color, or click and drag to remove a color range.
      • To apply the changes, click outside the image or click done.
      • Reset returns the image to the original.
    • To keep an altered image in the Library, right-click and select ‘Add to library’ option from the Context Menu.
  • Collaborator Presence
      • To show you who is working and where – and avoid overlap when editing in real time – a colored border with the collaborator’s name now appears around the objects they have selected.
    • In the Sharing window, hovering over any user’s display name provides a link to ‘Go to Page’ or ‘Go to Selection’ where the collaborator is.


    • Updated Font Awesome icon library.
    • Flowchart stencils have better text editing and resizing behavior.
  • Selected objects are no longer duplicated while holding the Alt/Option + Arrow keys.

Bug Fixes:

    • ‘Export selection’ in the right-click Context Menu is now disabled for users who are not logged in.
    • Image Crop mode:
        • Fixed a bug that caused the Mouse pointer to remain stuck in image crop mode.
        • Previously, zooming with the keyboard shortcuts misaligned the existing cropping area.
      • Fixed bug that created a ghost image while cropping.
    • When dragging a Chart stencil from the library to the page, the preview is now properly displayed.
    • On tablets, the Canvas no longer moves when dragging a stencil onto the page.
    • Fixed problems with Offline Viewer’s Interactivity states.
    • Previously, new users couldn’t upgrade after signup if they didn’t alter their project.
    • When ‘Include hidden pages’ option is unchecked, export now properly excludes those pages.
    • Dragging a selection of images to the page now properly includes all images in that selection.
  • Fixed a bug that caused pasted images to appear very slowly on the page.

Check out other recent release notes in the What’s New section of our Help Center.

Visualize Business Intelligence Data with Moqups’ New Charts

Moqups’ guiding principle has always been the importance of foundational work:

That it’s important to consult, experiment, and build consensus before spending precious human and financial resources on polished products; and that laying the groundwork for future development can help teams reduce miscommunication, back-and-forth, and costly errors.

We built Moqups so that teams could diagram user flows before designing screens, create wireframes before deciding on high-fidelity mockups, and test interactive prototypes before writing a single line of code.

Now, with our Charts feature, we’ve extended that principle to the world of Business Intelligence and Data Visualization.


As more and more companies empower their businesses with digital ERP solutions, presenting data graphically has become an essential part of their analytics requirements.

Data visualization makes complicated information easier to parse – often revealing new and unexpected patterns. By using these patterns to identify and clarify key business drivers, analysts can address urgent business questions, and provide actionable, value-added insights.

But, since most ERPs come packaged as generic frameworks – applicable to only the widest possible spectrum of customers – they often require extensive customization in order to reflect the exact requirements of individual businesses.

Unfortunately, this realization – that companies need contextual, custom-designed charts – often comes long after the initial ERP implementation phase has already been completed. And that means that someone still has to sift through a sea of information, extract the valuable data, and translate it into a digestible visual analysis.

This task, the creation of complex BI dashboards assembled from a variety of reports, is often assigned to those who understand the business best. Usually, these are non-designers – product managers, business consultants – those directly responsible for monitoring and reacting to quick-changing performance indicators. They’re also the ones who have to communicate with a wide variety of stakeholders in order to decide what visuals connect effectively.

Sure, they could build their charts with number-crunching tools like Excel, but that’s not usually where the rest of the team works. Or, they could simply ask their designers to come up with something – but they’d still have to provide examples, just to show the designers what they had in mind.

And the truth is, sometimes you don’t know what you need until you’ve seen it – and shared it with your team.

Moqups makes this kind of collaboration possible. It brings people of different qualifications and expertise together within the same creative context – and helps companies leverage their collective experience by including all stakeholders in the visualization process.

With our new Chart stencils, anyone in your team can explore the existing data imaginatively, identify hidden patterns, and effectively mock-up realistic visualizations and business intelligence dashboards. And most importantly, they can build these charts in the same place where the rest of your project’s requirements live.

To access these new stencils, go to the Stencils panel in the Left Sidebar and scroll to the ‘Charts’ category. From there, you can pick whichever Chart stencil is most relevant to your data, and drag it right onto your page.


A bad chart can provide a misleading conclusion, so it’s important to try a couple of variations before you settle on the type of chart that makes the most sense for your data. To make this process of experimentation easy,  we’ve made it possible to change the Chart Type directly from Charts section of the Format Panel.

In that same section, you can customize your chart’s overall appearance by choosing different color themes, enabling or disabling the Legend, toggling gridlines on or off, customizing the axis style, and more.


Of course, you can easily add or edit the chart’s data by entering the values manually, or you can paste the numeric (CSV) values directly from Excel or Google Docs:

  • Select the Chart stencil you want to edit, and double-click to begin editing.
  • A panel containing the Chart Data Editor will appear at the bottom of the app and the Chart will update instantly as you adjust the cell values.
  • Edit the Chart just as you would with a typical spreadsheet.
  • To add new values along the chart’s Series axis (or Y-axis), hover over the first cell in any row – and then click the drop-down menu arrow to show the options menu.
  • Select an option to insert new rows (or delete them) in the Editor.
  • Similarly, to add new values along the Category axis (or X-axis), hover over the first cell of any column and click the drop-down menu arrow to reveal your options.
  • It’s also possible to customize the Chart’s colors individually; just click the color picker button of any row on the leftmost side of the data editor.


This is only the beginning of our data visualization journey. In upcoming releases, we’ll be adding more chart types, as well as other useful productivity tools like the ability to generate realistic looking random data for your data visualization mockups.

And to make things even more exciting, we’ll open source the JavaScript code behind each chart type, as React Components, so that your team can use them directly in your real dashboard – and adapt them to your needs.

Try Moqups now for free →