MiServer is a free, open-source web server implemented in Dyalog APL. It enables the APL user to build sophisticated websites with little to no knowledge of the web technologies like HTML, JavaScript, etc. We hope that you will enjoy MiServer; join the forums🔗, and contribute via GitHub🔗.

This website serves as guide to MiServer 3 – providing documentation, samples, and advice. At the same time, it showcases many of MiServer's capabilities. If you are just getting started with MiServer 3, check out the Tutorial tab. Look through the Samples to get an idea of of the variety of web content that MiServer can generate.

Explore the tabs for documentation, the broad selection of available controls, and the vast collection of sample pages and mini-apps. See the source of any page by clicking the MS3 logo in the top left corner and access other resources by clicking the Resources link in the top right corner.

JavaScript DataTable sample
JavaScript DataTable: Search almost 1500 idioms in an instant.
Dyalog ListManager sample
Dyalog ListManager: Move fruits between lists with streamlined interface.
HTML form sample
HTML form: Arrange many interactive elements together.
Dyalog RadioButtonGroup sample
Dyalog RadioButtonGroup: Create an entire group of radio buttons at once.
Syncfusion ejTreeGrid sample
Syncfusion ejTreeGrid: View and collapse a structured spreadsheet.
Syncfusion ejMenu sample
Syncfusion ejMenu: Build a menu from external data.
jQuery UI Spinner sample
jQuery UI Spinner: (Pre-) select values with spinners.
HTML video sample
HTML video: Specify a list of alternate video sources.

In the tabs below, you will find categorized examples of webpage content. Click any element for more information.

This div is the main container of this tab.

This is the beginning of a paragraph, but this phrase is a separate piece of text inside the paragraph.

StackPanel

CheckBoxes
RadioButtonGroup
Slider
  • Primaries
    • Cyan
    • Magenta
    • Yellow
  • Key
    • Black
ColorRGB
aqua#00FFFF
black#000000
blue#0000FF
fuchsia#FF00FF
gray#808080
green#008000
lime#00FF00
maroon#800000
navy#000080
olive#808000
purple#800080
red#FF0000
silver#C0C0C0
teal#008080
white#FFFFFF
yellow#FFFF00
This div has inner padding and gradient backround

Bold indented text which has to be extremely long in order to show that only the first line is being indented.

Huge text with outer marginExpanded and underlined

Blue box with shadow

Centered text with shadow

White text on image background

Surrounded by borders and top-right corner is round

Image

Inline paragraph with limited width and single line height.

Monospace, Sans-Serif, and Serif.
Parent element with "relative" position so we can align vertically
Default position and text alignment
Centered text
Right-aligned text
Centered element
Right-aligned element
Bottom-aligned text
Bottom-aligned element

Silly Duck
Movable (drag me!)

Choose a color to get a matching notification:

