Product updates

This update, makes editing chart data in WireframePro more intuitive, visual, and efficient helping you focus on design rather than data formatting. As Charts play a key role when wireframing dashboards, analytics, and insight-driven interfaces, this is very important.

A More Visual and Streamlined Chart Editing Experience

WireframePro offers a rich collection of built-in chart components including area, bar, line, radar, scalar, and bubble charts along with sketch style variants for hand-drawn wireframes.

Previously, editing chart data worked like modifying a CSV in a textbox. While convenient for quick copy-paste, it often felt tedious and error-prone, requiring extra effort to validate values manually. This experience didn’t align with our mission to keep UI ideation fast, simple, and friction-free.

With the new data editor, chart editing now feels as smooth as working in a spreadsheet dramatically improving accuracy, speed, and usability.

Introducing the New Chart Editor

The upgraded chart editor includes essential spreadsheet-like controls, tailored specifically for chart data. It intelligently adapts to different chart types and lets you:

1. Add or remove rows and columns effortlessly
2. Edit values directly with point-and-click interactions
3. Sort data in one click
4. Copy data or paste from Excel and CSV files
5. Benefit from built-in validation to avoid formatting issues

Faster, Validated & Visual Chart Editing

Whether you're wireframing business dashboards, analytics screens, or data-rich reports, the new chart editor helps you shape your ideas faster and more accurately.

Try it today and give your wireframes cleaner, more realistic charts without sacrificing speed or creativity.

New Mini-Mode in WireframePro streamlines your workspace by reducing clutter, keeping key tools within reach, and giving you more canvas space for rapid, intuitive wireframing.

If you've been following our recent WireframePro updates, you’ll know we’ve introduced a host of invaluable features to MockFlow such as Build Mode for converting concepts into code, powerful AI tools, and expanded wireframing libraries. While these advancements are essential, wireframing should also feel like a natural extension of the designer’s thought process. To achieve this, creating UI concepts needs to resemble sketching on a real whiteboard clean, spacious, and free from unnecessary distractions. At the same time, designers must have quick access to the essential tools required to bring their ideas to life. The new Mini-Mode balances both, giving you more whitespace to think and the right functions at your fingertips

Backstory

This is how Mini-Mode was born. It’s not just a simplified version of the editor UI, but a carefully designed experience shaped by analyzing millions of heatmaps and wireframing usage patterns. The data revealed a clear trend: the more interface elements an editor displays, the less ergonomic the workflow becomes a challenge familiar to users of UI-heavy tools like Office or Photoshop. On the other hand, going too minimal can overwhelm users as they struggle to locate essential functions. Mini-Mode strikes the right balance, delivering a streamlined interface that enhances ergonomics while keeping the core functionality within easy reach.

Quick launcher

Mini-Mode delivers the right balance of UI by hiding non-essential elements while still keeping nearly 95% of WireframePro’s functionality instantly available without switching back to regular mode. It works by collapsing the sidebar into a smart overlay with related functions, while introducing a new always-on mini bottom bar featuring the most-used components. The result is a cleaner workspace that frees up significant whitespace, making both designing and viewing wireframes more seamless.

Shortcuts

Mini-Mode also introduces handy shortcuts for AI features, drawing components, and even switching between Mini and Regular modes. The new slim bottom bar is the icing on the cake styled like a subtle notch, it stays out of the way while giving instant access to your most-used components in both wireframe and sketchy styles. And of course, Mida remains in the bottom-right corner as your always-on design assistant, now enhanced to deliver not only text responses but also image-based answers, 24/7

Our analysis shows that Mini-Mode is a clear success as it delivers the majority of WireframePro’s features within a minimal, distraction-free interface, enhanced by faster shortcuts. The result: users can focus less on navigating the UI and more on bringing their concepts to life. This is the future of WireframePro. We’re also proud to share that some of these ideas were inspired by our sister product, IdeaBoard, reinforcing our commitment to building tools that make visual design more natural and intuitive

Quick access to AI

