The Sciter

Sciter is an embeddable HTML/CSS/scripting engine to be used as an UI layer of modern desktop applications.

Sciter brings web technologies stack to desktop applications. Therefore you can reuse existing knowledge set - finally web designers and developers can participate in UI design of your applications.

BlockNote WYSIWYG editor - Sciter application (html/css/script files) that was used to create this article.

It makes sense to consider Sciter for following classes of applications:

• Applications that have dynamic UI - whole UI or its parts are getting composed in real time. UI update can be made as direct DOM manipulation, template instantiation or buil-in PHP style template processing for UI.
• Applications that have dynamic lifecycle - frequent functionality and UI design updates.  HTML/CSS resources can be parts of executable itself or can be downloaded (for example partially) from  your company's web server (HTTP). Pretty much as in ordinary Web browser.
• Connected or occasionally connected applications. Applications that need to get/send/post some data to servers using AJAX/JSON protocols and RPC mechanisms. All internet traffic (if any) of your application is fully under your control. All requests for external resources are passed to host application by SCN_LOAD_DATA notifications. You can use your own resource loaders or delegate their loading to built-in HTTP client.
• Applications that require UI theming and styling and to be "good desktop citizens" at the same time - use OS themes of user's choice when needed.
• Applications that require non-trivial user input methods. Sciter provides extended set of input and yet customizable elements (controls) out of the box.

Physically Sciter engine is a DLL (sciter-x.dll) that contains implementation of Sciter window class. Sciter engine API uses plain Windows API model. No COM, .NET, etc. technologies are required to integrate Sciter in your application. You just need to call standard ::CreateWindow( SciterClassName(), ... );  to use it in your application. If needed you can use it with WTL, MFC, .NET, Delphi, etc.

Internally Sciter contains (is made of) following modules:

• Compact and fast HTML/CSS rendering engine. CSS (Cascading Style Sheets) is pretty much at CSS2 level with some parts of CSS3 (like transitions support) and custom features designed specifically for desktop UI use cases (the flow and flex units for example).
• TIScript scripting engine that is an extended version of JavaScript. It has real classes and namespaces while keeping flexibility of JavaScript. The engine contains
• Compiler that compiles source to bytecodes.
• VM (virtual machine) that executes these bytecodes.
• Runtime - set of native classes and functions - superset of standard JavaScript runtime.
• Sciter SDK contains tiscript.exe - standalone TIScript compiler and interpreter that you can use to compile your scripts and so to include bytecodes in your application as resources.
• DOM API module that contains lightweight yet practical DOM model available in script and in native code. You can think as Sciter has prototype.js, AJAX and popular parts of jQuery implemented natively.
• Popup and detached windows module. If needed you can make some DOM elements to be presented as popup windows so to be styled and rendered in the same way as menus and other popovers used by Windows desktop.
• Dialog windows module. You can define your dialogs as HTML/CSS resources. Dynamic if needed. You also can use system FileOpen/Save, SelectPrinter dialogs.
• Extended set of so called behaviors - extenders of DOM elements implemented natively. Behaviors (internal and your own) can be assigned to DOM elements using CSS: .someclass { behavior:my-behavior-name; }. You also can extend classes of your DOM elements by script classes and assign such classes to selected DOM element by using again CSS: .someclass { prototype:MyBehaviorClass; }.
  Here is the list of some bult-in behaviors that come out of the box with Sciter:
• Input elements:
• single and multy line text inputs;
• masked text input;
• numeric and currency inputs;
• date, time and calendar input elements;
• vertical and horizontal sliders;
• scrollbars as standalone input elements;
• Output elements:
• progress element;
• shell icon behavior - allows to render icons of file types using OS mechanisms.
• <richtext> element - WYSIWYG HTML editing widget that supports CSS subset compatible with WYSIWYG editing model. Among other things <richtext> supports copy pasting of images from other desktop programms. <richtext> elements can participate in <form>s that can be submitted to Web servers together with inline/pasted images.
• <frame type="pager"> - built-in print and print preview widget that allows to present html documents in paginated form.
• Sciter SDK contains sources of sciter-scintilla - DLL based Scintilla based source code editor with syntax highlighting. ScIDE sample demonstrates its use.
• Graphics module. This feature is similar to <canvas> functionality of HTML5 but in Sciter the Graphics interface can be obtained for any HTML element. Therefore you can use Anti-Aliased graphics for charts and other non-trivial renderings.

Sciter works on all versions of Windows in active use at the moment. Even on Windows Mobile.

Download: Sciter SDK for Windows Desktop and Mobile

If you wish you can buy Sciter license and source code access