CSS to give floating impression
Content of dialog box widget
Task demonstratedTypeMain controls used
documentation links
Insert a linksimpleA
Nested custom themed tabs with complex titlesadvancedAccordion
Dyalog collapsing interface with four pseudo-language sectionssimpleAccordion
Play an audio filesimpleAudio
Button with callbacksimpleButton
Variably tristate check-boxadvancedCheckBox
Optionally tristate check-boxsimpleCheckBox
An auto-completeable drop-downsimpleDatalist
Collect input and echo it on a button presssimpleEditField, Button, label
Enter first and last name in a FieldSet (reacts to each keystroke)simpleFieldset, label, EditField
Figure with captionsimpleFigure
Explain about FormssimpleForm
Simple accelerometer interaction (use it from a platform which responds to movement)simpleGyro
Advanced ways to use icons by combining/transforming themadvancedIcon
Icon-Finder for FontAwesome-IconsadvancedIcon, , , DataTable
Icons from FontAwesome, Syncfusion, and GooglesimpleIcon
Date/time, email, URL, file, and submit Input elementsadvancedInput, InputSubmit
Input-control to handle file-uploadssimpleInputFile, , , Input
Various costumizations of grid-aligned inputsadvancedInputGrid
Enter first, last name and birthdatesimpleInputGrid
Text, number, password, and range Input elementssimpleInput, Table
Nested (multi-level) listsadvancedList
Move fruits between lists with streamlined interfacesimpleListManager
Lists of fruits and clickable linkssimpleList
Use markdown to generate HTMLsimpleMarkdown
Insert an ordered list of links based on an array of texts and links, and add callbacks on mouse movementsadvancedOl
Lists of fruits and clickable linkssimpleOl
Demonstrates options for customization of PanelsadvancedPanel
Display information, warnings, errors or success-messagesimplePanel
Special options for RadioButtonGroupadvancedRadioButtonGroup
Create an entire group of radio buttons at oncesimpleRadioButtonGroup
Clear a form with a ResetButtonsimpleResetButton, SubmitButton, Fieldset
Insert reference to JavaScript from a fileadvancedScript
Insert inline JavaScript and make a button to run itsimpleScript
Select one or more fruits from a list.advancedSelect
Pick fruits from a simple drop-down simpleSelect
Nested StackPanels provide flexible layout control.advancedStackPanel
Vertical and Horizontal "stacking" of content.simpleStackPanel
Color headings red using an external style sheetsimpleStyleSheet
Color headings red using an internal style elementsimpleStyle
Use a SubmitButton to POST a form, rather than use an AJAX callbacksimpleSubmitButton, ResetButton, Fieldset
Display tabular data with a bit of stylingadvancedTable
Automatically display a matrix as a tablesimpleTable
Nested custom themed tabs with complex titlesadvancedTabs
Dyalog tabbed interface with four pseudo-language tabssimpleTabs
Interactive control of multiple timersadvancedTimer
Signal timed events to the serversimpleTimer
Insert an unordered list of links based on an array of texts and links, and add callbacks on mouse movementsadvancedUl
Lists of fruits and clickable linkssimpleUl
jQuery UI collapsing interface with four pseudo-language sectionssimplejqAccordion
Add a class during callbacksimplejqAddClass, head
Grouped sets of buttonssimplejqButtonset
Take a div for a dragsimplejqDraggable
Make elements accept draggable contentsimplejqDroppable
Build a vertical (drop-down) menu from external dataadvancedjqMenu
Insert a vertical (drop-down or context) menusimplejqMenu
Remove a class during callbacksimplejqRemoveClass, head
Resize a DivsimplejqResizable
Using one slider to set the bounds of anotheradvancedjqSlider
Single and Ranged SliderssimplejqSlider
Grid of reorderable boxesadvancedjqSortable
List of items that can to be dragged to rearrange in a new ordersimplejqSortable
Select and preselect values with spinnerssimplejqSpinner
Interchange classes during callbacksimplejqSwitchClass, head
jQuery UI tabbed interface with four pseudo-language tabssimplejqTabs
Toggle a class during callbacksimplejqToggleClass, head
Toggle, show, and hide an element during callbacksimplejqToggle, jqHide, jqShow, head
Pick method of transportation from multiple Select-Controls (for different levels of the hierarchy) advancedChainedSelect
Pick your favorite car with linked select-controls simpleChainedSelect
Select one or more fruits or vegetables from a list which might be updated with a button-clickadvancedChosen
Pick fruits from a simple drop-down simpleChosen
A DataTable enhanced with the "buttons"-PluginadvancedDataTable
Simple Example slightly advanced with zebra-striping and highlighted search-termsadvancedDataTable
A DataTable with the a responsive layoutadvancedDataTable
A DataTable with the "yadcf"-Filters enabledadvancedDataTable
DataTable showing an analysis about presendential endorsements of top 100 US Newspapers (yadcf, custom rendering)advancedDataTable
The simplest use case of a DataTablesimpleDataTable
Dimple data chartsimpledimple
An example of what "dimple" can dosimpleScript, div
Dimple line plot chartsimpledimple
Dimple line plot chartsimple, dimple, , div
Advanced jBox-TooltipsadvancedjBox
Using jBox in callback-functions to display notices or modal popupsadvancedjBox
jBox-confirmations triggered from APL-Callback (tight integration of APL and JS-Callbacks)advancedjBox
Confirmation Dialog on PageLoadadvancedjBox
Image-galleries with jBoxadvancedjBox
jBox provides several style of popupssimplejBox
simple Confirmation-Dialogs with limited interactionsimplejBox
JavaScript library that implements SHA-based hashing algorithmssimple
Accordion which calls back to the server on open/closeadvancedejAccordion
Syncfusion collapsing interface with four pseudo-language sectionssimpleejAccordion
Show information as barcodessimpleejBarcode
Customized ruler-style indicatoradvancedejBulletGraph
Ruler-style indicator of two related valuessimpleejBulletGraph
Toggle availablility of one button with anotheradvancedejButton
Illustrates a simple push-buttonsimpleejButton
Simple pie chart of workspace object sizessimpleejChart
Callback interconnect two checkboxesadvancedejCheckBox
Checkbox with callbacksimpleejCheckBox
Formatted circular indicator gauge with multiple pointersadvancedejCircularGauge
Speedometer style displaysimpleejCircularGauge
Insert a basic color picker with preset palettessimpleejColorPicker, Select
Insert mutually interdependant calendarsadvancedejDatePicker
Pick a date in yyyy/MM/dd formatsimpleejDatePicker
Let user select dates/times and display the differenceadvancedejDateTimePicker
Insert an interface to select date and timesimpleejDateTimePicker
Interdependant multi-modal dialog boxesadvancedejDialog
Simple dialog boxsimpleejDialog
Various digital segment (LCD style) displaysadvancedejDigitalGauge
Digital (LCD-style) displaysimpleejDigitalGauge
Make an element draggablesimpleejDraggable
Make elements accept draggable contentsimpleejDroppable
An editable gridadvancedejGrid
Read-only grid with formatting and alignmentsimpleejGrid
Linear gauge with custom scale (Fahrenheit thermometre)advancedejLinearGauge
Linear gauge (thermometre style)simpleejLinearGauge
Listbox of reorderable options for selectionadvancedejListBox
Listbox of options for selectionsimpleejListBox
Build a horizontal menu (bar) from external dataadvancedejMenu
Demonstrate the Syncfusion ejMenu widget with databindingadvancedejMenu
Horizontal (application or navigation ) menu bar with background imagesimpleejMenu
Open Rich-Text Editor and retrieve documentsimpleejRTE
RatingsimpleejRating
Single and Ranged SliderssimpleejSlider
Tabbed interface with tabs on the leftadvancedejTab
Syncfusion tabbed interface with four pseudo-language tabssimpleejTab
Display a tag cloud of object sizes in MiServer's workspacesimpleejTagCloud
Validate numbers, currency and percentagessimpleejTextBox
Button with two statessimpleejToggleButton
View and collapse a structured spreadsheetsimpleejTreeGrid
TreeView with checkable nodes and ability to add and delete nodesadvancedejTreeView
Build a simple tree with a node selection callbacksimpleejTreeView
Insert styled toggleable pop-up with arbitrary web contentadvancedejWaitingPopup
Insert the three basic forms of toggleable "please wait" indicatorsimpleejWaitingPopup
Insert a hyperlinksimplea
Display definition when hovering over an abbreviationsimpleabbr
Add contact informationsimpleaddress
Mark an independent sectionsimplearticle
Insert a sidebar with related informationsimpleaside
Specify a list of alternate audio sourcesadvancedaudio, source
Embed an audio streamsimpleaudio
Make text boldsimpleb
Set document base URI for relative linkssimplebase, a
Isolate text that should be displayed with a reading order that is different from the surrounding textsimplebdi
Override the inherent directionality of text, i.e. the left-to-right or right-to-left reading ordersimplebdo
Insert a long quotation of textsimpleblockquote
Insert a line breaksimplebr
Insert a push buttonsimplebutton
Bitmap image canvas and draw a picture using JavaScriptsimplecanvas, script
Inform where a text was quoted fromsimplecite
Embed a code fragmentsimplecode
Add a predefined list of options for later use in a controlsimpledatalist, input, option
Mark deleted textsimpledel
Make an expandable menuadvanceddetails, summary
Add a summary with revealable detailssimpledetails, summary
Reveal the definition of a term (here a function name) when the mouse hovers over the termsimpledfn
Add interactivity to a divisionsimplediv
Create a list of descriptions for several termssimpledl, dt, dd
Emphasize textsimpleem
Embed an external application, i.e. a plug-insimpleembed
Group form controlssimplefieldset, legend
Insert a figure with a captionsimpleimg, figure, figcaption
Section footer following run of paragraphssimplefooter
Arrange many interactive elements togethersimpleform, input, textarea, select, option, optgroup, fieldset, label, keygen, legend
Insert all possible levels of headersimpleh1, h2, h3, h4, h5, h6
Insert a header with introductory contentsimpleheader
Draw a horizontal dividing linesimplehr
Italicize textsimplei
Embed another webpagesimpleiframe
Mark inserted textsimpleins
Indicate user inputsimplekbd
Allow clicking somewhere else to interact with controlsadvancedlabel, form
Include text in controls' clickable areasimplelabel, form
Add nested lists of varying typesadvancedli, ol, ul
Add ordered and unordered listssimpleli, ol, ul
Embed raw image data in the page itselfadvancedlink
Include an external resource; here an iconsimplelink
Image (in this case a map) with clickable areassimpleimg, map, area
Highlight textsimplemark
Create a context menusimplemenu, menuitem, div
Display a gauge for measurement within a given rangesimplemeter
Mark the main navigation controlssimplenav, a
Add alternative content for when JavaScript is turned off or not supportedsimplenoscript, script
Embed a PDF filesimpleobject
Insert an expression's result valuesimpleoutput, form, input
Three simple paragraphssimplep
Define the parameters for a en embedded objectsimpleobject, param
Block of text preserving linebreaks and multiple spacessimplepre
Graphically display time using progress barssimpleprogress
Mark text as a quotation inside the containing textsimpleq
Add nested ruby text and an alternative for non-supporting browsersadvancedruby, rt, rp
Add pronunciation and explanation as ruby text (5.5pt) over the linesimpleruby, rt
Strike-through textsimples
Indicate computer outputsimplesamp
Embed JavaScriptsimplescript
Define a section in a documentsimplesection
Make text smallersimplesmall
Delimit inline content for later manipulationsimplespan
Mark important textsimplestrong
Embed a style sheetsimplestyle
Make text subscriptsimplesub
Make text superscriptsimplesup
Use SVG to drawsimplesvg, circle, ellipse, polyline, polygon, rect, line, path
Insert an interactive table with column-wise formattingadvancedtable, tbody, thead, tfoot, colgroup, col, tr, td, th, caption
Manually display a matrix as a tablesimpletable, tr, td
Insert a multi-line text controlsimpletextarea
Indicate a timesimpletime
Set the document title in the browser's tab or title barsimpletitle
Specify subtitles (closed captions)simpletrack, video
Underline textsimpleu
Indicate a variablesimplevar
Specify a list of alternate video sourcesadvancedvideo, source
Embed a videosimplevideo
Indicate where to break a work if it must be brokensimplewbr
Use external code to style and touch-enable uppercase-lowercase alphabet pairing gamemini-appjqDroppable, jqDraggable, jqAddClass, Script, StyleSheet
John Conway's "Game of Life" (interactive)mini-appTable, RadioButtonGroup, Timer
Search the Dyalog, FinnAPL, and APL2 idiom listsmini-appDataTable
Children's educative application for Yiddish alphabet and keyboardmini-appButton, span
Simple mortgage calculation applicationmini-appEditField, Form, InputGrid
Classic Snakes and Ladders Gamemini-appsvg, StackPanel, style
Simple version of the addictive "2048" sliding gamemini-appTable
Vector graphics Tic Tac Toe gamemini-appsvg, Table, StyleSheet
Tube/Metro/Subway planner for multiple citiesmini-appChosen
SVG turtle graphicsmini-appsvg, line, Input
Whack-A-Duck: Shrinking button that jumps away progressively faster when you click itmini-appimg, script, img, style
Control
documentation link
DescriptionRelevant samplesLibrary
ADyalog Hyperlink widget based on the HTML a tag

