What is Sexel

Sexel is a webcomponent framework that makes building dynamic distributed web applications easy. Using Web Components to build interfaces, Sexel combines block like construction with a distributed Finite State Machine to model all application state transitions as messages.

By building pages out of Sexel components (as seen on the left) it is easy to put together polished user interfaces without having to code html, css, and javascript. Using Sexel's finite state machine to model the interactions between the components, provides an easy to reason about approach to managing application state. And using mesgd messaging, encryption, and authentication natively, you can produce secure distributed application out of the box.

What Components are Available?

The list of supported components is changing on a regular basis. And writing new components is easy enough that even ChatGPT can write them for you! The current list available on this page are:

Getting Started

Sexel uses HTML5 import links to include components on a page. As long as you include

<script type="module" src="sexel.mjs"></script> <link rel="import" href="components/button.html" />

It will make the component on the page. You can then create instances in the page using the custom HTML tags registered by each component. For example, we can create two buttons using the following HTML:

<sexel-button id="testButton" label="Cancel" action="cancel"></sexel-button> <sexel-button id="testButton" label="OK" action="ok"></sexel-button>

All interactive components send messages to the Finite State Machine (fsm) which models all of the state changes in the application. You can register your own even handlers with the handler function as follows:

handler({ cancel: (e) => { alert("Cancel Pressed") }, ok: (e) => { alert("OK Pressed") }, })

To send a message to the handler it is done wiht the _ function which takes arbitrary arguments. Ususally, the first element passed is the sending component, but it doesn't need to be.

// do a mouse handler for my custom okButton self.querySelector('#okButton').addEventListener( 'onmousedown', (e) => { _("ok", e) })

The above code sample could invoke the handler's 'ok' state, and the 'OK Pressed' alert would be shown as a result. These messages can also be subscribed to by functions using the hub. A common pattern is for websocket connections to send messages directly to the FSM and the components are then updated according to the centralized logic.

Some of the components use external 3rd party Javascript Libraries. If you want to use the charting components or the code component you should include the following in your webpage:

If you would like to get the latest source code of the framework it can be found at: https://github.com/cthulhuology/sexel

Component Documentation

The following entires show the code of the components to the right

address

 <sexel-address id="foo" name="bob" email="bob@example.com" address="742 Evergreen Tr. 12345 Springfield Tx USA" > </sexel-address>

The address component currently takes name, email, and address.

audio

 <sexel-audio src="https://www.w3schools.com/html/horse.ogg" controls="false"> </sexel-audio>

The audio component has a src url and a controls flag. The component comes with a Play and Stop button.

avatar

 <sexel-avatar img="images/avatar.png" name="Dave Goehrig" username="cthulhuology" email="dave@dloh.org" jwk="{publicKey: 'abcd1234'}"> </sexel-avatar>

The avatar component shows the user image, but contains user meta-data.

bar chart

 <sexel-chart id="barchart" type="bar" blurb='{ "text": "Tokens Per Second", "display": true, "position": "top" }' labels='["12:00","12:10","12:20","12:30","12:40","12:50"]' legend='{ display: true, position: "bottom" }' data='[{ "label": "input", "data": [ 100, 80, 34, 22, 200, 121 ], "backgroundColor": "rgb(100,142,174)" },{ "label": "output", "data": [ 200, 73, 53, 35, 100, 38 ], "backgroundColor": "rgb(180,1c2,1f4)" }]' > </sexel-chart>

The chart widget can be used to generate bar charts. See Chart.js for data docs.

breadcrumb

 <sexel-breadcrumb items="Home,Products,Electronics,Smartphones" separator=">"> </sexel-breadcrumb>

The breadcrumb component tracks a path heirarchy it takes an items list and a separator character.

button

 <sexel-button id="testButton" label="PRESS ME" action="displayDialog"></sexel-button>

The button component has a label and an action. The action invokes the named fsm action when clicked. Image buttons coming soon.

canvas

 <sexel-canvas id="myCanvas" width="500" height="400" script=' blue setFillStyle 50 50 150 100 fillRect beginPath 300 300 moveTo 200 300 lineTo 300 200 lineTo 300 300 closePath gray setStrokeStyle stroke '> </sexel-canvas>

The canvas component wraps the HTML5 canvas API with a Postscript / Turtle style drawing API. Currently it supports:

