2 year anniversary

Build an Enterprise Web App on a Budget

Vcl.js is a typescript open-source RAD framework for building an enterprise web apps in a fraction of the time, whether you’re an expert developer or just getting started.
Vcl.js takes the Delphi/.Net RAD approach into the HTML5 world,providing a full stack for a true web RAD development


Rich Component Library

vcl20Vcl.js components cover controls like pages (TPage class), controls (e.g., TButton, TCombo, TLabel classes) as well as database access (e.g., TQuery components).The component approach allows programmers to extend the VCL with many additional components.

100% Bootstrap

tweetBootstrap is an open source framework that provides designers and developers with a straightforward way to create web interfaces that employ responsive design. Bootstrap utilizes JavaScript (including jQuery), CSS, and HTML and includes support for CSS3 and HTML5.

100% TypeScript

tsLogo80Typescript offers classes, modules, and interfaces to help you build robust components. These features are available at development time for high-confidence application development, but are compiled into simple JavaScript.

Node.js support

nodeLogoVcl.js backend has been developed with Node.js providing runtime for building scalable business applications.

IIS .Net support

net_logo.pngIIS for Windows® Server is a flexible, secure and manageable web server for business application.

Visual Studio Integration

vs35 Visual studio developers can install the Vcl.js plugin to get project and item templates.Add page,modal or backend method.

100% Open Source

Vcl.js is free,open source and always will be!


If you need to migrate a desktop business application into the html5 world you will find vcl.js to be the right tool for you. The .Net Forms/Delphi like API makes it easier to learn, the component based development promote highly productive by supporting code reuse, and the tight integration with visual studio and the power of typescript make vcl.js a strong tool for large applications.


Experience the future of the web platform with Vcl.js components framework.Components allow you to create web application, using html to describe their markup and typescript to implement custom behavior.

