Tutorials
Introduction
- Why Kingly
- Get started
Counter
- First steps
Password meter
- Password meter modeling
- Machine implementation
- Interface implementation
- Implementation with the yEd graph editor
- Compiling the machine
- What we learned
Chess game
- Two-player chess game
- Chess game - adding features
- Chess game - more features
RealWorld clone
- RealWorld app
- Home route
- Sign-up route
- Sign-in route
- Editor route
- Settings route
- User profile route
- Article route
- Refactoring
- Lessons learned
Get started
This section describes how to install Kingly. If you encounter any issues, let us know!
You can alternatively leave the installation for later and start with the tutorials. Most of the tutorials can be run and reviewed in code playgrounds, without your having to install the library on your machine. For a more thorough study, we however recommend you to install the library.
Once you are done installing, you can:
- go the first tutorial. Tutorials are presented by order of complexity of the behavior that is being modeled and implemented.
- review the map of documentation site for extra information (e.g., concepts presentation, API reference, and more)
Install
Kingly can be installed from npm. The Kingly package provides an ESM build and an UMD build.
NPM
$ npm install kinglyGlobal <script> Include
It is possible to directly include the library in a script tag in the browser. Kingly will then be registered as a global variable.
For prototyping or learning purposes, you can use the latest version with:
<script src="https://cdn.jsdelivr.net/npm/kingly"></script>For production, we recommend linking to a specific version number:
<script src="https://cdn.jsdelivr.net/npm/kingly@0.28.0/dist/kingly.umd.min.js"></script>If you are using native ES Modules, there is also an ES Modules compatible build:
<script type="module">
import {createStateMachine, makeWebComponentFromFsm, decorateWithEntryActions, traceFSM} from
'https://cdn.jsdelivr.net/npm/kingly@0.19.0/dist/kingly.es.min.js'
</script>AMD
All UMD builds can be used directly as an AMD module.
Browser compatibility
Kingly’s API exposes a makeWebComponentFromFSM function requiring custom-elements V1 support, which is provided by most browsers.
Release Notes
Latest stable version: 0.29
See release notes on GitHub.