[{"_1":2,"_838":-5,"_839":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":6,"_7":6,"_8":9,"_10":11},"isProd",true,"enableStats","domain","hyper.media","siteHost","ui-with-state-machines.hyper.media","routes/$",{"_14":15,"_723":724},"json",{"_16":17,"_18":19,"_20":-5,"_21":-5,"_22":-5,"_23":24,"_25":-5,"_26":27,"_227":6,"_37":228,"_237":-5,"_238":239,"_714":715,"_716":24,"_10":216,"_717":216,"_718":719,"_720":721},"prefersLanguages",[],"viewTerm","collaborators","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_28":29,"_202":203,"_204":184,"_205":206,"_185":48,"_207":208,"_209":210,"_211":212,"_217":218,"_219":220,"_221":222,"_225":226},"content",[30,49,66,80,87,137,158,166],{"_31":32,"_33":34},"children",[],"block",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48},"type","Heading","id","YS5-lwb-","revision","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6","attributes",{},"annotations",[],"text","Modeling UI with State Machines should be the norm.","link","",{"_31":50,"_33":51},[],{"_35":52,"_37":53,"_39":40,"_41":54,"_43":55,"_45":65,"_47":48},"Paragraph","HIUNgDv3",{},[56],{"_35":57,"_58":59,"_61":62,"_41":64,"_47":48},"Bold","starts",[60],0,"ends",[63],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_31":67,"_33":68},[],{"_35":52,"_37":69,"_39":40,"_41":70,"_43":71,"_45":79,"_47":48},"RH2vgIqw",{},[72],{"_35":73,"_58":74,"_61":76,"_41":78,"_47":48},"Code",[75],132,[77],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_31":81,"_33":82},[],{"_35":52,"_37":83,"_39":40,"_41":84,"_43":85,"_45":86,"_47":48},"1i3NXohu",{},[],"This series is about doing it differently.",{"_31":88,"_33":124},[89,96,103,110,117],{"_31":90,"_33":91},[],{"_35":52,"_37":92,"_39":40,"_41":93,"_43":94,"_45":95,"_47":48},"cP0mEJaa",{},[],"Easier to understand",{"_31":97,"_33":98},[],{"_35":52,"_37":99,"_39":40,"_41":100,"_43":101,"_45":102,"_47":48},"mUUMMN68",{},[],"Safer to extend",{"_31":104,"_33":105},[],{"_35":52,"_37":106,"_39":40,"_41":107,"_43":108,"_45":109,"_47":48},"xkA4h4Fv",{},[],"Visually predictable",{"_31":111,"_33":112},[],{"_35":52,"_37":113,"_39":40,"_41":114,"_43":115,"_45":116,"_47":48},"1AW5Zc7P",{},[],"Naturally testable",{"_31":118,"_33":119},[],{"_35":52,"_37":120,"_39":40,"_41":121,"_43":122,"_45":123,"_47":48},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_35":52,"_37":125,"_39":40,"_41":126,"_43":129,"_45":136,"_47":48},"mZU_BNzy",{"_127":128},"childrenType","Unordered",[130],{"_35":57,"_58":131,"_61":133,"_41":135,"_47":48},[132],34,[134],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_31":138,"_33":139},[],{"_35":52,"_37":140,"_39":40,"_41":141,"_43":142,"_45":157,"_47":48},"dT3b7j6V",{},[143],{"_35":57,"_58":144,"_61":150,"_41":156,"_47":48},[145,146,147,148,149],100,134,142,149,168,[151,152,153,154,155],116,140,147,160,179,{},"Through weekly posts, hands-on code examples, and short video breakdowns, you’ll learn how to build state-driven UIs using tools like XState, React, TypeScript and even Vanilla JS — from the fundamentals to real-world patterns like forms, modals, async data, and more.",{"_31":159,"_33":160},[],{"_35":52,"_37":161,"_39":162,"_41":163,"_43":164,"_45":165,"_47":48},"-dfXsmmY","bafy2bzacedzht25ysz76cqbnx7vjw7ry62rde3ewqjdscea3ruhurpw7xqt7g",{},[],"Whether you’re just curious about state machines or want to build your next app with them from the ground up, this is your guide to building interfaces that don't fall apart.",{"_31":167,"_33":196},[168],{"_31":169,"_33":170},[],{"_35":171,"_37":172,"_39":40,"_41":173,"_43":195,"_45":48,"_47":48},"Query","XMasrKG1",{"_174":175,"_176":177,"_178":179,"_194":24},"columnCount",3,"style","List","query",{"_180":181,"_188":189},"includes",[182],{"_183":184,"_185":28,"_186":187},"space","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","path","mode","Children","sort",[190],{"_191":24,"_192":193},"reverse","term","UpdateTime","banner",[],{"_35":36,"_37":197,"_39":40,"_41":198,"_43":200,"_45":201,"_47":48},"JuhiSEfW",{"_127":199},"Group",[],"Posts","version","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni","account","authors",[184],"createTime","1970-01-01T00:00:00Z","updateTime","2025-04-24T21:23:24.377Z","metadata",{"_213":214,"_215":216},"name","UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media","detachedBlocks",{},"genesis","bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak","generationInfo",{"_219":220,"_223":224},"generation","0","visibility","PUBLIC","isLatest",{"_185":229,"_202":203,"_230":24,"_231":184,"_37":232,"_233":-5,"_234":-5,"_235":-5,"_236":-5},[],"latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_240":241,"_242":243},"mutations",[],"queries",[244,368,473,537,562,703],{"_245":246,"_363":364,"_366":367},"state",{"_247":248,"_348":349,"_350":351,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},"data",{"_35":26,"_26":249,"_37":346},{"_28":250,"_202":203,"_204":184,"_205":342,"_185":48,"_207":208,"_209":210,"_211":343,"_217":344,"_219":220,"_221":345,"_225":226},[251,256,265,274,279,313,322,327],{"_31":252,"_33":253},[],{"_35":36,"_37":38,"_39":40,"_41":254,"_43":255,"_45":46,"_47":48},{},[],{"_31":257,"_33":258},[],{"_35":52,"_37":53,"_39":40,"_41":259,"_43":260,"_45":65,"_47":48},{},[261],{"_35":57,"_58":262,"_61":263,"_41":264,"_47":48},[60],[63],{},{"_31":266,"_33":267},[],{"_35":52,"_37":69,"_39":40,"_41":268,"_43":269,"_45":79,"_47":48},{},[270],{"_35":73,"_58":271,"_61":272,"_41":273,"_47":48},[75],[77],{},{"_31":275,"_33":276},[],{"_35":52,"_37":83,"_39":40,"_41":277,"_43":278,"_45":86,"_47":48},{},[],{"_31":280,"_33":306},[281,286,291,296,301],{"_31":282,"_33":283},[],{"_35":52,"_37":92,"_39":40,"_41":284,"_43":285,"_45":95,"_47":48},{},[],{"_31":287,"_33":288},[],{"_35":52,"_37":99,"_39":40,"_41":289,"_43":290,"_45":102,"_47":48},{},[],{"_31":292,"_33":293},[],{"_35":52,"_37":106,"_39":40,"_41":294,"_43":295,"_45":109,"_47":48},{},[],{"_31":297,"_33":298},[],{"_35":52,"_37":113,"_39":40,"_41":299,"_43":300,"_45":116,"_47":48},{},[],{"_31":302,"_33":303},[],{"_35":52,"_37":120,"_39":40,"_41":304,"_43":305,"_45":123,"_47":48},{},[],{"_35":52,"_37":125,"_39":40,"_41":307,"_43":308,"_45":136,"_47":48},{"_127":128},[309],{"_35":57,"_58":310,"_61":311,"_41":312,"_47":48},[132],[134],{},{"_31":314,"_33":315},[],{"_35":52,"_37":140,"_39":40,"_41":316,"_43":317,"_45":157,"_47":48},{},[318],{"_35":57,"_58":319,"_61":320,"_41":321,"_47":48},[145,146,147,148,149],[151,152,153,154,155],{},{"_31":323,"_33":324},[],{"_35":52,"_37":161,"_39":162,"_41":325,"_43":326,"_45":165,"_47":48},{},[],{"_31":328,"_33":339},[329],{"_31":330,"_33":331},[],{"_35":171,"_37":172,"_39":40,"_41":332,"_43":338,"_45":48,"_47":48},{"_174":175,"_176":177,"_178":333,"_194":24},{"_180":334,"_188":336},[335],{"_183":184,"_185":28,"_186":187},[337],{"_191":24,"_192":193},[],{"_35":36,"_37":197,"_39":40,"_41":340,"_43":341,"_45":201,"_47":48},{"_127":199},[],[184],{"_213":214,"_215":216},{},{"_219":220,"_223":224},{"_37":232,"_231":184,"_185":347,"_202":203,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":24},[],"dataUpdateCount",1,"dataUpdatedAt",1780972076251,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[365,232,203,24],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni\",false]",{"_245":369,"_363":471,"_366":472},{"_247":370,"_348":349,"_350":470,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},{"_35":26,"_26":371,"_37":468},{"_28":372,"_202":203,"_204":184,"_205":464,"_185":48,"_207":208,"_209":210,"_211":465,"_217":466,"_219":220,"_221":467,"_225":226},[373,378,387,396,401,435,444,449],{"_31":374,"_33":375},[],{"_35":36,"_37":38,"_39":40,"_41":376,"_43":377,"_45":46,"_47":48},{},[],{"_31":379,"_33":380},[],{"_35":52,"_37":53,"_39":40,"_41":381,"_43":382,"_45":65,"_47":48},{},[383],{"_35":57,"_58":384,"_61":385,"_41":386,"_47":48},[60],[63],{},{"_31":388,"_33":389},[],{"_35":52,"_37":69,"_39":40,"_41":390,"_43":391,"_45":79,"_47":48},{},[392],{"_35":73,"_58":393,"_61":394,"_41":395,"_47":48},[75],[77],{},{"_31":397,"_33":398},[],{"_35":52,"_37":83,"_39":40,"_41":399,"_43":400,"_45":86,"_47":48},{},[],{"_31":402,"_33":428},[403,408,413,418,423],{"_31":404,"_33":405},[],{"_35":52,"_37":92,"_39":40,"_41":406,"_43":407,"_45":95,"_47":48},{},[],{"_31":409,"_33":410},[],{"_35":52,"_37":99,"_39":40,"_41":411,"_43":412,"_45":102,"_47":48},{},[],{"_31":414,"_33":415},[],{"_35":52,"_37":106,"_39":40,"_41":416,"_43":417,"_45":109,"_47":48},{},[],{"_31":419,"_33":420},[],{"_35":52,"_37":113,"_39":40,"_41":421,"_43":422,"_45":116,"_47":48},{},[],{"_31":424,"_33":425},[],{"_35":52,"_37":120,"_39":40,"_41":426,"_43":427,"_45":123,"_47":48},{},[],{"_35":52,"_37":125,"_39":40,"_41":429,"_43":430,"_45":136,"_47":48},{"_127":128},[431],{"_35":57,"_58":432,"_61":433,"_41":434,"_47":48},[132],[134],{},{"_31":436,"_33":437},[],{"_35":52,"_37":140,"_39":40,"_41":438,"_43":439,"_45":157,"_47":48},{},[440],{"_35":57,"_58":441,"_61":442,"_41":443,"_47":48},[145,146,147,148,149],[151,152,153,154,155],{},{"_31":445,"_33":446},[],{"_35":52,"_37":161,"_39":162,"_41":447,"_43":448,"_45":165,"_47":48},{},[],{"_31":450,"_33":461},[451],{"_31":452,"_33":453},[],{"_35":171,"_37":172,"_39":40,"_41":454,"_43":460,"_45":48,"_47":48},{"_174":175,"_176":177,"_178":455,"_194":24},{"_180":456,"_188":458},[457],{"_183":184,"_185":28,"_186":187},[459],{"_191":24,"_192":193},[],{"_35":36,"_37":197,"_39":40,"_41":462,"_43":463,"_45":201,"_47":48},{"_127":199},[],[184],{"_213":214,"_215":216},{},{"_219":220,"_223":224},{"_37":232,"_231":184,"_185":469,"_202":-5,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},[],1780972076253,[365,232,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_245":474,"_363":534,"_366":536},{"_247":475,"_348":349,"_350":533,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},[476,511],{"_35":26,"_37":477,"_185":481,"_205":482,"_207":483,"_209":488,"_491":492,"_219":493,"_202":480,"_494":495,"_498":499,"_221":506,"_508":-5,"_211":509,"_225":226},{"_37":478,"_231":184,"_185":479,"_202":480,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[28],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[28],[184],{"_484":485,"_486":487},"seconds","1743456714","nanos",453000000,{"_484":489,"_486":490},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[496],{"_213":214,"_185":48,"_497":24},"isMissing","activitySummary",{"_500":-5,"_501":48,"_502":60,"_503":504,"_505":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_484":489,"_486":490},"isUnread",{"_219":493,"_223":507},"1743456714453","redirectInfo",{"_213":510},"Content",{"_35":26,"_37":512,"_185":517,"_205":518,"_207":519,"_209":520,"_491":523,"_219":524,"_202":516,"_494":525,"_498":527,"_221":529,"_508":-5,"_211":531,"_225":226},{"_37":513,"_231":184,"_185":514,"_202":516,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/home",[515],"home","bafyreicyjsg763rk6qtlns2wkpxn7uhhqc4t7c5ytd7ll7cd4ev42rgq5u",[515],[184],{"_484":224,"_486":60},{"_484":521,"_486":522},"1776190620",425000000,"1970-01-01T00:00:00.000Z","bafyreihqedcuddy2wuyh6dm6cy7pc5yhkdmq4bto7dzbz2bu3v5jsqud2y",[526],{"_213":214,"_185":48,"_497":24},{"_500":-5,"_501":48,"_502":60,"_503":528,"_505":6},{"_484":521,"_486":522},{"_219":524,"_223":530},"1776190620425",{"_213":532},"Home",1780972076252,[535,232,187],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_245":538,"_363":559,"_366":561},{"_247":539,"_348":349,"_350":558,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},{"_540":175,"_541":542,"_543":544,"_31":545,"_546":547,"_552":553},"citations","comments",22,"changes",11,2,"authorUids",[548,549,550,551,184],"z6Mkvz9TgGtv9zsGsdrksfNk1ajbFancgHREJEz3Y2HsAVdk","z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH","z6Mkk4LFMaccittZNsRiE1VPuzaZYWu5QnpUtQHsMLnrr7tN","z6MkfJx9hdCATZ8GoZnwK9LhpPEzDMxmp6HWiCjyqikaQXQ5","blocks",{"_69":554,"_140":555,"_92":556,"_113":557},{"_540":545,"_541":60},{"_540":60,"_541":349},{"_540":60,"_541":175},{"_540":60,"_541":349},1780972076299,[560,232],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]",{"_245":563,"_363":695,"_366":702},{"_247":564,"_348":349,"_350":694,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},{"_565":510,"_566":567,"_569":570,"_186":187,"_678":679,"_688":689},"queryTargetName","in",{"_37":478,"_231":184,"_185":568,"_202":-5,"_233":-5,"_234":-5,"_235":-5,"_236":-5},[28],"results",[571,600,623,652],{"_35":26,"_37":572,"_185":577,"_205":578,"_207":579,"_209":581,"_491":584,"_219":585,"_202":576,"_494":586,"_498":590,"_221":592,"_508":-5,"_211":594,"_225":226},{"_37":573,"_231":184,"_185":574,"_202":576,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development",[28,575],"why-state-machines-are-a-game-changer-for-ui-development","bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c",[28,575],[184],{"_484":489,"_486":580},108000000,{"_484":582,"_486":583},"1776378609",336000000,"2026-04-16T22:25:55.108Z","bafyreiejui73fg3kf6z4vsflc4ktnhhi2wh5inpt5m725keqduve52pcbm",[587,588],{"_213":214,"_185":48,"_497":24},{"_213":510,"_185":589,"_497":24},"/content",{"_500":-5,"_501":48,"_502":60,"_503":591,"_505":6},{"_484":582,"_486":583},{"_219":585,"_223":593},"1776378355139",{"_213":595,"_596":597,"_598":599},"Why State Machines Are a Game-Changer for UI Development","summary","A practical example: adding an \"edit older version\" confirmation guard to a document editor — with zero changes to existing UI triggers.","cover","ipfs://bafybeibehmknevwp6gtzpnifbbs6zbtuu2akzl6os6mwt2xk4nmvwxv37m",{"_35":26,"_37":601,"_185":606,"_205":607,"_207":608,"_209":611,"_491":612,"_219":605,"_202":605,"_494":613,"_498":616,"_221":618,"_508":-5,"_211":620,"_225":226},{"_37":602,"_231":184,"_185":603,"_202":605,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",[28,604],"estados-eventos-y-transiciones-desmitificados","bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy",[28,604],[184],{"_484":609,"_486":610},"1774432586",729000000,{"_484":609,"_486":610},"2026-03-25T09:56:26.729Z",[614,615],{"_213":214,"_185":48,"_497":24},{"_213":510,"_185":589,"_497":24},{"_500":-5,"_501":48,"_502":60,"_503":617,"_505":24},{"_484":609,"_486":610},{"_219":605,"_223":619},"1774432586761",{"_213":621,"_598":622},"Estados, eventos y transiciones, desmitificados","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu",{"_35":26,"_37":624,"_185":629,"_205":630,"_207":631,"_209":634,"_491":637,"_219":638,"_202":628,"_494":639,"_498":642,"_221":648,"_508":-5,"_211":650,"_225":226},{"_37":625,"_231":184,"_185":626,"_202":628,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified",[28,627],"states-events-and-transitions-demystified","bafy2bzacedazyemw5mvbfvvecvh7xlbfqvioyvxtwo6kmgvwapznbbxcycd56",[28,627],[184],{"_484":632,"_486":633},"1743980387",219000000,{"_484":635,"_486":636},"1774432581",353000000,"2025-04-06T22:59:47.219Z","bafy2bzacebkqzb64fcvmh5ovzsectjkvnjnz5zplcytarmy2gcuwsu3w7yba2",[640,641],{"_213":214,"_185":48,"_497":24},{"_213":510,"_185":589,"_497":24},{"_500":643,"_501":646,"_502":349,"_503":647,"_505":6},{"_484":644,"_486":645},"1772053248",730000000,"z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH/z6Fbka847o2Nk3",{"_484":635,"_486":636},{"_219":638,"_223":649},"1743980387218",{"_213":651,"_598":622},"States, Events, and Transitions, Demystified",{"_35":26,"_37":653,"_185":658,"_205":659,"_207":660,"_209":663,"_491":666,"_219":667,"_202":657,"_494":668,"_498":671,"_221":673,"_508":-5,"_211":675,"_225":226},{"_37":654,"_231":184,"_185":655,"_202":657,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_230":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong",[28,656],"you-are-writing-ui-state-wrong","bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg",[28,656],[184],{"_484":661,"_486":662},"1743457873",698000000,{"_484":664,"_486":665},"1743482671",918000000,"2025-03-31T21:51:13.698Z","bafy2bzaceblbz4bq35scgunjmywxitadj53jlujzzqmderu2enx65g4iibg4w",[669,670],{"_213":214,"_185":48,"_497":24},{"_213":510,"_185":589,"_497":24},{"_500":-5,"_501":48,"_502":60,"_503":672,"_505":6},{"_484":664,"_486":665},{"_219":667,"_223":674},"1743457873698",{"_213":676,"_598":677},"You are Writing UI State Wrong","ipfs://bafkreidydkqzjcztbuxuzxdc5i3ctfbtzzv6zl3nlvawtnxpo7opl6u2vu","interactionSummaries",{"_573":680,"_602":682,"_625":684,"_654":686},{"_541":60,"_546":681},[],{"_541":60,"_546":683},[],{"_541":349,"_546":685},[],{"_541":60,"_546":687},[],"accountsMetadata",{"_184":690},{"_37":691,"_211":693},{"_37":232,"_231":184,"_185":692,"_202":203,"_233":-5,"_234":-5,"_235":-5,"_236":-5},[],{"_213":214},1780972076304,[696,697],"QUERY_BLOCK",{"_180":698,"_188":700},[699],{"_183":184,"_185":28,"_186":187},[701],{"_191":24,"_192":193},"[\"QUERY_BLOCK\",{\"includes\":[{\"mode\":\"Children\",\"path\":\"content\",\"space\":\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"}],\"sort\":[{\"reverse\":false,\"term\":\"UpdateTime\"}]}]",{"_245":704,"_363":711,"_366":713},{"_247":705,"_348":349,"_350":710,"_352":-5,"_353":60,"_354":60,"_355":60,"_356":-5,"_357":-5,"_358":24,"_359":360,"_361":362},{"_35":204,"_37":706,"_211":708},{"_202":203,"_231":184,"_37":232,"_185":707,"_233":-5,"_234":-5,"_235":-5,"_236":-5},[],{"_213":214,"_215":216,"_709":-5,"_596":-5},"icon",1780972076302,[712,184],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","ssrContentHTML","

