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
andView.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.
- 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()
andview.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;