Skip to main content

Introduction

Sciter uses its own implementation of HTML/CSS rendering engine and JS runtime.

While some efforts are made it to be compatible with W3C browser runtime and rendering there are differences due to different design goals:

  1. Sciter is meant to be as compact as possible as it is embeddable. Thus only essential APIs are included;
  2. Sciter is designed to serve desktop UIs. Thus its API:

HTML

  • Extended set of input elements;
  • <frame> can appear at any place where block elements are allowed;
  • <frame type=pager> – print and print preview frame;
  • <frameset> can appear anywhere as a split container. It can also contain explicit <splitter> elements that can be styled to match your design. <frameset> may contain not only frame elements but other block containers like <div>, <section>, etc.
  • Elements with custom tags are fully supported. If, for example, you feel that <toolbar> looks better then <div class="toolbar"> you can use <toolbar> tag. The only thing that you will need to do is to define style for it: toolbar {display:block; flow:horizontal; } in your CSS.
  • Real menus and popup elements:
    • <menu class=popup> – popup menu that is normal DOM element but gets rendered in separate popup window so can appear outside of host window;
    • <menu class=context> – popup context menu that can be attached to a DOM element by Sciter specific context-menu CSS property;
    • <popup> – generic popup element rendered in special popup window. Popup elements can be shown by Element.popup() function in script;
  • HTML shortcuts – instead of typing <div id="component" class="super"> you can just write <div#component.super>;
  • HTML Windows – desktop windows defined by HTML.
  • HTML <include> – assemble final HTML from HTML fragments.
  • Built-in set of HTML tags.

CSS

CSS 2.1 is implemented in full.

CSS 3 implementation is limited by selected modules that are practical in desktop UI:

Alternatives:

  • flow/flex as an alternative to display:flexbox.
  • flow:grid() and flex units provide reasonable alternative to display:grid.

Sciter specific:

For more details see CSS section.

JavaScript

Sciter uses updated QuickJS that implements ES2020 in full.

The language and its runtime was updated for better serving "language-behind-UI" role: