The Visto JavaScript Framework (VistoJS) integrates KnockoutJS, JQuery and RequireJS (and TypeScript) to provide the programming model known from .NET XAML and MVVM application development: It is possible to implement views with "code-behind" and bindings to view models, declaratively load subviews in HTML and navigate between pages - all in a single-page application.

The main advantages of this library is that it allows to develop component-based and implement reusable views which are composed of predefined programming blocks (view, view model and HTML). These views can be reused as sub views, in dialogs or as page instances. The programming API and paradigm is very similar to the one found in Windows Phone XAML or Windows 8 Store Apps programming (MVVM pattern, view "code-behind", paging/navigation).

Introduction to the Visto JavaScript Framework


  • Support for views with "code-behind" and view models (declared using HTML)
    • Support for event methods on views and view models like "loaded", "onNavigatedTo", etc.
    • The view model and the view are connected using KnockoutJS bindings
    • Possible to load sub views declaratively and pass parameters to it (one-way and two-way bindings)
    • Possible to instantiate multiple instances of the same view
    • No "page build-up flickering" by displaying a view not until every sub view has been loaded
  • Support for stack-based paging and dialogs
    • The framework automatically calls onNavigateTo, loaded, destroy and other event methods
  • More maintainable and understandable code by enforcing structure and conventions
    • The resulting application is component based and different application areas can be grouped in packages
  • Support for GUI internationalization
    • Declarative internationalization (with the data-translate attribute) which automatically updates if the language is changed
    • Immediate language changes using "language bindings"
  • Visto.js file size is 18kb minimized (22kb debug)
    • Complete framework (with all libraries like JQuery, JQuery UI, KnockoutJS, RequireJS, etc.)
      • With JQuery UI (needed for dialogs): 388kb
      • Without JQuery UI: 165kb (it is possible to provide an own dialog implementation)

Dependencies and used technologies

The Visto JavaScript Library is designed to be used with TypeScript but is fully working with vanilla JavaScript.

We recommend to use some sort of web services (or simple AJAX calls) to communicate with the server. Check out the JSDL (JSON Service Description Language) project which automatically generates TypeScript service client classes to access JSON-based web services (like .NET WCF service client generation).

Installation in MS Visual Studio

You can download the sample project on this page which can be opened in Visual Studio and directly started.

Here is how to create an empty project:
  1. (Install TypeScript)
  2. Create empty TypeScript project (delete all files except Web.config)
  3. Install NuGet package VistoJS.Complete for a complete app skeleton (or VistoJS for the core library files).
  4. Create main page view in "app/views/MainPage.html" and Style Sheet document "css/style.css"
If VistoJS is installed using a NuGet package, it can easily be updated in the future...

You can also download the sample project from the downloads section of this page. The sample project additionally contains some sample views to learn using the Visto JavaScript Framework.

Note: NuGet support is experimental. If you have any problems, please contact us.

We need help

If you like the project and like to help develop it, build packages or have suggestions, please contact us!


This is a free project that is developed in spare time. You can show your appreciation for Visto JavaScript Library and support future development by donating.

Donate with PayPal

This project is developed and maintained by Rico Suter.

Last edited Apr 7 at 1:36 PM by rsuter, version 154