Insert a link

Dyalog
APLDyalog
AccordionDyalog Accordion widget

Dyalog collapsing interface with four pseudo-language sections


Nested custom themed tabs with complex titles

Dyalog
AudioSame as base HTML5 audio element but sets default message for browsers that don't support it

Play an audio file

Dyalog
ButtonUsed to initiate actions

Button with callback


Children's educative application for Yiddish alphabet and keyboard


Collect input and echo it on a button press

Dyalog
ChainedSelectImplements a hierarchical select across multiple levels

Pick your favorite car with linked select-controls


Pick method of transportation from multiple Select-Controls (for different levels of the hierarchy)

JavaScript
CheckBoxDyalog checkbox widget with tristate support

Optionally tristate check-box


Variably tristate check-box

Dyalog
ChosenEnhanced HTML selects with search-box and improved multi-select

Pick fruits from a simple drop-down


Tube/Metro/Subway planner for multiple cities


Select one or more fruits or vegetables from a list which might be updated with a button-click

JavaScript
DataTableEnhanced searchable and reorderable HTML table

The simplest use case of a DataTable


Search the Dyalog, FinnAPL, and APL2 idiom lists


A DataTable enhanced with the "buttons"-Plugin


Simple Example slightly advanced with zebra-striping and highlighted search-terms