card

 <sexel-card header="Custom Cards" width="400" height="300"> <p>This card can contain any HTML content.</p> <sexel-button label="Click Me" action="displayDialog" id="cardButton"></sexel-button> </sexel-card>

The card component is used to contain other components with a bounding box and a header.

carousel

 <sexel-carousel delay="5000"> <div class="carousel-slide"> <img src="images/image1.png" alt="Slide 1"> <div> <div class="carousel-slide"> <img src="images/image2.png" alt="Slide 2"> <div> <div class="carousel-slide"> <img src="images/image3.png" alt="Slide 3"> <div> <sexel-carousel>

The carousel component takes a set of child elements and will cycle through them based on the specified delay.

chat

 <sexel-chat to="room123" from="user456"></sexel-chat>

The chat component is an experimental websocket based chat window, with file upload, unicode selector, and download link. This widget is a work in progress and likely to change. Currently the template is not configurable enough.

clock

 <sexel-clock><sexel-clock> <sexel-clock datestamp="2023-12-25T10:30:00"><sexel-clock>

The clock component displays the current date and time and updates as time progresses. The component also has an optional dateStamp attribute which will display a fixed date and time. Both use toLocaleString under the hood to use the user's locale specific format, defaulting to en-US.

code

 <sexel-code language="javascript"> // This is a sample JavaScript code function sayHello() { console.log("Hello, world!"); } </sexel-code>

The code component displays source code using Highlight.js for syntax highlighting.

color

 <sexel-color action="setColor" height="300" width="300" ></sexel-color>

A color picker component that can trigger the given action when the color is selected. NB: uses HSV to compute the RGB values.

data

 <sexel-data header='["Year", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]' data='[ ["2023", 12, 14, 13, 15, 14, 13, 12], ["2022", 11, 13, 12, 14, 13, 12, 11], ["2021", 10, 12, 11, 13, 12, 11, 10], ["2020", 9, 11, 10, 12, 11, 10, 9], ["2019", 8, 10, 9, 11, 10, 9, 8] ]'> </sexel-data>

The data component displays tabular data as a table.

date

 <sexel-date<>/sexel-date> <sexel-date datestamp="2023-12-25"<>/sexel-date>

The date component displays a date picker and the picked date. It has an optional datestamp attribute to set the date to other than today's.

dialog

 <sexel-dialog id="dialog" okLabel="Confirm" cancelLabel="Dismiss" label="Confirmation Required" message="Are you sure you want to proceed with this action?"> </sexel-dialog>

The dialog component is meant for popup dialogs that have an ok and cancel labels, and each of the buttons can have an associated okAction or cancelAction to specify which FSM state to invoke. The default behavior for each is just to hide the dialog.

footer

 <sexel-footer id="footer"></sexel-footer>

The footer component show the footer as seen on this page. You can change the text blurb by setting that optional attribute

form

 <sexel-form action="submitForm" fields='{ "Name": "text", "Email": "email", "Password": "password", "Age": "number" }'> </sexel-form>

The form component generates a form element from a fields object. It supports different input types such as:

The form also takes an action to invoke in the FSM with the submitted values.

line chart

 <sexel-chart id="linechart" labels='["Mon", "Tue", "Wed", "Thu", "Fri", "Sat","Sun"]' data='[{ "data" : [15, 25, 35, 45, 55, 65,84], "backgroundColor": ["red","orange","yellow","green","blue","indigo","violet"] }]' type="line"> </sexel-chart>

The chart component can also be used to create line charts. Like with bar charts, the blurb (title), labels, data, and legend take objects following the Chart.js documentation.

list

 <sexel-list data='["Item 1", "Item 2", "Item 3", "Item 4"]' type="unordered"> </sexel-list> <sexel-list data='[ {"Category 1": ["Item 1.1", "Item 1.2"]}, {"Category 2": ["Item 2.1", {"Subcategory 2.2": ["Item 2.2.1", "Item 2.2.2"]}]}, "Standalone Item" ]' type="unordered"> </sexel-list> <sexel-list data='[ {"Fruit": ["Apple", "Banana"]}, {"Vegetables": ["Carrot", "Broccoli", {"Leafy": ["Lettuce", "Spinach"]}]} ]' decorators='["★", "►", "✿"]' type="unordered"> </sexel-list>

