WSphynxJS, a Javascript and HTML library for building powerful interfaces.

Get started

A simple syntax

WSphynxJS uses a simple syntax made to be easy to use. You can declare a div using the tag wsdiv.

<wsdiv> Veni vidi vici. </wsdiv> <wsdiv> Ad gloriam. </wsdiv>
Veni vidi vici. Ad gloriam.

A very simple syntax

In fact, you can declare any HTML element by adding ws at the beginning of the name tag.

<wsb>This text is bold. </wsb> <wsi>This text is italic. </wsi> <wsp>This is</wsp> <wssub> subscript</wssub> <wsp> and </wsp> <wssup>superscript</wssup> <wsp>.</wsp> <wsbutton>This is a button.</wsbutton>
This text is bold. This text is italic. This is subscript and superscript.

An interface for javascript

WSphynxJS allows you to execute a script for a specific div. To add a script, you have to place a <wsscript> tag inside a div. You can access to div's methods through built-in element object.

<wsdiv> Ad honorem <wsscript> element.changeTextContent ("Ad hominem."); </wsscript> </wsdiv>
Ad hominem.

A powerful event system

You can insert an event listener inside a div to listen to its events. To add an event, you have to write <ws + on + EventName>. Then, it is possible to write a script in the event tag to interact with your web page.

<wsdiv wsid="test"> Hello <wsonmousedown> element.textContent = "Clic"; </wsonmousedown> <wsonmouseup> element.textContent = "Up"; </wsonmouseup> </wsdiv>
Hello

An application

Using the event system, we can build a small reactive form. The parent variable refers to the parent of the input (here the first div).

<wsdiv> <wsinput type="text"> <wsoninput> parent.changeTextContent (element.value); </wsoninput> </wsinput> </wsdiv>
Get started
Powered by SphynxTech Copyright 2019 SphynxTech
See our StackOverflow account.
Contact us: sphynxtech@outlook.com