A DataTable with the a responsive layout


A DataTable with the "yadcf"-Filters enabled


DataTable showing an analysis about presendential endorsements of top 100 US Newspapers (yadcf, custom rendering)


Icon-Finder for FontAwesome-Icons

JavaScript
DatalistDyalog improved HTML5 datalist element

An auto-completeable drop-down

Dyalog
DirectoryBrowserDyalog
EditFieldDyalog text input field widget

Collect input and echo it on a button press


Simple mortgage calculation application


Enter first and last name in a FieldSet (reacts to each keystroke)

Dyalog
FieldsetSame as base HTML5 fieldset, but accepts the legend for the fieldset as an argument

Enter first and last name in a FieldSet (reacts to each keystroke)


Clear a form with a ResetButton


Use a SubmitButton to POST a form, rather than use an AJAX callback

Dyalog
FigureSame as base HTML5 figure, but with Caption and CaptionPos attributes

Figure with caption

Dyalog
FormSame as the base HTML5 form element, but sets the action and method attributes

Explain about Forms


Simple mortgage calculation application

Dyalog
GridGrid - like _.Table but with borders - accepts matrix of dataDyalog
Gyrocreate a gyroscopic listener (e.g. for use with mobile phones or tablets)

Simple accelerometer interaction (use it from a platform which responds to movement)

Dyalog
IconDyalog Icon widget

Icons from FontAwesome, Syncfusion, and Google


Advanced ways to use icons by combining/transforming them


Icon-Finder for FontAwesome-Icons

Dyalog
InputDyalog input widget

Text, number, password, and range Input elements


Date/time, email, URL, file, and submit Input elements


SVG turtle graphics


Input-control to handle file-uploads

Dyalog
InputFileDyalog input file widget

Input-control to handle file-uploads

Dyalog
InputGridDyalog Widget - produce a 2-column (or 2-row) grid of labels and inputs

Enter first, last name and birthdate


Various costumizations of grid-aligned inputs


Simple mortgage calculation application

Dyalog
InputSubmitDyalog input submit button widget

Date/time, email, URL, file, and submit Input elements

Dyalog
ListEnhanced HTML ul

Lists of fruits and clickable links


Nested (multi-level) lists

Dyalog
ListManagerDyalog ListManager widget using Syncfusion ListBoxes