AI is now at the forefront of modern software, and with Mini-Mode, it takes center stage in WireframePro. A new mini AI input box is built right into the bottom bar, giving you instant access to powerful commands. Simply type requests like generate wireframes, tables, diagrams, cloud architecture flowcharts, or even images and AI will bring your ideas to life within seconds. It’s speed, simplicity, and creativity combined.”

The Future

Clean, intuitive, and rapid that's what MockFlow stands for when it comes to designing UI concepts. With the new Mini-Mode, you can wireframe at the speed of your thoughts. Use Ctrl/Cmd / shortcut to toggle mini mode anytime.

With the new shortcuts everything is in your finger tips, press '/' anytime to bring AI assist in WireframePro or IdeaBoard. Use Cmd + 2,3,4,5 to switch main tabs.

Type '/' to bringup AI toolbox:

Smarter design with AI is now just a slash away. In the editor, simply press ‘/’ to open AI tools instantly. Enter your prompt and generate wireframes, dashboards, mind maps, flowcharts, diagrams, images, or text whenever and wherever you need them.

⌘ + J = Mida Chat

Open Mida assistant inside editor for support, doubts, reporting issues, or even performing actions in both WireframePro and IdeaBoard.

⌘ + 2,3,4,5

Navigate your editor at lightning speed with new keyboard shortcuts. Use Cmd (Mac) or Ctrl (Windows) with numeric keys to instantly cycle through the main operations.

1. In WireframePro, quickly switch between Components, Pages, Images, and Icons.
2. In IdeaBoard, move seamlessly across Components, Templates, Library, Draw Mode, and Stationery.

This update saves clicks, reduces distractions, and keeps you focused on creating.

Contextual right-click menus

Alongside the new keyboard shortcuts, this release also introduces improved right-click menus when you select a blank canvas. These context-aware menus surface the most relevant options instantly, helping you add, organize, and design without breaking your flow.

The above changes are now available in both web and desktop apps.

MockFlow AI just got smarter: wireframes generated with AI can now include real charts, analytics, and data visualizations. This makes it easier than ever to design dashboard wireframes and UIs that showcase graphs, reports, and insights.

Prompt-to-Wireframe creation in MockFlow continues to evolve with new features, fixes, and smarter generation. Today’s update is a major step forward, especially for wireframing business apps.

MockFlow has long supported native chart components to help teams brainstorm UIs with graphs. Now, this capability is extended to AI. With just a text prompt, you can instantly generate wireframes for dashboards, analytics, metrics, mobile charts, and more, making it easier to visualize complex data-driven interfaces.

For added flexibility, MockFlow AI also supports sketchy chart generation. By simply adding the keyword ‘sketchy’ to your prompt, you can create hand-drawn style wireframes that are perfect for early-stage brainstorming.

Prompt: CRM dashboard

Prompt: Mixpanel like dashboard

Prompt: Sketchy Google Analytics dashboard

Prompt: Mobile app - Storage analytics

In this release, MockFlow AI now supports all built-in chart components—including Bar Chart, Line Chart, Area Chart, Pie Chart, Bubble, Scatter, and Radar. This means your AI-generated wireframes can instantly visualize a wide variety of data layouts. Coming soon, we’re also adding AI support for more native visualizations like Gauge and Treemap to make your dashboard wireframes even more powerful

Since AI is included in all plans, you can start exploring this feature right away. Simply generate wireframes with prompts like ‘Finance dashboard’, ‘CRM analytics’, or ‘Football club metrics’. You can also experiment by adding themes, modes, or specific visualizations you’d like to see in your design. Just bring your idea as a prompt and WireframePro will instantly turn it into a wireframe now even if it involves charts.

With the new MockFlow WireframePro extension for Visual Studio Code, you can instantly generate UI code through visual prompting. Simply draw your wireframes or leverage AI to bring your ideas to life, then convert them into production ready code in a click.

Bring ideas to life inside Visual Studio Code

MockFlow for Visual Studio Code lets you brainstorm and design UI ideas directly inside your favorite IDE. Use the built-in prompt box to have AI instantly generate your interface layout, or quickly sketch it yourself using the fastest visual UI design tool available.