//Simple dbgrid bounded to a query
import V = require("VCL/VCL");
export class PageHome extends V.TPage {
constructor() {

   //create a backend query
   var qur = new V.TQueryRemote(this);
   //allCustomers=>"SELECT CustomerKey, FirstName, LastName FROM Customers";
   qur.QueryID = "allCustomers"; 
   qur.open(); //asynchronous call to the query 

   //create a grid component on the screen
   var grd = new V.TDBGrid(this, "grd"); //the "grd" is the id of the div
   grd.Dataset = qur; //bind the grid to the query
   grd.PageSize = 15; 
   //create columns to the grid
   var col = grd.createColumn(""FirstName");
   var col = grd.createColumn("Lastnameâ","Last Name");

<div class="row-fluid">
    <div id="grd" class="span12"/>


Build a scalable typeScript apps! Vcl.js makes it easy to create sophisticated, multi-page typeScript app with great URL support, in a fraction of the code you’d write in any other frameworks.

//Simple routing example
import V = require("VCL/VCL");

export class PageHome extends V.TPage {
   constructor() {

     //create a backend query
     var btn = new V.TButton(this);
     btn.onClicked = ()=>({
	 //This method will call the class "Page2" and will pass "George" to page2 constructor

import V = require("VCL/VCL");

export class Page2 extends V.TPage {
    constructor(customerName : string) {

       //create a backend query
       var txt = new V.TText(thism,"custName");
       txt.Text = customerName


Vcl.js come with over 50 components ready to use

  • Forms
    • TPage
    • TModal
    • TButton
    • TInput
    • TDBInput
    • TLabel
    • TDBLabel
    • TBadge
    • TDBBadge
    • TText
    • TDBText
    • TTextArea
    • TDBTextArea
    • TInputNumeric
    • TDBInputNumeric
    • TCombobox
    • TDBCombobox
    • TDBGrid
    • TListBox
    • TImage
    • TIcon
    • TToggleSwitch
    • TInputTypeaHead

  • Widgets
    • TWizardButtons
    • TTagCloud
    • TPillBox
    • TBreadCrumb
    • TPagination
    • TTree
    • TSideBar
    • TNavBar
    • TGravatarImage
    • TFacebookButton
    • TGoogleMap
    • TTimer
  • Visual containers
    • TPanel
    • TTabSheet
    • TAccordion
    • TCarousel
    • TWell
    • TContainer
    • TBootstrapRow
    • TBootstrapRowFluid
    • TBootstrapSpan

  • Datasets
    • TQuery
    • TQueryRemote
    • TCollection
    • TList
    • TDataset
    • TClientDataset


Vcl.js supports, codeless connectivity to various kinds of common data providers, including SQL,NoSQL and Microsoft OLAP.Like client-server desktop applications, Vcl.js browser-based applications interact with remote data and services via background communication channels. Background requests retrieve chunks of data rather than new HTML pages, and update your visual components in place rather than rebuilding the entire user interface.

  • littlehouse

    Could you provide a ajax post example with the following create or update or delete operation?

  • vcljs support


    Hope this will give u some ideas on how to devlop server side

  • tcrever

    It looks impressive! great idea to use the Delphi approach.

  • Paolo Marino

    That’s a wonderful RAD: I wonder why nobody knows it. But it’s really the future…

  • Gary Miller

    Since this software appears to accept JavaScript (TypeScript compiles to JavaScript) database commands from the front end. How are users prevented from transmitting their own JavaScript commands that they’ve tailored with their own SQL injected? (similar to a SQL injection attack).

    In a Framework like Angular you still have to develop server side components to push your data to the front end instead of the front end directly requesting it in database fashion.

  • vcl

    hi gary
    the sql injection is for inhouse small apllication. a more generic approch you can use TQueryremote or write your own server side

  • vcl


  • Paolo Marino

    Hi everybody

    I have installed the VCL plugin on Microsoft Visual Studio 2013: when you create a new VCL project e recompile there are a lot of errors on d3.v3.ts library. Dropping the d3.v3.ts lib from the project and recompiling it seems to work fine. It is right?


  • Nati Krisi


    yes u r correct
    r u sure u used the latest version?
    we removed it from last version

  • Paolo Marino

    I downloaded the last version but it has the same size of that I installed.. At any rate Can I install over the old without problems?

  • Paolo Marino

    I noticed that the menu doesn’t close after you select a item. That’s a problem on mobile as it’s seems that non jump is made unless you scroll the screen..

  • vcl


  • Nati Krisi

    can u send us a sample code?

  • Paolo Marino


    If you resize the browser up to a smartphone screen you can see what I mean

  • Nati Krisi

    if you talking about the top menu this is bootstrap default behavior.

  • Paolo Marino

    Thank , I’ll find the way to modify this behavior


    I’ll try this amazing framework!, after months of looking for somtehing more integrated and easy to learn to use with Node.js server ..There are many JavaScript frameworks (Express with Jade, and others) out there, however those tools are oriented to MVC pattern. I need something more desktop programming oriented, like VS or PowerBuilder..

  • http://vcljs.com/ vcl

    thanks. if u encounter any problem please contact us for anu issue


  • James

    I agree this is an awesome framework!

  • Jcbretas

    Hi ! That project is active? Regards

  • http://vcljs.com/ vcl

    yep. live and kicking.

    we are using it for our products and releasing the framework for free


  • umnik

    This framework looks very interesting. I’m looking for client side framework to use for my new project and would like to implement it in TypeScript. This framework fits my requirements, but I want to get some background.
    Could you point to wen pages which use Vcljs?
    It was mentioned ” … Vcl.js is sponsored by a commercial company”, any hints who is it?
    Can it be used with RESTful backend?
    Which underlying UI widgets are used for vcl components?
    I want to chose long term library and those question could clarify my commitment.

  • Chris

    This framework is AMAZING! Only wish it had more folks using it. VERY impressive work. Everything just … works. I’ve only had to make a few very minor changes to the core code. I still haven’t figured out how to skin it very well, but overall, easily the best framework I’ve ever used. In particular, the ease with which the server side works. Great for MSFT-centric orgs.

  • http://vcljs.com/ vcl

    Thanks chris.

    we going to provide next week a new version with many bug fixes


  • Chris

    Great to hear! I noticed a version 400 on gethub but my Visual Studio hangs anytime I try to update to it, so I’ve just been using 319

  • Nati Krisi

    You can use vs nuget to update your vcl

  • Chris

    Yup — that’s where it hangs. I’ll see what happens with the new version. Could be a VS thing.

  • Chris

    Any listing of what is new in version 502?

  • http://vcljs.com/ vcl

    Lot of bug fix.

  • Chris

    Interesting. I have used v319 a ton and haven’t really found any bugs.

  • Dot Net Developer

    Excellent framework, keep it up!

  • http://vcljs.com/ vcl


    any ideas on how to get better?

  • http://vcljs.com/ vcl

    did u found vcl.js usfull?

  • Chris

    I still owe you the changes I have made for security — will send them, I promise. Lots of good changes.

  • Chris

    Can you provide the command you use to create vcl-compress.js for non-localhost? It took me a while to realize that the individual .ts files are only for debug.

    Also — I now see what v502 has — fixed so that the framework compiles under TypeScript 1.4+

  • http://vcljs.com/ vcl


    download r.js from https://github.com/jrburke/r.js/

    run the following command:
    node r.js -o name=VCL/VCL out=vcl/VCL-compress.js optimize=none

  • http://vcljs.com/ vcl

    vcl.js supports typescript 1.7

  • Modern Ronin

    Is this project still being maintained? Github shows the last commit in April 2015. Thanks!

  • William Wong

    Looks nice. Any chance for a form designer or similar? It would be nice if there is a kind of window manager with task bar such that I could get similar desktop experience with single page app built with it.

  • Chris

    I am still using it heavily and they released a new version in 2016

  • Cromulent

    Where? On Github the latest commit was April 2015.

  • Chris

    Well, it is available from NuGet in VS, or from this site itself (v502). We are still using this framework a lot and have found success with it.