Move fruits between lists with streamlined interface

Dyalog
MarkdownInsert rendered Markdown content (using MarkAPL from APL Team/Kai Jaeger)

Use markdown to generate HTML

Dyalog
OlEnhanced HTML ol

Lists of fruits and clickable links


Insert an ordered list of links based on an array of texts and links, and add callbacks on mouse movements

Dyalog
PanelPanel widget

Display information, warnings, errors or success-message


Demonstrates options for customization of Panels

Dyalog
RadioButtonGroupDyalog Radio Button Group widget

Create an entire group of radio buttons at once


Special options for RadioButtonGroup


John Conway's "Game of Life" (interactive)

Dyalog
RedirectDyalog
ResetButtonDyalog Reset Button widget

Clear a form with a ResetButton


Use a SubmitButton to POST a form, rather than use an AJAX callback

Dyalog
ScriptDyalog Script widget - embeds JavaScript in page

Insert inline JavaScript and make a button to run it


An example of what "dimple" can do


Insert reference to JavaScript from a file


Use external code to style and touch-enable uppercase-lowercase alphabet pairing game

Dyalog
SelectDyalog Enhanced HTML select

Pick fruits from a simple drop-down


Select one or more fruits from a list.


Insert a basic color picker with preset palettes

Dyalog
StackPanelDyalog control to emulate WPF StackPanel

Vertical and Horizontal "stacking" of content.


Nested StackPanels provide flexible layout control.


Classic Snakes and Ladders Game

Dyalog
StyleDyalog Style widget - makes for easier programatic setting of CSS styles

Color headings red using an internal style element

Dyalog
StyleSheetDyalog StyleSheet widget - creates a link to a stylesheet

Color headings red using an external style sheet


Vector graphics Tic Tac Toe game


Use external code to style and touch-enable uppercase-lowercase alphabet pairing game

Dyalog
SubmitButtonDyalog Submit Button widget

Use a SubmitButton to POST a form, rather than use an AJAX callback


Clear a form with a ResetButton

Dyalog
TableImproved html table - accepts matrix of data

Automatically display a matrix as a table


John Conway's "Game of Life" (interactive)


Simple version of the addictive "2048" sliding game


Display tabular data with a bit of styling


Text, number, password, and range Input elements


Vector graphics Tic Tac Toe game

Dyalog
TabsDyalog Tabs widget

Dyalog tabbed interface with four pseudo-language tabs


Nested custom themed tabs with complex titles

Dyalog
TextareaDyalog widget to enhance the HTML textarea elementDyalog
TimerDyalog JavaScript Timer

Signal timed events to the server


Interactive control of multiple timers


John Conway's "Game of Life" (interactive)

Dyalog
UlEnhanced HTML ul

Lists of fruits and clickable links


Insert an unordered list of links based on an array of texts and links, and add callbacks on mouse movements

Dyalog
aHyperlink

Insert a hyperlink


Set document base URI for relative links


Mark the main navigation controls

Base HTML
abbrAbbreviation

Display definition when hovering over an abbreviation

Base HTML
addressContact information

Add contact information

Base HTML
areaImage map region

Image (in this case a map) with clickable areas

Base HTML
articleIndependent section

Mark an independent section

Base HTML
asideAuxiliary section

Insert a sidebar with related information

Base HTML
audioAudio stream

Embed an audio stream


Specify a list of alternate audio sources

Base HTML
bBold text

Make text bold

Base HTML
baseDocument base URI

Set document base URI for relative links

Base HTML
bdiIsolates a part of text that might be formatted in a different direction from other text outside it

Isolate text that should be displayed with a reading order that is different from the surrounding text

Base HTML
bdoBi-directional text override

Override the inherent directionality of text, i.e. the left-to-right or right-to-left reading order

Base HTML
blockquoteLong quotation

Insert a long quotation of text

Base HTML
bodyMain contentBase HTML
brLine break

Insert a line break

Base HTML
buttonPush button control

Insert a push button

Base HTML
canvasBitmap canvas

Bitmap image canvas and draw a picture using JavaScript

Base HTML
captionTable caption

Insert an interactive table with column-wise formatting

Base HTML
circleDefines a circle

Use SVG to draw

Base HTML
citeCitation

Inform where a text was quoted from

Base HTML
codeCode fragment

Embed a code fragment

Base HTML
colTable column

Insert an interactive table with column-wise formatting

Base HTML
colgroupTable column group

Insert an interactive table with column-wise formatting

Base HTML
d3JavaScript
datalistPredefined control values

Add a predefined list of options for later use in a control

Base HTML
ddDescription description

Create a list of descriptions for several terms

Base HTML
delDeletion

Mark deleted text

Base HTML
detailsAdditional information

Add a summary with revealable details


Make an expandable menu

Base HTML
dfnDefining instance of a term

Reveal the definition of a term (here a function name) when the mouse hovers over the term

Base HTML
dialogConversationBase HTML
dimple

Dimple data chart


Dimple line plot chart


