Introducing shinydraw: a no-code tool for shiny wireframing

Streamline Your Shiny App Design: Introducing shinydraw for Effortless Wireframing

For many Shiny developers, wireframing, the process of creating a visual guide of an app’s interface, is a crucial stage in app development that can feel like a hurdle. It’s the process of creating a visual guide that outlines how your application should look and behave, capturing user expectations early to minimise costly future changes. All too often a nearly-finished app is presented, only to find users are confused by the layout or workflow. Effective wireframing is key to avoiding this friction.

So, if wireframing is so important, why does it often feel like a frustrating and slow process when it comes to Shiny apps?

The Trouble with Traditional Wireframing

The core problem often lies with the tools available. Many existing wireframing solutions present two significant challenges:

1. Vendor Lock-in and Proprietary Standards: These tools, such as Balsamiq and Figma often bind you to their specific ecosystem and file formats, making collaboration outside that ecosystem difficult and sometimes complicating what should be a straightforward process.
2. High Costs: Subscription fees and licensing can add a financial burden.

This frequently leads to the undesirable outcome of wireframing being skipped entirely. The result is a lack of stakeholder engagement, leading to potential design flaws and user dissatisfaction down the line.

A different approach: Excalidraw

Enter Excalidraw, an open-source virtual whiteboard for sketching and diagramming. Written in TypeScript, Excalidraw provides a simple, intuitive graphical user interface that allows you to create hand-drawn-like diagrams with remarkable ease.

Its value lies in its simplicity:

• Low Barrier to Entry: You can produce something valuable within minutes, with no steep learning curve or lengthy manuals to read.
• Open and Shareable: Designs can be exported as images (e.g. PNG) or as .excalidraw files, which use the standard JSON format. These options make sharing and collaboration straightforward.

Introducing shinydraw: Wireframing Shiny Apps, Simplified

This brings us to shinydraw, an Excalidraw library designed for wireframing Shiny applications. It’s a collection of pre-drawn Shiny components such as menus or plots that possess a native look and feel, ready to be dragged and dropped into your Excalidraw canvas.

Imagine having access to a comprehensive set of Shiny inputs, outputs, theming elements, and more, all available at your fingertips. That’s precisely what shinydraw offers. It’s a “batteries included” approach that leverages the power of open-source technologies to offer a near-zero learning curve allowing you to create wireframes that look like this:

Key features and benefits of using shinydraw with Excalidraw include:

• Speed and Efficiency: No more drawing individual Shiny components from scratch. Simply load the shinydraw library and drag-and-drop.
• Native Shiny Look and Feel: The pre-drawn components are designed to resemble actual Shiny elements, making your wireframes instantly recognizable and relevant.
• Editable Components: All drawings in the shinydraw library are fully editable. Change text, resize elements, and tweak appearances to perfectly match your vision.
• Live Collaboration: Excalidraw allows you to generate a shareable, end-to-end encrypted link. Colleagues can join your session and edit the wireframe together in real-time, making feedback and iteration seamless. For instance, a collaborator could easily add a note suggesting a tooltip for a plot, directly on the design.
• Cost-Effective: Both Excalidraw and shinydraw are open-source and free to use.

Get Started with shinydraw

Ready to kick-start your Shiny wireframing process?

1. Access Excalidraw: Head to excalidraw.com. You can also use the Excalidraw extension within VSCode or Positron (Posit’s new IDE).
2. Get the shinydraw Library: Visit the mikejohnpage/shinydraw GitHub repository for instructions. It’s as simple as downloading a .excalidrawlib file and loading it into Excalidraw. The library has also been submitted for inclusion by default in Excalidraw, so it may become even easier to access in the future.
3. Extend shindraw: If there is a feature that you would like to see added, feedback is always welcome in the shinydraw repository. Alternatively, you can add your own additional components to your own copy of the shinydraw .excalidrawlib file. To do this, sketch a design in your local excalidraw session, drag and select all components you want on the screen, right-click and hit ‘Group selection’, then in the personal libary section in the right-hand sidebar, hit the pulsating plus button at the top of the shinydraw library. You can then download and save your new .excalidrawlib file for sharing, and even submit it as a pull request to the shinydraw repository.

Give it a try and experience how quickly you can start building compelling wireframes for your next Shiny project!