Modeling UI with State Machines should be the norm.

A practical guide to building better interfaces with XState, React & TypeScript

Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.

This series is about doing it differently.

By modeling your UI behavior with state machines and statecharts, you can write code that’s:

Easier to understand
Safer to extend
Visually predictable
Naturally testable
Easy to Maintain and Refactor

Through weekly posts, hands-on code examples, and short video breakdowns, you’ll learn how to build state-driven UIs using tools like XState, React, TypeScript and even Vanilla JS — from the fundamentals to real-world patterns like forms, modals, async data, and more.

Whether you’re just curious about state machines or want to build your next app with them from the ground up, this is your guide to building interfaces that don't fall apart.

Posts

","enableWebSigning","origin","homeMetadata",{"_213":214,"_215":216},"originHomeId",{"_231":184,"_37":232,"_185":722,"_202":-5,"_233":-5,"_234":-5,"_235":-5,"_236":-5},[],"meta",{"_725":726,"_826":827},"values",{"_727":728,"_730":731,"_732":733,"_734":735,"_737":738,"_739":740,"_741":742,"_744":745,"_746":747,"_748":749,"_750":751,"_752":753,"_754":755,"_756":757,"_758":759,"_760":761,"_762":763,"_764":765,"_766":767,"_768":769,"_770":771,"_772":773,"_774":775,"_776":777,"_778":779,"_780":781,"_782":783,"_784":785,"_786":787,"_788":789,"_790":791,"_792":793,"_794":795,"_796":797,"_798":799,"_800":801,"_802":803,"_804":805,"_806":807,"_808":809,"_810":811,"_812":813,"_814":815,"_816":817,"_818":819,"_820":821,"_822":823,"_824":825},"document.generationInfo.generation",[729],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[729],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[729],"dehydratedState.queries.1.queryKey.2",[736],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[729],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[729],"dehydratedState.queries.2.state.data.0.sortTime",[743],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[736],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[729],"dehydratedState.queries.2.state.data.0.redirectInfo",[736],"dehydratedState.queries.2.state.data.1.createTime.seconds",[729],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[729],"dehydratedState.queries.2.state.data.1.sortTime",[743],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[736],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[729],"dehydratedState.queries.2.state.data.1.redirectInfo",[736],"dehydratedState.queries.4.state.data.results.0.createTime.seconds",[729],"dehydratedState.queries.4.state.data.results.0.updateTime.seconds",[729],"dehydratedState.queries.4.state.data.results.0.sortTime",[743],"dehydratedState.queries.4.state.data.results.0.activitySummary.latestCommentTime",[736],"dehydratedState.queries.4.state.data.results.0.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.4.state.data.results.0.generationInfo.generation",[729],"dehydratedState.queries.4.state.data.results.0.redirectInfo",[736],"dehydratedState.queries.4.state.data.results.1.createTime.seconds",[729],"dehydratedState.queries.4.state.data.results.1.updateTime.seconds",[729],"dehydratedState.queries.4.state.data.results.1.sortTime",[743],"dehydratedState.queries.4.state.data.results.1.activitySummary.latestCommentTime",[736],"dehydratedState.queries.4.state.data.results.1.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.4.state.data.results.1.generationInfo.generation",[729],"dehydratedState.queries.4.state.data.results.1.redirectInfo",[736],"dehydratedState.queries.4.state.data.results.2.createTime.seconds",[729],"dehydratedState.queries.4.state.data.results.2.updateTime.seconds",[729],"dehydratedState.queries.4.state.data.results.2.sortTime",[743],"dehydratedState.queries.4.state.data.results.2.activitySummary.latestCommentTime.seconds",[729],"dehydratedState.queries.4.state.data.results.2.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.4.state.data.results.2.generationInfo.generation",[729],"dehydratedState.queries.4.state.data.results.2.redirectInfo",[736],"dehydratedState.queries.4.state.data.results.3.createTime.seconds",[729],"dehydratedState.queries.4.state.data.results.3.updateTime.seconds",[729],"dehydratedState.queries.4.state.data.results.3.sortTime",[743],"dehydratedState.queries.4.state.data.results.3.activitySummary.latestCommentTime",[736],"dehydratedState.queries.4.state.data.results.3.activitySummary.latestChangeTime.seconds",[729],"dehydratedState.queries.4.state.data.results.3.generationInfo.generation",[729],"dehydratedState.queries.4.state.data.results.3.redirectInfo",[736],"dehydratedState.queries.5.state.data.metadata.icon",[736],"dehydratedState.queries.5.state.data.metadata.summary",[736],"referentialEqualities",{"_828":829,"_727":831,"_739":832,"_754":833,"_768":834,"_780":835,"_796":836,"_810":837},"dehydratedState.queries.4.queryKey.1",[830],"document.content.7.children.0.block.attributes.query",[730,732,752],[746,766],[760],[774],[782,788],[802],[816],"actionData","errors"]