Dimple line plot chart

JavaScript
divGeneric division

Add interactivity to a division


An example of what "dimple" can do


Create a context menu


Dimple line plot chart

Base HTML
dlDescription list

Create a list of descriptions for several terms

Base HTML
dtDescription term

Create a list of descriptions for several terms

Base HTML
ejAccordionSyncfusion Accordion widget

Syncfusion collapsing interface with four pseudo-language sections


Accordion which calls back to the server on open/close

Syncfusion
ejAutocompleteSyncfusion
ejBarcodeSyncfusion Barcode widget

Show information as barcodes

Syncfusion
ejBulletGraphSyncfusion Bullet Graph widget

Ruler-style indicator of two related values


Customized ruler-style indicator

Syncfusion
ejButtonSyncfusion Button widget

Illustrates a simple push-button


Toggle availablility of one button with another

Syncfusion
ejCaptchaSyncfusion
ejChartSyncfusion Chart widget

Simple pie chart of workspace object sizes

Syncfusion
ejCheckBoxSyncfusion Checkbox widget

Checkbox with callback


Callback interconnect two checkboxes

Syncfusion
ejCircularGaugeSyncfusion Circular Gauge widget

Speedometer style display


Formatted circular indicator gauge with multiple pointers

Syncfusion
ejColorPickerSyncfusion ColorPicker widget

Insert a basic color picker with preset palettes

Syncfusion
ejCurrencyTextboxSyncfusion
ejDatePickerSyncfusion DatePicker widget

Pick a date in yyyy/MM/dd format


Insert mutually interdependant calendars

Syncfusion
ejDateTimePickerSyncfusion DateTimePicker widget

Insert an interface to select date and time


Let user select dates/times and display the difference

Syncfusion
ejDiagramSyncfusion
ejDialogSyncfusion Digital Gauge widget

Simple dialog box


Interdependant multi-modal dialog boxes

Syncfusion
ejDigitalGaugeSyncfusion Digital Gauge widget

Digital (LCD-style) display


Various digital segment (LCD style) displays

Syncfusion
ejDraggableSyncfusion Draggable widget

Make an element draggable

Syncfusion
ejDropDownListSyncfusion DropDownList widgetSyncfusion
ejDroppableSyncfusion Droppable widget

Make elements accept draggable content

Syncfusion
ejGanttSyncfusion
ejGrid

Read-only grid with formatting and alignment


An editable grid

Syncfusion
ejLinearGaugeSyncfusion Linear Gauge widget

Linear gauge (thermometre style)


Linear gauge with custom scale (Fahrenheit thermometre)

Syncfusion
ejListBoxSyncfusion ListBox widget

Listbox of options for selection


Listbox of reorderable options for selection

Syncfusion
ejLocaleSyncfusion
ejMapSyncfusion
ejMaskEditSyncfusion
ejMenuSyncfusion Menu widget

Horizontal (application or navigation ) menu bar with background image


Build a horizontal menu (bar) from external data


Demonstrate the Syncfusion ejMenu widget with databinding

Syncfusion
ejNavigationDrawerSyncfusion
ejNumericTextboxSyncfusion
ejPercentageTextboxSyncfusion
ejProgressBarSyncfusion
ejRTESyncfusion Rich-Text Editor

Open Rich-Text Editor and retrieve document

Syncfusion
ejRadioButtonSyncfusion
ejRangeNavigatorSyncfusion
ejRatingSyncfusion Rating widget

Rating

Syncfusion
ejResizableSyncfusion
ejRotatorSyncfusion
ejScheduleSyncfusion
ejScrollerSyncfusion
ejSliderSyncfusion Slider widget

Single and Ranged Sliders

Syncfusion
ejSplitButtonSyncfusion
ejSplitterSyncfusion
ejSpreadsheetSyncfusion
ejSymbolPaletteSyncfusion
ejTabSyncfusion Tab widget

Syncfusion tabbed interface with four pseudo-language tabs


Tabbed interface with tabs on the left

Syncfusion
ejTagCloudSyncfusion TagCloud widget

Display a tag cloud of object sizes in MiServer's workspace

Syncfusion
ejTextBox

Validate numbers, currency and percentages

Syncfusion
ejTileSyncfusion
ejTimePickerSyncfusion
ejToggleButtonSyncfusion ToggleButton widget

Button with two states

Syncfusion
ejToolbarSyncfusion
ejTreeGridSyncfusion TreeGrid widget Formats data in a grid with tree-based collapsibility

View and collapse a structured spreadsheet

Syncfusion
ejTreeMapSyncfusion
ejTreeViewSyncfusion TreeView widget

Build a simple tree with a node selection callback


TreeView with checkable nodes and ability to add and delete nodes

Syncfusion
ejUploadboxSyncfusion
ejWaitingPopupSyncfusion WaitingPopup widget

Insert the three basic forms of toggleable "please wait" indicator


Insert styled toggleable pop-up with arbitrary web content

Syncfusion
ellipseDefines an ellipse

