![](https://cdn.myportfolio.com/3f974417-64ed-4e5a-bddc-61add234554a/ceacb51d-9c11-4ff9-b0bf-c9624215f72d_rw_1920.png?h=a0052ace6c885bd433359042e24f26f1)
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/3f974417-64ed-4e5a-bddc-61add234554a/c4d377d6-1aa4-4824-91b5-e5c0854a43d6_rw_1920.png?h=9b0252edc7693022dbd54d77fc0c06c5)
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/3f974417-64ed-4e5a-bddc-61add234554a/b55aabb7-1a7d-4908-ae0d-9cc0859a62f7_rw_1920.gif?h=d4be4acca84372c3c8dd3f01b2e85842)
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/3f974417-64ed-4e5a-bddc-61add234554a/caf087d8-8f7d-4842-8c71-400d026cf08f_rw_1920.gif?h=0e8e2fa197da640db2ebca6a67052bd0)
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/3f974417-64ed-4e5a-bddc-61add234554a/b73d9cfd-8e51-4f23-95c5-88090fa154c7_rw_1920.png?h=ae757921c490ece850c7948d5be1b856)
![](https://cdn.myportfolio.com/3f974417-64ed-4e5a-bddc-61add234554a/6b48443f-4d2c-4d8e-9261-d4ff58fe9741_rw_1920.png?h=812e3881283f6c9625ad4bb52219f005)
![](https://cdn.myportfolio.com/3f974417-64ed-4e5a-bddc-61add234554a/7a048772-67c8-466d-a873-1d6f80616f29_rw_1920.png?h=eb3706d2f9db2cc5b7f81f6a6e285a92)
Thank you for watching!
Chceck out the florence-state-machine library on GitHub:
![](https://cdn.myportfolio.com/3f974417-64ed-4e5a-bddc-61add234554a/d186c40a-0844-4543-99ee-97c3ed4cd223_rw_1920.png?h=9fb680b29bd9816a914b5c0890e987bb)
Sources:
florence-state-machine description via https://github.com/mieszkosabo/florence-state-machine
What is a state machine? via www.itemis.com