Code and component samples

You can find Sciter’s samples either in {sciter-sdk}/samples folder or on GitHub .

[Micro] frameworks

  • samples/+colorizer– syntax highlighting framework – plain text editing with syntax highlighting.
  • samples/+reactor – demos and samples of ReactJS and JSX alike features that are built-in Sciter. In particular:
    • samples/+reactor/vlist – virtual list, virtual tree and virtual table – handles large (potentially unlimited) record sets.
    • samples/+reactor/vtape – virtual list of variable height items (on the right). Recommended for rendering Skype alike chat message view.
  • samples/+formation – simple engine to get/set values of complex forms from/to JSON.
  • samples/+plus – that is AngularJS alike data-binding library. Small (480 LOC) and non-intrusive Model-View-Whatever library.
  • samples/+lib – underscore.js alike primitives.
  • samples/+promise – Promises/A+ specification implementation.
  • samples/+query – port of basic jQuery/Zepto features. Most of the basic jQuery features are implemented natively in Sciter, so this library is quite compact – 700 LOC.
  • samples/+lang – i18n primitives.
  • samples/+vlist – yet another virtual list, grid library, and samples. Use it when you need to browse large sets of records. +vlist uses a live data binding mechanism. Just provide an array[] of records and a AngularJS alike repeatable template.
  • samples/+unit-test – unit tests engine.
  • samples/+micro-charts – inline charts implementation.
  • samples/animations – library and demos of animation framework, modelled after GreenSock.js animation platform (GSAP).