The list component supports multi-dimensional data driven lists from JSON objects. It aslo supports both ordered and unordered lists along with custom decorators for each list level.

login / signup

 <sexel-auth id="login" label="Sign Up"></sexel-auth>

The auth component is a form for handling user logins, it invokes the "auth" action of the FSM by default.

menu

 <sexel-menu orientation="horizontal" items="Home, About, Services, Contact"> </sexel-menu> <sexel-menu orientation="vertical" items="Dashboard, Profile, Settings, Logout"> </sexel-menu>

The menu component produces both horizontal and vertical menus based on the orientation attribute. Each takes a list of items and creates a bunch of buttons. Each button triggers the FSM action of the same name as the menu item.

notification

 <sexel-notification id="notification" title="Error" message="An error occurred. Please try again." type="error" dismissable="true"> </sexel-notification>

The notification component displays a color coded message based on the type attribute. It supports they typical notifation types: error, warning, info, success.

pie chart

 <sexel-chart id="piechart" labels='[ "male", "female" ]' data='[{ "data": [ 30, 70 ], "backgroundColor": [ "rgb(100,142,174)", "rgb(255,212,244)" ] }]' type="pie"> </sexel-chart>

The chart component can also be used to create pie charts. Like with bar charts, the blurb (title), labels, data, and legend take objects following the Chart.js documentation.

progress bar

 <sexel-progress id="progress" value="30" max="100" label="30% Complete"> </sexel-progress>

The progress bar component displays a value and a label from zero to max.

rating

 <sexel-rating max="5" value="3"></sexel-rating> <sexel-rating max="7" value="4" char="♥"></sexel-rating>

The rating component provides a basic 5 star rating setup, but also has the ability to change the size and specify an alternative character for display. If the action attribute is specified with will invoke the FSM action with the new rating.

search

 <sexel-search placeholder="Enter your query" action="performSearch"></sexel-search>

The search component is just a search box with a FSM action.

slider

 <sexel-slider min="0" max="100" value="75" label="Volume"></sexel-slider> <sexel-slider min="0" max="10" value="5" label="Brightness"></sexel-slider>

The slider component divides the bar between min and max steps and a default value. If you attach an action to it, the FMS action will be invoked on value chagne. You can specify a label and an initial value as well.

spinner

 <sexel-spinner shown="true"></sexel-spinner>

This is a spinner component. The shown attribute controls visibility.

tabs

 <sexel-tabs tabs='[ { "label": "Tab 1", "color": "#e7f3fe", "content": "

Content for Tab 1

" }, { "label": "Tab 2", "color": "#e6ffed", "content": "<sexel-button label=\"Click Me\" action=\"Home\"></sexel-button>" }, { "label": "Tab 3", "color": "#fff3cd", "content": "<img src=\"images/sexel.png\" width=64 height=64>" } ]'> </sexel-tabs>

The tabs component is a sort of modal diaglog box that is data driven. The content of the tab is typically provided programmatically, and encoded as escaped HTML. Changing tabs doesn't currently have an action associated, but may in the future.

upload

 <sexel-upload id="fileUploader" label="Select Files" multiple="true" accept=".png,.jpg,.jpeg,.pdf"> </sexel-upload>

The upload component allows you to specify a list of file extensions you'll accept, and if you allow multiple files or just one. Typically, one needs another form to process the actual upload.

video

 <sexel-video src="https://www.w3schools.com/html/mov_bbb.mp4" controls="true"></sexel-video>

The video component plays basic video playback, you can enable or disable native controls.

License

MIT License 

Copyright (c) 2025 David J. Goehrig <dave@dloh.org>

Permission is hereby granted, free of charge, to any person obtaining a copy 
of this software and associated documentation files (the "Software"), to deal 
in the Software without restriction, including without limitation the rights 
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
copies of the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions: 

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software. 

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
SOFTWARE.

Address

Audio

Avatar

Bar Chart

Breadcrumb

Button

Canvas

Card

This card can contain any HTML content.

Carousel
Slide 1
Slide 2
Slide 3

Chat

Clock

Code

 // This is a sample JavaScript code function sayHello() { console.log("Hello, world!"); }

Color

Data

Date

Form

Line Chart

List

Login / Signup

Menus

Notification

Pie Chart

Progress Bar

Rating

Search

Slider

Spinner

Tabs

Upload

Video