Use SVG to draw

Base HTML
emStress emphasis

Emphasize text

Base HTML
embedEmbedded application

Embed an external application, i.e. a plug-in

Base HTML
fieldsetForm control group

Group form controls


Arrange many interactive elements together

Base HTML
figcaptionDefines a caption for a figure element

Insert a figure with a caption

Base HTML
figureFigure with caption

Insert a figure with a caption

Base HTML
footerSection footer

Section footer following run of paragraphs

Base HTML
formForm

Arrange many interactive elements together


Include text in controls' clickable area


Insert an expression's result value


Allow clicking somewhere else to interact with controls

Base HTML
h1Heading level 1

Insert all possible levels of header

Base HTML
h2Heading level 2

Insert all possible levels of header

Base HTML
h3Heading level 3

Insert all possible levels of header

Base HTML
h4Heading level 4

Insert all possible levels of header

Base HTML
h5Heading level 5

Insert all possible levels of header

Base HTML
h6Heading level 6

Insert all possible levels of header

Base HTML
headDocument head

Add a class during callback


Remove a class during callback


Interchange classes during callback


Toggle a class during callback


Toggle, show, and hide an element during callback

Base HTML
headerSection header

Insert a header with introductory content

Base HTML
hrSeparator

Draw a horizontal dividing line

Base HTML
htmlDocument rootBase HTML
iItalic text

Italicize text

Base HTML
iframeInline frame

Embed another webpage

Base HTML
imgImage

Insert a figure with a caption


Image (in this case a map) with clickable areas


Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it

Base HTML
inputForm control

Add a predefined list of options for later use in a control


Arrange many interactive elements together


Insert an expression's result value

Base HTML
insInsertion

Mark inserted text

Base HTML
jBoxjBox widget

jBox provides several style of popups


simple Confirmation-Dialogs with limited interaction


Advanced jBox-Tooltips


Using jBox in callback-functions to display notices or modal popups


jBox-confirmations triggered from APL-Callback (tight integration of APL and JS-Callbacks)


Confirmation Dialog on PageLoad


Image-galleries with jBox

JavaScript
jqAccordionjQueryUI Accordion widget

jQuery UI collapsing interface with four pseudo-language sections

jQueryUI
jqAddClassjQueryUI AddClass effect

Add a class during callback


Use external code to style and touch-enable uppercase-lowercase alphabet pairing game

jQueryUI
jqAutocompletejQueryUI
jqButtonjQueryUI Sortable widget/interactionjQueryUI
jqButtonsetjQueryUI Sortable widget/interaction

Grouped sets of buttons

jQueryUI
jqDatePickerjQueryUI
jqDialogjQueryUI
jqDraggablejQueryUI Draggable interaction

Take a div for a drag


Use external code to style and touch-enable uppercase-lowercase alphabet pairing game

jQueryUI
jqDroppablejQueryUI Droppable interaction

Make elements accept draggable content


Use external code to style and touch-enable uppercase-lowercase alphabet pairing game

jQueryUI
jqHidejQueryUI Hide effect

Toggle, show, and hide an element during callback

jQueryUI
jqMenujQueryUI Menu widget

Insert a vertical (drop-down or context) menu


Build a vertical (drop-down) menu from external data

jQueryUI
jqProgressbarjQueryUI
jqRemoveClassjQueryUI RemoveClass effect

Remove a class during callback

jQueryUI
jqResizablejQueryUI Resizable interaction

Resize a Div

jQueryUI
jqSelectablejQueryUI
jqShowjQueryUI Show effect

Toggle, show, and hide an element during callback

jQueryUI
jqSliderjQueryUI Slider widget

Single and Ranged Sliders


Using one slider to set the bounds of another

jQueryUI
jqSortablejQueryUI Sortable widget/interaction

List of items that can to be dragged to rearrange in a new order


Grid of reorderable boxes

jQueryUI
jqSpinnerjQueryUI Spinner widget

Select and preselect values with spinners

jQueryUI
jqSwitchClassjQueryUI SwitchClass effect

Interchange classes during callback

jQueryUI
jqTabsjQueryUI Tabs widget

jQuery UI tabbed interface with four pseudo-language tabs

jQueryUI
jqTogglejQueryUI Toggle effect

Toggle, show, and hide an element during callback

jQueryUI
jqToggleClassjQueryUI ToggleClass effect

Toggle a class during callback

jQueryUI
jqTooltipjQueryUI
kbdUser input

Indicate user input

Base HTML
keygenDefines a key-pair generator field (for forms)

Arrange many interactive elements together

Base HTML
labelForm control label

Include text in controls' clickable area


Allow clicking somewhere else to interact with controls


Enter first and last name in a FieldSet (reacts to each keystroke)


Collect input and echo it on a button press


Arrange many interactive elements together

Base HTML
legendExplanatory title or caption

Group form controls


Arrange many interactive elements together

Base HTML
liList item

Add ordered and unordered lists


Add nested lists of varying types

Base HTML
lineDefines a line segment that starts at one point and ends at another

