CINXE.COM
amphtml/extensions/amp-bind/amp-bind.md at main · ampproject/amphtml · GitHub
<!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-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-8b10f05a77e6.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-d3b66f11d613.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-9c77ed90200e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-a0610fd00b47.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","react_keyboard_shortcuts_dialog","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","ui_commands_respect_modals","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-0c166a63ca9a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.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-aff936e590ed.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-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-93b6a0551aa9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.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-4aa4b0e95669.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-6d3967acd51c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-6ce195-53781cbc550f.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_-6afc16-3cdfa69a0406.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-f5498b8d4e5d.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-492b5042c841.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-1f651a-1e3d784c897c.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-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.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-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-f3aee1-e6893db9c19e.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-f8a5485c982a.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-858e043fcf76.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-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.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_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.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-18d1c91a7872.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-7cbef09a422c.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-d0d0a6-0e9fa537dc4f.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-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-a6e4c4c86bfa.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-3366f6b6298e.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-9b97703a4e6a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-13971a40799a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.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-37e3d5-31653d7f2342.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-285fc29e9fa5.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-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__Stack_js-node_modules_lodash-es__Uint8Array_js-node_modules_l-4faaa6-13a0602a5edf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__baseIsEqual_js-8929eb9718d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-9002b0-8e5e346f0cbe.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-014121-e1792bd5a31e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-c733d4a976df.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-b10086b6761e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_utilities_web-worker_ts-ui_packages_code-view-shared_worker-jobs-7fe572-d1c1cf476cef.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_hydro-analytics_hydro-analytics_ts-ui_packages_verified-fetch_verified-fetch_ts-u-4672d1-0996d093463a.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_utili-228da6-37a4eeff405d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-file-page-payload_ts-ui_packages_code-view-shared_comp-1beb66-b07e414af699.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_blob-anchor_ts-ui_packages_code-nav_code-nav_ts-ui_packages_filter--8253c1-87c39cb5708f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-code-view-2e4c003d0fcf.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/react-code-view.6b587a69b593e23c3657.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.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-37e3d5-31653d7f2342.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-285fc29e9fa5.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-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-3eda30673b32.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>amphtml/extensions/amp-bind/amp-bind.md at main · ampproject/amphtml · GitHub</title> <meta name="route-pattern" content="/:user_id/:repository/blob/*name(/*path)" data-turbo-transient> <meta name="route-controller" content="blob" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="9AF6:21D775:F6F10C:1169B98:67474B0D" data-pjax-transient="true"/><meta name="html-safe-nonce" content="67e327e2a06055744224be9703dfd1bfa05dc7d94335b8cd7d830a6cf62035b7" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5QUY2OjIxRDc3NTpGNkYxMEM6MTE2OUI5ODo2NzQ3NEIwRCIsInZpc2l0b3JfaWQiOiI2NDcwMTEzMjkyNDg3OTY5NTQ5IiwicmVnaW9uX2VkZ2UiOiJzb3V0aGVhc3Rhc2lhIiwicmVnaW9uX3JlbmRlciI6InNvdXRoZWFzdGFzaWEifQ==" data-pjax-transient="true"/><meta name="visitor-hmac" content="d6bbec5a392a33475a04e0d31844f8d10b0f8c0d3ffd338d20d41b1c0e6926b8" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:41766002" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,source-code,file-tree,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>/blob/show" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="The AMP web component framework. Contribute to ampproject/amphtml 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/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md" /> <meta name="twitter:image" content="https://repository-images.githubusercontent.com/41766002/4d822280-678b-11e9-8fad-f0479a11cbcc" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="amphtml/extensions/amp-bind/amp-bind.md at main · ampproject/amphtml" /><meta name="twitter:description" content="The AMP web component framework. Contribute to ampproject/amphtml development by creating an account on GitHub." /> <meta property="og:image" content="https://repository-images.githubusercontent.com/41766002/4d822280-678b-11e9-8fad-f0479a11cbcc" /><meta property="og:image:alt" content="The AMP web component framework. Contribute to ampproject/amphtml development by creating an account on GitHub." /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="amphtml/extensions/amp-bind/amp-bind.md at main · ampproject/amphtml" /><meta property="og:url" content="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md" /><meta property="og:description" content="The AMP web component framework. Contribute to ampproject/amphtml 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="cc7767a0c18d7e936a37ec4b8ef829934f464822634943ba0cbdcb5e25e14f1d" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="15b18460ccb38585911f0182c65a829cc58635f60a4a305813e3a2bc7ff7d158" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="b683bfe8ba503fb752a8a7e87a8162efe7eaf74732202ad69805baa0fa057db8" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="turbo-cache-control" content="no-cache" data-turbo-transient> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/ampproject/amphtml git https://github.com/ampproject/amphtml.git"> <meta name="octolytics-dimension-user_id" content="14114390" /><meta name="octolytics-dimension-user_login" content="ampproject" /><meta name="octolytics-dimension-repository_id" content="41766002" /><meta name="octolytics-dimension-repository_nwo" content="ampproject/amphtml" /><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="41766002" /><meta name="octolytics-dimension-repository_network_root_nwo" content="ampproject/amphtml" /> <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"> <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/keyboard-shortcuts-dialog-78b8b9792a5f.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.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-cf3dd69d89eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-8fa3b694f335.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.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fampproject%2Famphtml%2Fblob%2Fmain%2Fextensions%2Famp-bind%2Famp-bind.md" 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/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="fef67fbfda677ff438e23f81def8f01b932cf97ee7f1cd1889c4bfd7ddc2a5bc" 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> </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":"white_papers_ebooks_webinars","context":"resources","tag":"link","label":"white_papers_ebooks_webinars_link_resources_navbar"}" href="https://resources.github.com"> White papers, Ebooks, 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":"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> </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":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <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> 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:ampproject/amphtml" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="a1536dJ9_Ldzs_nDUSu7vNWxGhSY39kpug06FXhRHcwpJFVJ_VK3uxHeUEXrrj9cvkmmlFXw-tyVax9kZmAOgg" 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="ampproject/amphtml" data-current-org="ampproject" data-current-owner="" 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-f53a904b-e2d9-43a1-9dd1-8936ac1de565" 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-f53a904b-e2d9-43a1-9dd1-8936ac1de565" 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="PlFWicB3ifVnvw5m7zg/P1OwWjhGrDcAjNTGf9V1k9HQLLzXDL+KkY6U6OQMImzcoWM6/iFxYiR3DIVULB+MyQ==" /> <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="TxBmqWemmKhYhjXUL+ICfzGCvGuQGx2Eqp4+4sFjydhIUm+4NvoCevmpkIbWv4pKzx4Zey4ktBdpOykWbDl1BA==" /> <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> <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="VDaAEgDCI5yozJ6Nb1gBtMfsLHVqMmcp3RpFcNgz8SdcHUjzW/kS3xLhXuTwptve1fZs4WpIK3HG8Rv/mwMtUA==" /> </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%2Fampproject%2Famphtml%2Fblob%2Fmain%2Fextensions%2Famp-bind%2Famp-bind.md" 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/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="fef67fbfda677ff438e23f81def8f01b932cf97ee7f1cd1889c4bfd7ddc2a5bc" 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%2Fblob%2Fshow&source=header-repo&source_repo=ampproject%2Famphtml" 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/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="fef67fbfda677ff438e23f81def8f01b932cf97ee7f1cd1889c4bfd7ddc2a5bc" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/blob/show;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-2f227fe1-9bfa-4460-a3d7-2a01ebc3d24c" aria-labelledby="tooltip-f2645743-3818-4d0f-867a-04a0f7a54be3" 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-f2645743-3818-4d0f-867a-04a0f7a54be3" for="icon-button-2f227fe1-9bfa-4460-a3d7-2a01ebc3d24c" 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 > <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="organization" data-hovercard-url="/orgs/ampproject/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ampproject"> ampproject </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="/ampproject/amphtml">amphtml</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=%2Fampproject%2Famphtml" 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/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="b9ed172c0824ae6050b00f5b5ecd12d8c9c6e25cbaab45b50def3c66d9ac56bb" 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-c7f86c5e-8bb7-4774-bbd4-77097774c933" 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=%2Fampproject%2Famphtml" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":41766002,"auth_type":"LOG_IN","originating_url":"https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="37ed5a2480364aebc6aad698f4680ff271898c571ad8c0d94e1e852398b96695" 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="3,885" data-view-component="true" class="Counter">3.9k</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fampproject%2Famphtml" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":41766002,"auth_type":"LOG_IN","originating_url":"https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","user_id":null}}" data-hydro-click-hmac="22de44afe685e774b90f88817fe63a1b730636a3834b06e209ed43a35b9e0bfc" 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="14889 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="14,889" data-view-component="true" class="Counter js-social-count">14.9k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> </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="/ampproject/amphtml" 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 /ampproject/amphtml" 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="/ampproject/amphtml/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /ampproject/amphtml/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="897" data-view-component="true" class="Counter">897</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/ampproject/amphtml/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /ampproject/amphtml/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="72" data-view-component="true" class="Counter">72</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/ampproject/amphtml/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /ampproject/amphtml/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="/ampproject/amphtml/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /ampproject/amphtml/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="1" data-view-component="true" class="Counter">1</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/ampproject/amphtml/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /ampproject/amphtml/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="/ampproject/amphtml/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="/ampproject/amphtml/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /ampproject/amphtml/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-fc891758-1501-4f14-9621-8983209adb3a-button" popovertarget="action-menu-fc891758-1501-4f14-9621-8983209adb3a-overlay" aria-controls="action-menu-fc891758-1501-4f14-9621-8983209adb3a-list" aria-haspopup="true" aria-labelledby="tooltip-72e07a7b-6d3b-4f0d-bbb5-546a8de9be61" 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-72e07a7b-6d3b-4f0d-bbb5-546a8de9be61" for="action-menu-fc891758-1501-4f14-9621-8983209adb3a-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 id="action-menu-fc891758-1501-4f14-9621-8983209adb3a-overlay" anchor="action-menu-fc891758-1501-4f14-9621-8983209adb3a-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-fc891758-1501-4f14-9621-8983209adb3a-button" id="action-menu-fc891758-1501-4f14-9621-8983209adb3a-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-39b2ade9-8b19-49ed-850f-37445223c61f" href="/ampproject/amphtml" 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-c8ce7768-8ab2-4562-b119-f1caef234797" href="/ampproject/amphtml/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-bf5fdc70-5343-4f04-be1e-2752464f75de" href="/ampproject/amphtml/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-4293efad-9dba-450e-a640-572a50c288ec" href="/ampproject/amphtml/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-b4cc1ca9-00f0-48ea-9369-54b8bbf191a6" href="/ampproject/amphtml/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-faee87a0-f81f-46a3-8c97-7172706151b7" href="/ampproject/amphtml/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-e0bf5dd7-670e-4e08-9006-9eff806a1936" href="/ampproject/amphtml/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 " > <react-app app-name="react-code-view" initial-path="/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="false" data-ssr="false" data-lazy="false" data-alternate="false" > <script type="application/json" data-target="react-app.embeddedData">{"payload":{"allShortcutsEnabled":false,"fileTree":{"extensions/amp-bind":{"items":[{"name":"0.1","path":"extensions/amp-bind/0.1","contentType":"directory"},{"name":"OWNERS","path":"extensions/amp-bind/OWNERS","contentType":"file"},{"name":"amp-bind.md","path":"extensions/amp-bind/amp-bind.md","contentType":"file"},{"name":"validator-amp-bind.protoascii","path":"extensions/amp-bind/validator-amp-bind.protoascii","contentType":"file"}],"totalCount":4},"extensions":{"items":[{"name":"amp-3d-gltf","path":"extensions/amp-3d-gltf","contentType":"directory"},{"name":"amp-3q-player","path":"extensions/amp-3q-player","contentType":"directory"},{"name":"amp-a4a","path":"extensions/amp-a4a","contentType":"directory"},{"name":"amp-access-fewcents","path":"extensions/amp-access-fewcents","contentType":"directory"},{"name":"amp-access-laterpay","path":"extensions/amp-access-laterpay","contentType":"directory"},{"name":"amp-access-poool","path":"extensions/amp-access-poool","contentType":"directory"},{"name":"amp-access-scroll","path":"extensions/amp-access-scroll","contentType":"directory"},{"name":"amp-access","path":"extensions/amp-access","contentType":"directory"},{"name":"amp-accordion","path":"extensions/amp-accordion","contentType":"directory"},{"name":"amp-action-macro","path":"extensions/amp-action-macro","contentType":"directory"},{"name":"amp-ad-custom","path":"extensions/amp-ad-custom","contentType":"directory"},{"name":"amp-ad-exit","path":"extensions/amp-ad-exit","contentType":"directory"},{"name":"amp-ad-network-adsense-impl","path":"extensions/amp-ad-network-adsense-impl","contentType":"directory"},{"name":"amp-ad-network-adzerk-impl","path":"extensions/amp-ad-network-adzerk-impl","contentType":"directory"},{"name":"amp-ad-network-dianomi-impl","path":"extensions/amp-ad-network-dianomi-impl","contentType":"directory"},{"name":"amp-ad-network-doubleclick-impl","path":"extensions/amp-ad-network-doubleclick-impl","contentType":"directory"},{"name":"amp-ad-network-fake-impl","path":"extensions/amp-ad-network-fake-impl","contentType":"directory"},{"name":"amp-ad-network-mgid-impl","path":"extensions/amp-ad-network-mgid-impl","contentType":"directory"},{"name":"amp-ad-network-nws-impl","path":"extensions/amp-ad-network-nws-impl","contentType":"directory"},{"name":"amp-ad-network-oblivki-impl","path":"extensions/amp-ad-network-oblivki-impl","contentType":"directory"},{"name":"amp-ad-network-smartads-impl","path":"extensions/amp-ad-network-smartads-impl","contentType":"directory"},{"name":"amp-ad-network-smartadserver-impl","path":"extensions/amp-ad-network-smartadserver-impl","contentType":"directory"},{"name":"amp-ad-network-triplelift-impl","path":"extensions/amp-ad-network-triplelift-impl","contentType":"directory"},{"name":"amp-ad-network-valueimpression-impl","path":"extensions/amp-ad-network-valueimpression-impl","contentType":"directory"},{"name":"amp-ad","path":"extensions/amp-ad","contentType":"directory"},{"name":"amp-addthis","path":"extensions/amp-addthis","contentType":"directory"},{"name":"amp-analytics","path":"extensions/amp-analytics","contentType":"directory"},{"name":"amp-anim","path":"extensions/amp-anim","contentType":"directory"},{"name":"amp-animation-polyfill","path":"extensions/amp-animation-polyfill","contentType":"directory"},{"name":"amp-animation","path":"extensions/amp-animation","contentType":"directory"},{"name":"amp-apester-media","path":"extensions/amp-apester-media","contentType":"directory"},{"name":"amp-app-banner","path":"extensions/amp-app-banner","contentType":"directory"},{"name":"amp-audio","path":"extensions/amp-audio","contentType":"directory"},{"name":"amp-auto-ads","path":"extensions/amp-auto-ads","contentType":"directory"},{"name":"amp-auto-lightbox","path":"extensions/amp-auto-lightbox","contentType":"directory"},{"name":"amp-autocomplete","path":"extensions/amp-autocomplete","contentType":"directory"},{"name":"amp-base-carousel","path":"extensions/amp-base-carousel","contentType":"directory"},{"name":"amp-beopinion","path":"extensions/amp-beopinion","contentType":"directory"},{"name":"amp-bind","path":"extensions/amp-bind","contentType":"directory"},{"name":"amp-bodymovin-animation","path":"extensions/amp-bodymovin-animation","contentType":"directory"},{"name":"amp-brid-player","path":"extensions/amp-brid-player","contentType":"directory"},{"name":"amp-brightcove","path":"extensions/amp-brightcove","contentType":"directory"},{"name":"amp-byside-content","path":"extensions/amp-byside-content","contentType":"directory"},{"name":"amp-cache-url","path":"extensions/amp-cache-url","contentType":"directory"},{"name":"amp-call-tracking","path":"extensions/amp-call-tracking","contentType":"directory"},{"name":"amp-carousel","path":"extensions/amp-carousel","contentType":"directory"},{"name":"amp-connatix-player","path":"extensions/amp-connatix-player","contentType":"directory"},{"name":"amp-consent","path":"extensions/amp-consent","contentType":"directory"},{"name":"amp-crypto-polyfill","path":"extensions/amp-crypto-polyfill","contentType":"directory"},{"name":"amp-dailymotion","path":"extensions/amp-dailymotion","contentType":"directory"},{"name":"amp-date-countdown","path":"extensions/amp-date-countdown","contentType":"directory"},{"name":"amp-date-display","path":"extensions/amp-date-display","contentType":"directory"},{"name":"amp-date-picker","path":"extensions/amp-date-picker","contentType":"directory"},{"name":"amp-delight-player","path":"extensions/amp-delight-player","contentType":"directory"},{"name":"amp-dynamic-css-classes","path":"extensions/amp-dynamic-css-classes","contentType":"directory"},{"name":"amp-embedly-card","path":"extensions/amp-embedly-card","contentType":"directory"},{"name":"amp-experiment","path":"extensions/amp-experiment","contentType":"directory"},{"name":"amp-facebook-comments","path":"extensions/amp-facebook-comments","contentType":"directory"},{"name":"amp-facebook-like","path":"extensions/amp-facebook-like","contentType":"directory"},{"name":"amp-facebook-page","path":"extensions/amp-facebook-page","contentType":"directory"},{"name":"amp-facebook","path":"extensions/amp-facebook","contentType":"directory"},{"name":"amp-fit-text","path":"extensions/amp-fit-text","contentType":"directory"},{"name":"amp-font","path":"extensions/amp-font","contentType":"directory"},{"name":"amp-form","path":"extensions/amp-form","contentType":"directory"},{"name":"amp-fx-collection","path":"extensions/amp-fx-collection","contentType":"directory"},{"name":"amp-fx-flying-carpet","path":"extensions/amp-fx-flying-carpet","contentType":"directory"},{"name":"amp-geo","path":"extensions/amp-geo","contentType":"directory"},{"name":"amp-gfycat","path":"extensions/amp-gfycat","contentType":"directory"},{"name":"amp-gist","path":"extensions/amp-gist","contentType":"directory"},{"name":"amp-google-document-embed","path":"extensions/amp-google-document-embed","contentType":"directory"},{"name":"amp-google-read-aloud-player","path":"extensions/amp-google-read-aloud-player","contentType":"directory"},{"name":"amp-gwd-animation","path":"extensions/amp-gwd-animation","contentType":"directory"},{"name":"amp-hulu","path":"extensions/amp-hulu","contentType":"directory"},{"name":"amp-iframe","path":"extensions/amp-iframe","contentType":"directory"},{"name":"amp-iframely","path":"extensions/amp-iframely","contentType":"directory"},{"name":"amp-ima-video","path":"extensions/amp-ima-video","contentType":"directory"},{"name":"amp-image-lightbox","path":"extensions/amp-image-lightbox","contentType":"directory"},{"name":"amp-image-slider","path":"extensions/amp-image-slider","contentType":"directory"},{"name":"amp-image-viewer","path":"extensions/amp-image-viewer","contentType":"directory"},{"name":"amp-imgur","path":"extensions/amp-imgur","contentType":"directory"},{"name":"amp-inline-gallery","path":"extensions/amp-inline-gallery","contentType":"directory"},{"name":"amp-inputmask","path":"extensions/amp-inputmask","contentType":"directory"},{"name":"amp-instagram","path":"extensions/amp-instagram","contentType":"directory"},{"name":"amp-install-serviceworker","path":"extensions/amp-install-serviceworker","contentType":"directory"},{"name":"amp-intersection-observer-polyfill","path":"extensions/amp-intersection-observer-polyfill","contentType":"directory"},{"name":"amp-izlesene","path":"extensions/amp-izlesene","contentType":"directory"},{"name":"amp-jwplayer","path":"extensions/amp-jwplayer","contentType":"directory"},{"name":"amp-kaltura-player","path":"extensions/amp-kaltura-player","contentType":"directory"},{"name":"amp-lightbox-gallery","path":"extensions/amp-lightbox-gallery","contentType":"directory"},{"name":"amp-lightbox","path":"extensions/amp-lightbox","contentType":"directory"},{"name":"amp-link-rewriter","path":"extensions/amp-link-rewriter","contentType":"directory"},{"name":"amp-list","path":"extensions/amp-list","contentType":"directory"},{"name":"amp-live-list","path":"extensions/amp-live-list","contentType":"directory"},{"name":"amp-loader","path":"extensions/amp-loader","contentType":"directory"},{"name":"amp-mathml","path":"extensions/amp-mathml","contentType":"directory"},{"name":"amp-mega-menu","path":"extensions/amp-mega-menu","contentType":"directory"},{"name":"amp-megaphone","path":"extensions/amp-megaphone","contentType":"directory"},{"name":"amp-minute-media-player","path":"extensions/amp-minute-media-player","contentType":"directory"},{"name":"amp-mowplayer","path":"extensions/amp-mowplayer","contentType":"directory"},{"name":"amp-mraid","path":"extensions/amp-mraid","contentType":"directory"},{"name":"amp-mustache","path":"extensions/amp-mustache","contentType":"directory"},{"name":"amp-nested-menu","path":"extensions/amp-nested-menu","contentType":"directory"},{"name":"amp-next-page","path":"extensions/amp-next-page","contentType":"directory"},{"name":"amp-nexxtv-player","path":"extensions/amp-nexxtv-player","contentType":"directory"},{"name":"amp-o2-player","path":"extensions/amp-o2-player","contentType":"directory"},{"name":"amp-onetap-google","path":"extensions/amp-onetap-google","contentType":"directory"},{"name":"amp-ooyala-player","path":"extensions/amp-ooyala-player","contentType":"directory"},{"name":"amp-orientation-observer","path":"extensions/amp-orientation-observer","contentType":"directory"},{"name":"amp-pan-zoom","path":"extensions/amp-pan-zoom","contentType":"directory"},{"name":"amp-pinterest","path":"extensions/amp-pinterest","contentType":"directory"},{"name":"amp-playbuzz","path":"extensions/amp-playbuzz","contentType":"directory"},{"name":"amp-position-observer","path":"extensions/amp-position-observer","contentType":"directory"},{"name":"amp-powr-player","path":"extensions/amp-powr-player","contentType":"directory"},{"name":"amp-reach-player","path":"extensions/amp-reach-player","contentType":"directory"},{"name":"amp-recaptcha-input","path":"extensions/amp-recaptcha-input","contentType":"directory"},{"name":"amp-redbull-player","path":"extensions/amp-redbull-player","contentType":"directory"},{"name":"amp-reddit","path":"extensions/amp-reddit","contentType":"directory"},{"name":"amp-render","path":"extensions/amp-render","contentType":"directory"},{"name":"amp-resize-observer-polyfill","path":"extensions/amp-resize-observer-polyfill","contentType":"directory"},{"name":"amp-riddle-quiz","path":"extensions/amp-riddle-quiz","contentType":"directory"},{"name":"amp-script","path":"extensions/amp-script","contentType":"directory"},{"name":"amp-selector","path":"extensions/amp-selector","contentType":"directory"},{"name":"amp-shadow-dom-polyfill","path":"extensions/amp-shadow-dom-polyfill","contentType":"directory"},{"name":"amp-sidebar","path":"extensions/amp-sidebar","contentType":"directory"},{"name":"amp-skimlinks","path":"extensions/amp-skimlinks","contentType":"directory"},{"name":"amp-slides","path":"extensions/amp-slides","contentType":"directory"},{"name":"amp-slikeplayer","path":"extensions/amp-slikeplayer","contentType":"directory"},{"name":"amp-smartlinks","path":"extensions/amp-smartlinks","contentType":"directory"},{"name":"amp-social-share","path":"extensions/amp-social-share","contentType":"directory"},{"name":"amp-soundcloud","path":"extensions/amp-soundcloud","contentType":"directory"},{"name":"amp-springboard-player","path":"extensions/amp-springboard-player","contentType":"directory"},{"name":"amp-standalone","path":"extensions/amp-standalone","contentType":"directory"},{"name":"amp-sticky-ad","path":"extensions/amp-sticky-ad","contentType":"directory"},{"name":"amp-story-360","path":"extensions/amp-story-360","contentType":"directory"},{"name":"amp-story-audio-sticker","path":"extensions/amp-story-audio-sticker","contentType":"directory"},{"name":"amp-story-auto-ads","path":"extensions/amp-story-auto-ads","contentType":"directory"},{"name":"amp-story-auto-analytics","path":"extensions/amp-story-auto-analytics","contentType":"directory"},{"name":"amp-story-captions","path":"extensions/amp-story-captions","contentType":"directory"},{"name":"amp-story-dev-tools","path":"extensions/amp-story-dev-tools","contentType":"directory"},{"name":"amp-story-education","path":"extensions/amp-story-education","contentType":"directory"},{"name":"amp-story-interactive","path":"extensions/amp-story-interactive","contentType":"directory"},{"name":"amp-story-page-attachment","path":"extensions/amp-story-page-attachment","contentType":"directory"},{"name":"amp-story-panning-media","path":"extensions/amp-story-panning-media","contentType":"directory"},{"name":"amp-story-player","path":"extensions/amp-story-player","contentType":"directory"},{"name":"amp-story-share-menu","path":"extensions/amp-story-share-menu","contentType":"directory"},{"name":"amp-story-shopping","path":"extensions/amp-story-shopping","contentType":"directory"},{"name":"amp-story-subscriptions","path":"extensions/amp-story-subscriptions","contentType":"directory"},{"name":"amp-story","path":"extensions/amp-story","contentType":"directory"},{"name":"amp-stream-gallery","path":"extensions/amp-stream-gallery","contentType":"directory"},{"name":"amp-subscriptions-google","path":"extensions/amp-subscriptions-google","contentType":"directory"},{"name":"amp-subscriptions","path":"extensions/amp-subscriptions","contentType":"directory"},{"name":"amp-tiktok","path":"extensions/amp-tiktok","contentType":"directory"},{"name":"amp-timeago","path":"extensions/amp-timeago","contentType":"directory"},{"name":"amp-truncate-text","path":"extensions/amp-truncate-text","contentType":"directory"},{"name":"amp-twitter","path":"extensions/amp-twitter","contentType":"directory"},{"name":"amp-user-notification","path":"extensions/amp-user-notification","contentType":"directory"},{"name":"amp-video-docking","path":"extensions/amp-video-docking","contentType":"directory"},{"name":"amp-video-iframe","path":"extensions/amp-video-iframe","contentType":"directory"},{"name":"amp-video","path":"extensions/amp-video","contentType":"directory"},{"name":"amp-viewer-integration","path":"extensions/amp-viewer-integration","contentType":"directory"},{"name":"amp-vimeo","path":"extensions/amp-vimeo","contentType":"directory"},{"name":"amp-vine","path":"extensions/amp-vine","contentType":"directory"},{"name":"amp-viqeo-player","path":"extensions/amp-viqeo-player","contentType":"directory"},{"name":"amp-vk","path":"extensions/amp-vk","contentType":"directory"},{"name":"amp-web-push","path":"extensions/amp-web-push","contentType":"directory"},{"name":"amp-wistia-player","path":"extensions/amp-wistia-player","contentType":"directory"},{"name":"amp-wordpress-embed","path":"extensions/amp-wordpress-embed","contentType":"directory"},{"name":"amp-yotpo","path":"extensions/amp-yotpo","contentType":"directory"},{"name":"amp-youtube","path":"extensions/amp-youtube","contentType":"directory"},{"name":"BUILD","path":"extensions/BUILD","contentType":"file"},{"name":"OWNERS","path":"extensions/OWNERS","contentType":"file"},{"name":"README.md","path":"extensions/README.md","contentType":"file"},{"name":"WORKSPACE","path":"extensions/WORKSPACE","contentType":"file"}],"totalCount":173},"":{"items":[{"name":".circleci","path":".circleci","contentType":"directory"},{"name":".github","path":".github","contentType":"directory"},{"name":".vscode","path":".vscode","contentType":"directory"},{"name":"3p","path":"3p","contentType":"directory"},{"name":"ads","path":"ads","contentType":"directory"},{"name":"build-system","path":"build-system","contentType":"directory"},{"name":"css","path":"css","contentType":"directory"},{"name":"docs","path":"docs","contentType":"directory"},{"name":"examples","path":"examples","contentType":"directory"},{"name":"extensions","path":"extensions","contentType":"directory"},{"name":"src","path":"src","contentType":"directory"},{"name":"test","path":"test","contentType":"directory"},{"name":"testing","path":"testing","contentType":"directory"},{"name":"third_party","path":"third_party","contentType":"directory"},{"name":"tools","path":"tools","contentType":"directory"},{"name":"validator","path":"validator","contentType":"directory"},{"name":".editorconfig","path":".editorconfig","contentType":"file"},{"name":".eslint-plugin-local.js","path":".eslint-plugin-local.js","contentType":"file"},{"name":".eslintignore","path":".eslintignore","contentType":"file"},{"name":".eslintrc.js","path":".eslintrc.js","contentType":"file"},{"name":".gitattributes","path":".gitattributes","contentType":"file"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":".lando.yml","path":".lando.yml","contentType":"file"},{"name":".lgtm.yml","path":".lgtm.yml","contentType":"file"},{"name":".npmrc","path":".npmrc","contentType":"file"},{"name":".prettierignore","path":".prettierignore","contentType":"file"},{"name":".prettierrc","path":".prettierrc","contentType":"file"},{"name":".renovaterc.json","path":".renovaterc.json","contentType":"file"},{"name":"CODE_OF_CONDUCT.md","path":"CODE_OF_CONDUCT.md","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"OWNERS","path":"OWNERS","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"SECURITY.md","path":"SECURITY.md","contentType":"file"},{"name":"amp.js","path":"amp.js","contentType":"file"},{"name":"babel.config.js","path":"babel.config.js","contentType":"file"},{"name":"codecov.yml","path":"codecov.yml","contentType":"file"},{"name":"package-lock.json","path":"package-lock.json","contentType":"file"},{"name":"package-scripts.js","path":"package-scripts.js","contentType":"file"},{"name":"package.json","path":"package.json","contentType":"file"},{"name":"tsconfig.base.json","path":"tsconfig.base.json","contentType":"file"},{"name":"tsconfig.json","path":"tsconfig.json","contentType":"file"}],"totalCount":41}},"fileTreeProcessingTime":17.667188,"foldersToFetch":[],"repo":{"id":41766002,"defaultBranch":"main","name":"amphtml","ownerLogin":"ampproject","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2015-09-01T22:10:53.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/14114390?v=4","public":true,"private":false,"isOrgOwned":true},"codeLineWrapEnabled":false,"symbolsExpanded":false,"treeExpanded":true,"refInfo":{"name":"main","listCacheKey":"v0:1730277829.0","canEdit":false,"refType":"branch","currentOid":"ac32751289d2b91ecb3d0757eb01f0c1fb84d851"},"path":"extensions/amp-bind/amp-bind.md","currentUser":null,"blob":{"rawLines":null,"stylingDirectives":null,"colorizedLines":null,"csv":null,"csvError":null,"dependabotInfo":{"showConfigurationBanner":false,"configFilePath":null,"networkDependabotPath":"/ampproject/amphtml/network/updates","dismissConfigurationNoticePath":"/settings/dismiss-notice/dependabot_configuration_notice","configurationNoticeDismissed":null},"displayName":"amp-bind.md","displayUrl":"https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md?raw=true","headerInfo":{"blobSize":"48.5 KB","deleteTooltip":"You must be signed in to make or propose changes","editTooltip":"You must be signed in to make or propose changes","ghDesktopPath":"https://desktop.github.com","isGitLfs":false,"onBranch":true,"shortPath":"ee277d7","siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fampproject%2Famphtml%2Fblob%2Fmain%2Fextensions%2Famp-bind%2Famp-bind.md","isCSV":false,"isRichtext":true,"toc":[{"level":1,"text":"amp-bind","anchor":"amp-bind","htmlText":"amp-bind"},{"level":2,"text":"Usage","anchor":"usage","htmlText":"Usage"},{"level":3,"text":"Example without declared state","anchor":"example-without-declared-state","htmlText":"Example without declared state"},{"level":3,"text":"Example with declared state","anchor":"example-with-declared-state","htmlText":"Example with declared state"},{"level":3,"text":"\u003camp-state\u003e specification","anchor":"amp-state-specification","htmlText":"\u0026lt;amp-state\u0026gt; specification"},{"level":2,"text":"Attributes","anchor":"attributes","htmlText":"Attributes"},{"level":3,"text":"src (optional)","anchor":"src-optional","htmlText":"src (optional)"},{"level":3,"text":"credentials (optional)","anchor":"credentials-optional","htmlText":"credentials (optional)"},{"level":2,"text":"Actions","anchor":"actions","htmlText":"Actions"},{"level":3,"text":"refresh","anchor":"refresh","htmlText":"refresh"},{"level":2,"text":"State","anchor":"state","htmlText":"State"},{"level":3,"text":"Size","anchor":"size","htmlText":"Size"},{"level":3,"text":"Defining and initializing state with \u003camp-state\u003e","anchor":"defining-and-initializing-state-with-amp-state","htmlText":"Defining and initializing state with \u0026lt;amp-state\u0026gt;"},{"level":3,"text":"Updating state variables with AMP.setState()","anchor":"updating-state-variables-with-ampsetstate","htmlText":"Updating state variables with AMP.setState()"},{"level":5,"text":"Event triggering and data","anchor":"event-triggering-and-data","htmlText":"Event triggering and data"},{"level":4,"text":"Updating nested variables","anchor":"updating-nested-variables","htmlText":"Updating nested variables"},{"level":4,"text":"Circular references","anchor":"circular-references","htmlText":"Circular references"},{"level":4,"text":"Removing a variable","anchor":"removing-a-variable","htmlText":"Removing a variable"},{"level":4,"text":"Deep-merge with AMP.setState()","anchor":"deep-merge-with-ampsetstate","htmlText":"Deep-merge with AMP.setState()"},{"level":3,"text":"Modifying history with AMP.pushState()","anchor":"modifying-history-with-amppushstate","htmlText":"Modifying history with AMP.pushState()"},{"level":2,"text":"Expressions","anchor":"expressions","htmlText":"Expressions"},{"level":3,"text":"Differences from JavaScript","anchor":"differences-from-javascript","htmlText":"Differences from JavaScript"},{"level":3,"text":"Allowlisted functions","anchor":"allowlisted-functions","htmlText":"Allowlisted functions"},{"level":4,"text":"Array","anchor":"array","htmlText":"Array"},{"level":4,"text":"Number","anchor":"number","htmlText":"Number"},{"level":4,"text":"String","anchor":"string","htmlText":"String"},{"level":4,"text":"Math","anchor":"math","htmlText":"Math"},{"level":4,"text":"Object","anchor":"object","htmlText":"Object"},{"level":4,"text":"Global","anchor":"global","htmlText":"Global"},{"level":3,"text":"Defining macros with amp-bind-macro","anchor":"defining-macros-with-amp-bind-macro","htmlText":"Defining macros with amp-bind-macro"},{"level":2,"text":"Bindings","anchor":"bindings","htmlText":"Bindings"},{"level":3,"text":"React and XML compatibility","anchor":"react-and-xml-compatibility","htmlText":"React and XML compatibility"},{"level":3,"text":"Binding types","anchor":"binding-types","htmlText":"Binding types"},{"level":3,"text":"AMP component specific attributes","anchor":"amp-component-specific-attributes","htmlText":"AMP component specific attributes"},{"level":3,"text":"HTML attributes","anchor":"html-attributes","htmlText":"HTML attributes"},{"level":3,"text":"Disallowed bindings","anchor":"disallowed-bindings","htmlText":"Disallowed bindings"},{"level":2,"text":"Debugging","anchor":"debugging","htmlText":"Debugging"},{"level":3,"text":"Warnings","anchor":"warnings","htmlText":"Warnings"},{"level":3,"text":"Errors","anchor":"errors","htmlText":"Errors"},{"level":3,"text":"Debugging State","anchor":"debugging-state","htmlText":"Debugging State"},{"level":3,"text":"Expression grammar","anchor":"expression-grammar","htmlText":"Expression grammar"}],"lineInfo":{"truncatedLoc":"1537","truncatedSloc":"1180"},"mode":"file"},"image":false,"isCodeownersFile":null,"isPlain":false,"isValidLegacyIssueTemplate":false,"issueTemplate":null,"discussionTemplate":null,"language":"Markdown","languageID":222,"large":false,"planSupportInfo":{"repoIsFork":null,"repoOwnedByCurrentUser":null,"requestFullPath":"/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md","showFreeOrgGatedFeatureMessage":null,"showPlanSupportBanner":null,"upgradeDataAttributes":null,"upgradePath":null},"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_dockerfile","releasePath":"/ampproject/amphtml/releases/new?marketplace=true","showPublishActionBanner":false},"rawBlobUrl":"https://github.com/ampproject/amphtml/raw/refs/heads/main/extensions/amp-bind/amp-bind.md","renderImageOrRaw":false,"richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e$category@\u003c/th\u003e\n \u003cth\u003eformats\u003c/th\u003e\n \u003cth\u003eteaser\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003edynamic-content\u003c/div\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003e\u003ctable\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003ewebsites\u003c/div\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003eads\u003c/div\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003eemail\u003c/div\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/div\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003e\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003etext\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cdiv dir=\"auto\"\u003eAllows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.\u003c/div\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/div\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eamp-bind\u003c/h1\u003e\u003ca id=\"user-content-amp-bind\" class=\"anchor\" aria-label=\"Permalink: amp-bind\" href=\"#amp-bind\"\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\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUsage\u003c/h2\u003e\u003ca id=\"user-content-usage\" class=\"anchor\" aria-label=\"Permalink: Usage\" href=\"#usage\"\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\"\u003eThe \u003ccode\u003eamp-bind\u003c/code\u003e component enables custom stateful interactivity on AMP pages.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFor performance, and to avoid the risk of unexpected content jumping, \u003ccode\u003eamp-bind\u003c/code\u003e does not evaluate expressions on page load. This means visual elements should be given a default state and not rely on \u003ccode\u003eamp-bind\u003c/code\u003e for initial render.\u003c/p\u003e\n\n\nWatch this video for an introduction to amp-bind.\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eamp-bind\u003c/code\u003e has three main concepts:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#state\"\u003eState\u003c/a\u003e: A document-scope, mutable JSON state. State variables update in response to user actions. \u003ccode\u003eamp-bind\u003c/code\u003e does not evaluate expressions on page load. Visual elements should have their default \"state\" defined and not rely \u003ccode\u003eamp-bind\u003c/code\u003e for initial render.\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#expressions\"\u003eExpressions\u003c/a\u003e: JavaScript-like expressions that can reference the \u003cstrong\u003estate\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#bindings\"\u003eBindings\u003c/a\u003e: Special attributes that link an element's property to a \u003cstrong\u003estate\u003c/strong\u003e via an \u003cstrong\u003eexpression\u003c/strong\u003e. A property is bound by wrapping it inside brackets, in the form of \u003ccode\u003e[property]\u003c/code\u003e.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExample without declared state\u003c/h3\u003e\u003ca id=\"user-content-example-without-declared-state\" class=\"anchor\" aria-label=\"Permalink: Example without declared state\" href=\"#example-without-declared-state\"\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[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;'Hello ' + foo\u0026quot;\u0026gt;Hello World\u0026lt;/p\u0026gt;\n\n\u0026lt;button on=\u0026quot;tap:AMP.setState({foo: 'Interactivity'})\u0026quot;\u0026gt;\n Say \u0026quot;Hello Interactivity\u0026quot;\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'Hello ' + foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eHello World\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({foo: 'Interactivity'})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Say \"Hello Interactivity\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn the example above:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eThe \u003cstrong\u003estate\u003c/strong\u003e begins as empty.\u003c/li\u003e\n\u003cli\u003eIt has a single \u003cstrong\u003ebinding\u003c/strong\u003e to \u003ccode\u003e[text]\u003c/code\u003e, the text content of a node, on the \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e element.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e[text]\u003c/code\u003e value contains the \u003cstrong\u003eexpression\u003c/strong\u003e, \u003ccode\u003e'Hello ' + foo\u003c/code\u003e. This expression concatenates the string 'Hello ' and the value of the \u003cstrong\u003estate variable\u003c/strong\u003e foo.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eWhen the user taps/clicks the button:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eIt triggers the \u003ccode\u003etap\u003c/code\u003e event.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003etap\u003c/code\u003e event invokes the \u003ccode\u003eAMP.setState()\u003c/code\u003e method.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003eAMP.setState()\u003c/code\u003e methods sets the \u003ccode\u003efoo\u003c/code\u003e \u003cstrong\u003estate variable\u003c/strong\u003e to the value of \u003ccode\u003eInteractivity\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eThe state is no longer empty, so the page updates the bound property to its state.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e[tip type=\"note\"]\nCalling \u003ccode\u003eAMP.setState()\u003c/code\u003e in some examples may set or change states of other examples on page. Refresh this page to see examples before \u003ccode\u003eAMP.setState()\u003c/code\u003e.\n[/tip]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExample with declared state\u003c/h3\u003e\u003ca id=\"user-content-example-with-declared-state\" class=\"anchor\" aria-label=\"Permalink: Example with declared state\" href=\"#example-with-declared-state\"\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[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"top-frame\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;head\u0026gt;\n \u0026lt;style amp-custom\u0026gt;\n .greenBorder {\n border: 5px solid green;\n }\n .redBorder {\n border: 5px solid red;\n }\n .defaultBorder {\n border: 5px solid transparent;\n }\n \u0026lt;/style\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;amp-state id=\u0026quot;theFood\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;cupcakes\u0026quot;: {\n \u0026quot;imageUrl\u0026quot;: \u0026quot;https://amp.dev/static/samples/img/image2.jpg\u0026quot;,\n \u0026quot;style\u0026quot;: \u0026quot;greenBorder\u0026quot;\n },\n \u0026quot;sushi\u0026quot;: {\n \u0026quot;imageUrl\u0026quot;: \u0026quot;https://amp.dev/static/samples/img/image3.jpg\u0026quot;,\n \u0026quot;style\u0026quot;: \u0026quot;redBorder\u0026quot;\n }\n }\n \u0026lt;/script\u0026gt;\n \u0026lt;/amp-state\u0026gt;\n \u0026lt;div class=\u0026quot;defaultBorder\u0026quot; [class]=\u0026quot;theFood[currentMeal].style || 'defaultBorder'\u0026quot;\u0026gt;\n \u0026lt;p\u0026gt;Each food has a different border color.\u0026lt;/p\u0026gt;\n \u0026lt;p [text]=\u0026quot;'I want to eat ' + currentMeal + '.'\u0026quot;\u0026gt;I want to eat cupcakes.\u0026lt;/p\u0026gt;\n \u0026lt;amp-img\n width=\u0026quot;300\u0026quot;\n height=\u0026quot;200\u0026quot;\n src=\u0026quot;https://amp.dev/static/samples/img/image2.jpg\u0026quot;\n [src]=\u0026quot;theFood[currentMeal].imageUrl\u0026quot;\n \u0026gt;\n \u0026lt;/amp-img\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({currentMeal: 'sushi'})\u0026quot;\u0026gt;Set to sushi\u0026lt;/button\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({currentMeal: 'cupcakes'})\u0026quot;\u0026gt;\n Set to cupcakes\n \u0026lt;/button\u0026gt;\n \u0026lt;/div\u0026gt;\n\u0026lt;/body\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eamp-custom\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n .greenBorder {\n border: 5px solid green;\n }\n .redBorder {\n border: 5px solid red;\n }\n .defaultBorder {\n border: 5px solid transparent;\n }\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"cupcakes\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"imageUrl\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"https://amp.dev/static/samples/img/image2.jpg\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"style\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"greenBorder\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"sushi\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"imageUrl\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"https://amp.dev/static/samples/img/image3.jpg\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"style\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"redBorder\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edefaultBorder\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003e[class]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood[currentMeal].style || 'defaultBorder'\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEach food has a different border color.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'I want to eat ' + currentMeal + '.'\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eI want to eat cupcakes.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-img\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ewidth\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e300\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eheight\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e200\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ehttps://amp.dev/static/samples/img/image2.jpg\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003e[src]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood[currentMeal].imageUrl\u003c/span\u003e\"\n \u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-img\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({currentMeal: 'sushi'})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSet to sushi\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({currentMeal: 'cupcakes'})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Set to cupcakes\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn the example above:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component declares state using JSON. The \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e element has an \u003ccode\u003eid\u003c/code\u003e of \u003ccode\u003etheFood\u003c/code\u003e to allow us to reference the defined data. But because \u003ccode\u003e\u0026lt;amp-bind\u0026gt;\u003c/code\u003e does not evaluate \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e on page load, the \u003cstrong\u003estate\u003c/strong\u003e is empty.\u003c/li\u003e\n\u003cli\u003eThe page loads with visual defaults.\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e element has \u003ccode\u003eclass=\"greenBorder\"\u003c/code\u003e defined.\u003c/li\u003e\n\u003cli\u003eThe second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e element has \"I want cupcakes.\" defined within the tags.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;amp-img\u0026gt;\u003c/code\u003e \u003ccode\u003esrc\u003c/code\u003e points to a url.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eChangeable elements have \u003cstrong\u003ebindings\u003c/strong\u003e that point to \u003cstrong\u003eexpressions\u003c/strong\u003e.\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003e[class]\u003c/code\u003e attribute on the \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is bound to the \u003ccode\u003etheFood[currentMeal].style\u003c/code\u003e \u003cstrong\u003eexpression\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e[text]\u003c/code\u003e attribute on the second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e is bound to the \u003ccode\u003e'I want to eat ' + currentMeal + '.'\u003c/code\u003e \u003cstrong\u003eexpression\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e[src]\u003c/code\u003e attribute is bound to the \u003ccode\u003etheFood[currentMeal].imageUrl\u003c/code\u003e \u003cstrong\u003eexpression\u003c/strong\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eIf a user clicks the \"Set to sushi\" button:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003etap\u003c/code\u003e event trigger the \u003ccode\u003eAMP.setState\u003c/code\u003e action.\u003c/li\u003e\n\u003cli\u003eThe setState action turns \u003ccode\u003ecurrentMeal\u003c/code\u003e into a state and sets it to \u003ccode\u003esushi\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eAMP evaluates \u003cstrong\u003ebindings\u003c/strong\u003e with \u003cstrong\u003eexpressions\u003c/strong\u003e that contain the state \u003ccode\u003ecurrentMeal\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[class]=\"theFood[currentMeal].style\"\u003c/code\u003e updates \u003ccode\u003eclass\u003c/code\u003e to \u003ccode\u003eredBorder\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[text]=\"'I want to eat ' + currentMeal + '.'\"\u003c/code\u003e updates the inner text of the second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e element to \"I want to eat sushi\".\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[src]=\"theFood[currentMeal].imageUrl\u003c/code\u003e updates the \u003ccode\u003esrc\u003c/code\u003e of \u003ccode\u003e\u0026lt;amp-img\u0026gt;\u003c/code\u003e to \u003ccode\u003ehttps://amp.dev/static/samples/img/image3.jpg\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003eUsing \u003ccode\u003e[class]=\"theFood[currentMeal].style\"\u003c/code\u003e as an example of \u003cstrong\u003eexpression\u003c/strong\u003e syntax evaluation:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[class]\u003c/code\u003e is the property to update.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etheFood\u003c/code\u003e is the id of the \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecurrentMeal\u003c/code\u003e is the state name. In the case of \u003ccode\u003etheFood\u003c/code\u003e it will be \u003ccode\u003ecupcakes\u003c/code\u003e or \u003ccode\u003esushi\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estyle\u003c/code\u003e is the \u003cstrong\u003estate variable\u003c/strong\u003e. It corresponds to the matching JSON key, and sets the bound property to that key's value.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"top-frame\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" \u0026lt;style amp-custom\u0026gt;\n .greenBorder {\n border: 5px solid green;\n }\n .redBorder {\n border: 5px solid red;\n }\n \u0026lt;/style\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n\u0026lt;amp-state id=\u0026quot;theFood\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;cupcakes\u0026quot;: {\n \u0026quot;style\u0026quot;: \u0026quot;greenBorder\u0026quot;,\n \u0026quot;text\u0026quot;: \u0026quot;Just kidding, I want to eat cupcakes.\u0026quot;\n },\n \u0026quot;sushi\u0026quot;: {\n \u0026quot;style\u0026quot;: \u0026quot;redBorder\u0026quot;,\n \u0026quot;text\u0026quot;: \u0026quot;Actually, I want to eat sushi.\u0026quot;\n }\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;div class=\u0026quot;greenBorder\u0026quot; [class]=\u0026quot;theFood[currentMeal].style\u0026quot;\u0026gt;\n \u0026lt;p\u0026gt;Each food has a different border color.\u0026lt;/p\u0026gt;\n \u0026lt;p [text]=\u0026quot;theFood[currentMeal].text\u0026quot;\u0026gt;I want to eat cupcakes.\u0026lt;/p\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({currentMeal: 'sushi'})\u0026quot;\u0026gt;Set to sushi\u0026lt;/button\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({currentMeal: 'cupcakes'})\u0026quot;\u0026gt;Set to cupcakes\u0026lt;/button\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eamp-custom\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n .greenBorder {\n border: 5px solid green;\n }\n .redBorder {\n border: 5px solid red;\n }\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003ehead\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"cupcakes\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"style\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"greenBorder\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"text\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Just kidding, I want to eat cupcakes.\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"sushi\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"style\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"redBorder\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"text\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Actually, I want to eat sushi.\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003egreenBorder\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003e[class]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood[currentMeal].style\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEach food has a different border color.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etheFood[currentMeal].text\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eI want to eat cupcakes.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({currentMeal: 'sushi'})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSet to sushi\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({currentMeal: 'cupcakes'})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSet to cupcakes\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component declares state using a JSON object. It has an \u003ccode\u003eid\u003c/code\u003e of \u003ccode\u003etheFood\u003c/code\u003e to allow us to reference the defined data. But because \u003ccode\u003e\u0026lt;amp-bind\u0026gt;\u003c/code\u003e does not evaluate \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e on email load, the \u003cstrong\u003estate\u003c/strong\u003e is empty.\u003c/li\u003e\n\u003cli\u003eThe page loads with visual defaults.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e element has \u003ccode\u003eclass=\"greenBorder\"\u003c/code\u003e defined.\u003c/li\u003e\n\u003cli\u003eThe second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e element has \"I want cupcakes.\" defined within the tags.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e\u0026lt;amp-img\u0026gt;\u003c/code\u003e \u003ccode\u003esrc\u003c/code\u003e points to a url.\u003c/li\u003e\n\u003cli\u003eChangeable elements have \u003cstrong\u003ebindings\u003c/strong\u003e that point to \u003cstrong\u003eexpressions\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e[class]\u003c/code\u003e attribute on the \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is bound to the \u003ccode\u003etheFood[currentMeal].style\u003c/code\u003e \u003cstrong\u003eexpression\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eThe \u003ccode\u003e[text]\u003c/code\u003e attribute on the second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e is bound to the \u003ccode\u003etheFood[currentMeal].text\u003c/code\u003e \u003cstrong\u003eexpression\u003c/strong\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eIf a user clicks the \"Set to sushi\" button:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eThe \u003ccode\u003etap\u003c/code\u003e event trigger the \u003ccode\u003eAMP.setState\u003c/code\u003e action.\u003c/li\u003e\n\u003cli\u003eThe setState action turns \u003ccode\u003ecurrentMeal\u003c/code\u003e into a state and sets it to \u003ccode\u003esushi\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eAMP evaluates \u003cstrong\u003ebindings\u003c/strong\u003e with \u003cstrong\u003eexpressions\u003c/strong\u003e that contain the state \u003ccode\u003ecurrentMeal\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[class]=\"theFood[currentMeal].style\u003c/code\u003e updates \u003ccode\u003eclass\u003c/code\u003e to \u003ccode\u003eredBorder\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etheFood[currentMeal].text\u003c/code\u003e updates the inner text of the second \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e element to \"Actually, I want to eat sushi.\".\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003eUsing \u003ccode\u003e[class]=\"theFood[currentMeal].style\"\u003c/code\u003e as an example of \u003cstrong\u003eexpression\u003c/strong\u003e syntax evaluation:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[class]\u003c/code\u003e is the property to update\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etheFood\u003c/code\u003e is the id of the \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecurrentMeal\u003c/code\u003e is the state name. In the case of \u003ccode\u003etheFood\u003c/code\u003e it will be \u003ccode\u003ecupcakes\u003c/code\u003e or \u003ccode\u003esushi\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estyle\u003c/code\u003e is the \u003cstrong\u003estate variable\u003c/strong\u003e. It corresponds to the matching JSON key, and sets the bound property to that key's value.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e specification\u003c/h3\u003e\u003ca id=\"user-content-amp-state-specification\" class=\"anchor\" aria-label=\"Permalink: \u0026lt;amp-state\u0026gt; specification\" href=\"#amp-state-specification\"\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[filter formats=\"websites, ads\"]\nAn \u003ccode\u003eamp-state\u003c/code\u003e element may contain either a child \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e element \u003cstrong\u003eOR\u003c/strong\u003e a \u003ccode\u003esrc\u003c/code\u003e attribute containing a CORS URL to a remote JSON endpoint, but not both.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myLocalState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\n\u0026lt;amp-state id=\u0026quot;myRemoteState\u0026quot; src=\u0026quot;https://data.com/articles.json\u0026quot;\u0026gt; \u0026lt;/amp-state\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyLocalState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyRemoteState\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ehttps://data.com/articles.json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAs an \u003ccode\u003eamp-state\u003c/code\u003e element stores a JSON object literal, you can also initialize\nit with an object, as above, or with a constant.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;singleton\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n 'I am a string'\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003esingleton\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e'I am a string'\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\nAn \u003ccode\u003eamp-state\u003c/code\u003e element must contain a child \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e element.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myLocalState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyLocalState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAttributes\u003c/h2\u003e\u003ca id=\"user-content-attributes\" class=\"anchor\" aria-label=\"Permalink: Attributes\" href=\"#attributes\"\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\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ccode\u003esrc\u003c/code\u003e (optional)\u003c/h3\u003e\u003ca id=\"user-content-src-optional\" class=\"anchor\" aria-label=\"Permalink: src (optional)\" href=\"#src-optional\"\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\"\u003eThe URL of the remote endpoint that must return JSON, which is used to this \u003ccode\u003eamp-state\u003c/code\u003e. This must be a HTTP service with a proper CORS configuration for the page. The \u003ccode\u003esrc\u003c/code\u003e attribute allows all standard URL variable substitutions. See the \u003ca href=\"/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md\"\u003eSubstitutions Guide\u003c/a\u003e for more info.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAMP batches XMLHttpRequests (XHRs) to JSON endpoints, that is, you can use a single JSON data request as a data source for multiple consumers (e.g., multiple \u003ccode\u003eamp-state\u003c/code\u003e elements) on an AMP page.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFor example, if your \u003ccode\u003eamp-state\u003c/code\u003e element makes an XHR to an endpoint, while the XHR is in flight, all subsequent XHRs to the same endpoint won't trigger and will instead return the results from the first XHR.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[tip type=\"important\"]\nThe endpoint must implement the requirements specified in the \u003ca href=\"https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests\" rel=\"nofollow\"\u003eCORS Requests in AMP\u003c/a\u003e spec.\n[/tip]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ccode\u003ecredentials\u003c/code\u003e (optional)\u003c/h3\u003e\u003ca id=\"user-content-credentials-optional\" class=\"anchor\" aria-label=\"Permalink: credentials (optional)\" href=\"#credentials-optional\"\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\"\u003eDefines a \u003ccode\u003ecredentials\u003c/code\u003e option as specified by the \u003ca href=\"https://fetch.spec.whatwg.org/\" rel=\"nofollow\"\u003eFetch API\u003c/a\u003e.\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eSupported values: \u003ccode\u003eomit\u003c/code\u003e, \u003ccode\u003einclude\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eDefault: \u003ccode\u003eomit\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eTo send credentials, pass the value of \u003ccode\u003einclude\u003c/code\u003e. If this value is set, the response must follow the \u003ca href=\"https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp\" rel=\"nofollow\"\u003eAMP CORS security guidelines\u003c/a\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eActions\u003c/h2\u003e\u003ca id=\"user-content-actions\" class=\"anchor\" aria-label=\"Permalink: Actions\" href=\"#actions\"\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\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ccode\u003erefresh\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-refresh\" class=\"anchor\" aria-label=\"Permalink: refresh\" href=\"#refresh\"\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\"\u003eThe \u003ccode\u003erefresh\u003c/code\u003e action refetches data from data point the \u003ccode\u003esrc\u003c/code\u003e attribute points to. This action will make a network request bypassing the browser's caching mechanisms.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;currentTime\u0026quot; src=\u0026quot;/documentation/examples/api/time\u0026quot;\u0026gt;\u0026lt;/amp-state\u0026gt;\n\u0026lt;button on=\u0026quot;tap:currentTime.refresh\u0026quot;\u0026gt;\n Refresh\n\u0026lt;/button\u0026gt;\n\u0026lt;div [text]=\u0026quot;currentTime.time\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecurrentTime\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e/documentation/examples/api/time\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:currentTime.refresh\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Refresh\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecurrentTime.time\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWe recommend \u003ca href=\"/ampproject/amphtml/blob/main/extensions/amp-script/amp-script.md\"\u003e\u003ccode\u003eamp-script\u003c/code\u003e\u003c/a\u003e for most use cases working with live content. In a subset of cases, \u003ccode\u003erefresh\u003c/code\u003e with \u003ccode\u003eamp-bind\u003c/code\u003e will work.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eState\u003c/h2\u003e\u003ca id=\"user-content-state\" class=\"anchor\" aria-label=\"Permalink: State\" href=\"#state\"\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\"\u003eEach AMP document that uses \u003ccode\u003eamp-bind\u003c/code\u003e has document-scope mutable JSON data, or \u003cstrong\u003estate\u003c/strong\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSize\u003c/h3\u003e\u003ca id=\"user-content-size\" class=\"anchor\" aria-label=\"Permalink: Size\" href=\"#size\"\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\"\u003eAn \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e element's JSON data has a maximum size of 100KB.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDefining and initializing state with \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-defining-and-initializing-state-with-amp-state\" class=\"anchor\" aria-label=\"Permalink: Defining and initializing state with \u0026lt;amp-state\u0026gt;\" href=\"#defining-and-initializing-state-with-amp-state\"\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\"\u003eExpressions are not evaluated on page load, but you may define an initial state. The \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component contains different \u003cstrong\u003estates\u003c/strong\u003e and their \u003cstrong\u003estate variables\u003c/strong\u003e. While this defines a \u003cstrong\u003estate\u003c/strong\u003e, it will not reflect on the page until after a user interacts.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myDefinedState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;myDefinedState.foo\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;See value of initialized state\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyDefinedState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyDefinedState.foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSee value of initialized state\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eUse \u003ca href=\"#expressions\"\u003eexpressions\u003c/a\u003e to reference \u003cstrong\u003estate variables\u003c/strong\u003e. If the JSON data is not nested in the \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e component, reference the states via dot syntax. In the above example, \u003ccode\u003emyState.foo\u003c/code\u003e evaluates to \"bar\".\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAn \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e element can also specify a CORS URL instead of a child JSON script. See the \u003ca href=\"#amp-state-specification\"\u003e\u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e specification\u003c/a\u003e for details.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myRemoteState\u0026quot; src=\u0026quot;/static/samples/json/websites.json\u0026quot;\u0026gt;\n\u0026lt;/amp-state\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyRemoteState\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e/static/samples/json/websites.json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUpdating state variables with \u003ccode\u003eAMP.setState()\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-updating-state-variables-with-ampsetstate\" class=\"anchor\" aria-label=\"Permalink: Updating state variables with AMP.setState()\" href=\"#updating-state-variables-with-ampsetstate\"\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\"\u003eThe \u003ca href=\"/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md#amp\"\u003e\u003ccode\u003eAMP.setState()\u003c/code\u003e\u003c/a\u003e action merges an object literal into the state. This means you can update the value of a defined state variable.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myUpdateState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;,\n \u0026quot;baz\u0026quot;: \u0026quot;hello\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;myUpdateState.foo\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;myUpdateState.baz\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;See value of set state\u0026lt;/button\u0026gt;\n\u0026lt;!-- Like JavaScript, you can reference existing\n variables in the values of the object literal. --\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myUpdateState:{baz: myUpdateState.foo}})\u0026quot;\u0026gt;\n Set value of baz to value of foo\n\u0026lt;/button\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myUpdateState:{baz: 'world'}})\u0026quot;\u0026gt;\n Set value of baz to \u0026quot;world\u0026quot;\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyUpdateState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"baz\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"hello\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyUpdateState.foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyUpdateState.baz\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSee value of set state\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- Like JavaScript, you can reference existing\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e variables in the values of the object literal. --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myUpdateState:{baz: myUpdateState.foo}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Set value of baz to value of foo\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myUpdateState:{baz: 'world'}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Set value of baz to \"world\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn the example above, triggering the \u003ccode\u003eAMP.setState({})\u003c/code\u003e action on the first button evaluates the \u003ccode\u003e[text]\u003c/code\u003e binding expression. It then inserts the defined \u003cstrong\u003estate variable's\u003c/strong\u003e value into the \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e tag.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen the clicking the second button, with \u003ccode\u003eAMP.setState({myState:{baz: myState.foo}})\u003c/code\u003e action defined, it \u003ca href=\"#deep-merge-with-ampsetstate\"\u003edeep-merges\u003c/a\u003e the \"baz\" \u003cstrong\u003estate variable\u003c/strong\u003e value to the same as the \"foo\" \u003cstrong\u003estate variable\u003c/strong\u003e value. Both \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e tags display \"bar\".\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eState variable\u003c/strong\u003e values can update to values not defined in the initial state. When clicking the third button, with \u003ccode\u003e\"tap:AMP.setState({myState:{baz: 'world'}})\"\u003c/code\u003e action defined, it deep merges the \"baz\" \u003cstrong\u003estate variable\u003c/strong\u003e value, overriding it to \"world\".\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eClicking the first button after the other two sets the current state. Nothing will change.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe \u003cstrong\u003estate variables\u003c/strong\u003e reverts back to the defined JSON in \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e on page refresh.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch5 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEvent triggering and data\u003c/h5\u003e\u003ca id=\"user-content-event-triggering-and-data\" class=\"anchor\" aria-label=\"Permalink: Event triggering and data\" href=\"#event-triggering-and-data\"\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\"\u003eWhen triggered by certain events, \u003ccode\u003eAMP.setState()\u003c/code\u003e can access event-related data on the \u003ccode\u003eevent\u003c/code\u003e property.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- The \u0026quot;change\u0026quot; event of this \u0026lt;input\u0026gt; element contains\n a \u0026quot;value\u0026quot; variable that can be referenced via \u0026quot;event.value\u0026quot;. --\u0026gt;\n\u0026lt;select on=\u0026quot;change:AMP.setState({ option: event.value })\u0026quot;\u0026gt;\n \u0026lt;option value=\u0026quot;0\u0026quot;\u0026gt;No selection\u0026lt;/option\u0026gt;\n \u0026lt;option value=\u0026quot;1\u0026quot;\u0026gt;Option 1\u0026lt;/option\u0026gt;\n \u0026lt;option value=\u0026quot;2\u0026quot;\u0026gt;Option 2\u0026lt;/option\u0026gt;\n\u0026lt;/select\u0026gt;\n\u0026lt;div hidden [hidden]=\u0026quot;option != 1\u0026quot;\u0026gt;\n Option 1\n\u0026lt;/div\u0026gt;\n\u0026lt;div hidden [hidden]=\u0026quot;option != 2\u0026quot;\u0026gt;\n Option 2\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- The \"change\" event of this \u0026lt;input\u0026gt; element contains\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e a \"value\" variable that can be referenced via \"event.value\". --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eselect\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003echange:AMP.setState({ option: event.value })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e0\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eNo selection\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e1\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eOption 1\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e2\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eOption 2\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eselect\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ehidden\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[hidden]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eoption != 1\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Option 1\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ehidden\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[hidden]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eoption != 2\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Option 2\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUpdating nested variables\u003c/h4\u003e\u003ca id=\"user-content-updating-nested-variables\" class=\"anchor\" aria-label=\"Permalink: Updating nested variables\" href=\"#updating-nested-variables\"\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\"\u003eNested objects are generally merged to a maximum depth of 10. All variables, including those defined in \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e, can be overidden.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;,\n \u0026quot;first\u0026quot;: {\n \u0026quot;a\u0026quot;: \u0026quot;nested once\u0026quot;,\n \u0026quot;ab\u0026quot;: {\n \u0026quot;b\u0026quot;: \u0026quot;nested twice\u0026quot;,\n \u0026quot;bc\u0026quot;: {\n \u0026quot;c\u0026quot;: \u0026quot;nested three times\u0026quot;,\n \u0026quot;cd\u0026quot;: {\n \u0026quot;d\u0026quot;: \u0026quot;nested four times\u0026quot;,\n \u0026quot;de\u0026quot;: {\n \u0026quot;e\u0026quot;: \u0026quot;nested five times\u0026quot;,\n \u0026quot;ef\u0026quot;: {\n \u0026quot;f\u0026quot;: \u0026quot;nested six times\u0026quot;,\n \u0026quot;fg\u0026quot;: {\n \u0026quot;g\u0026quot;: \u0026quot;nested seven times\u0026quot;,\n \u0026quot;gh\u0026quot;: {\n \u0026quot;h\u0026quot;: \u0026quot;nested nine times\u0026quot;,\n \u0026quot;hi\u0026quot;: {\n \u0026quot;i\u0026quot;: \u0026quot;nested ten times\u0026quot;\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;myState.foo\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;myState.first.ab.bc.cd.de.ef.fg.gh.hi.i\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;See value of set state\u0026lt;/button\u0026gt;\n\u0026lt;button\n on=\u0026quot;tap:AMP.setState({ myState: {first: {ab: {bc: {cd: {de: {ef: {fg: {gh: {hi: {i:'this is as far as you should merge nested values'} } } } } } } } } } })\u0026quot;\n\u0026gt;\n Merge 10th nested object\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"first\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"a\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested once\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"ab\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"b\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested twice\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"bc\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"c\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested three times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"cd\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"d\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested four times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"de\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"e\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested five times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"ef\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"f\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested six times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"fg\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"g\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested seven times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"gh\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"h\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested nine times\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"hi\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"i\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"nested ten times\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyState.foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyState.first.ab.bc.cd.de.ef.fg.gh.hi.i\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSee value of set state\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ myState: {first: {ab: {bc: {cd: {de: {ef: {fg: {gh: {hi: {i:'this is as far as you should merge nested values'} } } } } } } } } } })\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Merge 10th nested object\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCircular references\u003c/h4\u003e\u003ca id=\"user-content-circular-references\" class=\"anchor\" aria-label=\"Permalink: Circular references\" href=\"#circular-references\"\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\u003ccode\u003eAMP.setState(object)\u003c/code\u003e throws an error if \u003ccode\u003eobject\u003c/code\u003e contains a circular reference.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRemoving a variable\u003c/h4\u003e\u003ca id=\"user-content-removing-a-variable\" class=\"anchor\" aria-label=\"Permalink: Removing a variable\" href=\"#removing-a-variable\"\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\"\u003eRemove an existing state variable by setting its value to \u003ccode\u003enull\u003c/code\u003e in \u003ccode\u003eAMP.setState()\u003c/code\u003e.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;button on=\u0026quot;tap:AMP.setState({removeMe: null})\u0026quot;\u0026gt;\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({removeMe: null})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDeep-merge with \u003ccode\u003eAMP.setState()\u003c/code\u003e\u003c/h4\u003e\u003ca id=\"user-content-deep-merge-with-ampsetstate\" class=\"anchor\" aria-label=\"Permalink: Deep-merge with AMP.setState()\" href=\"#deep-merge-with-ampsetstate\"\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\"\u003eCalling \u003ccode\u003eAMP.setState()\u003c/code\u003e deep-merges the provided object literal with the current state. \u003ccode\u003eamp-bind\u003c/code\u003e writes all literals to the state directly, except for nested objects, which are recursively merged. Primitives and arrays are in the state are always overwritten by variables of the same name in the object literal.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;employee.name\u0026quot;\u0026gt;Name\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;employee.age\u0026quot;\u0026gt;Age\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;employee.vehicle\u0026quot;\u0026gt;Vehicle\u0026lt;/p\u0026gt;\n\u0026lt;!-- Pressing this button changes state to: --\u0026gt;\n\u0026lt;button\n on=\u0026quot;tap:AMP.setState({\n employee: {\n name: 'John Smith',\n age: 47,\n vehicle: 'Car'\n }\n })\u0026quot;\n\u0026gt;\n Set employee to John Smith\n\u0026lt;/button\u0026gt;\n\u0026lt;!-- Pressing this button recursively merges the object literal argument, --\u0026gt;\n\u0026lt;!-- `{employee: {age: 64}}`, into the existing state. --\u0026gt;\n\n\u0026lt;button\n on=\u0026quot;tap:AMP.setState({\n employee: {\n age: 64\n }\n })\u0026quot;\n\u0026gt;\n Set employee age to 64\n\u0026lt;/button\u0026gt;\n\u0026lt;!-- The value updates from 47 to 64 at employee.age. --\u0026gt;\n\u0026lt;!-- No other values change. --\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eemployee.name\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eName\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eemployee.age\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eAge\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eemployee.vehicle\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eVehicle\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- Pressing this button changes state to: --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e employee: {\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e name: 'John Smith',\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e age: 47,\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e vehicle: 'Car'\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e }\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e })\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Set employee to John Smith\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- Pressing this button recursively merges the object literal argument, --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- `{employee: {age: 64}}`, into the existing state. --\u0026gt;\u003c/span\u003e\n\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e employee: {\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e age: 64\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e }\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e })\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Set employee age to 64\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- The value updates from 47 to 64 at employee.age. --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- No other values change. --\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eModifying history with \u003ccode\u003eAMP.pushState()\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-modifying-history-with-amppushstate\" class=\"anchor\" aria-label=\"Permalink: Modifying history with AMP.pushState()\" href=\"#modifying-history-with-amppushstate\"\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\u003ccode\u003eAMP.pushState()\u003c/code\u003e writes state changes to the history. Navigating back, will restore the previous state. To test this, increase the count in the example below and use your browser's back button to decrease the count.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;count\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n 1\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;div\u0026gt;Item \u0026lt;span [text]=\u0026quot;count\u0026quot;\u0026gt;1\u0026lt;/span\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.pushState({ count: count + 1 })\u0026quot;\u0026gt;Increase count\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecount\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eItem \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecount\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e1\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.pushState({ count: count + 1 })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eIncrease count\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eUsing \u003ccode\u003eAMP.pushState()\u003c/code\u003e sets the current state to the most recent pushed state.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExpressions\u003c/h2\u003e\u003ca id=\"user-content-expressions\" class=\"anchor\" aria-label=\"Permalink: Expressions\" href=\"#expressions\"\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\u003ccode\u003eamp-bind\u003c/code\u003e uses JavaScript-like expressions that can reference the state.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDifferences from JavaScript\u003c/h3\u003e\u003ca id=\"user-content-differences-from-javascript\" class=\"anchor\" aria-label=\"Permalink: Differences from JavaScript\" href=\"#differences-from-javascript\"\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\u003eExpressions may only access the containing document's \u003ca href=\"#state\"\u003estate\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eExpressions \u003cstrong\u003edo not\u003c/strong\u003e have access to \u003ccode\u003ewindow\u003c/code\u003e or \u003ccode\u003edocument\u003c/code\u003e. \u003ccode\u003eglobal\u003c/code\u003e references the top-level state.\u003c/li\u003e\n\u003cli\u003eOnly \u003ccode\u003eamp-bind\u003c/code\u003e \u003ca href=\"#allowlisted-functions\"\u003eallowlisted functions\u003c/a\u003e and operators are usable. are usable. Use of arrow functions are allowed as function parameters, e.g. \u003ccode\u003e[1, 2, 3].map(x =\u0026gt; x + 1)\u003c/code\u003e.\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eCustom functions, classes and loops are disallowed.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eUndefined variables and array-index-out-of-bounds return \u003ccode\u003enull\u003c/code\u003e instead of \u003ccode\u003eundefined\u003c/code\u003e or throwing errors.\u003c/li\u003e\n\u003cli\u003eA single expression is currently capped at 250 operands for performance. Please \u003ca href=\"https://github.com/ampproject/amphtml/issues/new/choose\"\u003econtact us\u003c/a\u003e if this is insufficient for your use case.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eThe following are all valid expressions:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;myExpressionsState.foo\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;!-- 1 + '1'; // 11 --\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myExpressionsState: {foo: 1 + '1'}})\u0026quot;\u0026gt;\n foo: 1 + \u0026quot;1\u0026quot;\n\u0026lt;/button\u0026gt;\n\u0026lt;!-- 1 + +'1'; // 2 --\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myExpressionsState: {foo: 1 + + '1'}})\u0026quot;\u0026gt;\n foo: 1 + + \u0026quot;1\u0026quot;\n\u0026lt;/button\u0026gt;\n\u0026lt;!-- !0; // true --\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myExpressionsState: {foo: !0}})\u0026quot;\u0026gt;foo: !0\u0026lt;/button\u0026gt;\n\u0026lt;!-- null || 'default'; // 'default' --\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({myExpressionsState: {foo: null || 'default'}})\u0026quot;\u0026gt;\n null || \u0026quot;default\u0026quot;\n\u0026lt;/button\u0026gt;\n\u0026lt;!-- [1, 2, 3].map(x =\u0026gt; x + 1); // 2,3,4 --\u0026gt;\n\u0026lt;button\n on=\u0026quot;tap:AMP.setState({myExpressionsState: {foo: [1, 2, 3].map(x =\u0026gt; x + 1)}})\u0026quot;\n\u0026gt;\n [1, 2, 3].map(x =\u0026gt; x + 1)\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyExpressionsState.foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- 1 + '1'; // 11 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myExpressionsState: {foo: 1 + '1'}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n foo: 1 + \"1\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- 1 + +'1'; // 2 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myExpressionsState: {foo: 1 + + '1'}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n foo: 1 + + \"1\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- !0; // true --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myExpressionsState: {foo: !0}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003efoo: !0\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- null || 'default'; // 'default' --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myExpressionsState: {foo: null || 'default'}})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n null || \"default\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- [1, 2, 3].map(x =\u0026gt; x + 1); // 2,3,4 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({myExpressionsState: {foo: [1, 2, 3].map(x =\u0026gt; x + 1)}})\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n [1, 2, 3].map(x =\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e x + 1)\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFind the full expression grammar and implementation in \u003ca href=\"/ampproject/amphtml/blob/main/extensions/amp-bind/0.1/bind-expr-impl.jison\"\u003ebind-expr-impl.jison\u003c/a\u003e and \u003ca href=\"/ampproject/amphtml/blob/main/extensions/amp-bind/0.1/bind-expression.js\"\u003ebind-expression.js\u003c/a\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAllowlisted functions\u003c/h3\u003e\u003ca id=\"user-content-allowlisted-functions\" class=\"anchor\" aria-label=\"Permalink: Allowlisted functions\" href=\"#allowlisted-functions\"\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\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods\" rel=\"nofollow\"\u003e\u003ccode\u003eArray\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-array\" class=\"anchor\" aria-label=\"Permalink: Array\" href=\"#array\"\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\"\u003eSingle-parameter arrow functions can't have parentheses, e.g. use \u003ccode\u003ex =\u0026gt; x + 1\u003c/code\u003e instead of \u003ccode\u003e(x) =\u0026gt; x + 1\u003c/code\u003e. \u003ccode\u003esort()\u003c/code\u003e and \u003ccode\u003esplice()\u003c/code\u003e return modified copies instead of operating in-place.\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\" rel=\"nofollow\"\u003econcat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\" rel=\"nofollow\"\u003efilter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes\" rel=\"nofollow\"\u003eincludes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf\" rel=\"nofollow\"\u003eindexOf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join\" rel=\"nofollow\"\u003ejoin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf\" rel=\"nofollow\"\u003elastIndexOf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\" rel=\"nofollow\"\u003emap\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\" rel=\"nofollow\"\u003ereduce\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\" rel=\"nofollow\"\u003eslice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some\" rel=\"nofollow\"\u003esome\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\" rel=\"nofollow\"\u003esort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\" rel=\"nofollow\"\u003esplice\u003c/a\u003e (not-in-place)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myArrayState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: [1, 2, 3],\n \u0026quot;bar\u0026quot;: [\u0026quot;hello\u0026quot;, \u0026quot;world\u0026quot;, \u0026quot;bar\u0026quot;, \u0026quot;baz\u0026quot;],\n \u0026quot;baz\u0026quot;: \u0026quot;Hello world, welcome to amp-bind\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;'concat: ' + myArrayState.foo.concat(4)\u0026quot;\u0026gt;concat: 1, 2, 3\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'filter: ' + myArrayState.bar.filter(word =\u0026gt; word.length \u0026gt; 3)\u0026quot;\u0026gt;\n filter: words with less than three letter\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'includes: ' + myArrayState.bar.includes('hello' || 'world')\u0026quot;\u0026gt;\n includes: \u0026quot;hello\u0026quot; or \u0026quot;world\u0026quot;\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'indexOf: ' + myArrayState.bar.indexOf('world')\u0026quot;\u0026gt;indexOf: \u0026quot;world\u0026quot;\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'join: ' + myArrayState.bar.join('-')\u0026quot;\u0026gt;\n join: all words with a dash\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'lastIndexOf: ' + myArrayState.baz.lastIndexOf('amp-bind')\u0026quot;\u0026gt;\n lastIndexOf: \u0026quot;amp-bind\u0026quot;\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'map: ' + myArrayState.foo.map((x, i) =\u0026gt; x + i)\u0026quot;\u0026gt;\n map: add each number to previous number\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'reduce: ' + myArrayState.foo.reduce((x, i) =\u0026gt; x + i)\u0026quot;\u0026gt;\n reduce: add all numbers in array together\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'slice: ' + myArrayState.bar.slice(1,3)\u0026quot;\u0026gt;\n slice: return words at index 1 and 3\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'some: ' + myArrayState.foo.some(x =\u0026gt; x \u0026lt; 2)\u0026quot;\u0026gt;\n some: some numbers are less than 2\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'sort: ' + myArrayState.bar.sort()\u0026quot;\u0026gt;\n sort: place words in alphabetical order\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'splice: ' + myArrayState.bar.splice(2, 0, 'amp-bind')\u0026quot;\u0026gt;\n splice: place \u0026quot;amp-bind\u0026quot; at index 2\n\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyArrayState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"hello\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"world\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"baz\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"baz\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Hello world, welcome to amp-bind\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'concat: ' + myArrayState.foo.concat(4)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003econcat: 1, 2, 3\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'filter: ' + myArrayState.bar.filter(word =\u0026gt; word.length \u0026gt; 3)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n filter: words with less than three letter\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'includes: ' + myArrayState.bar.includes('hello' || 'world')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n includes: \"hello\" or \"world\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'indexOf: ' + myArrayState.bar.indexOf('world')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eindexOf: \"world\"\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'join: ' + myArrayState.bar.join('-')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n join: all words with a dash\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'lastIndexOf: ' + myArrayState.baz.lastIndexOf('amp-bind')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n lastIndexOf: \"amp-bind\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'map: ' + myArrayState.foo.map((x, i) =\u0026gt; x + i)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n map: add each number to previous number\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'reduce: ' + myArrayState.foo.reduce((x, i) =\u0026gt; x + i)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n reduce: add all numbers in array together\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'slice: ' + myArrayState.bar.slice(1,3)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n slice: return words at index 1 and 3\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'some: ' + myArrayState.foo.some(x =\u0026gt; x \u0026lt; 2)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n some: some numbers are less than 2\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'sort: ' + myArrayState.bar.sort()\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n sort: place words in alphabetical order\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'splice: ' + myArrayState.bar.splice(2, 0, 'amp-bind')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n splice: place \"amp-bind\" at index 2\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Methods\" rel=\"nofollow\"\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-number\" class=\"anchor\" aria-label=\"Permalink: Number\" href=\"#number\"\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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential\" rel=\"nofollow\"\u003etoExponential\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed\" rel=\"nofollow\"\u003etoFixed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision\" rel=\"nofollow\"\u003etoPrecision\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString\" rel=\"nofollow\"\u003etoString\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;'toExponential: ' + (100).toExponential(5)\u0026quot;\u0026gt;\n toExponential: 100 to the exponent of 5\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'toFixed: ' + (1.99).toFixed(1)\u0026quot;\u0026gt;\n toFixed: 1.99 rounded and fixed to first decimal\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'toPrecision: ' + (1.234567).toPrecision(3)\u0026quot;\u0026gt;\n toPrecision: 1.234567 returned as a string to the third digit\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'toString ' + (3.14).toString()\u0026quot;\u0026gt;\n toString: 3.14 returned as a string\n\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toExponential: ' + (100).toExponential(5)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toExponential: 100 to the exponent of 5\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toFixed: ' + (1.99).toFixed(1)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toFixed: 1.99 rounded and fixed to first decimal\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toPrecision: ' + (1.234567).toPrecision(3)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toPrecision: 1.234567 returned as a string to the third digit\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toString ' + (3.14).toString()\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toString: 3.14 returned as a string\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Methods\" rel=\"nofollow\"\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-string\" class=\"anchor\" aria-label=\"Permalink: String\" href=\"#string\"\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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt\" rel=\"nofollow\"\u003echarAt\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\" rel=\"nofollow\"\u003echarCodeAt\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat\" rel=\"nofollow\"\u003econcat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf\" rel=\"nofollow\"\u003eindexOf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf\" rel=\"nofollow\"\u003elastIndexOf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace\" rel=\"nofollow\"\u003ereplace\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice\" rel=\"nofollow\"\u003eslice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split\" rel=\"nofollow\"\u003esplit\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr\" rel=\"nofollow\"\u003esubstr\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase\" rel=\"nofollow\"\u003etoLowerCase\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase\" rel=\"nofollow\"\u003etoUpperCase\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myStringState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;foo\u0026quot;: \u0026quot;Hello world\u0026quot;,\n \u0026quot;bar\u0026quot;: \u0026quot;, welcome to amp-bind\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;'charAt: ' + myStringState.foo.charAt(6)\u0026quot;\u0026gt;\n charAt: The character at index 6\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'charCodeAt: ' + myStringState.foo.charCodeAt(6)\u0026quot;\u0026gt;\n charCodeAt: The UTF-16 code unit of the character at index 6\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'concat: ' + myStringState.foo.concat(myState.bar)\u0026quot;\u0026gt;\n concat: Combine foo and bar\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'lastIndexOf: ' + myStringState.foo.lastIndexOf('w')\u0026quot;\u0026gt;\n lastIndexOf: The index of \u0026quot;w\u0026quot;\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'replace: ' + myStringState.foo.replace('world', 'amp-bind')\u0026quot;\u0026gt;\n replace: Replace \u0026quot;world\u0026quot; with \u0026quot;amp-bind\u0026quot;\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'slice: ' + myStringState.foo.slice(5)\u0026quot;\u0026gt;\n slice: Extract the first 5 characters\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'split: ' + myStringState.foo.split(' ')\u0026quot;\u0026gt;\n split: Split words at space and return as array\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'toLowerCase: ' + myStringState.foo.toLowerCase()\u0026quot;\u0026gt;\n toLowerCase: Make all letters lower case\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'toUpperCase: ' + myStringState.foo.toUpperCase()\u0026quot;\u0026gt;\n toUpperCase: Make all letters upper case\n\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyStringState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Hello world\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\", welcome to amp-bind\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'charAt: ' + myStringState.foo.charAt(6)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n charAt: The character at index 6\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'charCodeAt: ' + myStringState.foo.charCodeAt(6)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n charCodeAt: The UTF-16 code unit of the character at index 6\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'concat: ' + myStringState.foo.concat(myState.bar)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n concat: Combine foo and bar\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'lastIndexOf: ' + myStringState.foo.lastIndexOf('w')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n lastIndexOf: The index of \"w\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'replace: ' + myStringState.foo.replace('world', 'amp-bind')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n replace: Replace \"world\" with \"amp-bind\"\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'slice: ' + myStringState.foo.slice(5)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n slice: Extract the first 5 characters\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'split: ' + myStringState.foo.split(' ')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n split: Split words at space and return as array\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toLowerCase: ' + myStringState.foo.toLowerCase()\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toLowerCase: Make all letters lower case\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'toUpperCase: ' + myStringState.foo.toUpperCase()\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n toUpperCase: Make all letters upper case\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math\" rel=\"nofollow\"\u003e\u003ccode\u003eMath\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-math\" class=\"anchor\" aria-label=\"Permalink: Math\" href=\"#math\"\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\"\u003eStatic functions are not namespaced, e.g. use \u003ccode\u003eabs(-1)\u003c/code\u003e instead of \u003ccode\u003eMath.abs(-1)\u003c/code\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs\" rel=\"nofollow\"\u003eabs\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil\" rel=\"nofollow\"\u003eceil\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor\" rel=\"nofollow\"\u003efloor\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max\" rel=\"nofollow\"\u003emax\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min\" rel=\"nofollow\"\u003emin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow\" rel=\"nofollow\"\u003epow\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random\" rel=\"nofollow\"\u003erandom\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round\" rel=\"nofollow\"\u003eround\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign\" rel=\"nofollow\"\u003esign\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;'abs: ' + abs(5 - 9)\u0026quot;\u0026gt;abs: absolute number of 5 - 9\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'ceil: ' + ceil(1.01)\u0026quot;\u0026gt;\n abs: round 1.01 up to the next largest whole number\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'floor: ' + floor(1.99)\u0026quot;\u0026gt;floor: round 1.99 down to a whole number\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'max: ' + max(100, 4, 98)\u0026quot;\u0026gt;max: return largest number\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'min: ' + min(100, 4, 98)\u0026quot;\u0026gt;min: return smalled number\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'pow: ' + pow(5, 3)\u0026quot;\u0026gt;pow: return 5 to the power of 3\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'random: ' + random()\u0026quot;\u0026gt;\n random: return a number greater than 0 and less than 1\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'round: ' + round(1.51)\u0026quot;\u0026gt;round: round 1.51\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'sign: ' + sign(-9)\u0026quot;\u0026gt;sign: evaluate if positive or negative\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'abs: ' + abs(5 - 9)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eabs: absolute number of 5 - 9\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'ceil: ' + ceil(1.01)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n abs: round 1.01 up to the next largest whole number\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'floor: ' + floor(1.99)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003efloor: round 1.99 down to a whole number\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'max: ' + max(100, 4, 98)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003emax: return largest number\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'min: ' + min(100, 4, 98)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003emin: return smalled number\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'pow: ' + pow(5, 3)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003epow: return 5 to the power of 3\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'random: ' + random()\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n random: return a number greater than 0 and less than 1\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'round: ' + round(1.51)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eround: round 1.51\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'sign: ' + sign(-9)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003esign: evaluate if positive or negative\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\" rel=\"nofollow\"\u003e\u003ccode\u003eObject\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-object\" class=\"anchor\" aria-label=\"Permalink: Object\" href=\"#object\"\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\"\u003eStatic functions are not namespaced, e.g. use \u003ccode\u003ekeys(Object)\u003c/code\u003e instead of \u003ccode\u003eObject.abs(Object)\u003c/code\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\" rel=\"nofollow\"\u003ekeys\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values\" rel=\"nofollow\"\u003evalues\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myObjectState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\n \u0026quot;hello\u0026quot;: \u0026quot;world\u0026quot;,\n \u0026quot;foo\u0026quot;: \u0026quot;bar\u0026quot;\n }\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\u0026lt;p [text]=\u0026quot;'keys: ' + keys(myObjectState)\u0026quot;\u0026gt;\n keys: myObjectState JSON object keys\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'values: ' + values(myObjectState)\u0026quot;\u0026gt;\n values: myObjectState JSON object values\n\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyObjectState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"hello\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"world\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'keys: ' + keys(myObjectState)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n keys: myObjectState JSON object keys\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'values: ' + values(myObjectState)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n values: myObjectState JSON object values\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects\" rel=\"nofollow\"\u003e\u003ccode\u003eGlobal\u003c/code\u003e\u003c/a\u003e\u003c/h4\u003e\u003ca id=\"user-content-global\" class=\"anchor\" aria-label=\"Permalink: Global\" href=\"#global\"\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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI\" rel=\"nofollow\"\u003eencodeURI\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent\" rel=\"nofollow\"\u003eencodeURIComponent\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;'encodeURI: ' + encodeURI('https://amp.dev/😉')\u0026quot;\u0026gt;\n encodeURI: Encode a URI and ignore protocol prefix\n\u0026lt;/p\u0026gt;\n\u0026lt;p [text]=\u0026quot;'encodeURIComponent: ' + encodeURIComponent('https://amp.dev/😉')\u0026quot;\u0026gt;\n encodeURIComponent: Encode a URI\n\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({})\u0026quot;\u0026gt;Evaluate\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'encodeURI: ' + encodeURI('https://amp.dev/😉')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n encodeURI: Encode a URI and ignore protocol prefix\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'encodeURIComponent: ' + encodeURIComponent('https://amp.dev/😉')\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n encodeURIComponent: Encode a URI\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEvaluate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDefining macros with \u003ccode\u003eamp-bind-macro\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-defining-macros-with-amp-bind-macro\" class=\"anchor\" aria-label=\"Permalink: Defining macros with amp-bind-macro\" href=\"#defining-macros-with-amp-bind-macro\"\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\"\u003eReuse \u003ccode\u003eamp-bind\u003c/code\u003e expression fragments by defining an \u003ccode\u003eamp-bind-macro\u003c/code\u003e. The \u003ccode\u003eamp-bind-macro\u003c/code\u003e element allows an expression that takes zero or more arguments and references the current state. Invoke \u003ccode\u003eamp-bind-macros\u003c/code\u003e like a function, referencing the \u003ccode\u003eid\u003c/code\u003e attribute value from anywhere in the document.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-bind-macro\n id=\u0026quot;circleArea\u0026quot;\n arguments=\u0026quot;radius\u0026quot;\n expression=\u0026quot;3.14 * radius * radius\u0026quot;\n\u0026gt;\u0026lt;/amp-bind-macro\u0026gt;\n\u0026lt;p\u0026gt;\n Input a radius value\n\u0026lt;/p\u0026gt;\n\u0026lt;input\n type=\u0026quot;number\u0026quot;\n min=\u0026quot;0\u0026quot;\n max=\u0026quot;100\u0026quot;\n value=\u0026quot;0\u0026quot;\n on=\u0026quot;input-throttled:AMP.setState({myCircle:{radius: event.value}})\u0026quot;\n/\u0026gt;\n\u0026lt;p\u0026gt;\n The circle has an area of\n \u0026lt;span [text]=\u0026quot;circleArea(myCircle.radius)\u0026quot;\u0026gt;0\u0026lt;/span\u0026gt;.\n\u0026lt;/p\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-bind-macro\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecircleArea\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003earguments\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eradius\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eexpression\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e3.14 * radius * radius\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-bind-macro\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Input a radius value\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003einput\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003enumber\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003emin\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e0\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003emax\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e100\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e0\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003einput-throttled:AMP.setState({myCircle:{radius: event.value}})\u003c/span\u003e\"\n/\u0026gt;\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n The circle has an area of\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecircleArea(myCircle.radius)\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e0\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e.\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA macro can also call other macros \u003ci\u003edefined before itself\u003c/i\u003e. A macro cannot call itself recursively.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBindings\u003c/h2\u003e\u003ca id=\"user-content-bindings\" class=\"anchor\" aria-label=\"Permalink: Bindings\" href=\"#bindings\"\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\"\u003eA \u003cstrong\u003ebinding\u003c/strong\u003e is a special attribute of the form \u003ccode\u003e[property]\u003c/code\u003e that links an element's property to an \u003ca href=\"#expressions\"\u003eexpression\u003c/a\u003e. Use the alternative,\u003ca href=\"#react-and-xml-compatibility\"\u003eXML-compatible\u003c/a\u003e syntax if developing in XML.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen the \u003cstrong\u003estate\u003c/strong\u003e changes, expressions tied to that state are evaluated. The element properties \u003cstrong\u003ebound\u003c/strong\u003e to the \u003cstrong\u003estate\u003c/strong\u003e are updated with the new expression results.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBoolean expression results toggle boolean attributes. For example: \u003ccode\u003e\u0026lt;amp-video [controls]=\"expr\"...\u0026gt;\u003c/code\u003e. When \u003ccode\u003eexpr\u003c/code\u003e evaluates to \u003ccode\u003etrue\u003c/code\u003e, the \u003ccode\u003e\u0026lt;amp-video\u0026gt;\u003c/code\u003e element has the \u003ccode\u003econtrols\u003c/code\u003e attribute. When \u003ccode\u003eexpr\u003c/code\u003e evaluates to \u003ccode\u003efalse\u003c/code\u003e, the \u003ccode\u003econtrols\u003c/code\u003e attribute is removed.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind, amp-video\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-video\n [controls]=\u0026quot;controls\u0026quot;\n width=\u0026quot;640\u0026quot;\n height=\u0026quot;360\u0026quot;\n layout=\u0026quot;responsive\u0026quot;\n poster=\u0026quot;/static/inline-examples/images/kitten-playing.png\u0026quot;\n\u0026gt;\n \u0026lt;source\n src=\u0026quot;/static/inline-examples/videos/kitten-playing.webm\u0026quot;\n type=\u0026quot;video/webm\u0026quot;\n /\u0026gt;\n \u0026lt;source\n src=\u0026quot;/static/inline-examples/videos/kitten-playing.mp4\u0026quot;\n type=\u0026quot;video/mp4\u0026quot;\n /\u0026gt;\n \u0026lt;div fallback\u0026gt;\n \u0026lt;p\u0026gt;This browser does not support the video element.\u0026lt;/p\u0026gt;\n \u0026lt;/div\u0026gt;\n\u0026lt;/amp-video\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({ controls: true })\u0026quot;\u0026gt;\n Controls\n\u0026lt;/button\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({ controls: false })\u0026quot;\u0026gt;\n No Controls\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-video\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e[controls]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003econtrols\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003ewidth\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e640\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eheight\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e360\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003elayout\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eresponsive\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eposter\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e/static/inline-examples/images/kitten-playing.png\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esource\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e/static/inline-examples/videos/kitten-playing.webm\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003evideo/webm\u003c/span\u003e\"\n /\u0026gt;\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esource\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e/static/inline-examples/videos/kitten-playing.mp4\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003evideo/mp4\u003c/span\u003e\"\n /\u0026gt;\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efallback\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eThis browser does not support the video element.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-video\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ controls: true })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Controls\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ controls: false })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n No Controls\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eReact and XML compatibility\u003c/h3\u003e\u003ca id=\"user-content-react-and-xml-compatibility\" class=\"anchor\" aria-label=\"Permalink: React and XML compatibility\" href=\"#react-and-xml-compatibility\"\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\"\u003eIf developing with React or XML, use the alternative \u003ccode\u003edata-amp-bind-property\u003c/code\u003e syntax. The \u003ccode\u003e[\u003c/code\u003e and \u003ccode\u003e]\u003c/code\u003e characters in attribute names is invalid XML, making the \u003ccode\u003e[property]\u003c/code\u003e syntax unavailable.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eReplace the \u003ccode\u003eproperty\u003c/code\u003e field with the name of the property you would like to define in \u003ccode\u003edata-amp-bind-property\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFor example, \u003ccode\u003e[text]=\"myState.foo\"\u003c/code\u003e would become \u003ccode\u003edata-amp-bind-text=\"myState.foo\"\u003c/code\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBinding types\u003c/h3\u003e\u003ca id=\"user-content-binding-types\" class=\"anchor\" aria-label=\"Permalink: Binding types\" href=\"#binding-types\"\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\u003ccode\u003eamp-bind\u003c/code\u003e supports data bindings on five types of element state.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent\" rel=\"nofollow\"\u003e\u003cstrong\u003eNode.textContent\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBind \u003ccode\u003eNode.textContent\u003c/code\u003e using the \u003ccode\u003e[text]\u003c/code\u003e attribute. The \u003ccode\u003e[text]\u003c/code\u003e attribute is supported on most text elements.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [text]=\u0026quot;'Hello ' + myState.foo\u0026quot;\u0026gt;Hello World\u0026lt;/p\u0026gt;\n\u0026lt;p\u0026gt;\u0026lt;/p\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'Hello ' + myState.foo\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eHello World\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eCSS classes\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBind an element's \u003ccode\u003eclass\u003c/code\u003e using the \u003ccode\u003e[class]\u003c/code\u003e attribute. A \u003ccode\u003e[class]\u003c/code\u003e expression must result in a space-delimited string. Meaning, if you are binding multiple classes, use a space between names. A comma or dash will be evaluated as the class name.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"top-frame\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;head\u0026gt;\n \u0026lt;style amp-custom\u0026gt;\n .background-green {\n background: green;\n }\n .background-red {\n background: red;\n }\n .border-red {\n border-color: red;\n border-width: 5px;\n border-style: solid;\n }\n \u0026lt;/style\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;div class=\u0026quot;background-red\u0026quot; [class]=\u0026quot;myClass\u0026quot;\u0026gt;Hello World\u0026lt;/div\u0026gt;\n \u0026lt;!-- This button adds both classes --\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({ myClass: 'background-green border-red' })\u0026quot;\u0026gt;\n Working: Change Class\n \u0026lt;/button\u0026gt;\n \u0026lt;!-- String arrays also work --\u0026gt;\n \u0026lt;button\n on=\u0026quot;tap:AMP.setState({ myClass: ['background-green', 'border-red'] })\u0026quot;\n \u0026gt;\n Working string array: Change Class\n \u0026lt;/button\u0026gt;\n \u0026lt;!-- This expression evaluates to class=\u0026quot;background-green,border-red\u0026quot; --\u0026gt;\n \u0026lt;button on=\u0026quot;tap:AMP.setState({ myClass: 'background-green,border-red' })\u0026quot;\u0026gt;\n Broken: Change Class\n \u0026lt;/button\u0026gt;\n\u0026lt;/body\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eamp-custom\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n .background-green {\n background: green;\n }\n .background-red {\n background: red;\n }\n .border-red {\n border-color: red;\n border-width: 5px;\n border-style: solid;\n }\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ebackground-red\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003e[class]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyClass\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eHello World\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- This button adds both classes --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ myClass: 'background-green border-red' })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Working: Change Class\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- String arrays also work --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ myClass: ['background-green', 'border-red'] })\u003c/span\u003e\"\n \u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Working string array: Change Class\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- This expression evaluates to class=\"background-green,border-red\" --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({ myClass: 'background-green,border-red' })\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Broken: Change Class\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden\" rel=\"nofollow\"\u003e\u003cstrong\u003ethe \u003ccode\u003ehidden\u003c/code\u003e attribute\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eHide and reveal and element using the \u003ccode\u003e[hidden]\u003c/code\u003e attribute. A \u003ccode\u003e[hidden]\u003c/code\u003e expression should be a boolean expression.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;p [hidden]=\u0026quot;hiddenState\u0026quot;\u0026gt;Hello there!\u0026lt;/p\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({hiddenState: true})\u0026quot;\u0026gt;Hide\u0026lt;/button\u0026gt;\n\u0026lt;button on=\u0026quot;tap:AMP.setState({hiddenState: false})\u0026quot;\u0026gt;Show\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[hidden]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ehiddenState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eHello there!\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({hiddenState: true})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eHide\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({hiddenState: false})\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eShow\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eSize of \u003ca href=\"https://www.ampproject.org/docs/reference/components\" rel=\"nofollow\"\u003eAMP components\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eChange the \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e using the \u003ccode\u003e[width]\u003c/code\u003e and \u003ccode\u003e[height]\u003c/code\u003e attributes.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[example preview=\"inline\" playground=\"true\" imports=\"amp-bind\"]\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-img\n src=\u0026quot;https://unsplash.it/400/200\u0026quot;\n width=\u0026quot;200\u0026quot;\n [width]=\u0026quot;myImageDimension.width\u0026quot;\n height=\u0026quot;100\u0026quot;\n [height]=\u0026quot;myImageDimension.height\u0026quot;\n\u0026gt;\n\u0026lt;/amp-img\u0026gt;\n\u0026lt;button\n on=\u0026quot;tap:AMP.setState({\n myImageDimension: {\n width: 400,\n height: 200\n }\n })\u0026quot;\n\u0026gt;\n Change size\n\u0026lt;/button\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-img\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ehttps://unsplash.it/400/200\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003ewidth\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e200\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003e[width]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyImageDimension.width\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003eheight\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e100\u003c/span\u003e\"\n \u003cspan class=\"pl-c1\"\u003e[height]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyImageDimension.height\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-img\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etap:AMP.setState({\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e myImageDimension: {\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e width: 400,\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e height: 200\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e }\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e })\u003c/span\u003e\"\n\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Change size\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebutton\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e[/example]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eAccessibility states and properties\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eUse to dynamically update information available to assistive technologies, such as screen readers. \u003ca href=\"https://www.w3.org/WAI/PF/aria-1.1/states_and_properties\" rel=\"nofollow\"\u003eAll \u003ccode\u003e[aria-*]\u003c/code\u003e attributes\u003c/a\u003e are bindable.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eAMP Component specific and HTML attributes\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSome AMP components and HTML elements have specific bindable attributes. They are listed below.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAMP component specific attributes\u003c/h3\u003e\u003ca id=\"user-content-amp-component-specific-attributes\" class=\"anchor\" aria-label=\"Permalink: AMP component specific attributes\" href=\"#amp-component-specific-attributes\"\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[filter formats=\"websites\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-brightcove\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[data-account]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[data-embed]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[data-player]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[data-player-id]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[data-playlist-id]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[data-video-id]\u003c/code\u003e Changes the displayed Brightcove video.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-carousel type=slides\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[slide]\u003c/code\u003e Changes the currently displayed slide index.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind\" rel=\"nofollow\"\u003eSee an example\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-date-picker\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[min]\u003c/code\u003e Sets the earliest selectable date\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[max]\u003c/code\u003e Sets the latest selectable date\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-google-document-embed\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e Displays the document at the updated URL.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[title]\u003c/code\u003e Changes the document's title.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-iframe\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e Changes the iframe's source URL.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \n[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-img\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[alt]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[attribution]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[srcset]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eBind to \u003ccode\u003e[srcset]\u003c/code\u003e instead of \u003ccode\u003e[src]\u003c/code\u003e to support responsive images. See corresponding \u003ca href=\"/ampproject/amphtml/blob/main/src/builtins/amp-img/amp-img.md#attributes\"\u003e\u003ccode\u003eamp-img\u003c/code\u003e attributes\u003c/a\u003e.\n[/filter] \n[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-img\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[alt]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[attribution]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-lightbox\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[open]\u003c/code\u003e Toggles display of the lightbox.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[tip type=\"default\"]\nUse \u003ccode\u003eon=\"lightboxClose: AMP.setState(...)\"\u003c/code\u003e to update variables when the lightbox is closed.\n[/tip]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-list\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eIf the expression is a string, it fetches and renders JSON from the string URL. If the expression is an object or array, it renders the expression data.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-selector\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[selected]\u003c/code\u003e Changes the currently selected children element(s) identified by their \u003ccode\u003eoption\u003c/code\u003e attribute values. Supports a comma-separated list of values for multiple selection. \u003ca href=\"https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/?format=email#linking-carousels-with-amp-bind\" rel=\"nofollow\"\u003eSee an example\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[tip type=\"note\"]\n\u003ccode\u003e[selected]\u003c/code\u003e does not have a non-bindable attribute. The AMP Validator will throw an error if \u003ccode\u003eselected\u003c/code\u003e is used.\n[/tip]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eFetches JSON from the new URL and merges it into the existing state. The following update will ignore \u003ccode\u003e\u0026lt;amp-state\u0026gt;\u003c/code\u003eelements to prevent cycles.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-twitter\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[data-tweetid]\u003c/code\u003e Changes the displayed Tweet.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-video\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[alt]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[attribution]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[controls]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[loop]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[poster]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[preload]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"/ampproject/amphtml/blob/main/extensions/amp-video/amp-video.md#attributes\"\u003e\u003ccode\u003eamp-video\u003c/code\u003e attributes\u003c/a\u003e.\n[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;amp-youtube\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[data-videoid]\u003c/code\u003e Changes the displayed YouTube video.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eHTML attributes\u003c/h3\u003e\u003ca id=\"user-content-html-attributes\" class=\"anchor\" aria-label=\"Permalink: HTML attributes\" href=\"#html-attributes\"\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\u003cstrong\u003e\u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[href]\u003c/code\u003e Changes the link.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;button\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[type]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[value]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;button\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[value]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes\" rel=\"nofollow\"\u003ebutton attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;details\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[open]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Attributes\" rel=\"nofollow\"\u003edetails attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;fieldset\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e Enables or disables the fieldset.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;image\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[xlink:href]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image\" rel=\"nofollow\"\u003eimage attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;input\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[accept]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[accessKey]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[autocomplete]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[checked]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[height]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[inputmode]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[max]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[maxlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[multiple]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[pattern]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[placeholder]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[readonly]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[selectiondirection]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[size]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[spellcheck]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[step]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[type]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[value]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[width]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\" rel=\"nofollow\"\u003einput attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;input\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[autocomplete]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[height]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[max]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[maxlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[multiple]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[pattern]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[placeholder]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[readonly]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[size]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[spellcheck]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[step]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[value]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[width]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\" rel=\"nofollow\"\u003einput attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;option\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[label]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[selected]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[value]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#Attributes\" rel=\"nofollow\"\u003eoption attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;optgroup\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[label]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#Attributes\" rel=\"nofollow\"\u003eoptgroup attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;section\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[data-expand]\u003c/code\u003e Changes the expansion of a \u003ccode\u003esection\u003c/code\u003e in an \u003ca href=\"/ampproject/amphtml/blob/main/extensions/amp-accordion/amp-accordion.md\"\u003e\u003ccode\u003eamp-accordion\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;select\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[autofocus]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[multiple]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[size]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes\" rel=\"nofollow\"\u003eselect attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;select\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[multiple]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[size]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes\" rel=\"nofollow\"\u003eselect attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;source\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[src]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[type]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Attributes\" rel=\"nofollow\"\u003esource attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;track\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e[label]\u003c/li\u003e\n\u003cli\u003e[src]\u003c/li\u003e\n\u003cli\u003e[srclang]\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSee corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#Attributes\" rel=\"nofollow\"\u003etrack attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"websites, ads\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;textarea\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[autocomplete]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[autofocus]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[cols]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[defaultText]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[maxlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[minlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[placeholder]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[readonly]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[rows]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[selectiondirection]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[selectionend]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[selectionstart]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[spellcheck]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[wrap]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eUse \u003ccode\u003e[defaultText]\u003c/code\u003e to update initial text, and \u003ccode\u003e[text]\u003c/code\u003e to update current text. See corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes\" rel=\"nofollow\"\u003etextarea attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;textarea\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e[autocomplete]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[cols]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[disabled]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[defaultText]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[maxlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[minlength]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[placeholder]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[readonly]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[required]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[rows]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[spellcheck]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e[wrap]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eUse \u003ccode\u003e[defaultText]\u003c/code\u003e to update initial text, and \u003ccode\u003e[text]\u003c/code\u003e to update current text. See corresponding \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes\" rel=\"nofollow\"\u003etextarea attributes\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[/filter] \u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDisallowed bindings\u003c/h3\u003e\u003ca id=\"user-content-disallowed-bindings\" class=\"anchor\" aria-label=\"Permalink: Disallowed bindings\" href=\"#disallowed-bindings\"\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\"\u003eFor security reasons, binding to \u003ccode\u003einnerHTML\u003c/code\u003e is disallowed.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAll attribute bindings are sanitized for unsafe values (e.g., \u003ccode\u003ejavascript:\u003c/code\u003e).\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDebugging\u003c/h2\u003e\u003ca id=\"user-content-debugging\" class=\"anchor\" aria-label=\"Permalink: Debugging\" href=\"#debugging\"\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[filter formats=\"websites, ads\"]\nTest in development mode. Enter development by adding the fragment \u003ccode\u003e#development=1\u003c/code\u003e to the end of the URL. This highlights warnings and errors in the browser console during development and grants access to special debugging functions.\n[/filter] \u003c/p\u003e\n\u003cp dir=\"auto\"\u003e[filter formats=\"email\"]\nTest in development mode by saving the email as an HTML file. Test in the browser by adding the fragment \u003ccode\u003e#development=1\u003c/code\u003e to the end of the URL. This highlights warnings and errors in the browser console during development and grants access to special debugging functions.\n[/filter] \u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWarnings\u003c/h3\u003e\u003ca id=\"user-content-warnings\" class=\"anchor\" aria-label=\"Permalink: Warnings\" href=\"#warnings\"\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\"\u003eIn development mode, \u003ccode\u003eamp-bind\u003c/code\u003e will issue a warning when the default value of a bound attribute doesn't match its corresponding expression's initial result. This can help prevent unintended mutations caused by changes in other state variables. For example:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- The element's default class value ('def') doesn't match the expression result for [class] ('abc'),\n so a warning will be issued in development mode. --\u0026gt;\n\u0026lt;p [class]=\u0026quot;'abc'\u0026quot; class=\u0026quot;def\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- The element's default class value ('def') doesn't match the expression result for [class] ('abc'),\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e so a warning will be issued in development mode. --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[class]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e'abc'\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edef\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn development mode, \u003ccode\u003eamp-bind\u003c/code\u003e will also issue a warning when dereferencing undefined variables or properties. This can also help prevent unintended mutations due to \u003ccode\u003enull\u003c/code\u003e expression results. For example:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;amp-state id=\u0026quot;myAmpState\u0026quot;\u0026gt;\n \u0026lt;script type=\u0026quot;application/json\u0026quot;\u0026gt;\n {\u0026quot;foo\u0026quot;: 123}\n \u0026lt;/script\u0026gt;\n\u0026lt;/amp-state\u0026gt;\n\n\u0026lt;!-- The amp-state#myAmpState does not have a `bar` variable, so a warning\n will be issued in development mode. --\u0026gt;\n\u0026lt;p [text]=\u0026quot;myAmpState.bar\u0026quot;\u0026gt;Some placeholder text.\u0026lt;/p\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyAmpState\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eapplication/json\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e123\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eamp-state\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- The amp-state#myAmpState does not have a `bar` variable, so a warning\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e will be issued in development mode. --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e[text]\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emyAmpState.bar\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSome placeholder text.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eErrors\u003c/h3\u003e\u003ca id=\"user-content-errors\" class=\"anchor\" aria-label=\"Permalink: Errors\" href=\"#errors\"\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\"\u003eBelow outlines the types of errors that may arise when working with \u003ccode\u003eamp-bind\u003c/code\u003e.\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\n \u003cth\u003eType\u003c/th\u003e\n \u003cth\u003eMessage\u003c/th\u003e\n \u003cth\u003eSuggestion\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eInvalid binding\u003c/td\u003e\n \u003ctd\u003e\u003cem\u003eBinding to [foo] on \u0026lt;P\u0026gt; is not allowed\u003c/em\u003e.\u003c/td\u003e\n \u003ctd\u003eUse only \u003ca href=\"#amp-component-specific-attributes\"\u003eallowlisted bindings\u003c/a\u003e.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSyntax error\u003c/td\u003e\n \u003ctd\u003e\u003cem\u003eExpression compilation error in...\u003c/em\u003e\u003c/td\u003e\n \u003ctd\u003eVerify the expression for typos.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eNon-allowlisted functions\u003c/td\u003e\n \u003ctd\u003e\u003cem\u003ealert is not a supported function.\u003c/em\u003e\u003c/td\u003e\n \u003ctd\u003eUse only \u003ca href=\"#allow-listed-functions\"\u003eallow-listed functions\u003c/a\u003e.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSanitized result\u003c/td\u003e\n \u003ctd\u003e\u003cem\u003e\"javascript:alert(1)\" is not a valid result for [href].\u003c/em\u003e\u003c/td\u003e\n \u003ctd\u003eAvoid banned URL protocols or expressions that would fail the AMP Validator.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eCSP violation\u003c/td\u003e\n \u003ctd\u003e\u003cem\u003eRefused to create a worker from 'blob:...' because it violates the following Content Security Policy directive...\u003c/em\u003e\u003c/td\u003e\n \u003ctd\u003eAdd \u003ccode\u003edefault-src blob:\u003c/code\u003e to your origin's Content Security Policy. \u003ccode\u003eamp-bind\u003c/code\u003e delegates expensive work to a \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers\" rel=\"nofollow\"\u003ededicated Web Worker\u003c/a\u003e to ensure good performance.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDebugging State\u003c/h3\u003e\u003ca id=\"user-content-debugging-state\" class=\"anchor\" aria-label=\"Permalink: Debugging State\" href=\"#debugging-state\"\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\"\u003eUse \u003ccode\u003eAMP.printState()\u003c/code\u003e to print the current state to the console. To make this work, you need to enable the \u003ca href=\"https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/#browser-developer-console\" rel=\"nofollow\"\u003edevelopment mode\u003c/a\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExpression grammar\u003c/h3\u003e\u003ca id=\"user-content-expression-grammar\" class=\"anchor\" aria-label=\"Permalink: Expression grammar\" href=\"#expression-grammar\"\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\"\u003eThe BNF-like grammar for \u003ccode\u003eamp-bind\u003c/code\u003e expressions:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"expr:\n operation\n | invocation\n | member_access\n | '(' expr ')'\n | variable\n | literal\n ;\n\noperation:\n '!' expr\n | '-' expr %prec UMINUS\n | '+' expr %prec UPLUS\n | expr '+' expr\n | expr '-' expr\n | expr '*' expr\n | expr '/' expr\n | expr '%' expr\n | expr '\u0026amp;\u0026amp;' expr\n | expr '||' expr\n | expr '\u0026lt;=' expr\n | expr '\u0026lt;' expr\n | expr '\u0026gt;=' expr\n | expr '\u0026gt;' expr\n | expr '!=' expr\n | expr '==' expr\n | expr '?' expr ':' expr\n ;\n\ninvocation:\n NAME args\n | expr '.' NAME args\n | expr '.' NAME '(' arrow_function ')'\n | expr '.' NAME '(' arrow_function ',' expr ')'\n ;\n\narrow_function:\n '(' ')' '=\u0026gt;' expr\n | NAME '=\u0026gt;' expr\n | '(' params ')' '=\u0026gt;' expr\n ;\n\nparams:\n NAME ',' NAME\n | params ',' NAME\n ;\n\nargs:\n '(' ')'\n | '(' array ')'\n ;\n\nmember_access:\n expr member\n ;\n\nmember:\n '.' NAME\n | '[' expr ']'\n ;\n\nvariable:\n NAME\n ;\n\nliteral:\n primitive\n | object_literal\n | array_literal\n ;\n\nprimitive:\n STRING\n | NUMBER\n | TRUE\n | FALSE\n | NULL\n ;\n\narray_literal:\n '[' ']'\n | '[' array ']'\n | '[' array ',' ']'\n ;\n\narray:\n expr\n | array ',' expr\n ;\n\nobject_literal:\n '{' '}'\n | '{' object '}'\n | '{' object ',' '}'\n ;\n\nobject:\n key_value\n | object ',' key_value\n ;\n\nkey_value:\n key ':' expr\n ;\n\nkey:\n NAME\n | primitive\n | '[' expr ']'\n ;\"\u003e\u003cpre lang=\"text\" class=\"notranslate\"\u003e\u003ccode\u003eexpr:\n operation\n | invocation\n | member_access\n | '(' expr ')'\n | variable\n | literal\n ;\n\noperation:\n '!' expr\n | '-' expr %prec UMINUS\n | '+' expr %prec UPLUS\n | expr '+' expr\n | expr '-' expr\n | expr '*' expr\n | expr '/' expr\n | expr '%' expr\n | expr '\u0026amp;\u0026amp;' expr\n | expr '||' expr\n | expr '\u0026lt;=' expr\n | expr '\u0026lt;' expr\n | expr '\u0026gt;=' expr\n | expr '\u0026gt;' expr\n | expr '!=' expr\n | expr '==' expr\n | expr '?' expr ':' expr\n ;\n\ninvocation:\n NAME args\n | expr '.' NAME args\n | expr '.' NAME '(' arrow_function ')'\n | expr '.' NAME '(' arrow_function ',' expr ')'\n ;\n\narrow_function:\n '(' ')' '=\u0026gt;' expr\n | NAME '=\u0026gt;' expr\n | '(' params ')' '=\u0026gt;' expr\n ;\n\nparams:\n NAME ',' NAME\n | params ',' NAME\n ;\n\nargs:\n '(' ')'\n | '(' array ')'\n ;\n\nmember_access:\n expr member\n ;\n\nmember:\n '.' NAME\n | '[' expr ']'\n ;\n\nvariable:\n NAME\n ;\n\nliteral:\n primitive\n | object_literal\n | array_literal\n ;\n\nprimitive:\n STRING\n | NUMBER\n | TRUE\n | FALSE\n | NULL\n ;\n\narray_literal:\n '[' ']'\n | '[' array ']'\n | '[' array ',' ']'\n ;\n\narray:\n expr\n | array ',' expr\n ;\n\nobject_literal:\n '{' '}'\n | '{' object '}'\n | '{' object ',' '}'\n ;\n\nobject:\n key_value\n | object ',' key_value\n ;\n\nkey_value:\n key ':' expr\n ;\n\nkey:\n NAME\n | primitive\n | '[' expr ']'\n ;\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/article\u003e","renderedFileInfo":null,"shortPath":null,"symbolsEnabled":true,"tabSize":2,"topBannersInfo":{"overridingGlobalFundingFile":false,"globalPreferredFundingPath":null,"showInvalidCitationWarning":false,"citationHelpUrl":"https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-citation-files","actionsOnboardingTip":null},"truncated":false,"viewable":true,"workflowRedirectUrl":null,"symbols":{"timed_out":false,"not_analyzed":false,"symbols":[{"name":"amp-bind","kind":"section_1","ident_start":214,"ident_end":222,"extent_start":212,"extent_end":49614,"fully_qualified_name":"amp-bind","ident_utf16":{"start":{"line_number":10,"utf16_col":2},"end":{"line_number":10,"utf16_col":10}},"extent_utf16":{"start":{"line_number":10,"utf16_col":0},"end":{"line_number":1537,"utf16_col":0}}},{"name":"Usage","kind":"section_2","ident_start":227,"ident_end":232,"extent_start":224,"extent_end":9389,"fully_qualified_name":"Usage","ident_utf16":{"start":{"line_number":12,"utf16_col":3},"end":{"line_number":12,"utf16_col":8}},"extent_utf16":{"start":{"line_number":12,"utf16_col":0},"end":{"line_number":259,"utf16_col":0}}},{"name":"Example without declared state","kind":"section_3","ident_start":1384,"ident_end":1414,"extent_start":1380,"extent_end":2453,"fully_qualified_name":"Example without declared state","ident_utf16":{"start":{"line_number":31,"utf16_col":4},"end":{"line_number":31,"utf16_col":34}},"extent_utf16":{"start":{"line_number":31,"utf16_col":0},"end":{"line_number":62,"utf16_col":0}}},{"name":"Example with declared state","kind":"section_3","ident_start":2457,"ident_end":2484,"extent_start":2453,"extent_end":8361,"fully_qualified_name":"Example with declared state","ident_utf16":{"start":{"line_number":62,"utf16_col":4},"end":{"line_number":62,"utf16_col":31}},"extent_utf16":{"start":{"line_number":62,"utf16_col":0},"end":{"line_number":212,"utf16_col":0}}},{"name":"`\u003camp-state\u003e` specification","kind":"section_3","ident_start":8365,"ident_end":8392,"extent_start":8361,"extent_end":9389,"fully_qualified_name":"`\u003camp-state\u003e` specification","ident_utf16":{"start":{"line_number":212,"utf16_col":4},"end":{"line_number":212,"utf16_col":31}},"extent_utf16":{"start":{"line_number":212,"utf16_col":0},"end":{"line_number":259,"utf16_col":0}}},{"name":"Attributes","kind":"section_2","ident_start":9392,"ident_end":9402,"extent_start":9389,"extent_end":10811,"fully_qualified_name":"Attributes","ident_utf16":{"start":{"line_number":259,"utf16_col":3},"end":{"line_number":259,"utf16_col":13}},"extent_utf16":{"start":{"line_number":259,"utf16_col":0},"end":{"line_number":282,"utf16_col":0}}},{"name":"`src` (optional)","kind":"section_3","ident_start":9408,"ident_end":9424,"extent_start":9404,"extent_end":10371,"fully_qualified_name":"`src` (optional)","ident_utf16":{"start":{"line_number":261,"utf16_col":4},"end":{"line_number":261,"utf16_col":20}},"extent_utf16":{"start":{"line_number":261,"utf16_col":0},"end":{"line_number":273,"utf16_col":0}}},{"name":"`credentials` (optional)","kind":"section_3","ident_start":10375,"ident_end":10399,"extent_start":10371,"extent_end":10811,"fully_qualified_name":"`credentials` (optional)","ident_utf16":{"start":{"line_number":273,"utf16_col":4},"end":{"line_number":273,"utf16_col":28}},"extent_utf16":{"start":{"line_number":273,"utf16_col":0},"end":{"line_number":282,"utf16_col":0}}},{"name":"Actions","kind":"section_2","ident_start":10814,"ident_end":10821,"extent_start":10811,"extent_end":11479,"fully_qualified_name":"Actions","ident_utf16":{"start":{"line_number":282,"utf16_col":3},"end":{"line_number":282,"utf16_col":10}},"extent_utf16":{"start":{"line_number":282,"utf16_col":0},"end":{"line_number":304,"utf16_col":0}}},{"name":"`refresh`","kind":"section_3","ident_start":10827,"ident_end":10836,"extent_start":10823,"extent_end":11479,"fully_qualified_name":"`refresh`","ident_utf16":{"start":{"line_number":284,"utf16_col":4},"end":{"line_number":284,"utf16_col":13}},"extent_utf16":{"start":{"line_number":284,"utf16_col":0},"end":{"line_number":304,"utf16_col":0}}},{"name":"State","kind":"section_2","ident_start":11482,"ident_end":11487,"extent_start":11479,"extent_end":18957,"fully_qualified_name":"State","ident_utf16":{"start":{"line_number":304,"utf16_col":3},"end":{"line_number":304,"utf16_col":8}},"extent_utf16":{"start":{"line_number":304,"utf16_col":0},"end":{"line_number":534,"utf16_col":0}}},{"name":"Size","kind":"section_3","ident_start":11585,"ident_end":11589,"extent_start":11581,"extent_end":11658,"fully_qualified_name":"Size","ident_utf16":{"start":{"line_number":308,"utf16_col":4},"end":{"line_number":308,"utf16_col":8}},"extent_utf16":{"start":{"line_number":308,"utf16_col":0},"end":{"line_number":312,"utf16_col":0}}},{"name":"Defining and initializing state with `\u003camp-state\u003e`","kind":"section_3","ident_start":11662,"ident_end":11712,"extent_start":11658,"extent_end":12786,"fully_qualified_name":"Defining and initializing state with `\u003camp-state\u003e`","ident_utf16":{"start":{"line_number":312,"utf16_col":4},"end":{"line_number":312,"utf16_col":54}},"extent_utf16":{"start":{"line_number":312,"utf16_col":0},"end":{"line_number":341,"utf16_col":0}}},{"name":"Updating state variables with `AMP.setState()`","kind":"section_3","ident_start":12790,"ident_end":12836,"extent_start":12786,"extent_end":18266,"fully_qualified_name":"Updating state variables with `AMP.setState()`","ident_utf16":{"start":{"line_number":341,"utf16_col":4},"end":{"line_number":341,"utf16_col":50}},"extent_utf16":{"start":{"line_number":341,"utf16_col":0},"end":{"line_number":512,"utf16_col":0}}},{"name":"Event triggering and data","kind":"section_5","ident_start":14638,"ident_end":14663,"extent_start":14632,"extent_end":15284,"fully_qualified_name":"Event triggering and data","ident_utf16":{"start":{"line_number":381,"utf16_col":6},"end":{"line_number":381,"utf16_col":31}},"extent_utf16":{"start":{"line_number":381,"utf16_col":0},"end":{"line_number":405,"utf16_col":0}}},{"name":"Updating nested variables","kind":"section_4","ident_start":15289,"ident_end":15314,"extent_start":15284,"extent_end":16730,"fully_qualified_name":"Updating nested variables","ident_utf16":{"start":{"line_number":405,"utf16_col":5},"end":{"line_number":405,"utf16_col":30}},"extent_utf16":{"start":{"line_number":405,"utf16_col":0},"end":{"line_number":458,"utf16_col":0}}},{"name":"Circular references","kind":"section_4","ident_start":16735,"ident_end":16754,"extent_start":16730,"extent_end":16839,"fully_qualified_name":"Circular references","ident_utf16":{"start":{"line_number":458,"utf16_col":5},"end":{"line_number":458,"utf16_col":24}},"extent_utf16":{"start":{"line_number":458,"utf16_col":0},"end":{"line_number":462,"utf16_col":0}}},{"name":"Removing a variable","kind":"section_4","ident_start":16844,"ident_end":16863,"extent_start":16839,"extent_end":17023,"fully_qualified_name":"Removing a variable","ident_utf16":{"start":{"line_number":462,"utf16_col":5},"end":{"line_number":462,"utf16_col":24}},"extent_utf16":{"start":{"line_number":462,"utf16_col":0},"end":{"line_number":470,"utf16_col":0}}},{"name":"Deep-merge with `AMP.setState()`","kind":"section_4","ident_start":17028,"ident_end":17060,"extent_start":17023,"extent_end":18266,"fully_qualified_name":"Deep-merge with `AMP.setState()`","ident_utf16":{"start":{"line_number":470,"utf16_col":5},"end":{"line_number":470,"utf16_col":37}},"extent_utf16":{"start":{"line_number":470,"utf16_col":0},"end":{"line_number":512,"utf16_col":0}}},{"name":"Modifying history with `AMP.pushState()`","kind":"section_3","ident_start":18270,"ident_end":18310,"extent_start":18266,"extent_end":18957,"fully_qualified_name":"Modifying history with `AMP.pushState()`","ident_utf16":{"start":{"line_number":512,"utf16_col":4},"end":{"line_number":512,"utf16_col":44}},"extent_utf16":{"start":{"line_number":512,"utf16_col":0},"end":{"line_number":534,"utf16_col":0}}},{"name":"Expressions","kind":"section_2","ident_start":18960,"ident_end":18971,"extent_start":18957,"extent_end":32242,"fully_qualified_name":"Expressions","ident_utf16":{"start":{"line_number":534,"utf16_col":3},"end":{"line_number":534,"utf16_col":14}},"extent_utf16":{"start":{"line_number":534,"utf16_col":0},"end":{"line_number":846,"utf16_col":0}}},{"name":"Differences from JavaScript","kind":"section_3","ident_start":19052,"ident_end":19079,"extent_start":19048,"extent_end":20826,"fully_qualified_name":"Differences from JavaScript","ident_utf16":{"start":{"line_number":538,"utf16_col":4},"end":{"line_number":538,"utf16_col":31}},"extent_utf16":{"start":{"line_number":538,"utf16_col":0},"end":{"line_number":579,"utf16_col":0}}},{"name":"Allowlisted functions","kind":"section_3","ident_start":20830,"ident_end":20851,"extent_start":20826,"extent_end":31337,"fully_qualified_name":"Allowlisted functions","ident_utf16":{"start":{"line_number":579,"utf16_col":4},"end":{"line_number":579,"utf16_col":25}},"extent_utf16":{"start":{"line_number":579,"utf16_col":0},"end":{"line_number":814,"utf16_col":0}}},{"name":"[`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods)","kind":"section_4","ident_start":20858,"ident_end":20963,"extent_start":20853,"extent_end":24024,"fully_qualified_name":"[`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods)","ident_utf16":{"start":{"line_number":581,"utf16_col":5},"end":{"line_number":581,"utf16_col":110}},"extent_utf16":{"start":{"line_number":581,"utf16_col":0},"end":{"line_number":647,"utf16_col":0}}},{"name":"[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Methods)","kind":"section_4","ident_start":24029,"ident_end":24136,"extent_start":24024,"extent_end":25165,"fully_qualified_name":"[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Methods)","ident_utf16":{"start":{"line_number":647,"utf16_col":5},"end":{"line_number":647,"utf16_col":112}},"extent_utf16":{"start":{"line_number":647,"utf16_col":0},"end":{"line_number":674,"utf16_col":0}}},{"name":"[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Methods)","kind":"section_4","ident_start":25170,"ident_end":25277,"extent_start":25165,"extent_end":27799,"fully_qualified_name":"[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Methods)","ident_utf16":{"start":{"line_number":674,"utf16_col":5},"end":{"line_number":674,"utf16_col":112}},"extent_utf16":{"start":{"line_number":674,"utf16_col":0},"end":{"line_number":731,"utf16_col":0}}},{"name":"[`Math`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)","kind":"section_4","ident_start":27804,"ident_end":27899,"extent_start":27799,"extent_end":29732,"fully_qualified_name":"[`Math`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)","ident_utf16":{"start":{"line_number":731,"utf16_col":5},"end":{"line_number":731,"utf16_col":100}},"extent_utf16":{"start":{"line_number":731,"utf16_col":0},"end":{"line_number":766,"utf16_col":0}}},{"name":"[`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)","kind":"section_4","ident_start":29737,"ident_end":29836,"extent_start":29732,"extent_end":30619,"fully_qualified_name":"[`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)","ident_utf16":{"start":{"line_number":766,"utf16_col":5},"end":{"line_number":766,"utf16_col":104}},"extent_utf16":{"start":{"line_number":766,"utf16_col":0},"end":{"line_number":795,"utf16_col":0}}},{"name":"[`Global`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)","kind":"section_4","ident_start":30624,"ident_end":30716,"extent_start":30619,"extent_end":31337,"fully_qualified_name":"[`Global`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)","ident_utf16":{"start":{"line_number":795,"utf16_col":5},"end":{"line_number":795,"utf16_col":97}},"extent_utf16":{"start":{"line_number":795,"utf16_col":0},"end":{"line_number":814,"utf16_col":0}}},{"name":"Defining macros with `amp-bind-macro`","kind":"section_3","ident_start":31341,"ident_end":31378,"extent_start":31337,"extent_end":32242,"fully_qualified_name":"Defining macros with `amp-bind-macro`","ident_utf16":{"start":{"line_number":814,"utf16_col":4},"end":{"line_number":814,"utf16_col":41}},"extent_utf16":{"start":{"line_number":814,"utf16_col":0},"end":{"line_number":846,"utf16_col":0}}},{"name":"Bindings","kind":"section_2","ident_start":32245,"ident_end":32253,"extent_start":32242,"extent_end":44802,"fully_qualified_name":"Bindings","ident_utf16":{"start":{"line_number":846,"utf16_col":3},"end":{"line_number":846,"utf16_col":11}},"extent_utf16":{"start":{"line_number":846,"utf16_col":0},"end":{"line_number":1346,"utf16_col":0}}},{"name":"React and XML compatibility","kind":"section_3","ident_start":33610,"ident_end":33637,"extent_start":33606,"extent_end":34032,"fully_qualified_name":"React and XML compatibility","ident_utf16":{"start":{"line_number":886,"utf16_col":4},"end":{"line_number":886,"utf16_col":31}},"extent_utf16":{"start":{"line_number":886,"utf16_col":0},"end":{"line_number":894,"utf16_col":0}}},{"name":"Binding types","kind":"section_3","ident_start":34036,"ident_end":34049,"extent_start":34032,"extent_end":37074,"fully_qualified_name":"Binding types","ident_utf16":{"start":{"line_number":894,"utf16_col":4},"end":{"line_number":894,"utf16_col":17}},"extent_utf16":{"start":{"line_number":894,"utf16_col":0},"end":{"line_number":1001,"utf16_col":0}}},{"name":"AMP component specific attributes","kind":"section_3","ident_start":37078,"ident_end":37111,"extent_start":37074,"extent_end":40345,"fully_qualified_name":"AMP component specific attributes","ident_utf16":{"start":{"line_number":1001,"utf16_col":4},"end":{"line_number":1001,"utf16_col":37}},"extent_utf16":{"start":{"line_number":1001,"utf16_col":0},"end":{"line_number":1133,"utf16_col":0}}},{"name":"HTML attributes","kind":"section_3","ident_start":40349,"ident_end":40364,"extent_start":40345,"extent_end":44637,"fully_qualified_name":"HTML attributes","ident_utf16":{"start":{"line_number":1133,"utf16_col":4},"end":{"line_number":1133,"utf16_col":19}},"extent_utf16":{"start":{"line_number":1133,"utf16_col":0},"end":{"line_number":1340,"utf16_col":0}}},{"name":"Disallowed bindings","kind":"section_3","ident_start":44641,"ident_end":44660,"extent_start":44637,"extent_end":44802,"fully_qualified_name":"Disallowed bindings","ident_utf16":{"start":{"line_number":1340,"utf16_col":4},"end":{"line_number":1340,"utf16_col":23}},"extent_utf16":{"start":{"line_number":1340,"utf16_col":0},"end":{"line_number":1346,"utf16_col":0}}},{"name":"Debugging","kind":"section_2","ident_start":44805,"ident_end":44814,"extent_start":44802,"extent_end":49614,"fully_qualified_name":"Debugging","ident_utf16":{"start":{"line_number":1346,"utf16_col":3},"end":{"line_number":1346,"utf16_col":12}},"extent_utf16":{"start":{"line_number":1346,"utf16_col":0},"end":{"line_number":1537,"utf16_col":0}}},{"name":"Warnings","kind":"section_3","ident_start":45466,"ident_end":45474,"extent_start":45462,"extent_end":46447,"fully_qualified_name":"Warnings","ident_utf16":{"start":{"line_number":1356,"utf16_col":4},"end":{"line_number":1356,"utf16_col":12}},"extent_utf16":{"start":{"line_number":1356,"utf16_col":0},"end":{"line_number":1380,"utf16_col":0}}},{"name":"Errors","kind":"section_3","ident_start":46451,"ident_end":46457,"extent_start":46447,"extent_end":47931,"fully_qualified_name":"Errors","ident_utf16":{"start":{"line_number":1380,"utf16_col":4},"end":{"line_number":1380,"utf16_col":10}},"extent_utf16":{"start":{"line_number":1380,"utf16_col":0},"end":{"line_number":1417,"utf16_col":0}}},{"name":"Debugging State","kind":"section_3","ident_start":47935,"ident_end":47950,"extent_start":47931,"extent_end":48199,"fully_qualified_name":"Debugging State","ident_utf16":{"start":{"line_number":1417,"utf16_col":4},"end":{"line_number":1417,"utf16_col":19}},"extent_utf16":{"start":{"line_number":1417,"utf16_col":0},"end":{"line_number":1421,"utf16_col":0}}},{"name":"Expression grammar","kind":"section_3","ident_start":48203,"ident_end":48221,"extent_start":48199,"extent_end":49614,"fully_qualified_name":"Expression grammar","ident_utf16":{"start":{"line_number":1421,"utf16_col":4},"end":{"line_number":1421,"utf16_col":22}},"extent_utf16":{"start":{"line_number":1421,"utf16_col":0},"end":{"line_number":1537,"utf16_col":0}}}]}},"copilotInfo":null,"copilotAccessAllowed":false,"csrf_tokens":{"/ampproject/amphtml/branches":{"post":"3dwn4uHfYX9fnyXaau8k3NwRslaN8owFv4K5Mik7-p-B7Tv2RF7rmLqwC0e7fBUBQS2XCMPLEq-6bCEGJidv0Q"},"/repos/preferences":{"post":"v0bjpgAmjXp721NCwGWAON2hKeliJGPy-rBu8jNAGh1oS3TwyYxOCmZ90K9waRhye16lJeuGuP-owAyvDj-nzg"}}},"title":"amphtml/extensions/amp-bind/amp-bind.md at main · ampproject/amphtml","appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-1583894afd38.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-67668e8c2caa.js","githubDevUrl":null,"enabled_features":{"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"copilot_conversational_ux_embedding_update":false,"copilot_smell_icebreaker_ux":true,"copilot_workspace":false,"accessible_code_button":true}}}</script> <div data-target="react-app.reactRoot"></div> </react-app> </turbo-frame> </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.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 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>