Example Gallery #
Fixed Versions: Varv is continually evolving. The examples below used fixed versions of Varv to ensure compatibility. We will update them occasionally to the most recent versions.
To update the version of Varv used in the examples simply remove the embedded packages using the package manager UI. This, however, might break some of the examples.
UI Designer #
The UI designer is a collaborative tool for designing and prototyping user interfaces and navigation of apps, similar to features found in Figma. The UI designer showcases Varv’s ability to create applications that contain user provided content. In addition the UI designer uses several common strategies for organizing larger Varv applications, such as:
- Splitting concept definitions into separate folders based on concept type
- Splitting concept definitions into abstract application logic and concrete interaction binding logic
- Using template composition to create reusable components
Todo List #
The todo list is a basic todo list extended with functionality to assign, filter, color, and compute aggregate counts of todos.
The todo list showcases Varv’s ability to create applications one feature at a time.
Each folder in div Todo List App adds another feature to the todo list.
As a fun exercise try right-clicking on the folders inside div Todo List App and select Disable Autorun Recursively or Enable Autorun Recursively to see how features can be dynamically added or removed from the Varv app.
Computational Notebook #
The computational notebook is written in Varv and lets users write their own Varv applications using a computational notebook interface. Each cell in the notebook can be a concept definition or template making it possible to rapidly sketch Varv applications.
Moving Balls #
The moving balls demo is a simulation of balls bouncing around a box. The demo illustrates Varv’s ability to add custom logic and properties directly to concepts.
MirrorBlender Clone #
The MirrorBlender (see original Paper) clone allows users to share their screen and webcam video in a 2D spatial canvas. The shared content can be resized and moved around enabling spatial video conferencing and collaboration.
Othello (Board Game Toolkit) #
Othello (Board Game Toolkit) Demo
The Othello demo shows how Varv enables the creation of higher level domain specific languages. The demo defines a toolkit for creating board games with concepts for games, pieces, and board positions. The demo then utilizes the toolkit to create a working implementation of Othello.
Varv Drawing #
The collaborative drawing demo lets users draw on a shared 2D canvas. The demo highlights Varv’s ability to create applications that are collaborative.