Tailored version for Visual Studio code

This extension integrates seamlessly with your Visual Studio Code IDE through a built-in MockFlow project sidebar, allowing you to create new wireframes or open existing ones. It also features a streamlined version of the WireframePro editor, ensuring a lighter, less cluttered editing experience inside Visual Studio Code.

Turn wireframes into actual code

With the integrated Build Mode in the MockFlow WireframePro extension, take your designs further by converting wireframes into clean, ready-to-use code and inserting it directly into your Visual Studio Code project files.

Build Mode lets you export any part of your wireframe whether it’s a single component, a section, or an entire page, into code. It supports all major frameworks in multiple versions, ensuring seamless integration with your project’s requirements.

Why brainstorming your UI is important

Wireframing is like sketching your ideas on a whiteboard, only better. It helps you brainstorm layouts, refine them quickly, and make changes before development begins. With rapid wireframing and code export, you can accelerate your workflow and save valuable development time.

Unlike other app builders, WireframePro extension only focuses on the UI that means it easily integrates with any new or existing Visual Studio projects and can be used as required.

The extension is available for Free in Visual Studio marketplace. Download and try now.

Now ideate apps for Android 16 at lightning speed with this new wireframing UI-kit. With over 120 components and templates, brainstorming apps for Android 16 look and feel is now a breeze.

With the recent release of Android 16 and its shift to the new 'Material 3 Expressive' design standard, the Android user interface has undergone a significant visual and structural overhaul. To help you keep pace, our latest UI kit for WireframePro is tailored for wireframing apps that follow this new design language. It includes a wide range of components across multiple categories, making it easier to plan and prototype Android 16 apps with precision

1. Frames
2. Keypad
3. Widgets
4. Navigation
5. Forms
6. Buttons and Icons
7. Tabs and sliders
8. Templates

Before diving into advanced prototyping or development, it's essential to visualize your Android app ideas using the native design theme. With this Android 16 wireframe UI kit and MockFlow’s intuitive editor, you can quickly sketch app screens with no learning curve required. Effortlessly iterate your designs, explore different layouts, and communicate UI concepts more effectively, all while accelerating your development process.

The latest UI kits are now available for MockFlow WireframePro users, featuring approximately 143 components for macOS 26, over 160 components for iPadOS 26, and a complete UI kit for the new watchOS 26.

Following our recent release of the iOS 26 UI kit designed for brainstorming iPhone apps with the new Liquid Glass theme, we’re excited to officially launch UI kits for the latest major versions of macOS, iPadOS, and watchOS.

Each UI kit also includes ready-made templates that showcase how the components come together in real app scenarios. What sets MockFlow apart from other UI design tools is its zero-learning curve and speed, it’s like sketching on a whiteboard, but with real, functional components. This makes it incredibly easy to iterate quickly and communicate UI ideas visually, while staying true to the original design theme—in this case, Liquid Glass.

WatchOS 26 wireframe component set preview

iPadOS 26 wireframe component set preview

All UI packs are available for free in all MockFlow plans including basic.

Brainstorm UI your future iPhone apps with the upcoming iOS 26 liquid glass concept. The UI kit comes with over 190 components in 15 categories along with wireframe templates.

Apple recently unveiled the beta of iOS 26 at WWDC, introducing a groundbreaking UI design language called Liquid Glass. Much like the early skeuomorphic design era and the later shift to flat UI, Liquid Glass marks a significant evolution in user interface design for iPhone apps.

This new aesthetic emphasizes translucency, fluid motion, and a glass-like visual texture that subtly blends UI elements into the background by allowing content to take center stage. It introduces a minimalistic approach to UI components, encouraging clarity, focus, and modern visual hierarchy.

Wireframe iOS 26 apps

Introducing the Complete Liquid Glass Wireframing Solution: 190+ Premium Components for iOS 26 Development

