![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/8ddfbd57-46c6-4baa-baaf-063c60200335_rw_1920.png?h=ca8e0f68b2153e0017e55947dd6a49b7)
florence state machine
An ergonomic library for using type-safe state machines in React.
This library was designed to be a sweet spot between sophisticated, and sometimes even overwhelming solutions such as XState and a often too simplistic ones such as React's useReducer.
Florence state machine is not a global state manager, but a lightweight tool to handle complex UI logic in a type-safe and declarative style.
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/894f6bb9-4539-437b-b6c6-aae2910ea808_rw_1920.png?h=38ec607bf67dd09b39f5fcf33e9310cb)
What is a state machine?
A state machine is a behavior model. It consists of a finite number of states and is therefore also called finite-state machine (FSM). Based on the current state and a given input the machine performs state transitions and produces outputs.
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/2eaba9f6-e1c3-441b-9135-4074cd9fcd4f_rw_1920.gif?h=d550ddfbe8088477e698bb6111295ec3)
The logo
The icon resembles a distinctive element of a state machine - the moment of switch to the next state. Its square form is suited to fit in line with logos from the same category such as TypeScript and JavaScript.
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/fe489058-905d-4401-b3ba-51ce7769c125_rw_1920.gif?h=e90ef5829c14e2a6afc4d7317283356f)
Brand identity
The main goal of the brand identity is to deliver a message of a tech-savvy, intuitive coding solution for IT developers. Vibrant, fresh colours as well as an uniform-weight modern sans-serif typeface make the brand distinct and memorable.
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/4bcca907-8017-4863-ba60-46f93df96cf3_rw_1920.png?h=00a8c051a9046b17e287476f64144797)
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/570befa3-16f6-47a0-bc4c-1ed28aa8d3f8_rw_1920.png?h=295a054eec1800f0a95ad9487b6984c0)
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/a0ecc36c-2c9b-4ce6-8dbe-0a62741a8a58_rw_1920.png?h=4d0d865c0be9a0d03feefbffb521ee26)
Thank you for watching!
Chceck out the florence-state-machine library on GitHub:
![](https://cdn.myportfolio.com/e6025b6c-ca54-454b-a5ca-4dac99c60ab1/5f76d3c8-d555-44e7-9390-504c65bfb26b_rw_1920.png?h=a62254080bb9ade5929fdb75bb07c88d)
Sources:
florence-state-machine description via https://github.com/mieszkosabo/florence-state-machine
What is a state machine? via www.itemis.com