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:

• address
• audio
• avatar
• bar chart
• breadcrumb
• button
• card
• carousel
• chat
• clock
• code
• data table
• date
• dialog
• footer
• form
• grid
• header
• line chart
• list
• login / signup
• menu
• notification
• pie chart
• progress bar
• rating
• search
• slider
• spinner
• tabs
• upload
• video

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") }, })

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:

• Chart.js
• Highlight.js

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

Coming Soon to a web page near you...

License

MIT License 

Copyright (c) 2024 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

Card

This card can contain any HTML content.

Carousel

Chat

Clock

Code

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

Data

Date

Form

Line Chart

List

Login / Signup

Menus

Notification

Pie Chart

Progress Bar

Rating

Search

Slider

Spinner

Tabs

Upload

Video