SVG turtle graphics


Use SVG to draw

Base HTML
linkLink to resources

Include an external resource; here an icon


Embed raw image data in the page itself

Base HTML
mainSpecifies the main content of a documentBase HTML
mapClient-side image map

Image (in this case a map) with clickable areas

Base HTML
markMarked or highlighted text

Highlight text

Base HTML
menuCommand menu

Create a context menu

Base HTML
menuitemDefines a command/menu item that the user can invoke from a popup menu

Create a context menu

Base HTML
metaMetadataBase HTML
meterScalar measurement

Display a gauge for measurement within a given range

Base HTML
navNavigation

Mark the main navigation controls

Base HTML
noscriptNo-script support

Add alternative content for when JavaScript is turned off or not supported

Base HTML
objectGeneric embedded resource

Embed a PDF file


Define the parameters for a en embedded object

Base HTML
olOrdered list

Add ordered and unordered lists


Add nested lists of varying types

Base HTML
optgroupOption group

Arrange many interactive elements together

Base HTML
optionSelection choice

Add a predefined list of options for later use in a control


Arrange many interactive elements together

Base HTML
outputOutput control

Insert an expression's result value

Base HTML
pParagraph

Three simple paragraphs

Base HTML
paramPlugin parameter

Define the parameters for a en embedded object

Base HTML
pathDefines a generic shape

Use SVG to draw

Base HTML
polygonDefines a closed shape consisting of a set of connected straight line segments

Use SVG to draw

Base HTML
polylineDefines a set of connected straight line segments

Use SVG to draw

Base HTML
prePreformatted text

Block of text preserving linebreaks and multiple spaces

Base HTML
progressProgress of a task

Graphically display time using progress bars

Base HTML
qInline quotation

Mark text as a quotation inside the containing text

Base HTML
rectDefines a rectangle

Use SVG to draw

Base HTML
rpRuby parenthesis

Add nested ruby text and an alternative for non-supporting browsers

Base HTML
rtRuby text

Add pronunciation and explanation as ruby text (5.5pt) over the line


Add nested ruby text and an alternative for non-supporting browsers

Base HTML
rubyRuby annotation

Add pronunciation and explanation as ruby text (5.5pt) over the line


Add nested ruby text and an alternative for non-supporting browsers

Base HTML
sDefines text that is no longer correct

Strike-through text

Base HTML
sampSample output

Indicate computer output

Base HTML
scriptLinked or embedded script

Embed JavaScript


Bitmap image canvas and draw a picture using JavaScript


Add alternative content for when JavaScript is turned off or not supported


Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it

Base HTML
sectionDocument section

Define a section in a document

Base HTML
selectSelection control

Arrange many interactive elements together

Base HTML
smallSmall print

Make text smaller

Base HTML
sourceMedia resource

Specify a list of alternate audio sources


Specify a list of alternate video sources

Base HTML
spanGeneric inline container

Delimit inline content for later manipulation


Children's educative application for Yiddish alphabet and keyboard

Base HTML
strongStrong importance

Mark important text

Base HTML
styleEmbedded stylesheet

Embed a style sheet


Classic Snakes and Ladders Game


Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it

Base HTML
subSubscript

Make text subscript

Base HTML
summaryDefines a visible heading for a details element

Add a summary with revealable details


Make an expandable menu

Base HTML
supSuperscript

Make text superscript

Base HTML
svgDefines a container for SVG graphics

Use SVG to draw


Classic Snakes and Ladders Game


Vector graphics Tic Tac Toe game


SVG turtle graphics

Base HTML
tableTable

Manually display a matrix as a table


Insert an interactive table with column-wise formatting

Base HTML
tbodyTable body

Insert an interactive table with column-wise formatting

Base HTML
tdTable cell

Manually display a matrix as a table


Insert an interactive table with column-wise formatting

Base HTML
textareaMulti-line text control

Insert a multi-line text control


Arrange many interactive elements together

Base HTML
tfootTable footer

Insert an interactive table with column-wise formatting

Base HTML
thTable header cell

Insert an interactive table with column-wise formatting

Base HTML
theadTable head

Insert an interactive table with column-wise formatting

Base HTML
timeDate and/or time

Indicate a time

Base HTML
titleDocument title

Set the document title in the browser's tab or title bar

Base HTML
trTable row

Manually display a matrix as a table


Insert an interactive table with column-wise formatting

Base HTML
trackDefines text tracks for media elements

Specify subtitles (closed captions)

Base HTML
uDefines text that should be stylistically different from normal text

Underline text

Base HTML
ulUnordered list

Add ordered and unordered lists


Add nested lists of varying types

Base HTML
varVariable

Indicate a variable

Base HTML
videoVideo or movie

Embed a video


Specify a list of alternate video sources


Specify subtitles (closed captions)

Base HTML
wbrDefines a possible line-break

Indicate where to break a work if it must be broken

Base HTML
Controls used on this page: Dyalog: AListTableTabs JavaScript: DataTable Base HTML: divp