Radio Controlled HTML Elements
A demonstration
Results will update as you type.
- Request
- Parameters
- Response
- Request
- GET /songs
- Parameters
{}
- Response
<div class="relative flex sm:justify-center"> <div class="relative w-[460px]"> <div class="absolute left-1/2 -translate-x-1/2 top-[16%] -translate-y-1/2 w-[768px] h-[560px]" style="background: repeating-conic-gradient(transparent 0 9deg, #DDD0B3 9deg 18deg);mask:radial-gradient(#000, transparent 80%);-webkit-mask:radial-gradient(#000, transparent 80%);"></div> <div class="overflow-hidden"> <div class="relative w-[460px]"> <svg role="img" width="460" height="613" aria-labelledby="jukebox_title" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 613"><title id="jukebox_title">Jukebox illustration</title><path d="M416.4 610h-372V157.5c0-85.8 78.8-155.4 176-155.4h20c97.2 0 176 69.6 176 155.4V610Z" fill="#F0EADD"/><path d="M416.2 609.8c-1.1-118.5-1.9-235.8-2.4-353l-.2-87.8v-11l-.1-5.4-.1-2.7-.2-2.7-.5-5.4-.8-5.4c-.2-1.8-.6-3.6-1-5.4l-1-5.3a150.2 150.2 0 0 0-17-40.6A164.9 164.9 0 0 0 325.2 24c-7.2-3.5-14.5-6.7-22.2-9.2l-2.9-1-2.9-1-5.8-1.6c-4-1-7.9-2-11.9-2.8-4-1-8-1.5-12-2.2l-6.1-.7-3-.3-3.2-.2-6-.4-6.2-.2h-12.5l-4.4-.1h-8l-6.2.1-6.1.4-3.1.2-3 .3-6.2.7c-4 .7-8 1.2-12 2s-8 1.8-12 2.8l-5.8 1.7-3 .9-2.8 1a184 184 0 0 0-22.4 9.1c-28.8 14-53 35.5-68.8 61.1a151.8 151.8 0 0 0-17.2 40.9l-1.2 5.4c-.4 1.8-.8 3.6-1 5.4l-.8 5.4-.5 5.5-.3 2.7v2.8l-.2 5.4v11l-.1 88.2.3 88.2.6 88.2c.5 58.8.6 117.6.6 176.4l-2.4-2.1 92.6.2c30.9 0 61.8.2 92.7.4l186.5 1.3Zm.4.3L231 611.4l-93.3.4-93.4.2H42v-2c0-58.8 0-117.6.6-176.4l.6-88.2.3-88.2-.1-88.1v-16.6l.1-2.8.3-2.7.4-5.6.8-5.5c.2-1.8.6-3.6 1-5.5l1-5.4a152.9 152.9 0 0 1 17-41.6 169 169 0 0 1 69.4-63 177 177 0 0 1 22.8-9.6l2.9-1 3-.9 6-1.8 12.2-2.9c4-.9 8.2-1.5 12.3-2.2l6.3-.7 3.1-.4 3.2-.2 6.3-.4 6.3-.2h31.3l6.4.5 3.1.2 3.1.3 6.3.7c4.2.7 8.3 1.2 12.4 2.2 4.2.7 8.2 1.8 12.3 2.8l6 1.7 3 1 3 1c7.9 2.5 15.5 5.8 22.9 9.4a170.3 170.3 0 0 1 70.2 62.9c4 6.5 7.5 13.4 10.5 20.4 2.8 7 5.2 14.2 7 21.5l1 5.5c.5 1.8.8 3.7 1 5.5l.9 5.6.4 5.6.3 2.7v2.8l.2 5.6v11.1l-.1 88.5c-.6 118-1.4 235.8-2.5 352.5Z" fill="#144490"/><path d="M90.7 157.5c0-70 59.5-126.7 133-126.7h15.2c73.5 0 133 56.8 133 126.7" fill="#F0EADD"/><path d="M90.7 157.5c-.5-16.5 2.7-33.2 9.1-48.8a126.5 126.5 0 0 1 29.5-42.5A133.6 133.6 0 0 1 203 30.6l7-1c2.4 0 4.8-.3 7.1-.4l7.2-.2h14l7.1.2 7.2.5 7 .9a133.6 133.6 0 0 1 73.7 35.6 126.6 126.6 0 0 1 29.4 42.5 118 118 0 0 1 9.2 48.8 125.6 125.6 0 0 0-41-89.4 135.7 135.7 0 0 0-72-34l-6.8-.8-6.9-.5-6.9-.1h-21l-6.8.5-6.9.9a135.6 135.6 0 0 0-72 34 125.7 125.7 0 0 0-41 89.4Z" fill="#144490"/><path d="M87.6 73.2c14.5-20 35-36.8 59.1-48.2 12-5.8 25-10 38.3-13l5-1 5-.8 5.1-.7 5.2-.5 5.1-.4c1.7-.2 3.4-.2 5.1-.2l5.2-.2h20l5.2.2 5.1.1 5.2.5a185 185 0 0 1 30.2 5.3c3.3.8 6.5 1.9 9.7 2.9l9.5 3.5A158 158 0 0 1 368 65.5a194.8 194.8 0 0 0-65.2-39 181.5 181.5 0 0 0-37.8-8.7l-4.8-.6-4.8-.4-4.9-.3-4.9-.1-4.8-.1h-20.1l-4.8.2-4.9.1-4.9.4-4.8.4-4.8.6-4.8.7-4.8.9c-12.7 2.3-25 6.2-37 11a191.5 191.5 0 0 0-62.3 42.6Z" fill="#F0EADD"/><path d="m103.4 548.5 127.6-1.2 63.4-.5 63.2-.3-2.4 2.1c-.4-47.8-.3-95.6-.4-143.5-.2-47.8.1-95.6.2-143.4l.4-71.8.2-35.8c0-6 0-12-.6-17.8a91.7 91.7 0 0 0-10.6-33.9 104.5 104.5 0 0 0-22.9-29 119.6 119.6 0 0 0-51.2-27c-6.4-1.6-13-2.9-19.7-3.5a196 196 0 0 0-20.2-.7c-6.8 0-13.5 0-20.2.6a122.7 122.7 0 0 0-38.5 9.9c-6 2.6-11.8 5.7-17.3 9.1a105.1 105.1 0 0 0-45.1 57.1c-1.8 5.7-3 11.5-3.7 17.4-.7 5.9-.6 11.7-.5 17.7l.3 35.8.2 71.4c-.3 95.3-.9 190.6-2.2 287.3Zm-.3.3c-1.3-94.6-2-190.7-2.2-286.7.1-24 0-48 .2-72l.4-36a94.7 94.7 0 0 1 12.4-52.8A107.8 107.8 0 0 1 137.5 72 121.8 121.8 0 0 1 171 51.2a133.6 133.6 0 0 1 39.2-9.8 198 198 0 0 1 20.3-.7c6.8 0 13.6 0 20.4.6A130.4 130.4 0 0 1 323.4 72a113.8 113.8 0 0 1 23.8 29.3 100.6 100.6 0 0 1 12.4 52.9l.2 35.8.3 71.8c.1 47.8.4 95.6.3 143.4-.1 47.9 0 95.7-.4 143.5v2.2h-2.4l-64-.4-63.8-.5-126.7-1.1Z" fill="#144490"/><path d="M116 149.1c0-54.1 48.4-98 108.2-98h12.4c59.8 0 108.3 43.9 108.3 98h-229Z" fill="#CADEDF"/><path d="m116.2 149 29.1-.7 29-.5 57.1-.8c19-.2 37.9-.4 56.8-.4l56.7.3-2.5 2.2a89.9 89.9 0 0 0-7.9-37.7A96 96 0 0 0 310.7 79a104.8 104.8 0 0 0-58.2-25.8l-5.5-.5-5.5-.3H236l-5.6.1-5.6.1-5.4.2-5.5.5-5.4.7a111.6 111.6 0 0 0-71.7 40.4 95.8 95.8 0 0 0-17.7 35.3l-1 4.8-.9 4.8-.6 5-.4 4.6Zm-.4.3-.2-5.1.2-5 .5-5 .8-4.8a85.8 85.8 0 0 1 16.4-37 110.1 110.1 0 0 1 74.4-42l5.6-.5 5.7-.3h5.6l5.6.1 5.6.1 5.6.2 5.6.5 5.6.7a117.3 117.3 0 0 1 59.3 26.4 101.7 101.7 0 0 1 25.8 32.5 89.9 89.9 0 0 1 9.4 39v2.2H345l-57.8.3c-19.3 0-38.5-.1-57.7-.3l-57.2-.9-28.4-.5-28-.6Z" fill="#144490"/><path d="M230 134.7a.9.9 0 0 1-.8-.8V53.8c0-.4.4-.8.9-.8s.9.4.9.8v80.1c0 .4-.4.8-1 .8Z" fill="#F0EADD"/><path d="M228.4 134.8c-.5 0-.9-.2-1-.6l-15.7-79c0-.3.2-.8.7-.8.5-.1 1 .2 1 .6l15.8 78.9c.1.4-.2.8-.7 1h-.1Z" fill="#F0EADD"/><path d="M226.7 135.2a1 1 0 0 1-.9-.5l-31-75.3c-.2-.4 0-.8.5-1 .5-.1 1 0 1.2.5l31 75.3c.2.4 0 .8-.5 1h-.3Z" fill="#F0EADD"/><path d="M225.1 135.9a1 1 0 0 1-.8-.4L179 66c-.2-.4 0-.9.4-1 .4-.3 1-.2 1.2.2l45.4 69.4c.2.4.1.8-.3 1a1 1 0 0 1-.5.2Z" fill="#F0EADD"/><path d="M223.7 136.7a1 1 0 0 1-.7-.2L164.7 75a.7.7 0 0 1 0-1.1 1 1 0 0 1 1.3 0l58.4 61.4c.3.4.3.9-.1 1.2a1 1 0 0 1-.6.1Z" fill="#F0EADD"/><path d="M222.5 137.8a1 1 0 0 1-.6-.2l-69.5-51.5a.7.7 0 0 1-.2-1 1 1 0 0 1 1.3-.2l69.6 51.5c.3.3.4.8 0 1.1a1 1 0 0 1-.6.3Z" fill="#F0EADD"/><path d="M221.5 139a1 1 0 0 1-.5 0l-78.6-40c-.4-.3-.6-.8-.3-1.2.2-.4.8-.5 1.2-.3l78.6 40c.5.3.6.8.4 1.2a1 1 0 0 1-.8.4Zm-.7 1.5h-.4L135.1 113c-.4-.1-.7-.6-.5-1 .2-.4.7-.6 1.2-.5L221 139c.4.2.7.6.5 1a1 1 0 0 1-.8.6Z" fill="#F0EADD"/><path d="M220.3 142h-.1l-89.5-14c-.4 0-.8-.5-.7-1 .1-.3.6-.6 1-.6l89.5 14c.5 0 .8.4.7.9 0 .4-.5.6-.9.6Zm19.6 0c-.5 0-.9-.3-1-.7 0-.5.3-.9.8-1l89.4-13.9c.5 0 1 .3 1 .7.1.4-.2.8-.7 1L240 141.8h-.1Z" fill="#F0EADD"/><path d="M239.4 140.5a1 1 0 0 1-.8-.6c-.2-.4 0-.8.5-1l85.3-27.4c.5-.1 1 0 1.2.5.1.4-.1.9-.6 1l-85.3 27.4h-.3Z" fill="#F0EADD"/><path d="M238.7 139a1 1 0 0 1-.8-.3c-.3-.4-.1-.9.3-1.1l78.6-40c.5-.3 1-.2 1.3.2.2.4 0 .9-.4 1.1l-78.6 40a1 1 0 0 1-.4.2Z" fill="#F0EADD"/><path d="M237.7 137.8a1 1 0 0 1-.7-.3.7.7 0 0 1 .1-1l69.5-51.6a1 1 0 0 1 1.3.1c.3.4.3.9 0 1.1l-69.6 51.5a1 1 0 0 1-.6.2Zm-1.2-1.1a1 1 0 0 1-.6-.1.7.7 0 0 1-.1-1.2L294 74.1a1 1 0 0 1 1.3-.1c.4.3.4.8.1 1.1L237 136.5a1 1 0 0 1-.6.2Z" fill="#F0EADD"/><path d="M235 135.9a1 1 0 0 1-.4-.1c-.4-.3-.6-.7-.3-1.1l45.4-69.4c.2-.4.8-.5 1.2-.3.4.2.6.7.3 1.1l-45.4 69.4a1 1 0 0 1-.8.4Z" fill="#F0EADD"/><path d="M233.5 135.2h-.3c-.5-.2-.7-.6-.6-1l31-75.3c.2-.4.8-.6 1.2-.5.5.2.7.6.6 1l-31 75.3c-.2.3-.6.5-1 .5Z" fill="#F0EADD"/><path d="M231.8 134.8h-.2c-.4 0-.8-.5-.7-.9L246.7 55c0-.4.5-.7 1-.6.5 0 .8.5.8.9l-15.8 78.9c0 .4-.5.6-.9.6Z" fill="#F0EADD"/><path d="M41.7 151.1h61.6v15.4H41.7c-4.8 0-8.7-3.5-8.7-7.7s3.9-7.7 8.7-7.7Z" fill="#CADEDF"/><path d="M41.7 151.4c-3.7 0-7 2.4-7.6 5.4-.7 3 1.2 6 3.8 7l2 .6h2.2l5.6-.3 11.1-.2c7.4 0 14.8.3 22.2.4 7.4.2 14.8.8 22.3 1.2l-1.2 1c.2-2.6.3-5.1.3-7.7v-7.7l.9.8c-5.2.2-10.3.6-15.4 1A170.5 170.5 0 0 1 57 152a162 162 0 0 0-15.4-.7Zm0-.5c5.1 0 10.2-.3 15.4-.8a171 171 0 0 1 30.8-.7c5 .3 10.2.8 15.4 1h1l-.1.7-.1 3.9v3.8c0 2.6.1 5.1.3 7.7v1h-1.1c-7.5.4-14.9 1-22.3 1.1-7.4.2-14.8.5-22.2.4l-11.1-.2c-1.8 0-3.7 0-5.6-.2a32.8 32.8 0 0 1-3.3-.5l-3-1.5a9 9 0 0 1-3.5-4.8 8 8 0 0 1 .3-5.4 9.8 9.8 0 0 1 9-5.5Z" fill="#144490"/><path d="M41.7 175.1h61.6v15.4H41.7c-4.8 0-8.7-3.4-8.7-7.7 0-4.2 3.9-7.7 8.7-7.7Z" fill="#CADEDF"/><path d="M41.7 175.4c-3.7 0-7 2.4-7.6 5.4-.7 3 1.2 6 3.8 7l2 .6h2.2l5.6-.3 11.1-.1c7.4 0 14.8.2 22.2.4 7.4.1 14.8.7 22.3 1l-1.2 1.1c.2-2.6.3-5.1.3-7.7v-7.7l.9.8c-5.2.2-10.3.7-15.4 1A170.5 170.5 0 0 1 57 176c-5.2-.4-10.3-.7-15.4-.7Zm0-.5c5.1 0 10.2-.3 15.4-.8 5-.4 10.2-.9 15.4-1 5-.2 10.2 0 15.4.3 5 .3 10.2.8 15.4 1h1l-.1.7-.1 3.9v3.8c0 2.6.1 5.1.3 7.7v1h-1.1c-7.5.4-14.9 1-22.3 1.1-7.4.2-14.8.5-22.2.4l-11.1-.1-5.6-.3c-.4 0-1 0-1.6-.2-.6 0-1.1-.2-1.7-.3l-3-1.5a9 9 0 0 1-3.5-4.8 8 8 0 0 1 .3-5.4 9.8 9.8 0 0 1 9-5.5Z" fill="#144490"/><path d="M41.7 199.2h61.6v15.3H41.7c-4.8 0-8.7-3.4-8.7-7.7 0-4.2 3.9-7.6 8.7-7.6Z" fill="#CADEDF"/><path d="M41.7 199.4c-3.7 0-7 2.5-7.6 5.4-.7 3 1.2 6 3.8 7l2 .6h2.2l5.6-.2 11.1-.2c7.4 0 14.8.2 22.2.4 7.4.1 14.8.7 22.3 1.1l-1.2 1c.2-2.5.3-5.1.3-7.7v-7.6l.9.8c-5.2.1-10.3.6-15.4.9a171 171 0 0 1-30.8-.7c-5.2-.5-10.3-.8-15.4-.8Zm0-.5c5.1 0 10.2-.3 15.4-.7a170.2 170.2 0 0 1 30.8-.7c5 .2 10.2.7 15.4.8h1l-.1.9-.1 3.8v3.8c0 2.6.1 5.2.3 7.7v1h-1.1c-7.5.4-14.9 1-22.3 1.2-7.4.1-14.8.4-22.2.3l-11.1-.1-5.6-.3-1.6-.1-1.7-.4c-1-.3-2-.8-3-1.5a9 9 0 0 1-3.5-4.8 8 8 0 0 1 .3-5.4 9.8 9.8 0 0 1 9-5.5Z" fill="#144490"/><path d="M33 551.2h70.3v-98.7H37c-2.3 0-4.1 1.7-4.1 3.7v95Z" fill="#CADEDF"/><path d="M32.8 551.4a1599.5 1599.5 0 0 1-2.6-79.5V455c.2-.7.5-1.4 1-2a6.8 6.8 0 0 1 3.6-2.6c.7-.2 1.5-.3 2.3-.3h9.8l11.3.2c15 .1 30 .5 45 1h1.6v1.2c-.3 8.3-.6 16.5-.7 24.7 0 8.2 0 16.5.2 24.7l1 24.7c.3 8.2.4 16.4.3 24.6v2.2h-2.3l-18-.3c-6 0-12-.2-17.9-.4l-17.5-.6-17.1-.7Zm.4-.3 18-.8 17.6-.6 17.3-.4 17.2-.2-2.4 2.1c0-8.2 0-16.4.4-24.6l.9-24.7c.2-8.2.3-16.5.2-24.7 0-8.2-.4-16.4-.6-24.7l1.5 1.4c-15 .4-30 .8-45.1.9H46.9l-5.6.1h-4.2l-.4.2c-.3 0-.6.3-.7.5l-.2.4v15.3c-.2 13-.4 26-1 39.3l-1.6 40.5Z" fill="#144490"/><path d="M44.3 438.6h59v14H37.8v-8.3c0-3.1 3-5.7 6.5-5.7Z" fill="#CADEDF"/><path d="M44.3 438.8c-1.5 0-3 .6-4.1 1.6-1 1-1.7 2.3-1.6 3.6 0 1.3.2 2.8.4 4.2l.5 4.3-1.7-1.5a168.2 168.2 0 0 1 24.6-1l8.1.1 16.4.5c5.4.2 10.9.7 16.4 1l-1.2 1 .3-7v-7l.9.8c-5 .1-9.9.6-14.8 1a155.7 155.7 0 0 1-29.4-.8c-5-.5-9.9-.8-14.8-.8Zm0-.4c5 0 9.9-.3 14.8-.8s9.8-1 14.7-1.1c5-.1 9.8 0 14.7.4 5 .3 9.8.8 14.8.9h.9v.8l-.1 3.5v3.5l.3 7v.9h-1.1c-5.5.3-11 .8-16.4 1a1027 1027 0 0 1-32.7.5c-5.5 0-11-.4-16.4-1l-1.9-.2.2-1.3.5-4.3.5-4.3c.3-1.6 1.2-3 2.5-4 1.4-1 3-1.6 4.7-1.5Z" fill="#144490"/><path d="M419.2 151.1h-61.6v15.4h61.6c4.8 0 8.7-3.5 8.7-7.7s-4-7.7-8.7-7.7Z" fill="#CADEDF"/><path d="M419.2 150.9c3.8 0 7.6 2.1 9 5.5a8 8 0 0 1 .4 5.4 9 9 0 0 1-3.6 4.8 10.6 10.6 0 0 1-4.7 1.8l-1.6.2-5.6.2-11 .2c-7.5 0-14.9-.2-22.3-.4-7.4-.1-14.8-.7-22.2-1.1h-1.2v-1c.2-2.6.3-5.1.3-7.7v-8.5h.9c5.1-.1 10.2-.6 15.4-1a170.9 170.9 0 0 1 30.8.8c5.1.5 10.2.8 15.4.8Zm0 .5c-5.2 0-10.3.3-15.4.7-5.2.5-10.3 1-15.4 1.1-5.2.1-10.3 0-15.4-.3-5.2-.4-10.3-.8-15.4-1l.9-.8-.1 3.9v3.8c0 2.6.2 5.1.3 7.7l-1.1-1c7.4-.4 14.8-1 22.2-1.2 7.4-.1 14.8-.4 22.2-.4l11.1.2 5.6.3h2.1c.8-.1 1.5-.3 2.1-.6 2.7-1 4.5-4 3.8-7-.6-3-3.9-5.5-7.5-5.4Z" fill="#144490"/><path d="M419.2 175.1h-61.6v15.4h61.6c4.8 0 8.7-3.4 8.7-7.7 0-4.2-4-7.7-8.7-7.7Z" fill="#CADEDF"/><path d="M419.2 174.9c3.8 0 7.6 2.1 9 5.5a8 8 0 0 1 .4 5.4 9 9 0 0 1-3.6 4.8 14 14 0 0 1-3 1.5l-1.7.3-1.6.2-5.6.3-11 .1c-7.5 0-14.9-.2-22.3-.4-7.4-.1-14.8-.7-22.2-1l-1.2-.1v-1c.2-2.6.3-5.1.3-7.7v-8.4h.9c5.1-.2 10.2-.7 15.4-1a170.5 170.5 0 0 1 30.8.7c5.1.5 10.2.8 15.4.8Zm0 .5c-5.2 0-10.3.3-15.4.7-5.2.5-10.3 1-15.4 1.1-5.2.1-10.3 0-15.4-.3-5.2-.3-10.3-.8-15.4-1l.9-.8-.1 3.9v3.8c0 2.6.2 5.1.3 7.7l-1.1-1c7.4-.4 14.8-1 22.2-1.1 7.4-.2 14.8-.5 22.2-.4l11.1.1 5.6.3h2.1c.8-.1 1.5-.3 2.1-.6 2.7-1 4.5-4 3.8-7-.6-3-3.9-5.5-7.5-5.4Z" fill="#144490"/><path d="M419.2 199.2h-61.6v15.3h61.6c4.8 0 8.7-3.4 8.7-7.7 0-4.2-4-7.6-8.7-7.6Z" fill="#CADEDF"/><path d="M419.2 199c3.8-.1 7.6 2 9 5.4a8 8 0 0 1 .4 5.4 9 9 0 0 1-3.6 4.8c-.9.7-1.9 1.2-3 1.5l-1.7.4-1.6.1-5.6.3c-3.7 0-7.4.2-11 .1-7.5 0-14.9-.2-22.3-.3-7.4-.2-14.8-.8-22.2-1.2h-1.2v-1c.2-2.5.3-5.1.3-7.7v-8.4h.9c5.1-.2 10.2-.7 15.4-1a170.1 170.1 0 0 1 30.8.8c5.1.4 10.2.7 15.4.7Zm0 .4c-5.2 0-10.3.3-15.4.8-5.2.4-10.3.9-15.4 1-5.2.2-10.3 0-15.4-.3-5.2-.3-10.3-.8-15.4-1l.9-.7-.1 3.8v3.8c0 2.6.2 5.2.3 7.7l-1.1-1c7.4-.4 14.8-1 22.2-1.1 7.4-.2 14.8-.5 22.2-.4a205.5 205.5 0 0 1 16.7.4h2.1c.8-.1 1.5-.3 2.1-.6 2.7-1 4.5-4 3.8-7-.6-3-3.9-5.4-7.5-5.4Z" fill="#144490"/><path d="M427.9 551.2h-70.3v-98.7h66.1c2.3 0 4.2 1.7 4.2 3.7v95Z" fill="#CADEDF"/><path d="M427.7 551c-.7-13.7-1.2-27.1-1.7-40.4-.5-13.2-.8-26.3-1-39.3V456l-.2-.4a1 1 0 0 0-.6-.5l-.5-.1h-4.2l-5.6-.1-11.3-.1c-15-.1-30-.5-45-1l1.5-1.3c-.3 8.3-.6 16.5-.7 24.7 0 8.2 0 16.5.2 24.7l1 24.7c.3 8.2.4 16.4.4 24.6l-2.4-2 17.1.1 17.3.4 17.6.6 18 .8Zm.3.4-17 .7-17.6.6-17.8.4c-6 .2-12 .2-18 .2h-2.4v-2c0-8.3 0-16.5.4-24.7l1-24.7c.2-8.2.2-16.5.1-24.7 0-8.2-.4-16.4-.6-24.7v-1.2h1.5c15-.5 30-.9 45-1l11.3-.1h5.6l2.8-.1h1.5l2.3.3c1.5.5 2.8 1.4 3.6 2.6a5.8 5.8 0 0 1 1 3v15.9a1589.6 1589.6 0 0 1-2.7 79.5Z" fill="#144490"/><path d="M416.5 438.6h-59v14H423v-8.3c0-3.1-3-5.7-6.5-5.7Z" fill="#CADEDF"/><path d="M416.5 438.4c1.7 0 3.4.5 4.7 1.5 1.3 1 2.2 2.4 2.5 4l.5 4.3.5 4.3.2 1.3-1.9.3a168.9 168.9 0 0 1-24.5 1l-8.2-.1-16.4-.5c-5.4-.2-10.9-.7-16.3-1h-1.2v-1c.2-2.3.3-4.6.3-7v-7.7h.9c4.9-.1 9.8-.6 14.7-1a155 155 0 0 1 29.5.8c4.9.5 9.8.8 14.7.8Zm0 .4c-5 0-9.8.3-14.7.8-5 .5-9.9 1-14.8 1-4.9.2-9.8 0-14.7-.3-5-.3-9.8-.8-14.7-1l.9-.7-.1 3.5v3.5l.3 7-1.1-1c5.4-.3 10.9-.8 16.3-1a1026.7 1026.7 0 0 1 32.7-.5c5.5 0 11 .3 16.4 1l-1.7 1.4.5-4.3.5-4.2c0-1.3-.6-2.6-1.6-3.6a6.3 6.3 0 0 0-4.2-1.6Z" fill="#144490"/><path d="M439.9 571.2h-419v-12.6c0-4 3.8-7.4 8.4-7.4h402.2c4.6 0 8.4 3.3 8.4 7.4v12.6Z" fill="#F0EADD"/><path d="m439.7 571-.4-12.4c0-2-1.2-3.9-2.8-5a7.8 7.8 0 0 0-2.9-1.4c-1-.2-2-.2-3.3-.2l-28.6.5-57 .6-57.2.5-57 .2c-38.2 0-76.2-.3-114.3-.4L59 553l-28.6-.4c-1.3 0-2.1 0-3 .2a7 7 0 0 0-2.6 1.2 5.9 5.9 0 0 0-2.5 4.6l-.2 12.6L21 570a5623 5623 0 0 0 104.5.2c34.8-.3 69.4-.8 104-1 34.7-.2 69.6.2 104.5.4l52.6.5 53 .8Zm.4.3-51.7.8-52.1.6c-35 .1-69.8.5-105 .4-35.2-.2-70.4-.8-105.4-1a5627.8 5627.8 0 0 0-105 .3l-1.2-.1v-1.1l-.2-12.6c0-2.5 1.3-5 3.4-6.6a10 10 0 0 1 3.7-1.8c1.3-.4 2.8-.4 4-.4l28.5-.3 57-.4c38.2-.2 76.2-.5 114.3-.4l57.1.2 57.1.4c19 .1 38.1.5 57.1.7l28.6.4c1.1 0 2.5 0 3.8.4 1.2.4 2.4 1 3.3 1.7 2 1.5 3.1 3.8 3 6 0 4.4-.2 8.7-.3 12.8Z" fill="#144490"/><path d="M451 571.2H9.9c-4.7 0-8.4 3.3-8.4 7.4V610h458v-31.4c0-4.1-3.7-7.4-8.3-7.4Z" fill="#F0EADD"/><path d="M451 571c2.2 0 4.3.6 5.8 1.9 1.6 1.2 2.6 3 2.9 4.8v10.8l.3 21.5v.5h-.6l-57.2.7c-19.1.3-38.2.7-57.3.8a10309 10309 0 0 1-114.5.5c-38.2 0-76.3-.3-114.5-.4l-57.2-.3-57.3-.6H0V610l.3-27v-3.5c0-1 0-2.4.6-3.6 1-2.4 3.1-4.4 5.9-5.1 1.3-.5 2.8-.5 4-.5h11.5l30.7.2 30.6-.2c20.4 0 40.8-.3 61.2-.5l61.3-.6c40.8-.3 81.6-.1 122.5.5 40.8.6 81.6 1.3 122.5 1.2Zm0 .4c-40.8 0-81.6.7-122.4 1.2-40.9.7-81.7.8-122.5.6l-61.3-.7-61.2-.5H22.3l-7.6.1h-3.9c-1.3 0-2.3 0-3.4.4a7 7 0 0 0-4.6 4c-.4 1-.4 2-.4 3.1v3.4l.4 27-1.4-1.2 57.3-.5 57.2-.4c38.2-.1 76.3-.4 114.5-.4l57.3.1c19 0 38.1.3 57.2.4 19.1.1 38.2.5 57.3.8l57.2.8-.5.5.2-21.5v-10.8a6.9 6.9 0 0 0-2.7-4.5 8.8 8.8 0 0 0-5.3-1.8Z" fill="#144490"/><path d="M141 230.5h-12.6c-2 0-3.7-1.5-3.7-3.4v-57.3c0-1.8 1.6-3.3 3.7-3.3h12.7c2 0 3.8 1.5 3.8 3.3v57.3c0 1.9-1.7 3.4-3.8 3.4Z" fill="#CADEDF"/><path d="M141 230.2c1.8 0 3.4-1.3 3.4-2.8 0-1.6-.1-3.3-.3-4.9-.2-3.3-.7-6.6-1-9.9-.8-6.5-1-13.1-1.1-19.7 0-6.6.1-13.2.3-19.7 0-4.2 1-4.8-2.7-4.8l-11.2-.6c-1.1-.2-2.4.6-2.6 1.8v1.1l-.1 1.3-.1 2.4c-.1 3.3-.2 6.6 0 10 0 6.5 1 13 1.3 19.7a140.7 140.7 0 0 1-.5 19.7l-.3 2.5c-.1 1-.2 1.3 0 1.9.2.5.7 1 1.3 1.3l1.1.3h1.4c3.7.3 7.5.5 11.2.4Zm0 .5c-3.6 0-7.4.1-11.1.4h-3.1c-1.1-.4-2.1-1-2.8-2a4 4 0 0 1-.6-1.5l-.2-1.3-.3-2.5a133.6 133.6 0 0 1-.5-19.7c.4-6.6 1.2-13.2 1.4-19.8v-9.9l-.3-5c.1-2.1 2.3-4.2 5-4.2l11.1-.6h1.4a6 6 0 0 1 5.5 2.8c.4.5.6 1.1.7 1.8l.1 1.5v2.5c.3 6.5.5 13.1.4 19.7a187 187 0 0 1-1 19.7l-1.1 10-.4 4.9c-.2 1.8-2.1 3.3-4.1 3.2Z" fill="#144490"/><path d="M332.4 230.5h-12.6c-2.1 0-3.8-1.5-3.8-3.4v-57.3c0-1.8 1.7-3.3 3.8-3.3h12.6c2 0 3.8 1.5 3.8 3.3v57.3c0 1.9-1.7 3.4-3.8 3.4Z" fill="#CADEDF"/><path d="M332.4 230.2c1.8 0 3.3-1.3 3.4-2.8l-.4-4.9c-.2-3.3-.7-6.6-1-9.9-.8-6.5-1-13.1-1-19.7-.1-6.6 0-13.2.2-19.7 0-4.2 1-4.8-2.7-4.8l-11.1-.6c-1.2-.2-2.5.6-2.7 1.8v1.1l-.1 1.3-.1 2.4v10c0 6.5 1 13 1.3 19.7a142.6 142.6 0 0 1-.5 19.7l-.3 2.5c0 1-.2 1.3 0 1.9.3.5.7 1 1.4 1.3.3.2.6.2 1 .3h1.4c3.7.3 7.5.5 11.2.4Zm0 .5c-3.7 0-7.5.1-11.2.4h-3.1c-1-.4-2.1-1-2.7-2a4 4 0 0 1-.7-1.5l-.2-1.3-.2-2.5a134.7 134.7 0 0 1-.6-19.7c.4-6.6 1.3-13.2 1.4-19.8v-9.9l-.2-5c0-2.1 2.2-4.2 4.9-4.2l11.1-.6h1.4a6 6 0 0 1 5.5 2.8c.4.5.7 1.1.8 1.8v1.5l.1 2.5c.2 6.5.4 13.1.3 19.7 0 6.6-.2 13.2-1 19.7l-1.1 10c-.2 1.6-.2 3.2-.3 4.9-.3 1.8-2.2 3.3-4.2 3.2Z" fill="#144490"/><path d="M294.4 227.6h-128v-56h128v56Z" fill="#CADEDF"/><path d="M294.2 227.4 293 199l-.5-13.8-.4-13.6 2.4 2.1a3023 3023 0 0 1-64 .2l-32-.3c-10.7-.1-21.3-.5-32-.7l1.5-1.3a710.6 710.6 0 0 0-.6 42l.3 14-1.2-1.1 31.6-.9c10.5-.2 21 0 31.5 0 21.2.4 42.5 1 64.7 1.8Zm.4.3a2259.6 2259.6 0 0 1-95.8 1.8l-32.4-.9h-1.3v-1a710.6 710.6 0 0 0 .4-28c0-9.4-.3-18.7-.6-28v-1.3h1.5l32-.8 32-.3a2095.2 2095.2 0 0 1 64 .2h2.5v2.2c0 4.8-.3 9.5-.4 14.3-.1 4.8-.4 9.5-.6 14.2-.2 4.7-.3 9.4-.6 14l-.7 13.6ZM62.7 438.6l1.8-195 1.8 195h-3.6Zm19.4 0 1.8-195 1.8 195H82Zm294.9 0 1.8-195 1.8 195H377Zm19.4 0 1.8-195 1.8 195h-3.6Zm-333-287.8a94 94 0 0 1 21.7-61.6 91 91 0 0 0-16.4 61.3l-5.3.3Zm324.8-.3A91 91 0 0 0 372 89.2a94.5 94.5 0 0 1 21.7 61.6l-5.4-.3ZM103.3 534.2 52.6 532l50.7-2.4v4.7Zm255.6-4.7 50.6 2.4-50.6 2.3v-4.7Z" fill="#144490"/><path d="M192.2 185.8c0-2.8-2.6-5.2-5.9-5.2-3.2 0-5.9 2.4-5.9 5.2 0 2.9 2.7 5.2 6 5.2 3.2 0 5.8-2.3 5.8-5.2Z" fill="#F0EADD"/><path d="M192.3 185.8c0 1.4-.4 2.8-1.4 4a6 6 0 0 1-4.6 2 6 6 0 0 1-4.7-1.8 5 5 0 0 1-1.7-4.2c.2-1.5 1-2.8 2-3.8a7 7 0 0 1 4.4-2c1.8-.1 3.6.6 4.6 1.8 1 1.2 1.4 2.7 1.4 4Zm-.2 0c0-1.3-.9-2.6-2-3.3a8.4 8.4 0 0 0-3.8-1.2c-1.3-.1-2.9.1-4 1a3.9 3.9 0 0 0-1.4 3.5 5 5 0 0 0 1.8 3.2c1 .8 2.3 1.2 3.6 1.2a7 7 0 0 0 3.8-1c1.1-.8 2-2 2-3.4Z" fill="#144490"/><path d="M280.4 190.4h-83v-9.2h83v9.2Z" fill="#F0EADD"/><path d="m280.3 190.4-.3-9.2.4.4-20.7.3-20.8.1h-20.7l-20.7-.4.4-.4-.1 9.2-.3-.2 20.6-.1 20.5-.3 20.7.2c7 0 14 .2 21 .4Zm.2 0c-6.7.3-13.6.4-20.5.5l-20.8.2-21-.3h-21v-.4l-.1-9.2v-.4h.5l20.7-.3 20.7-.1 20.8.1 20.7.3h.4v.4l-.3 9.3Z" fill="#144490"/><path d="M192.2 200.9c0-2.9-2.6-5.2-5.9-5.2-3.2 0-5.9 2.3-5.9 5.2 0 2.9 2.7 5.2 6 5.2 3.2 0 5.8-2.3 5.8-5.2Z" fill="#F0EADD"/><path d="M192.3 200.9c0 1.4-.4 2.8-1.4 4a6 6 0 0 1-4.6 2c-1.8 0-3.6-.7-4.7-1.8a5 5 0 0 1-1.7-4.2 7 7 0 0 1 6.4-5.9c1.8 0 3.6.6 4.6 1.9 1 1.2 1.4 2.6 1.4 4Zm-.2 0a4 4 0 0 0-2-3.3 8.3 8.3 0 0 0-3.8-1.3 7 7 0 0 0-4 1 3.9 3.9 0 0 0-1.4 3.6 5 5 0 0 0 1.8 3.1c1 .8 2.3 1.2 3.6 1.3a7 7 0 0 0 3.8-1c1.1-.8 2-2 2-3.4Z" fill="#144490"/><path d="M280.4 205.5h-83v-9.2h83v9.2Z" fill="#F0EADD"/><path d="m280.3 205.4-.3-9.1.4.4-20.7.3-20.8.1h-20.7l-20.7-.4.4-.4-.1 9.2-.3-.3H218l20.5-.3 20.7.1 21 .4Zm.2.2-20.5.4c-6.9 0-13.8.2-20.8.1l-21-.2c-6.9-.2-13.8-.2-20.7-.1h-.4v-.3l-.1-9.2v-.4h.5l20.7-.3c7 0 13.8-.2 20.7-.1h20.8l20.7.4h.4v.4l-.3 9.3Z" fill="#144490"/><path d="M192.2 216c0-3-2.6-5.2-5.9-5.2-3.2 0-5.9 2.3-5.9 5.2 0 2.8 2.7 5.2 6 5.2 3.2 0 5.8-2.4 5.8-5.2Z" fill="#F0EADD"/><path d="M192.3 216c0 1.3-.4 2.8-1.4 4a6 6 0 0 1-4.6 2c-1.8 0-3.6-.7-4.7-1.8a5 5 0 0 1-1.7-4.2 7 7 0 0 1 6.4-5.9c1.8-.1 3.6.6 4.6 1.8 1 1.2 1.4 2.7 1.4 4Zm-.2 0c0-1.4-.9-2.7-2-3.4a8.3 8.3 0 0 0-3.8-1.2c-1.3-.1-2.9.2-4 1a3.9 3.9 0 0 0-1.4 3.6 5 5 0 0 0 1.8 3.1c1 .8 2.3 1.2 3.6 1.2a7 7 0 0 0 3.8-1c1.1-.7 2-2 2-3.3Z" fill="#144490"/><path d="M280.4 220.6h-83v-9.3h83v9.3Z" fill="#F0EADD"/><path d="m280.3 220.5-.3-9.2.4.4-20.7.4h-41.5c-7 0-13.8-.2-20.7-.3l.4-.5-.1 9.3-.3-.3H218c6.9-.2 13.7-.4 20.5-.4l20.7.2 21 .4Zm.2.1-20.5.4-20.8.2-21-.3h-21v-.3l-.1-9.3v-.4h.5l20.7-.3h41.5l20.7.4h.4v.3l-.3 9.3Zm47.5 2.7h-5v-19.1h5v19Zm-197-48.2.4 5.7.3 5.7a296.7 296.7 0 0 1 0 22.7l-.3 5.7-.4 5.7-.4-5.7-.3-5.7a300.8 300.8 0 0 1 0-22.7l.3-5.7.4-5.7Zm3.8 0 .4 5.7.2 5.7a309.5 309.5 0 0 1 0 22.7l-.2 5.7-.4 5.7-.5-5.7-.2-5.7a305 305 0 0 1 0-22.7l.2-5.7.5-5.7Zm3.7 0 .4 5.7.3 5.7a307.2 307.2 0 0 1 0 22.7l-.3 5.7-.4 5.7-.4-5.7-.3-5.7a305 305 0 0 1 0-22.7l.3-5.7.4-5.7ZM94.3 531.9l.9-44.1.9 44h-1.8Zm-7.5 0 .9-20 .9 20h-1.8Zm-8.7 0 1-11 .8 11h-1.8Zm286.9 0 .9-44.1.9 44H365Zm7.5 0 .9-20 .9 20h-1.8Zm8.6 0 1-11 .8 11h-1.8ZM51.5 199.2h1.8V191h-1.8v8.2Zm3.5 0h1.8V191h-1.7v8.2Zm3.7 0h1.7V191h-1.7v8.2Zm3.6 0H64V191h-1.7v8.2Zm3.6 0h1.7V191H66v8.2Zm3.5 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191H73v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0H82V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191H91v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm-43.1-24.1h1.8v-8h-1.8v8Zm3.5 0h1.8v-8h-1.7v8Zm3.7 0h1.7v-8h-1.7v8Zm3.6 0H64v-8h-1.7v8Zm3.6 0h1.7v-8H66v8Zm3.5 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8H73v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0H82v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8H91v8Zm3.6 0h1.8v-8h-1.8v8Zm268.9 24.1h1.8V191h-1.8v8.2Zm3.5 0h1.9V191H367v8.2Zm3.7 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.5 0h1.9V191H385v8.2Zm3.7 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.8V191h-1.8v8.2Zm3.6 0h1.7V191h-1.7v8.2Zm3.5 0h1.8V191h-1.7v8.2Zm3.7 0h1.7V191h-1.7v8.2Zm-43.2-24.1h1.8v-8h-1.8v8Zm3.5 0h1.9v-8H367v8Zm3.7 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.5 0h1.9v-8H385v8Zm3.7 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.8v-8h-1.8v8Zm3.6 0h1.7v-8h-1.7v8Zm3.5 0h1.8v-8h-1.7v8Zm3.7 0h1.7v-8h-1.7v8ZM21 557l247.1 1.6L21 560.2V557ZM1.4 577l427.6 1.6L1.4 580v-3Z" fill="#144490"/><path d="M74 407.8a908.8 908.8 0 0 1-2.2-44.3l-.4-22.2-.1-22.1.1-22.2c.2-7.4.2-14.8.5-22.2.4-14.8 1-29.5 2-44.3 1.1 14.8 1.7 29.5 2.1 44.3.3 7.4.3 14.8.5 22.2l.1 22.2-.1 22.1c-.2 7.4-.2 14.8-.5 22.2-.4 14.8-1 29.5-2 44.3Zm315.6 0a909.4 909.4 0 0 1-2.1-44.3c-.3-7.4-.3-14.8-.5-22.2l-.1-22.1.1-22.2c.2-7.4.2-14.8.5-22.2a921 921 0 0 1 2-44.3c1.2 14.8 1.8 29.5 2.1 44.3.3 7.4.3 14.8.5 22.2l.1 22.2-.1 22.1-.4 22.2c-.4 14.8-1 29.5-2.1 44.3ZM62 159.1h-.3a107.1 107.1 0 0 1-17.3-1.6 107.1 107.1 0 0 1 17.2-1.6h.4a106.3 106.3 0 0 1 17 1.6 105.8 105.8 0 0 1-17 1.6Zm-2.2 288h-.3a107.1 107.1 0 0 1-17.2-1.5 107.5 107.5 0 0 1 17.2-1.6h.3a105.9 105.9 0 0 1 17 1.6 105 105 0 0 1-17 1.6Zm338.6 0h-.3a107 107 0 0 1-17.2-1.5c2.9-.7 5.8-1 8.6-1.3l8.6-.3h.3a105.8 105.8 0 0 1 17 1.6 104.9 104.9 0 0 1-17 1.6ZM62 183.1h-.3a106.7 106.7 0 0 1-17.3-1.6 107.4 107.4 0 0 1 17.2-1.6h.4a106.3 106.3 0 0 1 17 1.6 105.3 105.3 0 0 1-17 1.6Zm0 23.9h-.3a106.5 106.5 0 0 1-17.3-1.5 107.1 107.1 0 0 1 17.2-1.6h.4a105.3 105.3 0 0 1 17 1.6 106.3 106.3 0 0 1-17 1.6Zm337.1-47.9h-.3a107.1 107.1 0 0 1-17.2-1.6 107.2 107.2 0 0 1 17.2-1.6h.3a106.2 106.2 0 0 1 17 1.6c-2.8.7-5.7 1-8.6 1.3l-8.4.3Zm0 24h-.3a106.7 106.7 0 0 1-17.2-1.6 107.5 107.5 0 0 1 17.2-1.6h.3a106.2 106.2 0 0 1 17 1.6c-2.8.7-5.7 1-8.6 1.3l-8.4.3Zm0 23.9h-.4a106.5 106.5 0 0 1-17.1-1.5 107.2 107.2 0 0 1 17.2-1.6h.3a105.3 105.3 0 0 1 17 1.6 106.2 106.2 0 0 1-17 1.6Z" fill="#F0EADD"/><path d="M121.6 143.6c8.7-.6 17.5-.8 26.2-1.3l26.1-.7c8.8-.3 17.5-.3 26.2-.5l26.2-.1c17.4 0 34.8.1 52.3.6l26.1.7c8.7.5 17.5.7 26.2 1.3v.4l-104.6.1-104.7-.1v-.4Z" fill="#144490"/></svg> </div> <div class="absolute top-[40%] bottom-[12%] left-[25%] right-[25%] flex flex-col space-y-1"> <form x-target="songs" action="/songs" role="search" aria-label="Search jukebox music" class="relative" autocomplete="off"> <label for="search" class="sr-only">Search</label> <input type="search" name="search" id="search" aria-describedby="info" placeholder="Search songs..." @input.debounce="$el.form.requestSubmit()" class="animate-glow relative font-sans w-full rounded-md border-blue-800 placeholder:text-almond-700 bg-almond-200 text-blue-800 focus:border-red-600"> <button x-show="false" class="sr-only">Submit</button> </form> <div id="songs"><p id="info" class="py-2 text-almond-700 font-sans text-center text-sm">Results will update as you type.</p></div> <div aria-live="assertive" aria-atomic="true" class="sr-only"><div x-sync id="notifications"></div></div> </div> </div> </div> </div>
Alpine AJAX is an Alpine.js plugin that enables your HTML elements to request remote content from your server. Use it to build straight-forward, robust, interactive websites.
<form x-target="songs" action="/songs">
<input name="search" @input.debounce="$el.form.requestSubmit()">
</form>
<ul id="songs">…</ul>
Check the Server Requests to see our server in action!
Serve vigorous & vital websites!
- Compact
- Alpine AJAX is under 3kB; combined with Alpine.js you can build almost anything you want with about 18kB of JavaScript total.
- Flexible
- There are zero server-side dependencies, you can use it with any server-side stack.
- Progressive
- Follow patterns for building progressively enhanced websites that function even when JavaScript is not available.
- Accessible
- Alpine AJAX uses JavaScript to enhance the power of HTML rather than replace it with inaccessible workarounds.
- Performant
- AJAX requests are batched to prevent duplicate requests and save you network bandwidth.
- Easy
- You can probably learn all of Alpine AJAX in an afternoon.