Skip to content
Interactive microfluidic design editor
JavaScript HTML CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc Updated documentation Feb 24, 2019
examples added examples folder Nov 13, 2015
img added an info popup Jan 10, 2018
lib The DOE designer table is working Jan 25, 2019
src Updated the debug map file link to full hosted url Oct 1, 2019
.gitignore Updated ignore Dec 14, 2018
LICENSE Updated readme with citing informaiton Jul 6, 2019
animations.css Able to change names of components Dec 14, 2018
demo.css hacky buttons + layer clearing Aug 2, 2015
favicon.ico slight favicon update Aug 7, 2015
index.html Base implementation of laser cutting inverse done Jul 17, 2019
modified.css Basic view is being populated by everything correctly with the button… Dec 14, 2018
orbit_bundle.js 2D -> 3D view functional! Aug 9, 2015
package.json Updated the debug map file link to full hosted url Oct 1, 2019

An Interactive Design Tool for Continuous Flow Microfluidic Devices -


The design of microfluidic Lab on a Chip (LoC) systems is an onerous task requiring specialized skills in fluid dynamics, mechanical design drafting, and manufacturing. Engineers face significant challenges during the labor-intensive process of designing microfluidic devices, with very few specialized tools that help automate the process. Typical design iterations require the engineer to research the architecture, manually draft the device layout, optimize for manufacturing processes and manually calculate and program the valve sequences that operate the microfluidic device. The problem compounds when the devices are intended for executing biological assays where engineers not only have to test the functionality of the chip but are also required to optimize them for robust performance. In this paper, we present an interactive tool for designing continuous flow microfluidic devices. \tool~ is the first completely open source interactive microfluidic system designer that readily supports state of the art design automation algorithms. Through various case studies, we show \tool~ can be used to reproduce designs from literature, provide metrics for evaluating microfluidic design complexity and showcase how \tool~ is a platform for integrating a wide assortment of engineering techniques used in the design of microfluidic devices as a part of the standard design work-flow.

Academic Publications

Sanka, Radhakrishna, Joshua Lippai, Dinithi Samarasekera, Sarah Nemsick, and Douglas Densmore. “3DμF - Interactive Design Environment for Continuous Flow Microfluidic Devices.” Scientific Reports 9, no. 1 (December 2019).


Design Environment

Keyboard Shortcuts

  • Pan Canvas: middle mouse button and arrow keys
  • Reset Canvas View: F key
  • Activate Select Tool/ Deselect Selected Components: Esc
  • Activate Component Copy Mode: ctrl+C -> ctrl+V
  • Undo Last Edit: ctrl+Z
  • Select All: ctrl+A
  • Save JSON file: ctrl+ S

Installation and Debugging

Instructions for installation, build, and test are in the wiki.

Selecting and Configuring Feature Types

Use the buttons in the menu (on the left) to select a feature type to place. The gear-shaped button will bring up a menu that will allow you to adjust the parameters for that feature type.

Click on a layer to select it. This will cause new features to be placed only into that layer. The currently-selected layer's color will be reflected in the button color of any selected feature.

Placing Features

Left click on the device canvas (on the right) to place a feature. Some features (such as Channels and Chambers) are determined by two points, and are placed by clicking and dragging.

Right click on a feature to select it. Right click and drag to select multiple features at once.

If a layer has been selected, only features on that layer can be selected this way.

Editing Features

Left click on any selected feature to bring up a dialog box which will allow you to edit its parameters. If more than one feature is selected, parameters will be inherited by all currently selected features of the same type as the one you clicked.

Saving Designs

Under Save in the main menu, click a to download the current design in the selected format.

Loading Designs

After saving a device design to JSON, drag and drop it from your computer onto the device canvas to load it.

Component Library


Error Logging and Tracking enabled by TrackJS


BSD 2-Clause License

Copyright (c) 2019, CIDAR LAB All rights reserved.

See LICENSE for more information.

You can’t perform that action at this time.