We're proud to announce the launch of our comprehensive wireframing component library, specifically designed for liquid glass application development. This powerful toolkit seamlessly integrates MockFlow's industry-leading wireframing platform with an extensive collection of 190+ pre-built liquid glass UI components, enabling designers and developers to accelerate their design workflow significantly.

Key Features & Benefits:

Our advanced wireframing solution empowers teams to rapidly prototype and visualize UI concepts, streamlining the design-to-development process. The intuitive interface facilitates quick iterations, allowing you to refine and finalize your design concepts before entering the development phase, ultimately reducing project timelines and costs.

Enhanced Development Workflow:

The integrated WireframePro build mode introduces seamless iOS SDK export functionality, providing developers with production-ready code that further accelerates development cycles. This feature bridges the gap between design and implementation, ensuring consistency and reducing manual coding requirements.

Availability & Access:

The complete Wireframe UI Kit for iOS 26 is now available at no cost to all users, making professional-grade wireframing tools accessible to teams of all sizes. Start designing your next liquid glass application today with our comprehensive component library.

Ready to transform your wireframing process? Access your free toolkit and begin creating exceptional user experiences.

MockStore now offers 300+ wireframe components for Tailwind v4 website designs and over 200 components tailored for Tailwind v4 web app wireframing.

There’s no doubt that Tailwind has become the most popular frontend CSS framework for building modern websites and web apps. If you’re developing with Tailwind, fast design iteration is essential. The new Tailwind v4 UI kit offers dedicated UI kits for both websites and web apps, giving you a huge range of components across multiple categories. This allows you to jumpstart your UI ideas and focus on functionality, without getting bogged down by styling from scratch.

Why it matters ?

If you’re a non-technical user or a manager, MockFlow now makes it effortless to visualize your layout ideas in Tailwind with no coding or prior experience required. You can easily create and experiment with UI designs, making the process as simple and accessible as possible.

Convert to code

Pair this with our Build Mode in WireframePro, and you can instantly convert your wireframe designs into ready-to-use Tailwind frontend code with just a single click.

Wireframe Components available in Tailwind v4 for website UI kit:

Its free for all

As with all UI kits in MockFlow, this release reflects our commitment to supporting the community. The Tailwind v4 Wireframe UI Kits are available to all users including those on the free basic plan, so you can start designing right away without any barriers.

Now easily export wireframes as code with build mode in the exact framework version you need—like Tailwind 4 , 3 or iOS SDK 17,16 , for seamless integration into your projects.

Why framework version matters?

Different versions of frameworks like Tailwind or iOS SDK or Android or Bootstrap can have changes in syntax, available components, and supported features. When you're working on an existing project, it's important that the generated code matches the exact version you're using otherwise, it can lead to broken styles, missing components, or compatibility issues.

By allowing you to choose the framework version in BuildMode during code export, WireframePro ensures that the generated code fits perfectly into your current setup. This eliminates the need for manual adjustments and helps you move faster from wireframe to production code with full confidence.

Expanded Framework with Version Support in Build mode

This release expands WireframePro’s capabilities with support for multiple versions of existing frameworks as well as entirely new ones. No matter which language or framework your project uses, you can now export wireframes into production-ready frontend code that fits right in. Just visualize your UI—WireframePro handles the rest.

Current Code Export Support in MockFlow

You can now convert your wireframe designs into frontend code across a wide range of frameworks and platform SDKs. Supported options include:

1. Tailwind CSS: Versions 4, 3, 2
2. Bootstrap: Versions 5, 4, 3, 2
3. Material Design: Versions 3, 2
4. Shadcn UI
5. Bulma
6. Ant Design
7. React
8. Vue.js

Platform SDKs:

1. iOS: Versions 17, 16, 15
2. iPadOS: Versions 17, 16, 15
3. Android: Versions 34, 33, 32, 31
4. Flutter: Versions 3, 2
5. watchOS: Versions 10, 9, 8
6. macOS: Versions 14, 13, 12
7. Windows: Versions 11, 10

MockFlow continues to expand support to ensure your wireframes can be seamlessly translated into code that matches your tech stack.

Introducing Build mode

How it is different from other code generators?

Is build mode now available ?