CINXE.COM
GitHub - darrylhebbes/awesome_xstate: Everything awesome about XState
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-f37fb7684b1f.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-9ac301c3ebe5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-cd826e8636dc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-f91b0f603451.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-83beb16e0ecf.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-6e122dab64fc.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-18119e682df0.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-aaa714e5674d.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-7eaba1d4847c.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-ea73c9cb5377.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-4fce88777fa8.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-0210be90f4d3.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["a11y_quote_reply_fix","copilot_immersive_issue_preview","copilot_new_references_ui","copilot_chat_repo_custom_instructions_preview","copilot_no_floating_button","copilot_topics_as_references","copilot_read_shared_conversation","copilot_duplicate_thread","copilot_buffered_streaming","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","fgpat_form_ui_updates","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_o3_mini_streaming","insert_before_patch","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","primer_react_css_modules_ga","react_data_router_pull_requests","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_proxima_australia_update","viewscreen_sandbox","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates","copilot_task_oriented_assistive_prompts","issue_types_prevent_private_type_creation","refresh_image_video_src","react_router_dispose_on_disconnect","codespaces_prebuild_region_target_update","turbo_app_id_restore","copilot_code_review_sign_up_closed"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-78acda12a57e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-46b9f4874d95.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-75968cfb5298.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-62d275b7ddd9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a90ac05d2469.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-efa32db3a345.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-394f8eb34f19.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-8206a1f1fc89.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-2906d7-2a07a295af40.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-a03ee12d659a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-b6294cf703b7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-947061-e7a6c4a19f98.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-2a55124d5c52.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-768abe60b1f8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-3e000c5d31a9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-b8865f653f6b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-e429cff6ceb1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-c1f5beceda17.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_virtualized-list_es_index_js-node_modules_github_template-parts_lib_index_js-94dc7a2157c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-70450e-4b93df70b903.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_ref-selector_ts-3e9d848bab5f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-c3bcacfe317c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-3eebbd-0763620ad7bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_decorators_js-node_modules_delegated-events_di-e161aa-9d41fb1b6c9e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_github_remote--3c9c82-b71ef90fbdc7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repositories-7a0dbaa42c57.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_catalyst_lib_inde-dbbea9-26cce2010167.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-1c0aedc134b1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-dee7fde768ad.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-a18127980111.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-cf2f2ab8dab4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-2df2f32ec596.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-9a233856b02c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-58a0c58bfee4.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2708311ccb5cb34358b1.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2708311ccb5cb34358b1.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>GitHub - darrylhebbes/awesome_xstate: Everything awesome about XState</title> <meta name="route-pattern" content="/:user_id/:repository" data-turbo-transient> <meta name="route-controller" content="files" data-turbo-transient> <meta name="route-action" content="disambiguate" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="80E6:837BA:41CB8C:4F9C54:67E4CE4F" data-pjax-transient="true"/><meta name="html-safe-nonce" content="5d07f85c3fcad52cf381f00e5968befbb2347ebc144a53c3ecd93b9d389cca23" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4MEU2OjgzN0JBOjQxQ0I4Qzo0RjlDNTQ6NjdFNENFNEYiLCJ2aXNpdG9yX2lkIjoiMjY5Nzk5MjkyNTQ0ODgxODI1NSIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="531cfa9cfd78e9b6ec6d1e71ffb2f77786e16da90f20e5e99947420548a74d3d" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:247447471" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="Everything awesome about XState. Contribute to darrylhebbes/awesome_xstate development by creating an account on GitHub."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/darrylhebbes/awesome_xstate" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/7a7059206e1827dc040a5fcc9295fb8bed62c2f17818b15cf55b69b2210eff79/darrylhebbes/awesome_xstate" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - darrylhebbes/awesome_xstate: Everything awesome about XState" /><meta name="twitter:description" content="Everything awesome about XState. Contribute to darrylhebbes/awesome_xstate development by creating an account on GitHub." /> <meta property="og:image" content="https://opengraph.githubassets.com/7a7059206e1827dc040a5fcc9295fb8bed62c2f17818b15cf55b69b2210eff79/darrylhebbes/awesome_xstate" /><meta property="og:image:alt" content="Everything awesome about XState. Contribute to darrylhebbes/awesome_xstate development by creating an account on GitHub." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - darrylhebbes/awesome_xstate: Everything awesome about XState" /><meta property="og:url" content="https://github.com/darrylhebbes/awesome_xstate" /><meta property="og:description" content="Everything awesome about XState. Contribute to darrylhebbes/awesome_xstate development by creating an account on GitHub." /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="43d48ebc0aeb8da7e24d76441cdfec8f763d3d20c2dfbe2992450531b9b0cecf" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="77190eb53eb47fc30bd2fcc17a7eefa2dfd8505869fee9299ba911be3a40a9eb" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="911af613659f2a8ff08d51fd492330c9e8a6ed8f0c4eb3c6632db43599431d16" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="a512f9408e2c6e7c4ac5f57e22ffd863dc2e264e38455c3024733302983fa082" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/darrylhebbes/awesome_xstate git https://github.com/darrylhebbes/awesome_xstate.git"> <meta name="octolytics-dimension-user_id" content="239479" /><meta name="octolytics-dimension-user_login" content="darrylhebbes" /><meta name="octolytics-dimension-repository_id" content="247447471" /><meta name="octolytics-dimension-repository_nwo" content="darrylhebbes/awesome_xstate" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="247447471" /><meta name="octolytics-dimension-repository_network_root_nwo" content="darrylhebbes/awesome_xstate" /> <link rel="canonical" href="https://github.com/darrylhebbes/awesome_xstate" data-turbo-transient> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <meta name="release" content="5e3ae745f1047f7944b974613819873f4d1a808a"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-2ea4e93613c0.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-33dfb803e078.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2708311ccb5cb34358b1.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-4898d1bf4b51.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-730dca81d0a2.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fdarrylhebbes%2Fawesome_xstate" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="00d28103bb3197ed71a3cc3769ece3584356ae8c1aa1ac199737d3951a5452de" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"nonprofits","context":"solutions","tag":"link","label":"nonprofits_link_solutions_navbar"}" href="/solutions/industry/nonprofits"> Nonprofits </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"events_amp_webinars","context":"resources","tag":"link","label":"events_amp_webinars_link_resources_navbar"}" href="https://resources.github.com"> Events & Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ebooks_amp_whitepapers","context":"resources","tag":"link","label":"ebooks_amp_whitepapers_link_resources_navbar"}" href="https://github.com/resources/whitepapers"> Ebooks & Whitepapers </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"executive_insights","context":"resources","tag":"link","label":"executive_insights_link_resources_navbar"}" href="https://github.com/solutions/executive-insights"> Executive Insights </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"copilot_for_business","context":"enterprise","tag":"link","label":"copilot_for_business_link_enterprise_navbar"}" href="/features/copilot/copilot-business"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">Copilot for business</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:darrylhebbes/awesome_xstate" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="Zp6YQTH_Z_WT1xgBNvOqEtzLNO2qDqGMGC30O_PBNRDcomNid7ojbCGJpI0IsTR-ofQnHjcoUPNyWmU98P6MhQ" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="darrylhebbes/awesome_xstate" data-current-org="" data-current-owner="darrylhebbes" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-52e6c291-a9ed-4238-9643-05b9190c98a9" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-52e6c291-a9ed-4238-9643-05b9190c98a9" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="facn2AgeTezjeHxMKyOEz6r/+9Zmb7U2RwMyD5xG161mRUW41+2SoU5k8RdT23PfHWL/NygZyzC7PtZco3yQcg==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="L8AFx1NXfcefzmuZSvlmQe79C8G8jPZI88SXKziLcxrJSmb0A7idd6bJbwddJhN2Hx58Uy32gaVX/Ub9KS3FUA==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required only-validate-on-blur="false"> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="+ea2ghGHUyv9mOCSrKUnBw5GRex58Ce8h4wCCzvYlPqW14TuUM4OfnnyPdLSOyVYbk+lGF4uHSG94DC0FKvzRw==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fdarrylhebbes%2Fawesome_xstate" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="00d28103bb3197ed71a3cc3769ece3584356ae8c1aa1ac199737d3951a5452de" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=darrylhebbes%2Fawesome_xstate" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="00d28103bb3197ed71a3cc3769ece3584356ae8c1aa1ac199737d3951a5452de" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-6c395149-a0a4-4ab4-bc5b-877e33cea60d" aria-labelledby="tooltip-ef61c48c-c1f0-4c5f-9821-9103cb2721f7" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-ef61c48c-c1f0-4c5f-9821-9103cb2721f7" for="icon-button-6c395149-a0a4-4ab4-bc5b-877e33cea60d" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/darrylhebbes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/darrylhebbes"> darrylhebbes </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/darrylhebbes/awesome_xstate">awesome_xstate</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Fdarrylhebbes%2Fawesome_xstate" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="c3458f60e474e1043d3bb7d200c42fbaf7d5d7d43756fb485b8baf53e95a7cd8" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-6d4b96a5-8b79-4c64-84fc-7771c7816570" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fdarrylhebbes%2Fawesome_xstate" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":247447471,"auth_type":"LOG_IN","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="d72fc4143cfe9c5b1876c3133c4ee62d26167510f405d96612b35b6cd7bd2005" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="7" data-view-component="true" class="Counter">7</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fdarrylhebbes%2Fawesome_xstate" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":247447471,"auth_type":"LOG_IN","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="49a8104246998022d466bbcf90efbf2a3ac74b895267a2378896a6e97c0a8ad9" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="189 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="189" data-view-component="true" class="Counter js-social-count">189</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5"> <p class="f4 mb-3 "> Everything awesome about XState </p> <div class="mb-3"> <a class="Link--secondary no-underline mr-3" href="/darrylhebbes/awesome_xstate/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <span class="text-bold">189</span> stars </a> <a class="Link--secondary no-underline mr-3" href="/darrylhebbes/awesome_xstate/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-1"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <span class="text-bold">7</span> forks </a> <a class="Link--secondary no-underline mr-3 d-inline-block" href="/darrylhebbes/awesome_xstate/branches"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch mr-1"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> <span>Branches</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/darrylhebbes/awesome_xstate/tags"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag mr-1"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <span>Tags</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/darrylhebbes/awesome_xstate/activity"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-1"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span>Activity</span> </a> </div> <div class="d-flex flex-wrap gap-2"> <div class="flex-1"> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fdarrylhebbes%2Fawesome_xstate" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":247447471,"auth_type":"LOG_IN","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="49a8104246998022d466bbcf90efbf2a3ac74b895267a2378896a6e97c0a8ad9" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> </a></div> </div> <div class="flex-1"> <a href="/login?return_to=%2Fdarrylhebbes%2Fawesome_xstate" rel="nofollow" id="files-overview-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/darrylhebbes/awesome_xstate","user_id":null}}" data-hydro-click-hmac="c3458f60e474e1043d3bb7d200c42fbaf7d5d7d43756fb485b8baf53e95a7cd8" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-c0ef0996-d111-4529-8b25-db148306bfc4" for="files-overview-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </div> <span> </span> </div> </div> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/darrylhebbes/awesome_xstate" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /darrylhebbes/awesome_xstate" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/darrylhebbes/awesome_xstate/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /darrylhebbes/awesome_xstate/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/darrylhebbes/awesome_xstate/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /darrylhebbes/awesome_xstate/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/darrylhebbes/awesome_xstate/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /darrylhebbes/awesome_xstate/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/darrylhebbes/awesome_xstate/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /darrylhebbes/awesome_xstate/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/darrylhebbes/awesome_xstate/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /darrylhebbes/awesome_xstate/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/darrylhebbes/awesome_xstate/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/darrylhebbes/awesome_xstate/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /darrylhebbes/awesome_xstate/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-button" popovertarget="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-overlay" aria-controls="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-list" aria-haspopup="true" aria-labelledby="tooltip-2ef036a1-30c4-48d4-93b2-5060662c0278" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-2ef036a1-30c4-48d4-93b2-5060662c0278" for="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-overlay" anchor="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-button" id="action-menu-ec712881-1544-410d-853e-7e6c06b4863b-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8fbe11e5-6490-43cc-80a0-529ca0409c32" href="/darrylhebbes/awesome_xstate" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8f8cb46c-1bae-4fff-bf37-2d72eedf61fb" href="/darrylhebbes/awesome_xstate/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-434db573-9a18-4160-9801-003b1f6d117d" href="/darrylhebbes/awesome_xstate/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-5fc936a7-1055-417e-8443-547f954c03f2" href="/darrylhebbes/awesome_xstate/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-07d5d02f-adcd-4248-a953-507ebe177fe4" href="/darrylhebbes/awesome_xstate/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-a20f00ea-1161-461e-ada7-740c8b413c81" href="/darrylhebbes/awesome_xstate/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-1533d432-6122-4b6b-96ca-908abfac9e42" href="/darrylhebbes/awesome_xstate/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <h1 class='sr-only'>darrylhebbes/awesome_xstate</h1> <div class="clearfix container-xl px-md-4 px-lg-5 px-3"> <div> <div style="max-width: 100%" data-view-component="true" class="Layout Layout--flowRow-until-md react-repos-overview-margin Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_es_mjs-dd1d3ea6a436.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryObserver_js-node_modules_tanstack_-defd52-843b41414e0e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_promise-with-resolvers-polyfill_promise-with-r-17c672-34345cb18aac.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-e4bfc7e9114d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7496afc3784d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_commit-attribution_index_ts-ui_packages_commit-checks-status_index_ts-ui_packages-7094d4-15017f02e61c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_hooks-5f1d09-1ee828c2d6e8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repos-overview-d245eae13daf.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2708311ccb5cb34358b1.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repos-overview.0ee7cac3ab511a65d9f9.module.css" /> <react-partial partial-name="repos-overview" data-ssr="true" data-attempted-ssr="true" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"initialPayload":{"allShortcutsEnabled":false,"path":"/","repo":{"id":247447471,"defaultBranch":"master","name":"awesome_xstate","ownerLogin":"darrylhebbes","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2020-03-15T10:50:33.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/239479?v=4","public":true,"private":false,"isOrgOwned":false},"currentUser":null,"refInfo":{"name":"master","listCacheKey":"v0:1584269435.0","canEdit":false,"refType":"branch","currentOid":"8073c658ab109556e99e04d976b89096e367fe61"},"tree":{"items":[{"name":"README.md","path":"README.md","contentType":"file"}],"templateDirectorySuggestionUrl":null,"readme":null,"totalCount":1,"showBranchInfobar":false},"fileTree":null,"fileTreeProcessingTime":null,"foldersToFetch":[],"treeExpanded":false,"symbolsExpanded":false,"isOverview":true,"overview":{"banners":{"shouldRecommendReadme":false,"isPersonalRepo":false,"showUseActionBanner":false,"actionSlug":null,"actionId":null,"showProtectBranchBanner":false,"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_repo","releasePath":"/darrylhebbes/awesome_xstate/releases/new?marketplace=true","showPublishActionBanner":false},"interactionLimitBanner":null,"showInvitationBanner":false,"inviterName":null,"actionsMigrationBannerInfo":{"releaseTags":[],"showImmutableActionsMigrationBanner":false,"initialMigrationStatus":null}},"codeButton":{"contactPath":"/contact","isEnterprise":false,"local":{"protocolInfo":{"httpAvailable":true,"sshAvailable":null,"httpUrl":"https://github.com/darrylhebbes/awesome_xstate.git","showCloneWarning":null,"sshUrl":null,"sshCertificatesRequired":null,"sshCertificatesAvailable":null,"ghCliUrl":"gh repo clone darrylhebbes/awesome_xstate","defaultProtocol":"http","newSshKeyUrl":"/settings/ssh/new","setProtocolPath":"/users/set_protocol"},"platformInfo":{"cloneUrl":"https://desktop.github.com","showVisualStudioCloneButton":false,"visualStudioCloneUrl":"https://windows.github.com","showXcodeCloneButton":false,"xcodeCloneUrl":"xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fdarrylhebbes%2Fawesome_xstate","zipballUrl":"/darrylhebbes/awesome_xstate/archive/refs/heads/master.zip"}},"newCodespacePath":"/codespaces/new?hide_repo_select=true\u0026repo=247447471"},"popovers":{"rename":null,"renamedParentRepo":null},"commitCount":"47","overviewFiles":[{"displayName":"README.md","repoName":"awesome_xstate","refName":"master","path":"README.md","preferredFileType":"readme","tabName":"README","richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAwesome XState\u003c/h2\u003e\u003ca id=\"user-content-awesome-xstate\" class=\"anchor\" aria-label=\"Permalink: Awesome XState\" href=\"#awesome-xstate\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://github.com/sindresorhus/awesome\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/8693bde04030b1670d5097703441005eba34240c32d1df1eb82a5f0d6716518e/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667\" alt=\"Awesome\" data-canonical-src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA collection of awesome resources regarding the XState library and Statecharts.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://github.com/statelyai/xstate\"\u003eOfficial Code Repository\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eXState\u003c/h3\u003e\u003ca id=\"user-content-xstate\" class=\"anchor\" aria-label=\"Permalink: XState\" href=\"#xstate\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eXState is a library for creating, interpreting, and executing statecharts. Statecharts are a formalism for modeling stateful, reactive systems. - David Khourshid\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eMain Resources\u003c/h4\u003e\u003ca id=\"user-content-main-resources\" class=\"anchor\" aria-label=\"Permalink: Main Resources\" href=\"#main-resources\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://xstate.js.org\" rel=\"nofollow\"\u003eXState Official Website\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://xstate.js.org/docs\" rel=\"nofollow\"\u003eXState Documentation\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://xstate.js.org/docs/about/resources.html\" rel=\"nofollow\"\u003eXState Resources\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/davidkpiano/xstate\"\u003eXState on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://spectrum.chat/statecharts\" rel=\"nofollow\"\u003eXState Community / Forum\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://xstate-catalogue.com/\" rel=\"nofollow\"\u003eXState Catalogue\u003c/a\u003e a collection of professionally designed state machines you can drop into your projects\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eConcepts\u003c/h3\u003e\u003ca id=\"user-content-concepts\" class=\"anchor\" aria-label=\"Permalink: Concepts\" href=\"#concepts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://stackoverflow.com/a/54521035\" rel=\"nofollow\"\u003eStackoverflow: What is an actual difference between redux and a state machine (e.g. xstate)?\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://statecharts.github.io/\" rel=\"nofollow\"\u003eErik Mogensen - Welcome to the world of Statecharts\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/davidkpiano/xstate/blob/master/docs/about/concepts.md\"\u003eConcepts, in official docs\u003c/a\u003e - Article touches on Finite State Machines, Statechart formailsm and the Actor model\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eProjects\u003c/h3\u003e\u003ca id=\"user-content-projects\" class=\"anchor\" aria-label=\"Permalink: Projects\" href=\"#projects\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eVue\u003c/h4\u003e\u003ca id=\"user-content-vue\" class=\"anchor\" aria-label=\"Permalink: Vue\" href=\"#vue\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/Glutnix/xstate-vue-calculator\"\u003eGlutnix/xstate-vue-calculator\u003c/a\u003e - Calculator\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eReact\u003c/h4\u003e\u003ca id=\"user-content-react\" class=\"anchor\" aria-label=\"Permalink: React\" href=\"#react\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/voloshchenkoal/shinkei-suijaku\"\u003evoloshchenkoal/shinkei-suijaku\u003c/a\u003e - Card game\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/davidkpiano/xstate-todomvc\"\u003edavidkpiano/xstate-todomvc\u003c/a\u003e - TodoMVC\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eArticles\u003c/h3\u003e\u003ca id=\"user-content-articles\" class=\"anchor\" aria-label=\"Permalink: Articles\" href=\"#articles\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Slb6M_rIn0M\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://realfiction.net/2019/01/30/xstate-a-typescript-state-machine-with-a-lot-of-features\" rel=\"nofollow\"\u003eXState - a TypeScript state machine with a lot of features\u003c/a\u003e by Frank Quednau\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.nexmo.com/blog/2019/06/20/creating-a-complex-ivr-system-with-ease-with-xstate-dr\" rel=\"nofollow\"\u003eCreating a Complex IVR System with Ease with XState\u003c/a\u003e by Yonatan Mevorach\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/timdeschryver/my-love-letter-to-xstate-and-statecharts-287b\" rel=\"nofollow\"\u003eMy love letter to XState and statecharts ♥\u003c/a\u003e by Tim Deschryver\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate/54521035#54521035\" rel=\"nofollow\"\u003eStackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)?\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/johnkazer/hyperapp-xstate-demo\"\u003eHyperapp demo with XState\u003c/a\u003e by \u003ca href=\"https://github.com/johnkazer\"\u003e@johnkazer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/coodoo/xstate-examples\"\u003eA series of examples showing how to model application state with statechart using xstate\u003c/a\u003e by \u003ca href=\"https://github.com/coodoo/xstate-examples\"\u003e@coodoo\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.skcript.com/svr/finite-state-machines-in-react-js-using-xstate/\" rel=\"nofollow\"\u003eFinite State Machines in React JS using XState\u003c/a\u003e by \u003ca href=\"https://www.linkedin.com/in/sooraj-nair-a81543172/\" rel=\"nofollow\"\u003eSooraj Nair\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/@brockreece/vuex-xstate-4f9ea23bb24e\" rel=\"nofollow\"\u003eVuex + XState\u003c/a\u003e by \u003ca href=\"https://medium.com/@brockreece\" rel=\"nofollow\"\u003eBrock Reece\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://codepen.io/ryanzola/pen/PMwoqe\" rel=\"nofollow\"\u003eCodePen - XState Vue Login Page\u003c/a\u003e by \u003ca href=\"https://codepen.io/ryanzola\" rel=\"nofollow\"\u003eRyan Zola\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=GuzcWkVrqLg\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Standing on the Shoulders of Giants. Development with XState\u003c/a\u003e by Brad Woods\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.atlassian.com/atlascamp/watch-sessions/2019/advanced-app-development/standing-on-the-shoulders-of-giants-development-with-xstate\" rel=\"nofollow\"\u003eSlides and more\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.vietnguyen.site/getting-started-with-xstate/\" rel=\"nofollow\"\u003eGetting Started with XState\u003c/a\u003e by Viet Nguyen\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/@tahini/how-to-effortlessly-model-async-react-with-xstates-invoke-4c36dc8547b3\" rel=\"nofollow\"\u003eHow to Effortlessly Model Async (React) with XState's Invoke\u003c/a\u003e by Matthew Jones\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.jerry-hong.com/posts/xstate-tutorials-state-machine/?fbclid=IwAR14AL6nwxR5lb78CSABY18rOm2EA7I5f7uaErgZGC0ISmcJFri0VL91_xA\" rel=\"nofollow\"\u003eXState 新手教學 - Finite State Machine\u003c/a\u003e by Jerry Hong\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.zfanw.com/xstate-state-management/\" rel=\"nofollow\"\u003eXState 状态管理\u003c/a\u003e by 陈三\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=9P3sLqSiswE\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Aplicaciones React usando XState\u003c/a\u003e by Luis César Contreras\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/felix/replacing-vuex-with-xstate-3097\" rel=\"nofollow\"\u003eReplacing Vuex with XState\u003c/a\u003e by \u003ca href=\"https://dev.to/felix\" rel=\"nofollow\"\u003eFelix Guerin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://itnext.io/communicating-with-spawned-and-invoked-xstate-actors-in-react-999cca56506b\" rel=\"nofollow\"\u003eCommunicating with spawned and invoked XState actors in React\u003c/a\u003e by Ismayil Khayredinov\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gitlab.com/danbunea/tdding-xstate\" rel=\"nofollow\"\u003eGitLab - TDDing XState\u003c/a\u003e by Dan Bunea\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/rjdestigter/xstate-sample-kit\"\u003eGitHub - XState Sample Kit\u003c/a\u003e by \u003ca href=\"https://github.com/rjdestigter\"\u003e@rjdestigter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=g_2lt7bBwpk\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e How to Build a simple React App with XState\u003c/a\u003e by Tim Ermilov\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/yakindu/statecharts-a-new-path-for-the-future-of-web-development-9c8a8fb85717\" rel=\"nofollow\"\u003eXState: The new opportunity for web development\u003c/a\u003e by \u003ca href=\"https://medium.com/@mschulte_69595\" rel=\"nofollow\"\u003e@mschulte\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/robertbroersma/undo-redo-in-react-using-xstate-23j8\" rel=\"nofollow\"\u003eUndo/Redo in React Using XState\u003c/a\u003e by \u003ca href=\"https://dev.to/robertbroersma\" rel=\"nofollow\"\u003eRobert\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/xstate-undo-redo-i3eiu\" rel=\"nofollow\"\u003eCodeSandbox demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.logrocket.com/state-driven-interfaces-with-xstate/\" rel=\"nofollow\"\u003eState-driven interfaces with XState\u003c/a\u003e by \u003ca href=\"https://blog.logrocket.com/author/bradwoods/\" rel=\"nofollow\"\u003eBrad Woods\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/robertbroersma/react-single-file-components-with-xstate-19k4\" rel=\"nofollow\"\u003eReact Single File Components with XState\u003c/a\u003e by \u003ca href=\"https://dev.to/robertbroersma\" rel=\"nofollow\"\u003eRobert\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://keyholesoftware.com/2020/03/30/an-introduction-to-state-machines-using-xstate/\" rel=\"nofollow\"\u003eAn Introduction to State Machines using XState\u003c/a\u003e by \u003ca href=\"https://keyholesoftware.com/author/mwarger/\" rel=\"nofollow\"\u003eMat Warger\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/in-the-keyhole/xstate-demo\"\u003eGitHub Demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=GhHh_9I6CXQ\" rel=\"nofollow\"\u003eWebinar - Visualize Application State with XState in JavaScript\u003c/a\u003e by Dani Akash\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/jacobmparis/modelling-parallel-states-in-xstate-3pe0\" rel=\"nofollow\"\u003eModeling parallel states in XState\u003c/a\u003e by \u003ca href=\"https://dev.to/jacobmparis\" rel=\"nofollow\"\u003eJacob Paris\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/jacobmparis/xstate-text-formatting-part-2-32ma\" rel=\"nofollow\"\u003eXState Text Formatting Part 2\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/lednhatkhanh/xstate-flipping-cards-game\"\u003eGitHub - a flipping cards game using XState\u003c/a\u003e by \u003ca href=\"https://github.com/lednhatkhanh\"\u003e@lednhatkhanh\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://xstate-flipping-cards-game.now.sh/\" rel=\"nofollow\"\u003ePlayable demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/stefanwille/pacman-react\"\u003eGitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://pacman-react.netlify.app/\" rel=\"nofollow\"\u003ePlayable demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/tanem/state-machines-in-react\"\u003eGitHub - a small React, XState and Framer Motion demo\u003c/a\u003e by \u003ca href=\"https://github.com/tanem\"\u003e@tanem\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/krzysztofzuraw/xstate-autocomplete\"\u003eGitHub - Autocomplete example with XState\u003c/a\u003e by \u003ca href=\"https://github.com/krzysztofzuraw\"\u003e@krzysztofzuraw\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/sarahdayan/markdown-editor-vue-xstate\"\u003eGitHub - a Markdown Editor in Vue.js and XState\u003c/a\u003e by \u003ca href=\"https://github.com/sarahdayan\"\u003eSarah Dayan\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://nifty-yalow-295db4.netlify.app/\" rel=\"nofollow\"\u003eLive Demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://kyleshevlin.com/guidelines-for-state-machines-and-xstate/\" rel=\"nofollow\"\u003eGuidelines for State Machines and XState\u003c/a\u003e by \u003ca href=\"https://kyleshevlin.com\" rel=\"nofollow\"\u003eKyle Shevlin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/diegoperezm/react-xstate-calc\"\u003eA simple calculator using React and XState (statecharts)\u003c/a\u003e by \u003ca href=\"https://github.com/diegoperezm\"\u003ediegoperezm\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/howardmann/xstate/tree/master/traffic-light\"\u003eXState Chart Traffic Lights\u003c/a\u003e by \u003ca href=\"https://github.com/howardmann\"\u003e@howardmann\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"http://xstatetrafficlight.surge.sh/\" rel=\"nofollow\"\u003eDemo link\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://xstate.js.org/viz/?gist=1b9e1bcf75b1fed19190adc9f39b895e\" rel=\"nofollow\"\u003eXState visualization\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/lednhatkhanh/xstate-minesweeper\"\u003eXState Minesweeper\u003c/a\u003e by \u003ca href=\"https://github.com/lednhatkhanh/xstate-minesweeper\"\u003e@lednhatkhanh\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://xstate-minesweeper.now.sh/\" rel=\"nofollow\"\u003ePlayable demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/farskid/xstate.tips\"\u003eTips and tricks of using XState for UI development\u003c/a\u003e by \u003ca href=\"https://github.com/farskid\"\u003e@farskid\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://xstate.tips/\" rel=\"nofollow\"\u003eLink: XState.Tips\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/mwarger/tic-tac-toe-crank-xstate-typescript\"\u003eTic-Tac-Toe with Crank, XState, and TypeScript\u003c/a\u003e by \u003ca href=\"https://github.com/mwarger\"\u003e@warger\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.ibrahima-ndaw.com/blog/xstate-react-finite-state-machine/\" rel=\"nofollow\"\u003eHow To Build Finite State Machines using XState and React\u003c/a\u003e by \u003ca href=\"https://www.ibrahima-ndaw.com\" rel=\"nofollow\"\u003eIbrahima Ndaw\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/ibrahima92/how-to-build-finite-state-machines-using-xstate-and-react-1o8g\" rel=\"nofollow\"\u003ePost on Dev.to\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/DevanB/xstate-examples\"\u003eGitHub - Practical examples of statechart-based solutions with XState\u003c/a\u003e by \u003ca href=\"https://github.com/DevanB\"\u003e@DevanB\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=MbS2TQj4Xsc\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Improving Application Predictability with XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/sjoedwards\" rel=\"nofollow\"\u003eSam Edwards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/@roberthigdon/a-front-end-journey-into-xstate-d13691b9165d\" rel=\"nofollow\"\u003eA front-end journey into XState\u003c/a\u003e by \u003ca href=\"https://medium.com/@roberthigdon\" rel=\"nofollow\"\u003eRobert Higdon\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.thoughtworks.com/radar/languages-and-frameworks/xstate\" rel=\"nofollow\"\u003eThoughtWorks - XState in the Technology Radar for Languages \u0026amp; Frameworks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://geoexamples.com/svelte/2020/05/08/xstate-svelte-I.html\" rel=\"nofollow\"\u003eXState and Svelte: initial setup\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/JacobParis/stripe-machine-example\"\u003eGitHub - Stripe Machine Example\u003c/a\u003e: An animated stripe checkout using XState and React by \u003ca href=\"https://github.com/JacobParis\"\u003e@JacobParis\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=JPgd1RG-rOk\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Creating a \u003ccode\u003euseAutoSave\u003c/code\u003e Hook - Part 5: Using XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/BrooksLybrand\" rel=\"nofollow\"\u003eBrooks Lybrand\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/useautosavefinal-xhsyx?file=/src/useAutoSave-5.js\" rel=\"nofollow\"\u003eCodeSandbox\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=lIge4KWq6Xc\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Authentication statechart in XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/BrooksLybrand\" rel=\"nofollow\"\u003eBrooks Lybrand\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=osaszd2aU9U\" rel=\"nofollow\"\u003eDrag \u0026amp; Drop State Machine! Learning XState with David\u003c/a\u003e on the \u003ca href=\"https://twitter.com/keyframers\" rel=\"nofollow\"\u003eKeyframers\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=emAUbr0XHqg\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Isaac \u0026amp;\u0026amp; Zack Code Jam #2: State Machines and XState\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=R2vzzuUkjV0\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 3\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=hG3UHNCUdzQ\" rel=\"nofollow\"\u003eImproving state representation by using XState in React\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCQB-QsEnKCvJX4e_ms9XvHA\" rel=\"nofollow\"\u003eJon Major Condon\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://onehundred.now.sh/\" rel=\"nofollow\"\u003eRemake of the 100 squares game\u003c/a\u003e by \u003ca href=\"https://twitter.com/nikpundik\" rel=\"nofollow\"\u003e@nikpundik\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/nikpundik/status/1268936078737670145\" rel=\"nofollow\"\u003eTweet with demo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/@pavlo_lompas/intro-to-xstate-a-true-state-management-system-library-for-react-d8c0051c71e4\" rel=\"nofollow\"\u003eIntro to XState - a true state management library for React\u003c/a\u003e by \u003ca href=\"https://medium.com/@pavlo_lompas\" rel=\"nofollow\"\u003ePavlo Lompas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://thewidlarzgroup.com/multistep-form-xstate-formik/\" rel=\"nofollow\"\u003eMultistep form handling with Finite State Machines, Formik and TypeScript\u003c/a\u003e by Daniel Grychtoł\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/xstate-login-sign-up-forms-yzzoc\" rel=\"nofollow\"\u003eCodeSandbox - XState Login \u0026amp; Sign Up Forms\u003c/a\u003e by \u003ca href=\"https://github.com/JamieMason\"\u003eJamie Mason\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://flaviocopes.com/xstate/\" rel=\"nofollow\"\u003eIntroduction to XState\u003c/a\u003e by \u003ca href=\"https://flaviocopes.com/\" rel=\"nofollow\"\u003eFlavio Copes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=7CP-OUcUq2Q\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Autocomplete, XState, and anything in between\u003c/a\u003e by \u003ca href=\"https://krzysztofzuraw.com\" rel=\"nofollow\"\u003eKrzysztof Żuraw\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=A0bLzjQdZPU\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e How to add an XState machine conf to a project\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCxr-10LjbO-CTiPRcCLyRyg\" rel=\"nofollow\"\u003eDiego Perez\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=uVySNh6ud2w\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=LtqTNATLIlY\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 2\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=t5WU1oZeBQw\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 3\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/vonagedev/learn-and-apply-xstate-with-vonage-video-5dfg\" rel=\"nofollow\"\u003eLearn and Apply XState with Vonage Video\u003c/a\u003e by \u003ca href=\"https://dev.to/kellyjandrews\" rel=\"nofollow\"\u003eKelly Andrews\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.nexmo.com/blog/2020/07/01/learn-and-apply-xstate-with-vonage-video\" rel=\"nofollow\"\u003eArticle on Nexmo.com\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972\" rel=\"nofollow\"\u003eStarting with State Machines and XState!\u003c/a\u003e by \u003ca href=\"https://dev.to/jasmin\" rel=\"nofollow\"\u003eJasmin Virdi\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972\" rel=\"nofollow\"\u003eTodo App with XState and Vue composition API\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.logrocket.com/comparing-state-machines-xstate-vs-robot/\" rel=\"nofollow\"\u003eComparing state machines: XState vs. Robot\u003c/a\u003e by \u003ca href=\"https://blog.logrocket.com/author/samailabala/\" rel=\"nofollow\"\u003eSamaila Bala\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/ekafyi/hello-xstate-learning-state-machines-for-frontend-web-development-5bin\" rel=\"nofollow\"\u003eHello XState Part 1: Learning state machines for frontend web development\u003c/a\u003e by \u003ca href=\"https://dev.to/ekafyi\" rel=\"nofollow\"\u003eEka\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/ekafyi/hello-xstate-part-2-exploring-the-xstate-viz-example-1nc1\" rel=\"nofollow\"\u003eHello XState Part 2: Exploring the XState Viz example\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/ekafyi/hello-xstate-part-3-writing-my-first-state-machines-and-washing-my-hands-for-20-seconds-23p\" rel=\"nofollow\"\u003eHello XState Part 3: Writing my first state machines (and washing my hands)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=4CLdNeetVHw\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e The Actor Model | XState part 1\u003c/a\u003e by \u003ca href=\"https://bisvarup.me/\" rel=\"nofollow\"\u003e@bisvarup\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/ancient-framework-bvw61?file=/src/App.js\" rel=\"nofollow\"\u003eCodeSandbox example\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/@d_danailov/intro-sstate-and-state-machines-react-3b873a6a713d\" rel=\"nofollow\"\u003eIntro: XState and State Machines (React)\u003c/a\u003e by \u003ca href=\"https://medium.com/@d_danailov\" rel=\"nofollow\"\u003eDimitar Danailov\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=h5H1ZmjMDE4\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Learning XState with Lauren\u003c/a\u003e on Lauren Learns Things\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/xstate-react-and-typescript-how-to-get-it-working-4p18\" rel=\"nofollow\"\u003eXState, React, and TypeScript - how to get it working\u003c/a\u003e by \u003ca href=\"https://dev.to/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=JauJhGTBFsc\" rel=\"nofollow\"\u003eXState Pizza Wizard!\u003c/a\u003e by \u003ca href=\"https://github.com/jherr\"\u003eJack Herrington\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/jherr/xstate-pizza-orderer\"\u003eGitHub - Code\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://imfeld.dev/writing/swr_with_xstate\" rel=\"nofollow\"\u003eSWR-Style Fetching with XState State Machines\u003c/a\u003e by \u003ca href=\"https://imfeld.dev\" rel=\"nofollow\"\u003eDaniel Imfeld\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://slides.com/stli/xstate-angular-nl\" rel=\"nofollow\"\u003eSlides - Working with State Machines in Angular\u003c/a\u003e with XState by \u003ca href=\"https://twitter.com/stefanos_lig\" rel=\"nofollow\"\u003eStefanos Lignos\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://codechips.me/firebase-authentication-with-xstate-and-svelte/\" rel=\"nofollow\"\u003eFirebase authentication with XState and Svelte\u003c/a\u003e by \u003ca href=\"https://github.com/codechips\"\u003e@codechips\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/codechips/svelte-firebase-auth-xstate-example\"\u003eGitHub - code\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=tkxH7o-n9sI\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Model Based Testing with XState | Why It's Great | Part 1\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCVYw7ad200ZmvsZ0BVC9YvA\" rel=\"nofollow\"\u003eJohn Bales\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=9_dWCweA8Pk\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Model Based Testing with XState | The Basics | Part 2\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=9gQulfnG7HM\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Model Based Testing with XState | Path Generation with Context | Part 3\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=brMpOOAOUZ4\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Mini Introducción a XState\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCBXo5FFDCtNoddUOqZuWX7w\" rel=\"nofollow\"\u003eMichell Ayala\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Z7LIsZfQ4LU\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e React + XState\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/joepurnell1/testing-xstate-with-react-testing-library-26kh\" rel=\"nofollow\"\u003eTesting XState with React Testing Library\u003c/a\u003e by \u003ca href=\"https://dev.to/joepurnell1\" rel=\"nofollow\"\u003eJoe Purnell\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=PRwDOSjIFg8\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Easy Introduction to XState in React | States, Transitions, Guards, and (Actions\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UC4gKWR53xDzybMwm8Y61ukA\" rel=\"nofollow\"\u003eBhargav Ponnapalli\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=bPUgBHFfQdI\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e State-driven Interfaces with XState\u003c/a\u003e on \u003ca href=\"https://www.youtube.com/channel/UCUwngm8TCj0mhsvKTO2q5fQ\" rel=\"nofollow\"\u003eMozilla Indonesia\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=-FiN2Svpk2s\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Virtual Lunch \u0026amp; Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind\u003c/a\u003e by Anders Bech Mellson\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=hZ1vaMJnKx0\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Refactoring with XState - Part 1\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCAFlrYILud3-3MCs8nsDiAA\" rel=\"nofollow\"\u003eVigsCodes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://moduscreate.com/blog/state-machines-in-production/\" rel=\"nofollow\"\u003eState machines in Production\u003c/a\u003e by \u003ca href=\"https://twitter.com/kobeljic\" rel=\"nofollow\"\u003eIvan Kovic\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://swizec.com/blog/when-your-brain-is-breaking-try-xstate\" rel=\"nofollow\"\u003eWhen your brain is breaking, try XState\u003c/a\u003e by \u003ca href=\"https://swizec.com\" rel=\"nofollow\"\u003e@swizec\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/cypress-io/cypress-realworld-app\"\u003eGitHub - Cypress Real-World App\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/well-red/state-machines-for-everyone-part-1-introduction-b7ac9aaf482e\" rel=\"nofollow\"\u003eState Machines For Everyone\u003c/a\u003e by \u003ca href=\"https://medium.com/@alexmdodge\" rel=\"nofollow\"\u003eAlex Dodge\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://calebukle.com/blog/my-first-machine-getting-started-with-xstate-and-angular\" rel=\"nofollow\"\u003eMy First Machine, Getting Started with XState and Angular\u003c/a\u003e by \u003ca href=\"https://calebukle.com\" rel=\"nofollow\"\u003eCaleb Ukle\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=CpxL-4oIZPw\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Reducing state complexity with XState\u003c/a\u003e by \u003ca href=\"/darrylhebbes/awesome_xstate/blob/master/www.github.com/pkishoez\"\u003eKishore\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/soorajsnblaze333/finite-state-machines-in-react-js-using-xstate-36ho\" rel=\"nofollow\"\u003eFinite State Machines in React JS using XState JS\u003c/a\u003e by \u003ca href=\"https://dev.to/soorajsnblaze333\" rel=\"nofollow\"\u003eSooraj\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/playlist?list=PLsVj0cy-DbErFraf3KeAUbzVl-OKyBZ0-\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Managing UI Complexity with Statecharts (playlist)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.ianjones.us/xstate-saves-our-bacon\" rel=\"nofollow\"\u003eHow State Machines Saved Our Bacon 🥓\u003c/a\u003e by \u003ca href=\"https://www.ianjones.us/\" rel=\"nofollow\"\u003eIan Jones\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://swizec.com/blog/refactoring-a-usereducer-to-xstate-pt1-codewithswiz-11/\" rel=\"nofollow\"\u003eRefactoring a useReducer to XState, Part 1\u003c/a\u003e by \u003ca href=\"https://swizec.com\" rel=\"nofollow\"\u003e@swizec\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=pclR8Q5mbNI\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState and React\u003c/a\u003e on \u003ca href=\"https://www.youtube.com/channel/UCcRg2Au0LLtEcakG9fg6VXg\" rel=\"nofollow\"\u003eLeniolabs\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/small-sea-t5mce?file=/pages/index.js/\" rel=\"nofollow\"\u003eCodeSandbox example\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://swizec.com/blog/how-to-write-tests-for-xstate-codewithswiz-12/\" rel=\"nofollow\"\u003eHow to write tests for XState\u003c/a\u003e by \u003ca href=\"https://swizec.com\" rel=\"nofollow\"\u003e@swizec\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/kwdowik/cra-template-xstate\"\u003eCreate-React-App Template with XState\u003c/a\u003e by \u003ca href=\"https://github.com/kwdowik\"\u003eKacper Wdowik\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=8y9wUwJvdGs\" rel=\"nofollow\"\u003eXState and State Machines in VueJS\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA\" rel=\"nofollow\"\u003eConstantin Druc\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/codingedgar/tes-en-l%C3%ADnea-react-typescript-xstate-fp-ts-css-grid-esp-1373236189d1\" rel=\"nofollow\"\u003eTes en Línea: React, TypeScript, XState, fp-ts \u0026amp; CSS Grid (esp)\u003c/a\u003e by \u003ca href=\"https://medium.com/@codingedgar\" rel=\"nofollow\"\u003eEdgar Rodriguez\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/rjdestigter/supervising-xstate-machines-with-redux-277d\" rel=\"nofollow\"\u003eSupervising XState Machines with Redux\u003c/a\u003e by \u003ca href=\"https://dev.to/rjdestigter\" rel=\"nofollow\"\u003eJohn de Stigter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/rjdestigter/working-with-non-user-asynchronous-events-in-model-based-tests-with-xstate-58ek\" rel=\"nofollow\"\u003eWorking with non-user asynchronous events in model based tests with XState\u003c/a\u003e by \u003ca href=\"https://dev.to/rjdestigter\" rel=\"nofollow\"\u003eJohn de Stigter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/rjdestigter/model-based-ui-tests-with-xstate-cypress-puppeteer-more-268d\" rel=\"nofollow\"\u003eModel based UI tests with XState, Cypress, Puppeteer \u0026amp; more\u003c/a\u003e by \u003ca href=\"https://dev.to/rjdestigter\" rel=\"nofollow\"\u003eJohn de Stigter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/rjdestigter/thoughts-on-state-management-with-xstate-and-reactjs-3d19\" rel=\"nofollow\"\u003eThoughts on State Management with XState and ReactJS\u003c/a\u003e by \u003ca href=\"https://dev.to/rjdestigter\" rel=\"nofollow\"\u003eJohn de Stigter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=DnuJFUR1SgA\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Tutorial of C++ Code Generator for XState State Machine engine\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCHFfZT1QM-vnqSZKtrT0e6g\" rel=\"nofollow\"\u003eAndrew Shuvalov\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=8TTfRrmNu0s\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 2\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=HoH68709Sq8\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Part 3\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/shuvalov-mdb/xstate-cpp-generator\"\u003eGitHub Project\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://swizec.com/blog/react-context-without-context-using-xstate-codewithswiz-14-15\" rel=\"nofollow\"\u003eReact context without context, using XState – CodeWithSwiz 14, 15\u003c/a\u003e by \u003ca href=\"https://swizec.com\" rel=\"nofollow\"\u003e@swizec\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/ooade/state-machines-workshop\"\u003eState Machines Workshop with XState\u003c/a\u003e by \u003ca href=\"https://github.com/ooade\"\u003eAdemola (@ooade)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=fT9p9CCSrn8\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Finite State Machines in Vue 3\u003c/a\u003e by \u003ca href=\"https://twitter.com/frontstuff_io\" rel=\"nofollow\"\u003eSarah Dayan\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=wRktleOGKS4\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Frontend is Rocket Science - How to use XState in Vue 3 Now!\u003c/a\u003e by \u003ca href=\"https://twitter.com/aleksejdix\" rel=\"nofollow\"\u003eAleksej Dix\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=1TT2ymkYGyM\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e React Wednesdays: XState and JavaScript State Machines\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=jCbV5aELY6A\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Declarative and manageable state management with XState\u003c/a\u003e on Decoupled Days\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=D6LzWcV_-14\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Modeling a Voicemail Widget with XState\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA\" rel=\"nofollow\"\u003eConstantin Druc\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/xstate-brain-teaser-1-auth-flow-2jhl\" rel=\"nofollow\"\u003eXState Brain Teaser #1 - Auth Flow\u003c/a\u003e by \u003ca href=\"https://twitter.com/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://fvsch.com/learning-xstate\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Learning XState by refactoring an old project\u003c/a\u003e by \u003ca href=\"https://fvsch.com/\" rel=\"nofollow\"\u003eFlorens Verschelde\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://fvsch.com/learning-xstate\" rel=\"nofollow\"\u003eArticle\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://nisimdor.medium.com/creating-state-machines-in-javascript-with-xstate-21e1599521be\" rel=\"nofollow\"\u003eCreating State Machines in JavaScript with XState\u003c/a\u003e by \u003ca href=\"https://nisimdor.medium.com/\" rel=\"nofollow\"\u003eDor Nisim\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/just-use-props-an-opinionated-guide-to-react-and-xstate-fc9\" rel=\"nofollow\"\u003e\"Just Use Props\": An opinionated guide to React and XState\u003c/a\u003e by \u003ca href=\"https://dev.to/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Wo-rVyAsz-Q\" rel=\"nofollow\"\u003eUsando XState y React para hacer peticiones HTTP (en español)\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA\" rel=\"nofollow\"\u003eGCD Coder\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=GMXrwrG0cL4\" rel=\"nofollow\"\u003eInfinite Scrolling con Svelte, IntersectionObserver \u0026amp; XState (en español)\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA\" rel=\"nofollow\"\u003eGCD Coder\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=g4YnmydXMP8\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Getting Started with XState in Vue 3\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q\" rel=\"nofollow\"\u003eJacoboCode\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=7tT45eRmyJE\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Typing XState in Vue 3\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q\" rel=\"nofollow\"\u003eJacoboCode\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/gcdcoder/infinite-scrolling-with-svelte-3-xstate-and-intersectionobserver-127j\" rel=\"nofollow\"\u003eInfinite Scrolling with Svelte 3, XState and IntersectionObserver\u003c/a\u003e by \u003ca href=\"https://dev.to/gcdcoder\" rel=\"nofollow\"\u003eGustavo Castillo\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f\" rel=\"nofollow\"\u003eUntangle complex flows in your React Native app with XState\u003c/a\u003e by \u003ca href=\"https://sdavico.medium.com/\" rel=\"nofollow\"\u003eSimone D'Avico\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/welld-tech/integrate-xstate-with-react-native-and-react-navigation-21ead87391da\" rel=\"nofollow\"\u003eIntegrate XState with React Native and React Navigation\u003c/a\u003e by \u003ca href=\"https://sdavico.medium.com/\" rel=\"nofollow\"\u003eSimone D'Avico\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/welld-tech/testing-xstate-machines-in-your-react-native-app-236fb01bf5b8\" rel=\"nofollow\"\u003eTesting XState machines in your React Native app\u003c/a\u003e by \u003ca href=\"https://sdavico.medium.com/\" rel=\"nofollow\"\u003eSimone D'Avico\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://soshace.com/an-introduction-to-finite-state-machines-simplifying-react-state-management-with-state-machines/\" rel=\"nofollow\"\u003eAn Introduction to Finite State Machines: Simplifying React State Management with State Machines\u003c/a\u003e by \u003ca href=\"https://soshace.com/author/bradstarart/\" rel=\"nofollow\"\u003eBradley Kofi\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://medium.com/giant-machines/an-introduction-to-xstate-in-typescript-e71c7729ce88\" rel=\"nofollow\"\u003eAn Introduction to XState in TypeScript\u003c/a\u003e by \u003ca href=\"https://medium.com/@n.khosla91\" rel=\"nofollow\"\u003eNeeraj Khosla\n\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=1kJcnFBrk2I\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState - Global state in React\u003c/a\u003e by \u003ca href=\"https://twitter.com/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=clu2bqjk3c0\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState Introduction\u003c/a\u003e on \u003ca href=\"https://www.youtube.com/channel/UCS3-MF_4ADqglU2OSly4vIw\" rel=\"nofollow\"\u003eFor Those Who Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.jskoneczny.pl/post/future-of-state-management-in-react-with-xstate\" rel=\"nofollow\"\u003eFuture of state management in React with XState\u003c/a\u003e by \u003ca href=\"https://blog.jskoneczny.pl/\" rel=\"nofollow\"\u003eJakub Skoneczny\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=NIfQsc5XAzU\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Custom Svelte Store: XState as Svelte store\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ\" rel=\"nofollow\"\u003elihautan\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=gCT-lCYYhf4\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Finite State Machine on Frontend\u003c/a\u003e by \u003ca href=\"https://twitter.com/jevgeniazi\" rel=\"nofollow\"\u003eEugenia Zigisova\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.imbhargav5.com/1-introduction-to-xstate-in-react\" rel=\"nofollow\"\u003e#1 Introduction to XState in React\u003c/a\u003e by \u003ca href=\"https://blog.imbhargav5.com/\" rel=\"nofollow\"\u003eBhargav Ponnapalli\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=paZ4ImyI1YQ\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Modelling application behaviour with the XState library (in React)\u003c/a\u003e by \u003ca href=\"https://twitter.com/marcklefter\" rel=\"nofollow\"\u003eMarc Klefter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/droopytersen/rsvp-to-weddings-with-xstate-55nl\" rel=\"nofollow\"\u003eRsvp to weddings with XState\u003c/a\u003e by \u003ca href=\"https://dev.to/droopytersen\" rel=\"nofollow\"\u003eAndrew Peterson\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://tallpad.com/series/xstate-misc/episode/1\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState and State Machines in Vue\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/nartc/nx-state-machine-todos-mvc\"\u003eGithub - XState with React and Angular in Nx Workspace\u003c/a\u003e by \u003ca href=\"https://nartc.me\" rel=\"nofollow\"\u003eChau Tran\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/alirezavalizade/boost-your-react-application-s-performance-by-xstate-42p8\" rel=\"nofollow\"\u003eBoost your React application's performance by XState\u003c/a\u003e by \u003ca href=\"https://dev.to/alirezavalizade\" rel=\"nofollow\"\u003eAlireza Valizade\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=po1YRAk7irY\" rel=\"nofollow\"\u003eGetting Started with XState, React, and Typescript | Part 1\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCsKwL0-e2eHRNa6Ne99AESw\" rel=\"nofollow\"\u003eModus Create\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.oddeven.ch/blog/frontend-is-rocket-science-managing-state-in-any-javascript-application/\" rel=\"nofollow\"\u003eFrontend is Rocket Science – Managing state in any JavaScript Application\u003c/a\u003e by \u003ca href=\"https://twitter.com/aleksejdix\" rel=\"nofollow\"\u003eAleksej Dix\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=UzA5Mvk587M\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason\u003c/a\u003e by \u003ca href=\"https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A\" rel=\"nofollow\"\u003eJason Lengstorf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.telerik.com/blogs/how-to-use-finite-state-machines-react\" rel=\"nofollow\"\u003eHow to Use Finite State Machines in React\u003c/a\u003e by \u003ca href=\"https://www.telerik.com/blogs/author/leonardo-maldonado\" rel=\"nofollow\"\u003eLeonardo Maldonado\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Rm6AMY6-Wqw\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Maquinas de estado finito y gráficas de estado en React \u003c/a\u003e by José L Narajo\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/xstate-should-this-be-an-action-or-a-service-2cp0\" rel=\"nofollow\"\u003eXState: Should this be an action, or a service?\u003c/a\u003e by \u003ca href=\"https://twitter.com/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/state-machines-should-this-be-a-state-or-in-context-1d7e\" rel=\"nofollow\"\u003eState Machines: Should this be a state, or in context?\u003c/a\u003e by \u003ca href=\"https://twitter.com/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/mpocock1/xstate-what-s-the-difference-between-machine-and-createmachine-15h1\" rel=\"nofollow\"\u003eXState: What's the difference between Machine and createMachine?\u003c/a\u003e by \u003ca href=\"https://twitter.com/mpocock1\" rel=\"nofollow\"\u003eMatt Pocock\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/jbranchaud/use-an-xstate-machine-with-react-326i\" rel=\"nofollow\"\u003eUse an XState Machine with React\u003c/a\u003e by \u003ca href=\"https://twitter.com/jbrancha\" rel=\"nofollow\"\u003eJosh Branchaud\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://devtrends.io/videos/xstate/\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e DevTrends: XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/anthonygore\" rel=\"nofollow\"\u003eAnthony Gore\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://codesandbox.io/s/stoic-thompson-ktzrl?file=/src/App.vue\" rel=\"nofollow\"\u003eXState: Street Lights with Pedestrian Crossing using Vue.js\u003c/a\u003e by \u003ca href=\"https://github.com/dubbs\"\u003eKevin Warrington\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=Slb6M_rIn0M\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Front-end state management with XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/amyvpellegrini\" rel=\"nofollow\"\u003eAmy Pellegrini\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=yRB57CDvQuY\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Splitting the view and the brains in JS — state machines with XState (in French)\u003c/a\u003e by \u003ca href=\"https://www.linkedin.com/in/aumeunier\" rel=\"nofollow\"\u003eAurelien Meunier\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gustavosantos.dev/a/using-xstate-with-deno\" rel=\"nofollow\"\u003eUsing XState with Deno\u003c/a\u003e by \u003ca href=\"https://twitter.com/bruno__quaresma\" rel=\"nofollow\"\u003eBruno Quaresma\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://engineering.kablamo.com.au/posts/2021/finite-state-machines-and-xstate\" rel=\"nofollow\"\u003eHow to model application flows in React with finite state machines and XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/madole\" rel=\"nofollow\"\u003eAndrew McDowell\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.logrocket.com/state-driven-interfaces-with-xstate/\" rel=\"nofollow\"\u003eState-driven interfaces with XState\u003c/a\u003e - Brad Woods, Mar 2020\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7\" rel=\"nofollow\"\u003eRedux is half of a pattern (1/2)\u003c/a\u003e - David Khourshid, 2020\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i\" rel=\"nofollow\"\u003eNo, disabling a button is not app logic\u003c/a\u003e - David Khourshid, 2019\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://24ways.org/2018/state-machines-in-user-interfaces/\" rel=\"nofollow\"\u003eThe (Switch)-Case for State Machines in User Interfaces\u003c/a\u003e - David Khourshid, 2018\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/\" rel=\"nofollow\"\u003eRobust React User Interfaces with Finite State Machines\u003c/a\u003e - David Khourshid, 2018\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mastery.games/post/state-machines-in-react/\" rel=\"nofollow\"\u003eState Machines in React\u003c/a\u003e - Dave Geddes\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.phillipparker.io/articles/finite-state-machines-in-vue\" rel=\"nofollow\"\u003eFinite State Machines in Vue\u003c/a\u003e - Phillip Parker\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://dev.to/codingdive/introducing-state-machine-advent-24-bite-sized-blog-posts-about-state-machines-and-statecharts-2ce0\" rel=\"nofollow\"\u003e24 days to learn statecharts #devadvent\u003c/a\u003e - series of 25 blog posts, Statecharts, Typescript\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTesting\u003c/h3\u003e\u003ca id=\"user-content-testing\" class=\"anchor\" aria-label=\"Permalink: Testing\" href=\"#testing\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://css-tricks.com/model-based-testing-in-react-with-state-machines/\" rel=\"nofollow\"\u003eModel-Based Testing in React with State Machines\u003c/a\u003e - David Khourshid, 2020\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGuides\u003c/h3\u003e\u003ca id=\"user-content-guides\" class=\"anchor\" aria-label=\"Permalink: Guides\" href=\"#guides\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://bradwoods.io/guides/xstate-react\" rel=\"nofollow\"\u003eExtensive examples of XState features with and without React.\u003c/a\u003e - Brad Woods ( Updated often )\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUsage \u0026amp; Examples\u003c/h3\u003e\u003ca id=\"user-content-usage--examples\" class=\"anchor\" aria-label=\"Permalink: Usage \u0026amp; Examples\" href=\"#usage--examples\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/coodoo/xstate-examples\"\u003eExamples modelling application state with statecharts\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://xstate-catalogue.com/\" rel=\"nofollow\"\u003eXState Catalog - A collection of professionally designed state machines\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTalks\u003c/h3\u003e\u003ca id=\"user-content-talks\" class=\"anchor\" aria-label=\"Permalink: Talks\" href=\"#talks\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=wgWwJSnhgDU\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022\u003c/a\u003e - Youtube, duration, 39:28\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=4Mue0Qr_apE\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021\u003c/a\u003e - Youtube, duration, 30:01\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=GSHQFx7PG20\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019\u003c/a\u003e - Youtube, duration 21:25\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=RqTxtOXcv8Y\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - Simplifying Complex UIs with Finite Automata \u0026amp; Statecharts | JSConf Iceland 2018\u003c/a\u003e - Youtube, duration 34:27\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=DrHccvns-L0\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018\u003c/a\u003e Youtube, duration 28:50\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=VU1NKX6Qkxc\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017\u003c/a\u003e Youtube, duration 25:32\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=iDZxjJYMOUQ\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState - An introduction - Finite State Machines in React - Leigh Halliday\u003c/a\u003e Youtube, duration 8:00\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=XaHk9vhmus4\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e XState - Data Loading Service - Finite State Machines in React - Leigh Halliday\u003c/a\u003e Youtube, duration 18:54\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTools\u003c/h3\u003e\u003ca id=\"user-content-tools\" class=\"anchor\" aria-label=\"Permalink: Tools\" href=\"#tools\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/mogsie/xstate-plantuml\"\u003eXState PlantUML\u003c/a\u003e by \u003ca href=\"https://github.com/mogsie\"\u003eErik Mogensen\u003c/a\u003e, given an XState definition (JS Object) of a statechart, this tool will output a plantuml source rendering of the statechart.\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://chrome.google.com/webstore/detail/xstate-devtools/aamnodipnlopbknpklfoabalmobheehc\" rel=\"nofollow\"\u003eXState Chrome Devtool\u003c/a\u003e Inspect XState machines running in your app\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/rlaffers/xstate-ninja\"\u003eXState Ninja\u003c/a\u003e - a powerful devtool for inspecting multiple XState state machines at the same time\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://sketch.systems/\" rel=\"nofollow\"\u003eSketch Systems\u003c/a\u003e - design and understand state, export result to xState machine object\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/mattpocock/xstate-codegen\"\u003eXState Codegen\u003c/a\u003e - generate 100% typesafe Typescript code with a CLI\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDig deeper into Statecharts\u003c/h3\u003e\u003ca id=\"user-content-dig-deeper-into-statecharts\" class=\"anchor\" aria-label=\"Permalink: Dig deeper into Statecharts\" href=\"#dig-deeper-into-statecharts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf\" rel=\"nofollow\"\u003eStatecharts - A Visual Formalism For Complex Systems\u003c/a\u003e (PDF) - David Harel, 1984\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://statecharts.github.io/\" rel=\"nofollow\"\u003eWorld of Statecharts\u003c/a\u003e a comprehensive guide by \u003ca href=\"https://github.com/mogsie\"\u003eErik Mogensen\u003c/a\u003e in using statecharts in your applications\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://blog.nomagic.com/statechart-autocoding-curiosity-rover/\" rel=\"nofollow\"\u003eStatechart Autocoding for NASA's Curiosity Rover\u003c/a\u003e, model based systems engineering\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/achou11/state-machines\"\u003eA humble repo to collect knowledge on state machines.\u003c/a\u003e - Andrew Chou\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDive deeper into State Machines\u003c/h3\u003e\u003ca id=\"user-content-dive-deeper-into-state-machines\" class=\"anchor\" aria-label=\"Permalink: Dive deeper into State Machines\" href=\"#dive-deeper-into-state-machines\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"http://raganwald.com/2018/02/23/forde.html\" rel=\"nofollow\"\u003eHow I Learned to Stop Worrying and ❤️ the State Machine\u003c/a\u003e - Reginald Braithwaite, 2018\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent\" rel=\"nofollow\"\u003eYou are managing state? Think twice.\u003c/a\u003e - Krasimir Tsonev, 2017\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gist.github.com/andymatuschak/d5f0a8730ad601bcccae97e8398e25b2\"\u003eA composable pattern for pure state machines with effects (draft v3) \u003c/a\u003e - Andy Matuschak, 2016\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gist.github.com/davidkpiano/e715b59bef817d2146164add26a134b0\"\u003eCreating CSS State machines\u003c/a\u003e - David Khourshid\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://skorks.com/2011/09/why-developers-never-use-state-machines/\" rel=\"nofollow\"\u003eWhy Developers Never Use State Machines\u003c/a\u003e - Alan Skorkin, 2018\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://engineering.shopify.com/blogs/engineering/17488160-why-developers-should-be-force-fed-state-machines\" rel=\"nofollow\"\u003eWhy developers should be force-fed state machines\u003c/a\u003e - Willem van Bergen (engineering at shopify) 2011\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gist.github.com/coodoo/0a7658a6c6580cb11101a9c22904d425\"\u003eThe case for statechart and xstate -- why it matters and how we can benefit from it\u003c/a\u003e - Jeremy Lu (StateKit)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eOther great courses and guides:\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://egghead.io/courses/introduction-to-state-machines-using-xstate\" rel=\"nofollow\"\u003eEgghead - Introduction to State Machines Using XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/kyleshevlin\" rel=\"nofollow\"\u003eKyle Shevlin\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/eggheadio-projects/introduction-to-state-machines-using-xstate-notes\"\u003eGitHub - Course Notes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/kyleshevlin/intro-to-state-machines-and-xstate-workshop\"\u003eGitHub - Workshop\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://egghead.io/courses/construct-sturdy-uis-with-xstate\" rel=\"nofollow\"\u003eEgghead - Construct Sturdy UIs with XState\u003c/a\u003e by \u003ca href=\"https://twitter.com/MannIsaac\" rel=\"nofollow\"\u003eIsaac Mann\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://examples.bradwoods.io/xstate\" rel=\"nofollow\"\u003eXState Guide\u003c/a\u003e by \u003ca href=\"https://twitter.com/bradwoodsio\" rel=\"nofollow\"\u003eBrad Woods\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003ePodcasts\u003c/h2\u003e\u003ca id=\"user-content-podcasts\" class=\"anchor\" aria-label=\"Permalink: Podcasts\" href=\"#podcasts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://reactpodcast.com/episodes/5\" rel=\"nofollow\"\u003e🎙 (React Podcast) 5: Finite State Machines with David Khourshid\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://reactpodcast.com/episodes/83\" rel=\"nofollow\"\u003e🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://fullstackradio.com/130\" rel=\"nofollow\"\u003e🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://kentcdodds.com/chats-with-kent-podcast/seasons/01/episodes/make-your-apps-resilient-finite-state-machines-with-david-khourshid\" rel=\"nofollow\"\u003e🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://devchat.tv/react-round-up/rru-069-the-state-machines-in-react-with-david-khourshid/\" rel=\"nofollow\"\u003e🎙 (React Round-Up) 069: The State Machines in React with David Khourshid\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://shoptalkshow.com/327-working-state-machines/\" rel=\"nofollow\"\u003e🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://egghead.io/podcasts/introduction-to-state-machines-and-xstate-with-kyle-shevlin\" rel=\"nofollow\"\u003e🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://syntax.fm/show/206/state-machines-css-and-animations-with-david-k-piano\" rel=\"nofollow\"\u003e🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://modernweb.podbean.com/e/s07e20-modern-web-podcast-building-state-machines-using-xstate-with-david-khourshid/\" rel=\"nofollow\"\u003e🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=uLlQjp5u2KQ\" rel=\"nofollow\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"arrow_forward\"\u003e▶️\u003c/g-emoji\u003e Video\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/article\u003e","loaded":true,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":[{"level":2,"text":"Awesome XState","anchor":"awesome-xstate","htmlText":"Awesome XState"},{"level":3,"text":"XState","anchor":"xstate","htmlText":"XState"},{"level":4,"text":"Main Resources","anchor":"main-resources","htmlText":"Main Resources"},{"level":3,"text":"Concepts","anchor":"concepts","htmlText":"Concepts"},{"level":3,"text":"Projects","anchor":"projects","htmlText":"Projects"},{"level":4,"text":"Vue","anchor":"vue","htmlText":"Vue"},{"level":4,"text":"React","anchor":"react","htmlText":"React"},{"level":3,"text":"Articles","anchor":"articles","htmlText":"Articles"},{"level":3,"text":"Testing","anchor":"testing","htmlText":"Testing"},{"level":3,"text":"Guides","anchor":"guides","htmlText":"Guides"},{"level":3,"text":"Usage \u0026 Examples","anchor":"usage--examples","htmlText":"Usage \u0026amp; Examples"},{"level":3,"text":"Talks","anchor":"talks","htmlText":"Talks"},{"level":3,"text":"Tools","anchor":"tools","htmlText":"Tools"},{"level":3,"text":"Dig deeper into Statecharts","anchor":"dig-deeper-into-statecharts","htmlText":"Dig deeper into Statecharts"},{"level":3,"text":"Dive deeper into State Machines","anchor":"dive-deeper-into-state-machines","htmlText":"Dive deeper into State Machines"},{"level":2,"text":"Podcasts","anchor":"podcasts","htmlText":"Podcasts"}],"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fdarrylhebbes%2Fawesome_xstate"}}],"overviewFilesProcessingTime":0}},"appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-7d7eb7c71814.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-96e76d5fdb2c.js","githubDevUrl":null,"enabled_features":{"copilot_workspace":null,"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"accessible_code_button":true,"github_models_repo_integration":false}}}}</script> <div data-target="react-partial.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.iVEunk{margin-top:16px;margin-bottom:16px;}/*!sc*/ .jzuOtQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}/*!sc*/ .bGojzy{margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:16px;}/*!sc*/ .iNSVHo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-bottom:16px;padding-top:8px;}/*!sc*/ .bVgnfw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ @media screen and (max-width:320px){.bVgnfw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .CEgMp{position:relative;}/*!sc*/ @media screen and (max-width:380px){.CEgMp .ref-selector-button-text-container{max-width:80px;}}/*!sc*/ @media screen and (max-width:320px){.CEgMp{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.CEgMp .overview-ref-selector{width:100%;}.CEgMp .overview-ref-selector > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.CEgMp .overview-ref-selector > span > span[data-component="text"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .gMOVLe[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;}/*!sc*/ .gMOVLe[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gMOVLe[data-size="medium"] > span{width:inherit;}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ffLUq{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .bmcJak{min-width:0;}/*!sc*/ .fLXEGX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1079px){.fLXEGX{display:none;}}/*!sc*/ .lmSMZJ[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px;}/*!sc*/ .lmSMZJ[data-size="medium"] span[data-component="leadingVisual"]{margin-right:4px !important;}/*!sc*/ .dqfxud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1080px){.dqfxud{display:none;}}/*!sc*/ @media screen and (max-width:543px){.dqfxud{display:none;}}/*!sc*/ .fGwBZA[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .jxTzTd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px;}/*!sc*/ .gqqBXN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;}/*!sc*/ @media screen and (max-width:543px){.gqqBXN{display:none;}}/*!sc*/ .dzXgxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1011px){.dzXgxt{display:none;}}/*!sc*/ .iWFGlI{margin-left:8px;margin-right:8px;margin:0;}/*!sc*/ .vcvyP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .YUPas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1012px){.YUPas{display:none;}}/*!sc*/ .izFOf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:544px){.izFOf{display:none;}}/*!sc*/ .vIPPs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .fdROMU{width:100%;border-collapse:separate;border-spacing:0;border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset;}/*!sc*/ .jGKpsv{height:0px;line-height:0px;}/*!sc*/ .jGKpsv tr{height:0px;font-size:0px;}/*!sc*/ .jdgHnn{padding:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;text-align:left;height:40px;}/*!sc*/ .jdgHnn th{padding-left:16px;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));}/*!sc*/ .bQivRW{width:100%;border-top-left-radius:6px;}/*!sc*/ @media screen and (min-width:544px){.bQivRW{display:none;}}/*!sc*/ .ldkMIO{width:40%;border-top-left-radius:6px;}/*!sc*/ @media screen and (max-width:543px){.ldkMIO{display:none;}}/*!sc*/ .jMbWeI{text-align:right;padding-right:16px;width:136px;border-top-right-radius:6px;}/*!sc*/ .gpqjiB{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;height:40px;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .eNCcrz{text-align:center;vertical-align:center;height:40px;border-top:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .bHTcCe{border-top:1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer;}/*!sc*/ .csrIcr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:16px;}/*!sc*/ .bUQNHB{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ @media screen and (max-width:543px){.bUQNHB{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 32px);}}/*!sc*/ @media screen and (min-width:544px){.bUQNHB{max-width:100%;}}/*!sc*/ .jPdcfu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid;border-bottom-color:var(--borderColor-default,var(--color-border-default,#d0d7de));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:8px;position:-webkit-sticky;position:sticky;top:0;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;border-top-left-radius:6px;border-top-right-radius:6px;}/*!sc*/ .iphEWz{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:none;max-width:100%;padding-left:8px;padding-right:8px;}/*!sc*/ .hUCRAk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .cwoBXV[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-subtle,#6e7781));padding-left:8px;padding-right:8px;}/*!sc*/ .QkQOb{padding:32px;overflow:auto;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"iVEunk,jzuOtQ,bGojzy,iNSVHo,bVgnfw,CEgMp,gMOVLe,gUkoLg,bZBlpz,lhTYNA,ffLUq,bmcJak,fLXEGX,lmSMZJ,dqfxud,fGwBZA,jxTzTd,gqqBXN,dzXgxt,iWFGlI,vcvyP,YUPas,izFOf,vIPPs,fdROMU,jGKpsv,jdgHnn,bQivRW,ldkMIO,jMbWeI,gpqjiB,dzCJzi,eNCcrz,bHTcCe,csrIcr,bUQNHB,jPdcfu,iphEWz,hUCRAk,cwoBXV,QkQOb,"}/*!sc*/ .brGdpi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/*!sc*/ data-styled.g5[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"]{content:"brGdpi,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g16[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .liVpTx{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;}/*!sc*/ data-styled.g18[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"liVpTx,"}/*!sc*/ </style> <!-- --> <!-- --> <div class="Box-sc-g0xbh4-0 iVEunk"><div class="Box-sc-g0xbh4-0 jzuOtQ"><div class="Box-sc-g0xbh4-0 bGojzy"></div></div><div class="Box-sc-g0xbh4-0 iNSVHo"><div class="Box-sc-g0xbh4-0 bVgnfw"><div class="Box-sc-g0xbh4-0 CEgMp"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="master branch" data-testid="anchor-button" class="Box-sc-g0xbh4-0 gMOVLe prc-Button-ButtonBase-c50BI overview-ref-selector width-full" data-loading="false" data-size="medium" data-variant="default" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 ffLUq ref-selector-button-text-container"><span class="Box-sc-g0xbh4-0 bmcJak prc-Text-Text-0ima0"> <!-- -->master</span></div></div></span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 fLXEGX"><a style="--button-color:fg.muted" type="button" href="/darrylhebbes/awesome_xstate/branches" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rclab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Branches</span></span></a><a style="--button-color:fg.muted" type="button" href="/darrylhebbes/awesome_xstate/tags" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rklab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Tags</span></span></a></div><div class="Box-sc-g0xbh4-0 dqfxud"><a style="--button-color:fg.muted" type="button" aria-label="Go to Branches page" href="/darrylhebbes/awesome_xstate/branches" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Relab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></a><a style="--button-color:fg.muted" type="button" aria-label="Go to Tags page" href="/darrylhebbes/awesome_xstate/tags" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Rmlab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></a></div></div><div class="Box-sc-g0xbh4-0 jxTzTd"><div class="Box-sc-g0xbh4-0 gqqBXN"><div class="Box-sc-g0xbh4-0 dzXgxt"><!--$--><div class="Box-sc-g0xbh4-0 iWFGlI"><span class="Box-sc-g0xbh4-0 vcvyP TextInput-wrapper prc-components-TextInputWrapper-i1ofR prc-components-TextInputBaseWrapper-ueK9q" data-leading-visual="true" data-trailing-visual="true" aria-busy="false"><span class="TextInput-icon" id=":R2j5ab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R2j5ab: :R2j5abH1:" data-component="input" class="prc-components-Input-Ic-y8" value=""/><span class="TextInput-icon" id=":R2j5abH1:" aria-hidden="true"></span></span></div><!--/$--></div><div class="Box-sc-g0xbh4-0 YUPas"><button type="button" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":Rr5ab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">Go to file</span></span></button></div><div class="react-directory-add-file-icon"></div><div class="react-directory-remove-file-icon"></div></div><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="primary" aria-describedby=":R55ab:-loading-announcement" id=":R55ab:"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-code hide-sm" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Code</span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="Box-sc-g0xbh4-0 izFOf"><button data-component="IconButton" type="button" aria-label="Open more actions menu" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":R75ab:-loading-announcement" id=":R75ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div><div class="Box-sc-g0xbh4-0 vIPPs"><div data-hpc="true"><button hidden="" data-testid="focus-next-element-button" data-hotkey="j"></button><button hidden="" data-testid="focus-previous-element-button" data-hotkey="k"></button><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="folders-and-files">Folders and files</h2><table aria-labelledby="folders-and-files" class="Box-sc-g0xbh4-0 fdROMU"><thead class="Box-sc-g0xbh4-0 jGKpsv"><tr class="Box-sc-g0xbh4-0 jdgHnn"><th colSpan="2" class="Box-sc-g0xbh4-0 bQivRW"><span class="text-bold">Name</span></th><th colSpan="1" class="Box-sc-g0xbh4-0 ldkMIO"><span class="text-bold">Name</span></th><th class="hide-sm"><div title="Last commit message" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit message</span></div></th><th colSpan="1" class="Box-sc-g0xbh4-0 jMbWeI"><div title="Last commit date" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit date</span></div></th></tr></thead><tbody><tr class="Box-sc-g0xbh4-0 gpqjiB"><td colSpan="3" class="bgColor-muted p-1 rounded-top-2"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/darrylhebbes/awesome_xstate/commits/master/" class="prc-Button-ButtonBase-c50BI d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":Raqj8pab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x"><span class="fgColor-default">47 Commits</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="47 Commits" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/darrylhebbes/awesome_xstate/commits/master/" class="prc-Button-ButtonBase-c50BI LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":R1iqj8pab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a></span></div></div></div></div></td></tr><tr class="react-directory-row undefined" id="folder-row-0"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/darrylhebbes/awesome_xstate/blob/master/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/darrylhebbes/awesome_xstate/blob/master/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="Box-sc-g0xbh4-0 eNCcrz d-none" data-testid="view-all-files-row"><td colSpan="3" class="Box-sc-g0xbh4-0 bHTcCe"><div><button class="prc-Link-Link-85e08">View all files</button></div></td></tr></tbody></table></div><div class="Box-sc-g0xbh4-0 csrIcr"><div class="Box-sc-g0xbh4-0 bUQNHB"><div itemscope="" itemType="https://schema.org/abstract" class="Box-sc-g0xbh4-0 jPdcfu"><h2 class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 brGdpi">Repository files navigation</h2><nav class="Box-sc-g0xbh4-0 iphEWz prc-components-UnderlineWrapper-oOh5J" aria-label="Repository files"><ul class="prc-components-UnderlineItemList-b23Hf" role="list"><li class="Box-sc-g0xbh4-0 hUCRAk"><a class="prc-components-UnderlineItem-lJsg-" href="#" aria-current="page"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-book" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path></svg></span><span data-component="text" data-content="README">README</span></a></li></ul></nav><button style="--button-color:fg.subtle" type="button" aria-label="Outline" aria-haspopup="true" aria-expanded="false" tabindex="0" class="Box-sc-g0xbh4-0 cwoBXV prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rr9ab:-loading-announcement" id=":Rr9ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button></div><div class="Box-sc-g0xbh4-0 QkQOb js-snippet-clipboard-copy-unpositioned undefined" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Awesome XState</h2><a id="user-content-awesome-xstate" class="anchor" aria-label="Permalink: Awesome XState" href="#awesome-xstate"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a href="https://github.com/sindresorhus/awesome"><img src="https://camo.githubusercontent.com/8693bde04030b1670d5097703441005eba34240c32d1df1eb82a5f0d6716518e/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667" alt="Awesome" data-canonical-src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" style="max-width: 100%;"></a></p> <p dir="auto">A collection of awesome resources regarding the XState library and Statecharts.</p> <p dir="auto"><a href="https://github.com/statelyai/xstate">Official Code Repository</a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">XState</h3><a id="user-content-xstate" class="anchor" aria-label="Permalink: XState" href="#xstate"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">XState is a library for creating, interpreting, and executing statecharts. Statecharts are a formalism for modeling stateful, reactive systems. - David Khourshid</p> </blockquote> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Main Resources</h4><a id="user-content-main-resources" class="anchor" aria-label="Permalink: Main Resources" href="#main-resources"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://xstate.js.org" rel="nofollow">XState Official Website</a></li> <li><a href="https://xstate.js.org/docs" rel="nofollow">XState Documentation</a></li> <li><a href="https://xstate.js.org/docs/about/resources.html" rel="nofollow">XState Resources</a></li> <li><a href="https://github.com/davidkpiano/xstate">XState on GitHub</a></li> <li><a href="https://spectrum.chat/statecharts" rel="nofollow">XState Community / Forum</a></li> <li><a href="https://xstate-catalogue.com/" rel="nofollow">XState Catalogue</a> a collection of professionally designed state machines you can drop into your projects</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Concepts</h3><a id="user-content-concepts" class="anchor" aria-label="Permalink: Concepts" href="#concepts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://stackoverflow.com/a/54521035" rel="nofollow">Stackoverflow: What is an actual difference between redux and a state machine (e.g. xstate)?</a></li> <li><a href="https://statecharts.github.io/" rel="nofollow">Erik Mogensen - Welcome to the world of Statecharts</a></li> <li><a href="https://github.com/davidkpiano/xstate/blob/master/docs/about/concepts.md">Concepts, in official docs</a> - Article touches on Finite State Machines, Statechart formailsm and the Actor model</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Projects</h3><a id="user-content-projects" class="anchor" aria-label="Permalink: Projects" href="#projects"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Vue</h4><a id="user-content-vue" class="anchor" aria-label="Permalink: Vue" href="#vue"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://github.com/Glutnix/xstate-vue-calculator">Glutnix/xstate-vue-calculator</a> - Calculator</li> </ul> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">React</h4><a id="user-content-react" class="anchor" aria-label="Permalink: React" href="#react"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://github.com/voloshchenkoal/shinkei-suijaku">voloshchenkoal/shinkei-suijaku</a> - Card game</li> <li><a href="https://github.com/davidkpiano/xstate-todomvc">davidkpiano/xstate-todomvc</a> - TodoMVC</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Articles</h3><a id="user-content-articles" class="anchor" aria-label="Permalink: Articles" href="#articles"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=Slb6M_rIn0M" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021</a></li> <li><a href="http://realfiction.net/2019/01/30/xstate-a-typescript-state-machine-with-a-lot-of-features" rel="nofollow">XState - a TypeScript state machine with a lot of features</a> by Frank Quednau</li> <li><a href="https://www.nexmo.com/blog/2019/06/20/creating-a-complex-ivr-system-with-ease-with-xstate-dr" rel="nofollow">Creating a Complex IVR System with Ease with XState</a> by Yonatan Mevorach</li> <li><a href="https://dev.to/timdeschryver/my-love-letter-to-xstate-and-statecharts-287b" rel="nofollow">My love letter to XState and statecharts ♥</a> by Tim Deschryver</li> <li><a href="https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate/54521035#54521035" rel="nofollow">StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)?</a></li> <li><a href="https://github.com/johnkazer/hyperapp-xstate-demo">Hyperapp demo with XState</a> by <a href="https://github.com/johnkazer">@johnkazer</a></li> <li><a href="https://github.com/coodoo/xstate-examples">A series of examples showing how to model application state with statechart using xstate</a> by <a href="https://github.com/coodoo/xstate-examples">@coodoo</a></li> <li><a href="https://www.skcript.com/svr/finite-state-machines-in-react-js-using-xstate/" rel="nofollow">Finite State Machines in React JS using XState</a> by <a href="https://www.linkedin.com/in/sooraj-nair-a81543172/" rel="nofollow">Sooraj Nair</a></li> <li><a href="https://medium.com/@brockreece/vuex-xstate-4f9ea23bb24e" rel="nofollow">Vuex + XState</a> by <a href="https://medium.com/@brockreece" rel="nofollow">Brock Reece</a></li> <li><a href="https://codepen.io/ryanzola/pen/PMwoqe" rel="nofollow">CodePen - XState Vue Login Page</a> by <a href="https://codepen.io/ryanzola" rel="nofollow">Ryan Zola</a></li> <li><a href="https://www.youtube.com/watch?v=GuzcWkVrqLg" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Standing on the Shoulders of Giants. Development with XState</a> by Brad Woods <ul dir="auto"> <li><a href="https://www.atlassian.com/atlascamp/watch-sessions/2019/advanced-app-development/standing-on-the-shoulders-of-giants-development-with-xstate" rel="nofollow">Slides and more</a></li> </ul> </li> <li><a href="https://www.vietnguyen.site/getting-started-with-xstate/" rel="nofollow">Getting Started with XState</a> by Viet Nguyen</li> <li><a href="https://medium.com/@tahini/how-to-effortlessly-model-async-react-with-xstates-invoke-4c36dc8547b3" rel="nofollow">How to Effortlessly Model Async (React) with XState's Invoke</a> by Matthew Jones</li> <li><a href="https://blog.jerry-hong.com/posts/xstate-tutorials-state-machine/?fbclid=IwAR14AL6nwxR5lb78CSABY18rOm2EA7I5f7uaErgZGC0ISmcJFri0VL91_xA" rel="nofollow">XState 新手教學 - Finite State Machine</a> by Jerry Hong</li> <li><a href="https://blog.zfanw.com/xstate-state-management/" rel="nofollow">XState 状态管理</a> by 陈三</li> <li><a href="https://www.youtube.com/watch?v=9P3sLqSiswE" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Aplicaciones React usando XState</a> by Luis César Contreras</li> <li><a href="https://dev.to/felix/replacing-vuex-with-xstate-3097" rel="nofollow">Replacing Vuex with XState</a> by <a href="https://dev.to/felix" rel="nofollow">Felix Guerin</a></li> <li><a href="https://itnext.io/communicating-with-spawned-and-invoked-xstate-actors-in-react-999cca56506b" rel="nofollow">Communicating with spawned and invoked XState actors in React</a> by Ismayil Khayredinov</li> <li><a href="https://gitlab.com/danbunea/tdding-xstate" rel="nofollow">GitLab - TDDing XState</a> by Dan Bunea</li> <li><a href="https://github.com/rjdestigter/xstate-sample-kit">GitHub - XState Sample Kit</a> by <a href="https://github.com/rjdestigter">@rjdestigter</a></li> <li><a href="https://www.youtube.com/watch?v=g_2lt7bBwpk" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> How to Build a simple React App with XState</a> by Tim Ermilov</li> <li><a href="https://medium.com/yakindu/statecharts-a-new-path-for-the-future-of-web-development-9c8a8fb85717" rel="nofollow">XState: The new opportunity for web development</a> by <a href="https://medium.com/@mschulte_69595" rel="nofollow">@mschulte</a></li> <li><a href="https://dev.to/robertbroersma/undo-redo-in-react-using-xstate-23j8" rel="nofollow">Undo/Redo in React Using XState</a> by <a href="https://dev.to/robertbroersma" rel="nofollow">Robert</a> <ul dir="auto"> <li><a href="https://codesandbox.io/s/xstate-undo-redo-i3eiu" rel="nofollow">CodeSandbox demo</a></li> </ul> </li> <li><a href="https://blog.logrocket.com/state-driven-interfaces-with-xstate/" rel="nofollow">State-driven interfaces with XState</a> by <a href="https://blog.logrocket.com/author/bradwoods/" rel="nofollow">Brad Woods</a></li> <li><a href="https://dev.to/robertbroersma/react-single-file-components-with-xstate-19k4" rel="nofollow">React Single File Components with XState</a> by <a href="https://dev.to/robertbroersma" rel="nofollow">Robert</a></li> <li><a href="https://keyholesoftware.com/2020/03/30/an-introduction-to-state-machines-using-xstate/" rel="nofollow">An Introduction to State Machines using XState</a> by <a href="https://keyholesoftware.com/author/mwarger/" rel="nofollow">Mat Warger</a> <ul dir="auto"> <li><a href="https://github.com/in-the-keyhole/xstate-demo">GitHub Demo</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=GhHh_9I6CXQ" rel="nofollow">Webinar - Visualize Application State with XState in JavaScript</a> by Dani Akash</li> <li><a href="https://dev.to/jacobmparis/modelling-parallel-states-in-xstate-3pe0" rel="nofollow">Modeling parallel states in XState</a> by <a href="https://dev.to/jacobmparis" rel="nofollow">Jacob Paris</a> <ul dir="auto"> <li><a href="https://dev.to/jacobmparis/xstate-text-formatting-part-2-32ma" rel="nofollow">XState Text Formatting Part 2</a></li> </ul> </li> <li><a href="https://github.com/lednhatkhanh/xstate-flipping-cards-game">GitHub - a flipping cards game using XState</a> by <a href="https://github.com/lednhatkhanh">@lednhatkhanh</a> <ul dir="auto"> <li><a href="https://xstate-flipping-cards-game.now.sh/" rel="nofollow">Playable demo</a></li> </ul> </li> <li><a href="https://github.com/stefanwille/pacman-react">GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState</a> <ul dir="auto"> <li><a href="https://pacman-react.netlify.app/" rel="nofollow">Playable demo</a></li> </ul> </li> <li><a href="https://github.com/tanem/state-machines-in-react">GitHub - a small React, XState and Framer Motion demo</a> by <a href="https://github.com/tanem">@tanem</a></li> <li><a href="https://github.com/krzysztofzuraw/xstate-autocomplete">GitHub - Autocomplete example with XState</a> by <a href="https://github.com/krzysztofzuraw">@krzysztofzuraw</a></li> <li><a href="https://github.com/sarahdayan/markdown-editor-vue-xstate">GitHub - a Markdown Editor in Vue.js and XState</a> by <a href="https://github.com/sarahdayan">Sarah Dayan</a> <ul dir="auto"> <li><a href="https://nifty-yalow-295db4.netlify.app/" rel="nofollow">Live Demo</a></li> </ul> </li> <li><a href="https://kyleshevlin.com/guidelines-for-state-machines-and-xstate/" rel="nofollow">Guidelines for State Machines and XState</a> by <a href="https://kyleshevlin.com" rel="nofollow">Kyle Shevlin</a></li> <li><a href="https://github.com/diegoperezm/react-xstate-calc">A simple calculator using React and XState (statecharts)</a> by <a href="https://github.com/diegoperezm">diegoperezm</a></li> <li><a href="https://github.com/howardmann/xstate/tree/master/traffic-light">XState Chart Traffic Lights</a> by <a href="https://github.com/howardmann">@howardmann</a> <ul dir="auto"> <li><a href="http://xstatetrafficlight.surge.sh/" rel="nofollow">Demo link</a></li> <li><a href="https://xstate.js.org/viz/?gist=1b9e1bcf75b1fed19190adc9f39b895e" rel="nofollow">XState visualization</a></li> </ul> </li> <li><a href="https://github.com/lednhatkhanh/xstate-minesweeper">XState Minesweeper</a> by <a href="https://github.com/lednhatkhanh/xstate-minesweeper">@lednhatkhanh</a> <ul dir="auto"> <li><a href="https://xstate-minesweeper.now.sh/" rel="nofollow">Playable demo</a></li> </ul> </li> <li><a href="https://github.com/farskid/xstate.tips">Tips and tricks of using XState for UI development</a> by <a href="https://github.com/farskid">@farskid</a> <ul dir="auto"> <li><a href="https://xstate.tips/" rel="nofollow">Link: XState.Tips</a></li> </ul> </li> <li><a href="https://github.com/mwarger/tic-tac-toe-crank-xstate-typescript">Tic-Tac-Toe with Crank, XState, and TypeScript</a> by <a href="https://github.com/mwarger">@warger</a></li> <li><a href="https://www.ibrahima-ndaw.com/blog/xstate-react-finite-state-machine/" rel="nofollow">How To Build Finite State Machines using XState and React</a> by <a href="https://www.ibrahima-ndaw.com" rel="nofollow">Ibrahima Ndaw</a> <ul dir="auto"> <li><a href="https://dev.to/ibrahima92/how-to-build-finite-state-machines-using-xstate-and-react-1o8g" rel="nofollow">Post on Dev.to</a></li> </ul> </li> <li><a href="https://github.com/DevanB/xstate-examples">GitHub - Practical examples of statechart-based solutions with XState</a> by <a href="https://github.com/DevanB">@DevanB</a></li> <li><a href="https://www.youtube.com/watch?v=MbS2TQj4Xsc" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Improving Application Predictability with XState</a> by <a href="https://twitter.com/sjoedwards" rel="nofollow">Sam Edwards</a></li> <li><a href="https://medium.com/@roberthigdon/a-front-end-journey-into-xstate-d13691b9165d" rel="nofollow">A front-end journey into XState</a> by <a href="https://medium.com/@roberthigdon" rel="nofollow">Robert Higdon</a></li> <li><a href="https://www.thoughtworks.com/radar/languages-and-frameworks/xstate" rel="nofollow">ThoughtWorks - XState in the Technology Radar for Languages & Frameworks</a></li> <li><a href="https://geoexamples.com/svelte/2020/05/08/xstate-svelte-I.html" rel="nofollow">XState and Svelte: initial setup</a></li> <li><a href="https://github.com/JacobParis/stripe-machine-example">GitHub - Stripe Machine Example</a>: An animated stripe checkout using XState and React by <a href="https://github.com/JacobParis">@JacobParis</a></li> <li><a href="https://www.youtube.com/watch?v=JPgd1RG-rOk" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Creating a <code>useAutoSave</code> Hook - Part 5: Using XState</a> by <a href="https://twitter.com/BrooksLybrand" rel="nofollow">Brooks Lybrand</a> <ul dir="auto"> <li><a href="https://codesandbox.io/s/useautosavefinal-xhsyx?file=/src/useAutoSave-5.js" rel="nofollow">CodeSandbox</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=lIge4KWq6Xc" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Authentication statechart in XState</a> by <a href="https://twitter.com/BrooksLybrand" rel="nofollow">Brooks Lybrand</a></li> <li><a href="https://www.youtube.com/watch?v=osaszd2aU9U" rel="nofollow">Drag & Drop State Machine! Learning XState with David</a> on the <a href="https://twitter.com/keyframers" rel="nofollow">Keyframers</a></li> <li><a href="https://www.youtube.com/watch?v=emAUbr0XHqg" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Isaac && Zack Code Jam #2: State Machines and XState</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=R2vzzuUkjV0" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 3</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=hG3UHNCUdzQ" rel="nofollow">Improving state representation by using XState in React</a> by <a href="https://www.youtube.com/channel/UCQB-QsEnKCvJX4e_ms9XvHA" rel="nofollow">Jon Major Condon</a></li> <li><a href="https://onehundred.now.sh/" rel="nofollow">Remake of the 100 squares game</a> by <a href="https://twitter.com/nikpundik" rel="nofollow">@nikpundik</a> <ul dir="auto"> <li><a href="https://twitter.com/nikpundik/status/1268936078737670145" rel="nofollow">Tweet with demo</a></li> </ul> </li> <li><a href="https://medium.com/@pavlo_lompas/intro-to-xstate-a-true-state-management-system-library-for-react-d8c0051c71e4" rel="nofollow">Intro to XState - a true state management library for React</a> by <a href="https://medium.com/@pavlo_lompas" rel="nofollow">Pavlo Lompas</a></li> <li><a href="https://thewidlarzgroup.com/multistep-form-xstate-formik/" rel="nofollow">Multistep form handling with Finite State Machines, Formik and TypeScript</a> by Daniel Grychtoł</li> <li><a href="https://codesandbox.io/s/xstate-login-sign-up-forms-yzzoc" rel="nofollow">CodeSandbox - XState Login & Sign Up Forms</a> by <a href="https://github.com/JamieMason">Jamie Mason</a></li> <li><a href="https://flaviocopes.com/xstate/" rel="nofollow">Introduction to XState</a> by <a href="https://flaviocopes.com/" rel="nofollow">Flavio Copes</a></li> <li><a href="https://www.youtube.com/watch?v=7CP-OUcUq2Q" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Autocomplete, XState, and anything in between</a> by <a href="https://krzysztofzuraw.com" rel="nofollow">Krzysztof Żuraw</a></li> <li><a href="https://www.youtube.com/watch?v=A0bLzjQdZPU" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> How to add an XState machine conf to a project</a> by <a href="https://www.youtube.com/channel/UCxr-10LjbO-CTiPRcCLyRyg" rel="nofollow">Diego Perez</a></li> <li><a href="https://www.youtube.com/watch?v=uVySNh6ud2w" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=LtqTNATLIlY" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 2</a></li> <li><a href="https://www.youtube.com/watch?v=t5WU1oZeBQw" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 3</a></li> </ul> </li> <li><a href="https://dev.to/vonagedev/learn-and-apply-xstate-with-vonage-video-5dfg" rel="nofollow">Learn and Apply XState with Vonage Video</a> by <a href="https://dev.to/kellyjandrews" rel="nofollow">Kelly Andrews</a> <ul dir="auto"> <li><a href="https://www.nexmo.com/blog/2020/07/01/learn-and-apply-xstate-with-vonage-video" rel="nofollow">Article on Nexmo.com</a></li> </ul> </li> <li><a href="https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972" rel="nofollow">Starting with State Machines and XState!</a> by <a href="https://dev.to/jasmin" rel="nofollow">Jasmin Virdi</a> <ul dir="auto"> <li><a href="https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972" rel="nofollow">Todo App with XState and Vue composition API</a></li> </ul> </li> <li><a href="https://blog.logrocket.com/comparing-state-machines-xstate-vs-robot/" rel="nofollow">Comparing state machines: XState vs. Robot</a> by <a href="https://blog.logrocket.com/author/samailabala/" rel="nofollow">Samaila Bala</a></li> <li><a href="https://dev.to/ekafyi/hello-xstate-learning-state-machines-for-frontend-web-development-5bin" rel="nofollow">Hello XState Part 1: Learning state machines for frontend web development</a> by <a href="https://dev.to/ekafyi" rel="nofollow">Eka</a> <ul dir="auto"> <li><a href="https://dev.to/ekafyi/hello-xstate-part-2-exploring-the-xstate-viz-example-1nc1" rel="nofollow">Hello XState Part 2: Exploring the XState Viz example</a></li> <li><a href="https://dev.to/ekafyi/hello-xstate-part-3-writing-my-first-state-machines-and-washing-my-hands-for-20-seconds-23p" rel="nofollow">Hello XState Part 3: Writing my first state machines (and washing my hands)</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=4CLdNeetVHw" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> The Actor Model | XState part 1</a> by <a href="https://bisvarup.me/" rel="nofollow">@bisvarup</a> <ul dir="auto"> <li><a href="https://codesandbox.io/s/ancient-framework-bvw61?file=/src/App.js" rel="nofollow">CodeSandbox example</a></li> </ul> </li> <li><a href="https://medium.com/@d_danailov/intro-sstate-and-state-machines-react-3b873a6a713d" rel="nofollow">Intro: XState and State Machines (React)</a> by <a href="https://medium.com/@d_danailov" rel="nofollow">Dimitar Danailov</a></li> <li><a href="https://www.youtube.com/watch?v=h5H1ZmjMDE4" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Learning XState with Lauren</a> on Lauren Learns Things</li> <li><a href="https://dev.to/mpocock1/xstate-react-and-typescript-how-to-get-it-working-4p18" rel="nofollow">XState, React, and TypeScript - how to get it working</a> by <a href="https://dev.to/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://www.youtube.com/watch?v=JauJhGTBFsc" rel="nofollow">XState Pizza Wizard!</a> by <a href="https://github.com/jherr">Jack Herrington</a> <ul dir="auto"> <li><a href="https://github.com/jherr/xstate-pizza-orderer">GitHub - Code</a></li> </ul> </li> <li><a href="https://imfeld.dev/writing/swr_with_xstate" rel="nofollow">SWR-Style Fetching with XState State Machines</a> by <a href="https://imfeld.dev" rel="nofollow">Daniel Imfeld</a></li> <li><a href="https://slides.com/stli/xstate-angular-nl" rel="nofollow">Slides - Working with State Machines in Angular</a> with XState by <a href="https://twitter.com/stefanos_lig" rel="nofollow">Stefanos Lignos</a></li> <li><a href="https://codechips.me/firebase-authentication-with-xstate-and-svelte/" rel="nofollow">Firebase authentication with XState and Svelte</a> by <a href="https://github.com/codechips">@codechips</a> <ul dir="auto"> <li><a href="https://github.com/codechips/svelte-firebase-auth-xstate-example">GitHub - code</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=tkxH7o-n9sI" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Model Based Testing with XState | Why It's Great | Part 1</a> by <a href="https://www.youtube.com/channel/UCVYw7ad200ZmvsZ0BVC9YvA" rel="nofollow">John Bales</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=9_dWCweA8Pk" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Model Based Testing with XState | The Basics | Part 2</a></li> <li><a href="https://www.youtube.com/watch?v=9gQulfnG7HM" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Model Based Testing with XState | Path Generation with Context | Part 3</a></li> </ul> </li> <li><a href="https://www.youtube.com/watch?v=brMpOOAOUZ4" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Mini Introducción a XState</a> by <a href="https://www.youtube.com/channel/UCBXo5FFDCtNoddUOqZuWX7w" rel="nofollow">Michell Ayala</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=Z7LIsZfQ4LU" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> React + XState</a></li> </ul> </li> <li><a href="https://dev.to/joepurnell1/testing-xstate-with-react-testing-library-26kh" rel="nofollow">Testing XState with React Testing Library</a> by <a href="https://dev.to/joepurnell1" rel="nofollow">Joe Purnell</a></li> <li><a href="https://www.youtube.com/watch?v=PRwDOSjIFg8" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Easy Introduction to XState in React | States, Transitions, Guards, and (Actions</a> by <a href="https://www.youtube.com/channel/UC4gKWR53xDzybMwm8Y61ukA" rel="nofollow">Bhargav Ponnapalli</a></li> <li><a href="https://www.youtube.com/watch?v=bPUgBHFfQdI" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> State-driven Interfaces with XState</a> on <a href="https://www.youtube.com/channel/UCUwngm8TCj0mhsvKTO2q5fQ" rel="nofollow">Mozilla Indonesia</a></li> <li><a href="https://www.youtube.com/watch?v=-FiN2Svpk2s" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind</a> by Anders Bech Mellson</li> <li><a href="https://www.youtube.com/watch?v=hZ1vaMJnKx0" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Refactoring with XState - Part 1</a> by <a href="https://www.youtube.com/channel/UCAFlrYILud3-3MCs8nsDiAA" rel="nofollow">VigsCodes</a></li> <li><a href="https://moduscreate.com/blog/state-machines-in-production/" rel="nofollow">State machines in Production</a> by <a href="https://twitter.com/kobeljic" rel="nofollow">Ivan Kovic</a></li> <li><a href="https://swizec.com/blog/when-your-brain-is-breaking-try-xstate" rel="nofollow">When your brain is breaking, try XState</a> by <a href="https://swizec.com" rel="nofollow">@swizec</a></li> <li><a href="https://github.com/cypress-io/cypress-realworld-app">GitHub - Cypress Real-World App</a></li> <li><a href="https://medium.com/well-red/state-machines-for-everyone-part-1-introduction-b7ac9aaf482e" rel="nofollow">State Machines For Everyone</a> by <a href="https://medium.com/@alexmdodge" rel="nofollow">Alex Dodge</a></li> <li><a href="https://calebukle.com/blog/my-first-machine-getting-started-with-xstate-and-angular" rel="nofollow">My First Machine, Getting Started with XState and Angular</a> by <a href="https://calebukle.com" rel="nofollow">Caleb Ukle</a></li> <li><a href="https://www.youtube.com/watch?v=CpxL-4oIZPw" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Reducing state complexity with XState</a> by <a href="/darrylhebbes/awesome_xstate/blob/master/www.github.com/pkishoez">Kishore</a></li> <li><a href="https://dev.to/soorajsnblaze333/finite-state-machines-in-react-js-using-xstate-36ho" rel="nofollow">Finite State Machines in React JS using XState JS</a> by <a href="https://dev.to/soorajsnblaze333" rel="nofollow">Sooraj</a></li> <li><a href="https://www.youtube.com/playlist?list=PLsVj0cy-DbErFraf3KeAUbzVl-OKyBZ0-" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Managing UI Complexity with Statecharts (playlist)</a></li> <li><a href="https://www.ianjones.us/xstate-saves-our-bacon" rel="nofollow">How State Machines Saved Our Bacon 🥓</a> by <a href="https://www.ianjones.us/" rel="nofollow">Ian Jones</a></li> <li><a href="https://swizec.com/blog/refactoring-a-usereducer-to-xstate-pt1-codewithswiz-11/" rel="nofollow">Refactoring a useReducer to XState, Part 1</a> by <a href="https://swizec.com" rel="nofollow">@swizec</a></li> <li><a href="https://www.youtube.com/watch?v=pclR8Q5mbNI" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState and React</a> on <a href="https://www.youtube.com/channel/UCcRg2Au0LLtEcakG9fg6VXg" rel="nofollow">Leniolabs</a> <ul dir="auto"> <li><a href="https://codesandbox.io/s/small-sea-t5mce?file=/pages/index.js/" rel="nofollow">CodeSandbox example</a></li> </ul> </li> <li><a href="https://swizec.com/blog/how-to-write-tests-for-xstate-codewithswiz-12/" rel="nofollow">How to write tests for XState</a> by <a href="https://swizec.com" rel="nofollow">@swizec</a></li> <li><a href="https://github.com/kwdowik/cra-template-xstate">Create-React-App Template with XState</a> by <a href="https://github.com/kwdowik">Kacper Wdowik</a></li> <li><a href="https://www.youtube.com/watch?v=8y9wUwJvdGs" rel="nofollow">XState and State Machines in VueJS</a> by <a href="https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA" rel="nofollow">Constantin Druc</a></li> <li><a href="https://medium.com/codingedgar/tes-en-l%C3%ADnea-react-typescript-xstate-fp-ts-css-grid-esp-1373236189d1" rel="nofollow">Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp)</a> by <a href="https://medium.com/@codingedgar" rel="nofollow">Edgar Rodriguez</a></li> <li><a href="https://dev.to/rjdestigter/supervising-xstate-machines-with-redux-277d" rel="nofollow">Supervising XState Machines with Redux</a> by <a href="https://dev.to/rjdestigter" rel="nofollow">John de Stigter</a></li> <li><a href="https://dev.to/rjdestigter/working-with-non-user-asynchronous-events-in-model-based-tests-with-xstate-58ek" rel="nofollow">Working with non-user asynchronous events in model based tests with XState</a> by <a href="https://dev.to/rjdestigter" rel="nofollow">John de Stigter</a></li> <li><a href="https://dev.to/rjdestigter/model-based-ui-tests-with-xstate-cypress-puppeteer-more-268d" rel="nofollow">Model based UI tests with XState, Cypress, Puppeteer & more</a> by <a href="https://dev.to/rjdestigter" rel="nofollow">John de Stigter</a></li> <li><a href="https://dev.to/rjdestigter/thoughts-on-state-management-with-xstate-and-reactjs-3d19" rel="nofollow">Thoughts on State Management with XState and ReactJS</a> by <a href="https://dev.to/rjdestigter" rel="nofollow">John de Stigter</a></li> <li><a href="https://www.youtube.com/watch?v=DnuJFUR1SgA" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Tutorial of C++ Code Generator for XState State Machine engine</a> by <a href="https://www.youtube.com/channel/UCHFfZT1QM-vnqSZKtrT0e6g" rel="nofollow">Andrew Shuvalov</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=8TTfRrmNu0s" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 2</a></li> <li><a href="https://www.youtube.com/watch?v=HoH68709Sq8" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Part 3</a></li> <li><a href="https://github.com/shuvalov-mdb/xstate-cpp-generator">GitHub Project</a></li> </ul> </li> <li><a href="https://swizec.com/blog/react-context-without-context-using-xstate-codewithswiz-14-15" rel="nofollow">React context without context, using XState – CodeWithSwiz 14, 15</a> by <a href="https://swizec.com" rel="nofollow">@swizec</a></li> <li><a href="https://github.com/ooade/state-machines-workshop">State Machines Workshop with XState</a> by <a href="https://github.com/ooade">Ademola (@ooade)</a></li> <li><a href="https://www.youtube.com/watch?v=fT9p9CCSrn8" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Finite State Machines in Vue 3</a> by <a href="https://twitter.com/frontstuff_io" rel="nofollow">Sarah Dayan</a></li> <li><a href="https://www.youtube.com/watch?v=wRktleOGKS4" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Frontend is Rocket Science - How to use XState in Vue 3 Now!</a> by <a href="https://twitter.com/aleksejdix" rel="nofollow">Aleksej Dix</a></li> <li><a href="https://www.youtube.com/watch?v=1TT2ymkYGyM" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> React Wednesdays: XState and JavaScript State Machines</a></li> <li><a href="https://www.youtube.com/watch?v=jCbV5aELY6A" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Declarative and manageable state management with XState</a> on Decoupled Days</li> <li><a href="https://www.youtube.com/watch?v=D6LzWcV_-14" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Modeling a Voicemail Widget with XState</a> by <a href="https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA" rel="nofollow">Constantin Druc</a></li> <li><a href="https://dev.to/mpocock1/xstate-brain-teaser-1-auth-flow-2jhl" rel="nofollow">XState Brain Teaser #1 - Auth Flow</a> by <a href="https://twitter.com/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://fvsch.com/learning-xstate" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Learning XState by refactoring an old project</a> by <a href="https://fvsch.com/" rel="nofollow">Florens Verschelde</a> <ul dir="auto"> <li><a href="https://fvsch.com/learning-xstate" rel="nofollow">Article</a></li> </ul> </li> <li><a href="https://nisimdor.medium.com/creating-state-machines-in-javascript-with-xstate-21e1599521be" rel="nofollow">Creating State Machines in JavaScript with XState</a> by <a href="https://nisimdor.medium.com/" rel="nofollow">Dor Nisim</a></li> <li><a href="https://dev.to/mpocock1/just-use-props-an-opinionated-guide-to-react-and-xstate-fc9" rel="nofollow">"Just Use Props": An opinionated guide to React and XState</a> by <a href="https://dev.to/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://www.youtube.com/watch?v=Wo-rVyAsz-Q" rel="nofollow">Usando XState y React para hacer peticiones HTTP (en español)</a> by <a href="https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA" rel="nofollow">GCD Coder</a></li> <li><a href="https://www.youtube.com/watch?v=GMXrwrG0cL4" rel="nofollow">Infinite Scrolling con Svelte, IntersectionObserver & XState (en español)</a> by <a href="https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA" rel="nofollow">GCD Coder</a></li> <li><a href="https://www.youtube.com/watch?v=g4YnmydXMP8" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Getting Started with XState in Vue 3</a> by <a href="https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q" rel="nofollow">JacoboCode</a></li> <li><a href="https://www.youtube.com/watch?v=7tT45eRmyJE" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Typing XState in Vue 3</a> by <a href="https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q" rel="nofollow">JacoboCode</a></li> <li><a href="https://dev.to/gcdcoder/infinite-scrolling-with-svelte-3-xstate-and-intersectionobserver-127j" rel="nofollow">Infinite Scrolling with Svelte 3, XState and IntersectionObserver</a> by <a href="https://dev.to/gcdcoder" rel="nofollow">Gustavo Castillo</a></li> <li><a href="https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f" rel="nofollow">Untangle complex flows in your React Native app with XState</a> by <a href="https://sdavico.medium.com/" rel="nofollow">Simone D'Avico</a></li> <li><a href="https://medium.com/welld-tech/integrate-xstate-with-react-native-and-react-navigation-21ead87391da" rel="nofollow">Integrate XState with React Native and React Navigation</a> by <a href="https://sdavico.medium.com/" rel="nofollow">Simone D'Avico</a></li> <li><a href="https://medium.com/welld-tech/testing-xstate-machines-in-your-react-native-app-236fb01bf5b8" rel="nofollow">Testing XState machines in your React Native app</a> by <a href="https://sdavico.medium.com/" rel="nofollow">Simone D'Avico</a></li> <li><a href="https://soshace.com/an-introduction-to-finite-state-machines-simplifying-react-state-management-with-state-machines/" rel="nofollow">An Introduction to Finite State Machines: Simplifying React State Management with State Machines</a> by <a href="https://soshace.com/author/bradstarart/" rel="nofollow">Bradley Kofi</a></li> <li><a href="https://medium.com/giant-machines/an-introduction-to-xstate-in-typescript-e71c7729ce88" rel="nofollow">An Introduction to XState in TypeScript</a> by <a href="https://medium.com/@n.khosla91" rel="nofollow">Neeraj Khosla </a></li> <li><a href="https://www.youtube.com/watch?v=1kJcnFBrk2I" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState - Global state in React</a> by <a href="https://twitter.com/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://www.youtube.com/watch?v=clu2bqjk3c0" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState Introduction</a> on <a href="https://www.youtube.com/channel/UCS3-MF_4ADqglU2OSly4vIw" rel="nofollow">For Those Who Code</a></li> <li><a href="https://blog.jskoneczny.pl/post/future-of-state-management-in-react-with-xstate" rel="nofollow">Future of state management in React with XState</a> by <a href="https://blog.jskoneczny.pl/" rel="nofollow">Jakub Skoneczny</a></li> <li><a href="https://www.youtube.com/watch?v=NIfQsc5XAzU" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Custom Svelte Store: XState as Svelte store</a> by <a href="https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ" rel="nofollow">lihautan</a></li> <li><a href="https://www.youtube.com/watch?v=gCT-lCYYhf4" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Finite State Machine on Frontend</a> by <a href="https://twitter.com/jevgeniazi" rel="nofollow">Eugenia Zigisova</a></li> <li><a href="https://blog.imbhargav5.com/1-introduction-to-xstate-in-react" rel="nofollow">#1 Introduction to XState in React</a> by <a href="https://blog.imbhargav5.com/" rel="nofollow">Bhargav Ponnapalli</a></li> <li><a href="https://www.youtube.com/watch?v=paZ4ImyI1YQ" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Modelling application behaviour with the XState library (in React)</a> by <a href="https://twitter.com/marcklefter" rel="nofollow">Marc Klefter</a></li> <li><a href="https://dev.to/droopytersen/rsvp-to-weddings-with-xstate-55nl" rel="nofollow">Rsvp to weddings with XState</a> by <a href="https://dev.to/droopytersen" rel="nofollow">Andrew Peterson</a></li> <li><a href="https://tallpad.com/series/xstate-misc/episode/1" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState and State Machines in Vue</a></li> <li><a href="https://github.com/nartc/nx-state-machine-todos-mvc">Github - XState with React and Angular in Nx Workspace</a> by <a href="https://nartc.me" rel="nofollow">Chau Tran</a></li> <li><a href="https://dev.to/alirezavalizade/boost-your-react-application-s-performance-by-xstate-42p8" rel="nofollow">Boost your React application's performance by XState</a> by <a href="https://dev.to/alirezavalizade" rel="nofollow">Alireza Valizade</a></li> <li><a href="https://www.youtube.com/watch?v=po1YRAk7irY" rel="nofollow">Getting Started with XState, React, and Typescript | Part 1</a> by <a href="https://www.youtube.com/channel/UCsKwL0-e2eHRNa6Ne99AESw" rel="nofollow">Modus Create</a></li> <li><a href="https://blog.oddeven.ch/blog/frontend-is-rocket-science-managing-state-in-any-javascript-application/" rel="nofollow">Frontend is Rocket Science – Managing state in any JavaScript Application</a> by <a href="https://twitter.com/aleksejdix" rel="nofollow">Aleksej Dix</a></li> <li><a href="https://www.youtube.com/watch?v=UzA5Mvk587M" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason</a> by <a href="https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A" rel="nofollow">Jason Lengstorf</a></li> <li><a href="https://www.telerik.com/blogs/how-to-use-finite-state-machines-react" rel="nofollow">How to Use Finite State Machines in React</a> by <a href="https://www.telerik.com/blogs/author/leonardo-maldonado" rel="nofollow">Leonardo Maldonado</a></li> <li><a href="https://www.youtube.com/watch?v=Rm6AMY6-Wqw" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Maquinas de estado finito y gráficas de estado en React </a> by José L Narajo</li> <li><a href="https://dev.to/mpocock1/xstate-should-this-be-an-action-or-a-service-2cp0" rel="nofollow">XState: Should this be an action, or a service?</a> by <a href="https://twitter.com/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://dev.to/mpocock1/state-machines-should-this-be-a-state-or-in-context-1d7e" rel="nofollow">State Machines: Should this be a state, or in context?</a> by <a href="https://twitter.com/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://dev.to/mpocock1/xstate-what-s-the-difference-between-machine-and-createmachine-15h1" rel="nofollow">XState: What's the difference between Machine and createMachine?</a> by <a href="https://twitter.com/mpocock1" rel="nofollow">Matt Pocock</a></li> <li><a href="https://dev.to/jbranchaud/use-an-xstate-machine-with-react-326i" rel="nofollow">Use an XState Machine with React</a> by <a href="https://twitter.com/jbrancha" rel="nofollow">Josh Branchaud</a></li> <li><a href="https://devtrends.io/videos/xstate/" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> DevTrends: XState</a> by <a href="https://twitter.com/anthonygore" rel="nofollow">Anthony Gore</a></li> <li><a href="https://codesandbox.io/s/stoic-thompson-ktzrl?file=/src/App.vue" rel="nofollow">XState: Street Lights with Pedestrian Crossing using Vue.js</a> by <a href="https://github.com/dubbs">Kevin Warrington</a></li> <li><a href="https://www.youtube.com/watch?v=Slb6M_rIn0M" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Front-end state management with XState</a> by <a href="https://twitter.com/amyvpellegrini" rel="nofollow">Amy Pellegrini</a></li> <li><a href="https://www.youtube.com/watch?v=yRB57CDvQuY" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Splitting the view and the brains in JS — state machines with XState (in French)</a> by <a href="https://www.linkedin.com/in/aumeunier" rel="nofollow">Aurelien Meunier</a></li> <li><a href="https://gustavosantos.dev/a/using-xstate-with-deno" rel="nofollow">Using XState with Deno</a> by <a href="https://twitter.com/bruno__quaresma" rel="nofollow">Bruno Quaresma</a></li> <li><a href="https://engineering.kablamo.com.au/posts/2021/finite-state-machines-and-xstate" rel="nofollow">How to model application flows in React with finite state machines and XState</a> by <a href="https://twitter.com/madole" rel="nofollow">Andrew McDowell</a></li> <li><a href="https://blog.logrocket.com/state-driven-interfaces-with-xstate/" rel="nofollow">State-driven interfaces with XState</a> - Brad Woods, Mar 2020</li> <li><a href="https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7" rel="nofollow">Redux is half of a pattern (1/2)</a> - David Khourshid, 2020</li> <li><a href="https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i" rel="nofollow">No, disabling a button is not app logic</a> - David Khourshid, 2019</li> <li><a href="https://24ways.org/2018/state-machines-in-user-interfaces/" rel="nofollow">The (Switch)-Case for State Machines in User Interfaces</a> - David Khourshid, 2018</li> <li><a href="https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/" rel="nofollow">Robust React User Interfaces with Finite State Machines</a> - David Khourshid, 2018</li> <li><a href="https://mastery.games/post/state-machines-in-react/" rel="nofollow">State Machines in React</a> - Dave Geddes</li> <li><a href="https://www.phillipparker.io/articles/finite-state-machines-in-vue" rel="nofollow">Finite State Machines in Vue</a> - Phillip Parker</li> <li><a href="https://dev.to/codingdive/introducing-state-machine-advent-24-bite-sized-blog-posts-about-state-machines-and-statecharts-2ce0" rel="nofollow">24 days to learn statecharts #devadvent</a> - series of 25 blog posts, Statecharts, Typescript</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Testing</h3><a id="user-content-testing" class="anchor" aria-label="Permalink: Testing" href="#testing"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://css-tricks.com/model-based-testing-in-react-with-state-machines/" rel="nofollow">Model-Based Testing in React with State Machines</a> - David Khourshid, 2020</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Guides</h3><a id="user-content-guides" class="anchor" aria-label="Permalink: Guides" href="#guides"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://bradwoods.io/guides/xstate-react" rel="nofollow">Extensive examples of XState features with and without React.</a> - Brad Woods ( Updated often )</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Usage & Examples</h3><a id="user-content-usage--examples" class="anchor" aria-label="Permalink: Usage & Examples" href="#usage--examples"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://github.com/coodoo/xstate-examples">Examples modelling application state with statecharts</a></li> <li><a href="https://xstate-catalogue.com/" rel="nofollow">XState Catalog - A collection of professionally designed state machines</a></li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Talks</h3><a id="user-content-talks" class="anchor" aria-label="Permalink: Talks" href="#talks"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=wgWwJSnhgDU" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022</a> - Youtube, duration, 39:28</li> <li><a href="https://www.youtube.com/watch?v=4Mue0Qr_apE" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021</a> - Youtube, duration, 30:01</li> <li><a href="https://www.youtube.com/watch?v=GSHQFx7PG20" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019</a> - Youtube, duration 21:25</li> <li><a href="https://www.youtube.com/watch?v=RqTxtOXcv8Y" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - Simplifying Complex UIs with Finite Automata & Statecharts | JSConf Iceland 2018</a> - Youtube, duration 34:27</li> <li><a href="https://www.youtube.com/watch?v=DrHccvns-L0" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018</a> Youtube, duration 28:50</li> <li><a href="https://www.youtube.com/watch?v=VU1NKX6Qkxc" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017</a> Youtube, duration 25:32</li> <li><a href="https://www.youtube.com/watch?v=iDZxjJYMOUQ" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState - An introduction - Finite State Machines in React - Leigh Halliday</a> Youtube, duration 8:00</li> <li><a href="https://www.youtube.com/watch?v=XaHk9vhmus4" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> XState - Data Loading Service - Finite State Machines in React - Leigh Halliday</a> Youtube, duration 18:54</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Tools</h3><a id="user-content-tools" class="anchor" aria-label="Permalink: Tools" href="#tools"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://github.com/mogsie/xstate-plantuml">XState PlantUML</a> by <a href="https://github.com/mogsie">Erik Mogensen</a>, given an XState definition (JS Object) of a statechart, this tool will output a plantuml source rendering of the statechart.</li> <li><a href="https://chrome.google.com/webstore/detail/xstate-devtools/aamnodipnlopbknpklfoabalmobheehc" rel="nofollow">XState Chrome Devtool</a> Inspect XState machines running in your app</li> <li><a href="https://github.com/rlaffers/xstate-ninja">XState Ninja</a> - a powerful devtool for inspecting multiple XState state machines at the same time</li> <li><a href="https://sketch.systems/" rel="nofollow">Sketch Systems</a> - design and understand state, export result to xState machine object</li> <li><a href="https://github.com/mattpocock/xstate-codegen">XState Codegen</a> - generate 100% typesafe Typescript code with a CLI</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Dig deeper into Statecharts</h3><a id="user-content-dig-deeper-into-statecharts" class="anchor" aria-label="Permalink: Dig deeper into Statecharts" href="#dig-deeper-into-statecharts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf" rel="nofollow">Statecharts - A Visual Formalism For Complex Systems</a> (PDF) - David Harel, 1984</li> <li><a href="https://statecharts.github.io/" rel="nofollow">World of Statecharts</a> a comprehensive guide by <a href="https://github.com/mogsie">Erik Mogensen</a> in using statecharts in your applications</li> <li><a href="https://blog.nomagic.com/statechart-autocoding-curiosity-rover/" rel="nofollow">Statechart Autocoding for NASA's Curiosity Rover</a>, model based systems engineering</li> <li><a href="https://github.com/achou11/state-machines">A humble repo to collect knowledge on state machines.</a> - Andrew Chou</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Dive deeper into State Machines</h3><a id="user-content-dive-deeper-into-state-machines" class="anchor" aria-label="Permalink: Dive deeper into State Machines" href="#dive-deeper-into-state-machines"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="http://raganwald.com/2018/02/23/forde.html" rel="nofollow">How I Learned to Stop Worrying and ❤️ the State Machine</a> - Reginald Braithwaite, 2018</li> <li><a href="https://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent" rel="nofollow">You are managing state? Think twice.</a> - Krasimir Tsonev, 2017</li> <li><a href="https://gist.github.com/andymatuschak/d5f0a8730ad601bcccae97e8398e25b2">A composable pattern for pure state machines with effects (draft v3) </a> - Andy Matuschak, 2016</li> <li><a href="https://gist.github.com/davidkpiano/e715b59bef817d2146164add26a134b0">Creating CSS State machines</a> - David Khourshid</li> <li><a href="https://skorks.com/2011/09/why-developers-never-use-state-machines/" rel="nofollow">Why Developers Never Use State Machines</a> - Alan Skorkin, 2018</li> <li><a href="https://engineering.shopify.com/blogs/engineering/17488160-why-developers-should-be-force-fed-state-machines" rel="nofollow">Why developers should be force-fed state machines</a> - Willem van Bergen (engineering at shopify) 2011</li> <li><a href="https://gist.github.com/coodoo/0a7658a6c6580cb11101a9c22904d425">The case for statechart and xstate -- why it matters and how we can benefit from it</a> - Jeremy Lu (StateKit)</li> </ul> <p dir="auto"><strong>Other great courses and guides:</strong></p> <ul dir="auto"> <li><a href="https://egghead.io/courses/introduction-to-state-machines-using-xstate" rel="nofollow">Egghead - Introduction to State Machines Using XState</a> by <a href="https://twitter.com/kyleshevlin" rel="nofollow">Kyle Shevlin</a> <ul dir="auto"> <li><a href="https://github.com/eggheadio-projects/introduction-to-state-machines-using-xstate-notes">GitHub - Course Notes</a></li> <li><a href="https://github.com/kyleshevlin/intro-to-state-machines-and-xstate-workshop">GitHub - Workshop</a></li> </ul> </li> <li><a href="https://egghead.io/courses/construct-sturdy-uis-with-xstate" rel="nofollow">Egghead - Construct Sturdy UIs with XState</a> by <a href="https://twitter.com/MannIsaac" rel="nofollow">Isaac Mann</a></li> <li><a href="https://examples.bradwoods.io/xstate" rel="nofollow">XState Guide</a> by <a href="https://twitter.com/bradwoodsio" rel="nofollow">Brad Woods</a></li> </ul> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Podcasts</h2><a id="user-content-podcasts" class="anchor" aria-label="Permalink: Podcasts" href="#podcasts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="https://reactpodcast.com/episodes/5" rel="nofollow">🎙 (React Podcast) 5: Finite State Machines with David Khourshid</a></li> <li><a href="https://reactpodcast.com/episodes/83" rel="nofollow">🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration</a></li> <li><a href="https://fullstackradio.com/130" rel="nofollow">🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines</a></li> <li><a href="https://kentcdodds.com/chats-with-kent-podcast/seasons/01/episodes/make-your-apps-resilient-finite-state-machines-with-david-khourshid" rel="nofollow">🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid</a></li> <li><a href="https://devchat.tv/react-round-up/rru-069-the-state-machines-in-react-with-david-khourshid/" rel="nofollow">🎙 (React Round-Up) 069: The State Machines in React with David Khourshid</a></li> <li><a href="https://shoptalkshow.com/327-working-state-machines/" rel="nofollow">🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid</a></li> <li><a href="https://egghead.io/podcasts/introduction-to-state-machines-and-xstate-with-kyle-shevlin" rel="nofollow">🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin</a></li> <li><a href="https://syntax.fm/show/206/state-machines-css-and-animations-with-david-k-piano" rel="nofollow">🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano</a></li> <li><a href="https://modernweb.podbean.com/e/s07e20-modern-web-podcast-building-state-machines-using-xstate-with-david-khourshid/" rel="nofollow">🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid</a> <ul dir="auto"> <li><a href="https://www.youtube.com/watch?v=uLlQjp5u2KQ" rel="nofollow"><g-emoji class="g-emoji" alias="arrow_forward">▶️</g-emoji> Video</a></li> </ul> </li> </ul> </article></div></div></div></div></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-partial> <input type="hidden" data-csrf="true" value="wA00oFrLnrZAj26ayoJa/K8/qMstUieIv+AXa88rVfJbh6ccyucO3OqFuHNbDYp2yVgqxJWoMEeA/DPpyeDRRA==" /> </div> <div data-view-component="true" class="Layout-sidebar"> <div class="BorderGrid about-margin" data-pjax> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <div class="hide-sm hide-md"> <h2 class="mb-3 h4">About</h2> <p class="f4 my-3"> Everything awesome about XState </p> <h3 class="sr-only">Topics</h3> <div class="my-3"> <div class="f6"> <a href="/topics/finite-state-machines" title="Topic: finite-state-machines" data-view-component="true" class="topic-tag topic-tag-link"> finite-state-machines </a> <a href="/topics/statecharts" title="Topic: statecharts" data-view-component="true" class="topic-tag topic-tag-link"> statecharts </a> <a href="/topics/xstate" title="Topic: xstate" data-view-component="true" class="topic-tag topic-tag-link"> xstate </a> <a href="/topics/xstate-talks" title="Topic: xstate-talks" data-view-component="true" class="topic-tag topic-tag-link"> xstate-talks </a> </div> </div> <h3 class="sr-only">Resources</h3> <div class="mt-2"> <a class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:readme"}" href="#readme-ov-file"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> Readme </a> </div> <include-fragment src="/darrylhebbes/awesome_xstate/hovercards/citation/sidebar_partial?tree_name=master"> </include-fragment> <div class="mt-2"> <a href="/darrylhebbes/awesome_xstate/activity" data-view-component="true" class="Link Link--muted"><svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-2"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span class="color-fg-muted">Activity</span></a> </div> <h3 class="sr-only">Stars</h3> <div class="mt-2"> <a href="/darrylhebbes/awesome_xstate/stargazers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <strong>189</strong> stars</a> </div> <h3 class="sr-only">Watchers</h3> <div class="mt-2"> <a href="/darrylhebbes/awesome_xstate/watchers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye mr-2"> <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path> </svg> <strong>5</strong> watching</a> </div> <h3 class="sr-only">Forks</h3> <div class="mt-2"> <a href="/darrylhebbes/awesome_xstate/forks" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <strong>7</strong> forks</a> </div> <div class="mt-2"> <a class="Link--muted" href="/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fdarrylhebbes%2Fawesome_xstate&report=darrylhebbes+%28user%29"> Report repository </a> </div> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame"> <a href="/darrylhebbes/awesome_xstate/releases" data-view-component="true" class="Link--primary no-underline Link">Releases</a></h2> <div class="text-small color-fg-muted">No releases published</div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/users/darrylhebbes/packages?repo_name=awesome_xstate" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center">Packages <span title="0" hidden="hidden" data-view-component="true" class="Counter ml-1">0</span></a></h2> <div class="text-small color-fg-muted" > No packages published <br> </div> </div> </div> <div class="BorderGrid-row" hidden> <div class="BorderGrid-cell"> <include-fragment src="/darrylhebbes/awesome_xstate/used_by_list" accept="text/fragment+html"> </include-fragment> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/darrylhebbes/awesome_xstate/graphs/contributors" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center">Contributors <span title="6" data-view-component="true" class="Counter ml-1">6</span></a></h2> <include-fragment src="/darrylhebbes/awesome_xstate/contributors_list?count=6&current_repository=awesome_xstate&items_to_show=6" aria-busy="true" aria-label="Loading contributors"> <ul class="list-style-none d-flex flex-wrap mb-n2"> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> <li class="mb-2 "> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> </li> </ul> </include-fragment> </div> </div> </div> </div> </div></div> </div> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>