Code and component snippets

  • samples/accesskey – keyboard shortcuts and extended accesskey attribute support – ALT+{key}, CTRL/COMMAND+{key}, etc.
  • samples/acrylic-window – Input element’s styling, Windows 10 Metro alike.
  • samples\animated-effects – animation effects – “hamburger” and focus-move animations.
  • samples/animated-png – Animated PNG demos.
  • samples/animations-transitions-css – CSS based transitions and animations.
  • samples/audio – demo of built-in audio playback engine – view.audio(...).
  • samples/basics – basic CSS samples, including the CSS3 transform property.
  • samples/behaviors – demos of native custom DOM elements and components, in particular:
    • native-drawing.htm – immediate mode native drawing (a la ImGUI) using built-in sciter::graphics primitives;
    • opengl-drawing.htm – immediate mode OpenGL drawing – note this is not a WebGL emulation stuff but use of real OpenGL native code;
    • native-textarea – use of native window-based components (HWND, NSView, etc.);
  • samples/carousel – animated carousel view demo;
  • samples/charts – charts engine demo (on the right);
  • samples/column-resizer – built-in column resizing behavior – interactive column width handling in tables and grids;
  • samples/communication – AJAX/JSON client, WebSockets and DataSockets duplex inter/intra-net communication.
  • samples/css++ – demonstration of various CSS extensions introduced in Sciter.
  • samples/css++inline-vector-images – Sciter unique inline CSS resident vector images
  • samples/css3 – extended CSS3 features demos:  box-shadow, background sizing, content:”string”, attr(…);
  • samples/css-filter – CSS3 filter property support demos: blur, drop-shadow, saturate and others.
  • samples/css3-variables – use of CSS variables and their interaction with script;
  • samples/dialogs+windows – demonstation of View.window, View.dialog and View.msgbox features: desktop windows defined by HTML/CSS/script means.
  • samples/drag-n-drop – support of system drag-n-drop;
  • samples/drag-n-drop-manager – local drag-n-drop manager implementation;
  • samples/drag-n-drop-tiles – Windows Metro style tiles reordering demo;
  • samples/effects.css++ – transition:blend and transition: slide-xxx demos – Sciter specific transition extensions.
  • samples/file-system – NodeJS alike file system access primitives and file/folder monitors – folder content view demo with live content tracking;
  • samples/flow-flex – Sciter’s version of CSS3 flexbox and grid layout engines;
  • samples/font-@-awesome – CSS3 @font-face feature demo using FontAwesome integration.
  • samples/forms – demonstration of Sciter extended set of <input> widgets including <select type=tree>, <input type=number>,  <input type=masked> and many others.
  • samples/frames – use of <frame> elements – note frames in Sciter are ordinary block DOM elements – may appear anywhere, not just inside <frameset>s;
  • samples/games – demos of two games: FlappyBirds and Tetris;
  • samples/goodies – Sciter extras, including behavior:file-icon – shell icons rendering.
  • samples/graphics – use of Graphics class – immediate (a la ImGUI) and buffered drawing primitives including “render-element-to-bitmap” and “dynamic-CSS-background-image” features, Graphics in Sciter is a superset of <canvas> functionality in browsers.
  • samples/i18n – internationalization demos – use of CSS content and HTML entities for internationalization purposes;
  • samples/ideas/ – bunch of implementation ideas including:
      • callout – dynamic callout
    • carousel
    • KiTE – {{mustache}} alike template engine.
    • lightbox-dialog – lightbox in-window modal dialogs.
    • moveable-windows – Sciter supports so called airborn DOM elements – elements rendered in separate windows. The sample demonstrates this feature.
    • tray-notifications – shell tray notifications defined by HTML/CSS means.
    • virtual-list – yet another virtual list with kinetic scroll that supports unlimited number of items of variable height (see image on the right).
  • samples/image-map – “image catalogs and sprites for humans” and DPI-aware images.Sciter tooltips
  • samples/image-transformations.css++ – yet another Sciter specific CSS feature: image filters.
  • samples/maps – basic use of Google Maps;
  • samples/markdown – Markdown parser and emitter;
  • samples/material – Google Material styling demos;
  • samples/menu – real menus (as lightweight windows) defined in HTML and styled by CSS.
  • samples/media – media variables including script defined media variables;
  • samples/popup – yet another demo of “airborn” DOM elements – popup windows.
  • samples/printing – print and print-preview using built-in <frame type="pager"> print preview (paginator) engine;
  • samples/process – NodeJS alike System.Process object demo – running processes with stdin/stdout/stderr hooks.
  • samples/replace-animator – demo of animated transitions between different layouts.
  • samples/scrollbars-n-scrolling – scrollbar and scroll manner styling. Also demonstrates use of Sciter’s unique overflow: scroll-indicator feature – MacOS/iOS alike scrollbar styling;
  • samples/selection – demo of textual/range selections on DOM tree.
  • samples/sidebar – side bar window demo a la Windows Actions/Notifications applet – side window with blurbehind effects;
  • samples/sqlite – demo of SQLite integration (SQLite is statically compiled in usciter[.exe]).
  • samples/storage – demo of built-in data persistence engine – NoSQL MongoDB alike DB integrated in the language;
  • samples/svg – demonstration of extended SVG support in Sciter.
  • samples/tests – various test including Sciter’s script unit and feature tests;
  • samples/toast-window – TaskBar alike popup notification window;
  • samples/tooltips++ –  demo of tooltips/calltips definitions & styling (see image on the right).
  • samples/trayicon –  demo of built-in tray icon support;
  • samples/video – <video> playback in Sciter.
  • samples/view – view methods demo: view.clipboard(), view.selectFile() and view.selectFolder() method demos – system file select dialogs and clipboard access;
  • samples/webp – built-in Google’s WebP image format support;
  • samples/wizard – idea of stepped wizard UI;
  • samples/xml – XML handling using builtin XMLParser based on the XML tokenizer.
  • samples/zip – loading of HTML/CSS/script resources from zip files;
  • samples/zoom – demo of CSS’s zoom property support – non-standard CSS but practical property.

Extended Editors

  • samples/htmlarea-editor – basic <htmlarea> demos – WYSIWYG HTML editor – the one that is used in HTML-NOTEPAD;
  • samples/richtext – defining <richtext> custom element as a component uniting <htmlarea> and <toolbar>;
  • samples/plaintext-editor – built-in <plaintext> editor demos.  Note <plaintext>in Sciter is an input element that support editing of multi-line texts with syntax highlighting (on the right), line numbers, etc.

Real life applications in Sciter SDK

  • {sciter-sdk}/notes – source code of Sciter Notes;
  • {sciter-sdk}/notepad – source code of HTML-NOTEPAD application;
  • {sciter-sdk}/quark – source code of the Quark packager;