CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Strapi - Open source Node.js Headless CMS 🚀</title><meta name="description" content="Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created, managed and exposed to any digital device."/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@strapijs"/><meta name="twitter:creator" content="@strapijs"/><meta name="og:type" content="website"/><meta data-hid="twitter:title" name="twitter:title" property="twitter:title" content="Strapi - Open source Node.js Headless CMS 🚀"/><meta data-hid="twitter:description" name="twitter:description" property="twitter:description" content="Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created, managed and exposed to any digital device."/><meta data-hid="twitter:image" name="twitter:image" property="twitter:image" content="https://delicate-dawn-ac25646e6d.media.strapiapp.com/HP_meta_b32f546a40.png"/><meta data-hid="twitter:image:alt" name="twitter:image:alt" property="twitter:image:alt" content="https://delicate-dawn-ac25646e6d.media.strapiapp.com/HP_meta_b32f546a40.png"/><meta prefix="og: http://ogp.me/ns#" data-hid="og:url" name="og:url" property="og:url" content="https://strapi.io/"/><meta prefix="og: http://ogp.me/ns#" data-hid="og:title" name="og:title" property="og:title" content="Strapi - Open source Node.js Headless CMS 🚀"/><meta prefix="og: http://ogp.me/ns#" data-hid="og:description" name="og:description" property="og:description" content="Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created, managed and exposed to any digital device."/><meta prefix="og: http://ogp.me/ns#" data-hid="og:image" name="og:image" property="og:image" content="https://delicate-dawn-ac25646e6d.media.strapiapp.com/HP_meta_b32f546a40.png"/><meta prefix="og: http://ogp.me/ns#" data-hid="og:image:secure_url" name="og:image:secure_url" property="og:image:secure_url" content="https://delicate-dawn-ac25646e6d.media.strapiapp.com/HP_meta_b32f546a40.png"/><meta prefix="og: http://ogp.me/ns#" data-hid="og:image:alt" name="og:image:alt" property="og:image:alt" content="Strapi - Open source Node.js Headless CMS 🚀"/><link rel="canonical" href="https://strapi.io/"/><script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://strapi.io/#organization", "name": "Strapi", "url": "https://strapi.io", "sameAs": [], "logo": { "@type": "ImageObject", "@id": "https://strapi.io/#logo", "inLanguage": "en", "url": "https://strapi.io/assets/strapi-logo-dark.svg", "width": 264, "height": 68, "caption": "Strapi" }, "image": "https://strapi.io/assets/strapi-logo-dark.svg" }, { "@type": "WebSite", "@id": "https://strapi.io/#website", "url": "https://strapi.io", "name": "Strapi", "description": "Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.", "publisher": { "@id": "https://strapi.io/#organization" } }, { "@type": "WebPage", "@id": "https://strapi.io//#webpage", "url": "https://strapi.io/", "name": "Strapi - Open source Node.js Headless CMS 🚀", "isPartOf": { "@id": "https://strapi.io/#website" }, "about": { "@id": "https://strapi.io/#organization" }, "primaryImageOfPage": { "@id": "https://strapi.io/#primaryimage" }, "datePublished": "", "dateModified": "", "description": "Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created, managed and exposed to any digital device.", "inLanguage": "en", "potentialAction": [ { "@type": "ReadAction", "target": ["https://strapi.io"] } ] } ] }</script><meta name="next-head-count" content="20"/><link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png"/><meta name="google-site-verification" content="xajFstySgPx2SkhqFUcdLOe6fxxJfSMj5lI8BuVewYg"/><meta name="facebook-domain-verification" content="accb8diqqjv0o0a4egvgc2lfyw7zxn"/><link rel="preconnect" href="https://d2zv2ciw0ln4h1.cloudfront.net" crossorigin="true"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/_next/static/media/eafabf029ad39a43-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/8888a3826f4a3af4-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/0484562807a97172-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/b957ea75a84b6ea7-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/a34f9d1faa5f3315-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><script id="signals-script" data-nscript="beforeInteractive"> (function() { if (typeof window === 'undefined') return; if (typeof window.signals !== 'undefined') return; var script = document.createElement('script'); script.src = 'https://cdn.cr-relay.com/v1/site/d071dd4e-fd79-4841-88a9-d0fd342b1e39/signals.js'; script.async = true; window.signals = Object.assign( [], ['page', 'identify', 'form'].reduce(function (acc, method){ acc[method] = function () { signals.push([method, arguments]); return signals; }; return acc; }, {}) ); document.head.appendChild(script); })(); </script><link rel="preload" href="/_next/static/css/cdb38f0b391ac197.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/cdb38f0b391ac197.css" crossorigin="" data-n-g=""/><link rel="preload" href="/_next/static/css/89f1b40b8c2ef6f7.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/89f1b40b8c2ef6f7.css" crossorigin="" data-n-p=""/><link rel="preload" href="/_next/static/css/2d479eba285f5ada.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/2d479eba285f5ada.css" crossorigin=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script type="text/javascript" src="https://cdn.amplitude.com/script/181a95e5a6b8053f7ffb7da9f0ef7ef4.experiment.js" defer="" data-nscript="beforeInteractive" crossorigin=""></script><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="386813f1-e3fc-470a-838b-20a717371095" data-blockingmode="auto" type="text/javascript" defer="" data-nscript="beforeInteractive" crossorigin=""></script><script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver&IntersectionObserverEntry" defer="" data-nscript="beforeInteractive" crossorigin=""></script><script defer="" src="/_next/static/chunks/6546-614e17bfb3a07ecd.js" crossorigin=""></script><script defer="" src="/_next/static/chunks/9447-2c5a343c20b96bec.js" crossorigin=""></script><script defer="" src="/_next/static/chunks/4435-ea13c5b2571941ee.js" crossorigin=""></script><script defer="" src="/_next/static/chunks/3175.2cbb1d061d04d652.js" crossorigin=""></script><script src="/_next/static/chunks/webpack-9b01323477b17ae4.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-b78bc773b89d3272.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-7b6b7a651c475431.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-cd15cecaa32d9f7c.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/7243-bbab78f34ff246b8.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/8967-a9dbf062be960f74.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/517-1532b3443f8f50f1.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/index-e134fe8ec54e222a.js" defer="" crossorigin=""></script><script src="/_next/static/vuOxsQmmbOpxHzaPLq1SJ/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/vuOxsQmmbOpxHzaPLq1SJ/_ssgManifest.js" defer="" crossorigin=""></script><style id="__jsx-635049016">html{font-family:'__Poppins_1fa6f9', '__Poppins_Fallback_1fa6f9'}</style><style data-href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrFJM.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLGT9V1g.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6V1g.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div class="jsx-635049016 "><div style="position:absolute;top:0px;width:100%;left:0px"></div><div class="styles_Page__mxxH_"><div id="navigation" class="styles_navigationContainer__ZD4Kv"><div class="styles_smallScreenNav__TT6_N styles_Mobile__fpAyz"><div class="styles_HeaderBackground__x1Zua"></div><div class="styles_smallScreenNav__TT6_N styles_maxWidth__UJE63"><nav class="styles_nav__5kXkR styles_wrapper__bspHs"><a class="styles_Link__mwEVw styles_Logo__eg9yu styles_logo__E8cMV" target="" alt="" href="/"><div class="styles_img__mNwIr"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img alt="Strapi logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="styles_img__mNwIr" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain"/><noscript><img alt="Strapi logo" loading="lazy" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" class="styles_img__mNwIr" sizes="100vw" srcSet="/assets/strapi-logo-light.svg 640w, /assets/strapi-logo-light.svg 750w, /assets/strapi-logo-light.svg 828w, /assets/strapi-logo-light.svg 1080w, /assets/strapi-logo-light.svg 1200w, /assets/strapi-logo-light.svg 1920w, /assets/strapi-logo-light.svg 2048w, /assets/strapi-logo-light.svg 3840w" src="/assets/strapi-logo-light.svg"/></noscript></span></div></a><div class="styles_search__onIwy"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="styles_icon__SJLV4"><g filter="url(#search_svg__filter0_d)"><path d="M4 9.4c0-2.24 0-3.36.436-4.216a4 4 0 011.748-1.748C7.04 3 8.16 3 10.4 3h19.2c2.24 0 3.36 0 4.216.436a4 4 0 011.748 1.748C36 6.04 36 7.16 36 9.4v19.2c0 2.24 0 3.36-.436 4.216a4 4 0 01-1.748 1.748C32.96 35 31.84 35 29.6 35H10.4c-2.24 0-3.36 0-4.216-.436a4 4 0 01-1.748-1.748C4 31.96 4 30.84 4 28.6V9.4z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.922 22.401l-2.209-2.236a4.08 4.08 0 00.547-2.028A4.14 4.14 0 0019.13 14 4.14 4.14 0 0015 18.137a4.14 4.14 0 004.13 4.137c.727 0 1.446-.2 2.086-.583l2.198 2.228a.264.264 0 00.38 0l1.128-1.14a.267.267 0 000-.378zm-5.792-6.79a2.525 2.525 0 010 5.051 2.525 2.525 0 010-5.05z" fill="#32324D"></path></g><defs><filter id="search_svg__filter0_d" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.102907 0 0 0 0 0.102907 0 0 0 0 0.261974 0 0 0 0.1 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter></defs></svg></div><div class="styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_white__JBiEk"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_white__JBiEk"><div class="styles_hoverCircle__rhm0o"></div></div><button class="styles_buttonLink__LImRE typography_Button__PN2AV styles_burgerButton__bmM5Q" target="_self"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16" class="styles_burgerIcon__5cV60"><rect x="0.244" y="6.534" width="21.511" height="2.933" rx="1.467" fill="#1D1B84"></rect><rect x="0.244" y="0.916" width="21.511" height="2.933" rx="1.467" fill="#1D1B84"></rect><rect x="0.244" y="12.151" width="21.511" height="2.933" rx="1.467" fill="#1D1B84"></rect></svg></button></div></div></nav></div></div><div class="styles_Overlay__58g_n styles_overlay__J2PUG"><div class="styles_container__tpoM0"><div class="styles_background__D_6iv"></div><div class="styles_wrapper__qffYY"><div class="styles_gradient__BIe8G styles_topGradient__SEiXZ"></div><ul><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_purple__7PPm5"></p></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="" alt="" href="/features">Product</a></p><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Design REST and GraphQL Content Delivery APIs to connect to any frontend." icons="[object Object]" href="/create-apis"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Create APIs</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Design REST and GraphQL Content Delivery APIs to connect to any frontend.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Craft experiences and easily manage editing, publishing, and translation." icons="[object Object]" href="/content-management"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Layout.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Layout.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Content Management</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Craft experiences and easily manage editing, publishing, and translation.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Personalize your CMS to meet your project's unique requirements." icons="[object Object]" href="/customization"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="PencilRuler.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="PencilRuler.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Customization</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Personalize your CMS to meet your project's unique requirements.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Work together easily on code and content." icons="[object Object]" href="/collaboration"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="UsersThree.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="UsersThree.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Collaboration</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Work together easily on code and content.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Host your projects on robust, secure servers in minutes." icons="[object Object]" href="/hosting"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Vector.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Vector.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Hosting</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Host your projects on robust, secure servers in minutes.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Implement robust security measures to protect your information." icons="[object Object]" href="/security"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Lock.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Lock.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Security</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Implement robust security measures to protect your information.</span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="PaaS hosting for Strapi projects. " icons="[object Object]" href="/cloud"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">PaaS hosting for Strapi projects. </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="A self hosted, Enterprise-ready Edition. " icons="[object Object]" href="/enterprise"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Buildings.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Buildings.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Enterprise Edition</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">A self hosted, Enterprise-ready Edition. </span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Marketplace of plugins and integrations. " icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://market.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ShoppingCart.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ShoppingCart.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Strapi Market</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Marketplace of plugins and integrations. </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Discover all the features available in Strapi today. " icons="[object Object]" href="/features"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Lightning.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Lightning.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Features</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discover all the features available in Strapi today. </span></div></div></a></li></ul></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="" alt="" href="/user-stories">Solutions</a></p><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Level up your eCommerce experiences" icons="[object Object]" href="/solutions/ecommerce-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Basket.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Basket.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Ecommerce</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Level up your eCommerce experiences</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="One CMS, any devices." icons="[object Object]" href="/solutions/mobile-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="DeviceMobile.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="DeviceMobile.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Mobile applications</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">One CMS, any devices.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Manage your brand narrative." icons="[object Object]" href="/solutions/corporate-website-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Globe.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Globe.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Corporate site</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Manage your brand narrative.</span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Integrate Strapi with your favorite tools" icons="[object Object]" href="/for-developers"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Developers</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Integrate Strapi with your favorite tools</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Manage Content Autonomously " icons="[object Object]" href="/for-content-teams"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Feather.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Feather.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Content Managers</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Manage Content Autonomously </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Unlock the benefit of structured content" icons="[object Object]" href="/for-business-teams"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Briefcase.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Briefcase.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Website agencies</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Unlock the benefit of structured content</span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Build trustful relations with your customers" icons="[object Object]" href="/financial-services"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Coins.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Coins.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Financial Services</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Build trustful relations with your customers</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Stand out with exceptional B2B content." icons="[object Object]" href="/tech-business-services"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="HeadCircuit.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="HeadCircuit.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Tech and Business Services</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Stand out with exceptional B2B content.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Create and manage content on any platform" icons="[object Object]" href="/telco-media-gaming"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Megaphone.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Megaphone.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Telco, Media, and Gaming</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Create and manage content on any platform</span></div></div></a></li></ul></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="" alt="" href="/community">Developers</a></p><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Latest Strapi news & updates" icons="[object Object]" href="/blog"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Article.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Blog</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Latest Strapi news & updates</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Upcoming and On-demand Events " icons="[object Object]" href="/events"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Calendar.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Calendar.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Events</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Upcoming and On-demand Events </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Find new opportunities, and scale your business with Strapi’s partner program" icons="[object Object]" href="/partner-program"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Handshake.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Handshake.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Partners</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Find new opportunities, and scale your business with Strapi’s partner program</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Discover who uses Strapi" icons="[object Object]" href="/user-stories"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Confetti.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Confetti.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Case studies</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discover who uses Strapi</span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a summary="Contribute & collaborate on GitHub" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://github.com/strapi/strapi"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Open Source</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Contribute & collaborate on GitHub</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask questions and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://forum.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatsCircle.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatsCircle.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Forum</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask questions and find answers</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask question and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://discord.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatsCircle.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatsCircle.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Discord</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask question and find answers</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask question and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://www.youtube.com/strapi"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Play.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Play.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Video Tutorials</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask question and find answers</span></div></div></a></li></ul></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io">Docs</a></p></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="" alt="" href="/pricing-cloud">Pricing</a></p></li><li class="styles_section__ebXdR"><p class="typography_Title__Axpg_ styles_title__JAmEG typography_small__vIMI7 themes_dark__3Uwp9"><a class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://cloud.strapi.io">Cloud</a></p><ul><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="PaaS hosting for Strapi projects" icons="[object Object]" href="/cloud"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Discover Strapi Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">PaaS hosting for Strapi projects</span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a summary="Login or Sign up for Strapi Cloud. " icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://cloud.strapi.io/login"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="SignIn.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="SignIn.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Login to Strapi Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Login or Sign up for Strapi Cloud. </span></div></div></a></li></ul><ul><li class="styles_link__tmJGd"><a summary="Strapi Cloud hosting technical documentation" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io/cloud/intro"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Book.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Book.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Strapi Cloud Docs</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Strapi Cloud hosting technical documentation</span></div></div></a></li></ul></li></ul><div class="styles_gradient__BIe8G styles_bottomGradient__2Giqr"></div></div><svg width="19" height="19" fill="none" xmlns="http://www.w3.org/2000/svg" class="styles_cross__LZJm_"><rect x="2.283" y="0.406" width="22.743" height="3" rx="1.5" transform="rotate(45 2.283 .406)" fill="#956FFF"></rect><rect x="0.438" y="16.518" width="22.771" height="3" rx="1.5" transform="rotate(-45 .438 16.518)" fill="#956FFF"></rect></svg></div></div><header class="styles_Desktop__6Y_bs styles_largeScreenNav__mz0z3"><div class="styles_HeaderBackground__x1Zua"></div><div class="styles_PopIn__SjGTc"><div><div class="styles_LogoPopin__x36WY"><div class="styles_closeIcon__u66Wf"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 1.533L14.466 0 8 6.467 1.533 0 0 1.533 6.467 8 0 14.466 1.533 16 8 9.533 14.466 16 16 14.466 9.533 8 16 1.533z" fill="#92A0C4"></path></svg></div><div><h2 class="typography_Title__Axpg_ styles_title__HgN5a typography_small__vIMI7 themes_dark__3Uwp9">Looking for our logo ?</h2><div class="styles_image__LWwK5"><div class="styles_ratio__bpoRn" style="padding-bottom:49.3140243902439%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="strapi-logo-figma-lines.png"/></div></div><div class="styles_buttonsWrapper__88V83"><div class="styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_purple__vkMf6 styles_button__lCL5z"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_purple__vkMf6"><div class="styles_hoverCircle__rhm0o"></div></div><a icons="" class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV" target="_self" rel="noopener" alt="" href="https://www.strapi.io/hubfs/New%20logos/Strapi%20logo%20kit.zip">Download Logo Pack</a></div></div><div class="styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_white__JBiEk styles_button__lCL5z"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_white__JBiEk"><div class="styles_hoverCircle__rhm0o"></div></div><a icons="" class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV" target="_self" rel="noopener" alt="" href="https://handbook.strapi.io/strapi-brand-book-2022">See more Strapi assets</a></div></div></div></div></div></div></div><div class="styles_maxWidth__UJE63"><nav class="styles_nav__v5xO1 styles_wrapper__bspHs"><a class="styles_Link__mwEVw styles_Logo__eg9yu styles_logo__QLqd0" target="" alt="" href="/"><div class="styles_img__mNwIr"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img alt="Strapi logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="styles_img__mNwIr" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain"/><noscript><img alt="Strapi logo" loading="lazy" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" class="styles_img__mNwIr" sizes="100vw" srcSet="/assets/strapi-logo-light.svg 640w, /assets/strapi-logo-light.svg 750w, /assets/strapi-logo-light.svg 828w, /assets/strapi-logo-light.svg 1080w, /assets/strapi-logo-light.svg 1200w, /assets/strapi-logo-light.svg 1920w, /assets/strapi-logo-light.svg 2048w, /assets/strapi-logo-light.svg 3840w" src="/assets/strapi-logo-light.svg"/></noscript></span></div></a><div class="styles_panelBackgroundWrapper__i_znl" style="height:15px"><div class="styles_panelBackgroundContainer__tg5G6"><div class="styles_panelBackground__nfKzr"><div class="styles_panelBackgroundGradient__zBRpQ"></div></div></div></div><ul class="styles_links__UwyY2"><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="" alt="" href="/features"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Product</span><span class="styles_arrow__wPeWK"></span></span></div></a><div class="styles_Panel__05kJS"><div class="styles_cardContent__SgXm6"><div class="styles_card__lEiYy"><div class="styles_linksWrapper__fBwSO"><div class="styles_linkSections__kVlBo"><div class="styles_LinksSection__f_H1s styles_LinksSectionWide__7R9Kv"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Capabilities</p><ul class="styles_LinksSectionGrid__yFweT"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Design REST and GraphQL Content Delivery APIs to connect to any frontend." icons="[object Object]" href="/create-apis"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Create APIs</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Design REST and GraphQL Content Delivery APIs to connect to any frontend.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Craft experiences and easily manage editing, publishing, and translation." icons="[object Object]" href="/content-management"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Layout.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Layout.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Content Management</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Craft experiences and easily manage editing, publishing, and translation.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Personalize your CMS to meet your project's unique requirements." icons="[object Object]" href="/customization"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="PencilRuler.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="PencilRuler.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Customization</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Personalize your CMS to meet your project's unique requirements.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Work together easily on code and content." icons="[object Object]" href="/collaboration"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="UsersThree.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="UsersThree.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Collaboration</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Work together easily on code and content.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Host your projects on robust, secure servers in minutes." icons="[object Object]" href="/hosting"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Vector.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Vector.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Hosting</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Host your projects on robust, secure servers in minutes.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Implement robust security measures to protect your information." icons="[object Object]" href="/security"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Lock.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Lock.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Security</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Implement robust security measures to protect your information.</span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Product & Features</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="PaaS hosting for Strapi projects. " icons="[object Object]" href="/cloud"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">PaaS hosting for Strapi projects. </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="A self hosted, Enterprise-ready Edition. " icons="[object Object]" href="/enterprise"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Buildings.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Buildings.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Enterprise Edition</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">A self hosted, Enterprise-ready Edition. </span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Marketplace of plugins and integrations. " icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://market.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ShoppingCart.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ShoppingCart.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Strapi Market</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Marketplace of plugins and integrations. </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Discover all the features available in Strapi today. " icons="[object Object]" href="/features"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Lightning.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Lightning.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Features</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discover all the features available in Strapi today. </span></div></div></a></li></ul></div></div></div></div><div class="styles_lowerSection__DM_BA"><div><a class="styles_lowerLinks__KEcMa" href="/contact-sales"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatCircleDots.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatCircleDots.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Contact Sales</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="/demo"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="CursorClick.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="CursorClick.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Interactive Demo</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="https://cloud.strapi.io"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud (1).svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud (1).svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Host your Project</span></a></div></div></div></div></li><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="" alt="" href="/user-stories"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Solutions</span><span class="styles_arrow__wPeWK"></span></span></div></a><div class="styles_Panel__05kJS"><div class="styles_cardContent__SgXm6"><div class="styles_card__lEiYy"><div class="styles_linksWrapper__fBwSO"><div class="styles_linkSections__kVlBo"><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Use Cases</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Level up your eCommerce experiences" icons="[object Object]" href="/solutions/ecommerce-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Basket.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Basket.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Ecommerce</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Level up your eCommerce experiences</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="One CMS, any devices." icons="[object Object]" href="/solutions/mobile-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="DeviceMobile.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="DeviceMobile.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Mobile applications</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">One CMS, any devices.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Manage your brand narrative." icons="[object Object]" href="/solutions/corporate-website-cms"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Globe.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Globe.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Corporate site</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Manage your brand narrative.</span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Teams</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Integrate Strapi with your favorite tools" icons="[object Object]" href="/for-developers"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Developers</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Integrate Strapi with your favorite tools</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Manage Content Autonomously " icons="[object Object]" href="/for-content-teams"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Feather.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Feather.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Content Managers</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Manage Content Autonomously </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Unlock the benefit of structured content" icons="[object Object]" href="/for-business-teams"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Briefcase.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Briefcase.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Website agencies</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Unlock the benefit of structured content</span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Industries</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Build trustful relations with your customers" icons="[object Object]" href="/financial-services"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Coins.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Coins.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Financial Services</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Build trustful relations with your customers</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Stand out with exceptional B2B content." icons="[object Object]" href="/tech-business-services"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="HeadCircuit.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="HeadCircuit.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Tech and Business Services</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Stand out with exceptional B2B content.</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Create and manage content on any platform" icons="[object Object]" href="/telco-media-gaming"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Megaphone.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Megaphone.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Telco, Media, and Gaming</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Create and manage content on any platform</span></div></div></a></li></ul></div></div></div></div><div class="styles_lowerSection__DM_BA"><div><a class="styles_lowerLinks__KEcMa" href="/contact-sales"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatCircleDots.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatCircleDots.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Contact Sales</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="/demo"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="CursorClick.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="CursorClick.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Interactive Demo</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="https://cloud.strapi.io"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud (1).svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud (1).svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Host your Project</span></a></div></div></div></div></li><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="" alt="" href="/community"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Developers</span><span class="styles_arrow__wPeWK"></span></span></div></a><div class="styles_Panel__05kJS"><div class="styles_cardContent__SgXm6"><div class="styles_card__lEiYy"><div class="styles_linksWrapper__fBwSO"><div class="styles_linkSections__kVlBo"><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Resources</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Latest Strapi news & updates" icons="[object Object]" href="/blog"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Article.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Blog</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Latest Strapi news & updates</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Upcoming and On-demand Events " icons="[object Object]" href="/events"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Calendar.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Calendar.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Events</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Upcoming and On-demand Events </span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Find new opportunities, and scale your business with Strapi’s partner program" icons="[object Object]" href="/partner-program"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Handshake.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Handshake.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Partners</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Find new opportunities, and scale your business with Strapi’s partner program</span></div></div></a></li><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="Discover who uses Strapi" icons="[object Object]" href="/user-stories"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Confetti.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Confetti.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Case studies</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discover who uses Strapi</span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Support</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a summary="Contribute & collaborate on GitHub" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://github.com/strapi/strapi"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Code.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Code.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Open Source</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Contribute & collaborate on GitHub</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask questions and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://forum.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatsCircle.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatsCircle.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Forum</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask questions and find answers</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask question and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://discord.strapi.io"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatsCircle.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatsCircle.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Discord</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask question and find answers</span></div></div></a></li><li class="styles_link__tmJGd"><a summary="Discuss, ask question and find answers" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://www.youtube.com/strapi"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Play.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Play.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Video Tutorials</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Discuss, ask question and find answers</span></div></div></a></li></ul></div><div class="styles_LinksSection__Zq7MK"><p class="typography_Text___rU8X styles_title__0r_rc typography_smaller__E7EA3 themes_grey-600__PQwHL">Integrations</p><div class="styles_linkContainer__xBiR_"><div class="styles_linkDiv__MbuDK"><a href="/integrations/react-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="React_logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="React_logo" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/reactjs_affdb2a81b_880e938939.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/reactjs_affdb2a81b_880e938939.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/reactjs_affdb2a81b_880e938939.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/nextjs-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="next.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="next.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/next_62ccad57c8.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/next_62ccad57c8.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/next_62ccad57c8.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/vuejs-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="vuejs-logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="vuejs-logo" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/nuxtjs-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="nuxt-2021.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="nuxt-2021.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/nuxt_2021_e30c8bb5e6.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/nuxt_2021_e30c8bb5e6.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/nuxt_2021_e30c8bb5e6.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/flutter-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="logo_lockup_flutter_horizontal.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="logo_lockup_flutter_horizontal.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/svelte-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="svelte-logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="svelte-logo" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fsvelte_logo_47aa97b851.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fsvelte_logo_47aa97b851.png&w=96&q=75 2x" src="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fsvelte_logo_47aa97b851.png&w=96&q=75"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/angular-cms"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Angular_logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Angular_logo" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Angular_logo_d6e28562b5.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Angular_logo_d6e28562b5.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Angular_logo_d6e28562b5.svg"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/astro"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="astro-icon-dark.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="astro-icon-dark.png" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fastro_icon_dark_c4e62cc0a3.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fastro_icon_dark_c4e62cc0a3.png&w=96&q=75 2x" src="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Fastro_icon_dark_c4e62cc0a3.png&w=96&q=75"/></noscript></span></a></div><div class="styles_linkDiv__MbuDK"><a href="/integrations/tan-stack-start-strapi-integration"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="logo-color-600w-Er4SOkq1.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__7_m4E" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="logo-color-600w-Er4SOkq1.png" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__7_m4E" srcSet="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Flogo_color_600w_Er4_S_Okq1_53e9d1772c.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Flogo_color_600w_Er4_S_Okq1_53e9d1772c.png&w=96&q=75 2x" src="/_next/image?url=https%3A%2F%2Fdelicate-dawn-ac25646e6d.media.strapiapp.com%2Flogo_color_600w_Er4_S_Okq1_53e9d1772c.png&w=96&q=75"/></noscript></span></a></div></div><div class="styles_buttonLink__nlv8S styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_white__JBiEk"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_white__JBiEk"><div class="styles_hoverCircle__rhm0o"></div></div><a class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV" target="_self" alt="" icons="[object Object]" href="/integrations">See all integrations</a></div></div></div></div></div></div><div class="styles_lowerSection__DM_BA"><div><a class="styles_lowerLinks__KEcMa" href="/contact-sales"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatCircleDots.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatCircleDots.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Contact Sales</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="/demo"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="CursorClick.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="CursorClick.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Interactive Demo</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="https://cloud.strapi.io"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud (1).svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud (1).svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Host your Project</span></a></div></div></div></div></li><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Docs</span></span></div></a></li><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="" alt="" href="/pricing-cloud"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Pricing</span></span></div></a></li><li class="styles_NavigationLabel__mz0CN"><a class="styles_Link__mwEVw styles_wrapper__gwJ6S styles_wrapper-dark__b8OfA" target="_blank" rel="noopener" alt="" href="https://cloud.strapi.io"><div class="styles_label__YgVcE"><span class="typography_Text___rU8X styles_labelText__FGukk typography_small__vIMI7 themes_white__terWd"><span>Cloud</span><span class="styles_arrow__wPeWK"></span></span></div></a><div class="styles_Panel__05kJS"><div class="styles_cardContent__SgXm6"><div class="styles_card__lEiYy"><div class="styles_linksWrapper__fBwSO"><div class="styles_linkSections__kVlBo"><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Discover</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a class="styles_Link__mwEVw" target="" alt="" summary="PaaS hosting for Strapi projects" icons="[object Object]" href="/cloud"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Discover Strapi Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">PaaS hosting for Strapi projects</span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Login</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a summary="Login or Sign up for Strapi Cloud. " icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://cloud.strapi.io/login"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="SignIn.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="SignIn.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Login to Strapi Cloud</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Login or Sign up for Strapi Cloud. </span></div></div></a></li></ul></div><div class="styles_LinksSection__f_H1s styles_LinksSectionNarrow__ybAMO"><p class="typography_Text___rU8X styles_title__L9JEp typography_smaller__E7EA3 themes_grey-600__PQwHL">Documentation</p><ul class="styles_LinkSectionColumn__FLLoF"><li class="styles_link__tmJGd"><a summary="Strapi Cloud hosting technical documentation" icons="[object Object]" class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io/cloud/intro"><div class="styles_linkItemWrapper___sxa6"><div class="styles_linkItemTextWrapper__F1nYu"><div class="styles_linkTitleWrapper__ODIrn"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Book.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__1_0TP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Book.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__1_0TP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg"/></noscript></span><span class="typography_Text___rU8X styles_linkTitle___MYr4 typography_seventeen__WF_xe themes_blue-800__kIBoG">Strapi Cloud Docs</span></div><span class="typography_Text___rU8X styles_linkSummary__SsYAh typography_legend__FRDBs themes_gray__DEpD2">Strapi Cloud hosting technical documentation</span></div></div></a></li></ul></div></div></div></div><div class="styles_lowerSection__DM_BA"><div><a class="styles_lowerLinks__KEcMa" href="/contact-sales"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="ChatCircleDots.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="ChatCircleDots.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Contact Sales</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="/demo"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="CursorClick.svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="CursorClick.svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Interactive Demo</span></a></div><div><a class="styles_lowerLinks__KEcMa" href="https://cloud.strapi.io"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Cloud (1).svg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="styles_linkIcon__vtFAP" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Cloud (1).svg" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="styles_linkIcon__vtFAP" srcSet="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 1x, https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg 2x" src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg"/></noscript></span><span class="typography_Text___rU8X typography_smaller__E7EA3 themes_grey-900__V_fdU">Host your Project</span></a></div></div></div></div></li></ul><div class="styles_githubBtn__9fwSc"><div class="styles_container__f4_OV"><a href="https://github.com/strapi/strapi" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24" fill="#FFFFFF" style="margin-right:8px"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.97 0-.88.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.1 0 0 .67-.21 2.2.82a7.63 7.63 0 012.01-.27c.68 0 1.36.09 2.01.27 1.53-1.04 2.2-.82 2.2-.82.44 1.09.16 1.9.08 2.1.51.56.82 1.27.82 2.15 0 3.09-1.87 3.76-3.65 3.96.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.001 8.001 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><a class="styles_ghLink__rUZmO" href="https://github.com/strapi/strapi/stargazers" target="_blank" rel="noreferrer"><span>65.2k</span></a></div></div><div><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" class="styles_iconDark__Gdpf3"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.922 8.401L7.714 6.165a4.08 4.08 0 00.546-2.028A4.14 4.14 0 004.13 0 4.14 4.14 0 000 4.137a4.14 4.14 0 004.13 4.137c.727 0 1.446-.2 2.086-.583l2.198 2.228a.264.264 0 00.38 0l1.128-1.14a.267.267 0 000-.378zM4.13 1.611a2.525 2.525 0 010 5.051 2.525 2.525 0 010-5.05z" fill="#344B80"></path></svg></div><div class="styles_button__dXCXN styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_white__JBiEk"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_white__JBiEk"><div class="styles_hoverCircle__rhm0o"></div></div><a class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV styles_buttonLink__JtOwZ" target="_blank" rel="noopener" alt="" href="https://strapi.io/contact-sales">Contact Sales</a></div></div><div class="styles_button__dXCXN styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_blue-500__md7ml"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_blue-500__md7ml"><div class="styles_hoverCircle__rhm0o"></div></div><a icons="" class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV styles_buttonLink__JtOwZ" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io/dev-docs/quick-start">Get Started</a></div></div></nav></div></header></div><main class="styles_main__H0PiI"><section class="styles_Hero__wTUb8" style="--home-hero-animations-grid-cols:2.04fr 1fr"><div class="styles_background__Yu34K"><img src="/assets/use-case/strapi5_hero.svg" alt="shape" class="styles_img__sgatE" loading="lazy"/></div><div class="styles_heroWrapper__GslZr styles_wrapper__bspHs"><div class="styles_innerWrapper__SFDQm"><div class="styles_LabelTitleText__a9uAE textAlign"><div class="styles_wrapper__H46L4 styles_strapi5Wrapper__WmLdz"><div class="styles_contentWrapper__sb2gY"><div class="styles_tag__xGRtA styles_tagPink__ZiRS_">New</div><div class="styles_textWrapper__gPPhR"><p class="typography_Text___rU8X styles_text___SdKO normal themes_white__terWd">Strapi 5 is available now!</p><a icons="" class="styles_Link__mwEVw styles_link__ihDwG styles_linkPink__Y3OmR" target="_self" rel="noopener" alt="" href="https://strapi.io/launch-week">Start building today!</a></div></div></div><div class="styles_textContainer__9tcck"><h1 class="typography_Title__Axpg_ styles_title__s5HXK title-hero themes_white__terWd"><div class="styles_titleContainer__3ANGn"><span>Build modern websites with the most customizable Headless CMS</span></div></h1><h2 class="typography_Text___rU8X styles_RichText__neCge styles_text__eDYPb purpleLinks themes_white__terWd">The open-source Headless CMS for developers that makes API creation easy, and supports your favorite frameworks. Customize and host your projects in the cloud or on your own servers.</h2></div><div class="styles_container__3iiDm"><div class="styles_codeContainer__vsiBt styles_dark__aPrN9"><pre class="styles_code__wltEs">npx create-strapi-app@latest</pre><button class="styles_copyButton__1yY0c">Copy</button></div><div class="styles_orContainer___ib_a"><div class="styles_divider__rVcbE"></div><span class="styles_orText__tDUya">or</span><div class="styles_divider__rVcbE"></div></div><div class="styles_textContainer__9tcck"><div class="styles_btn__oh15o styles_buttonContainer___rpsz"><div class="styles_button__bQxgX styles_blue__oC9eX styles_btn__oh15o"><span class="styles_shadow__V243G"></span><div class="styles_background__cTBr5 styles_blue__oC9eX"><div class="styles_hoverCircle__rhm0o"></div></div><a class="styles_Link__mwEVw styles_buttonLink__LImRE typography_Button__PN2AV styles_buttonClass__XSnYR" target="blank" alt="" href="/demo">Start your demo</a></div></div></div></div><div class="styles_featuresRow___DLrf"><div class="styles_oneFeature__Y7F90"><div class="styles_featureIcon__kDCzJ"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ssOIb normal themes_gray__DEpD2">Open source (MIT)</p></div><div class="styles_oneFeature__Y7F90"><div class="styles_featureIcon__kDCzJ"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ssOIb normal themes_gray__DEpD2">SOC 2 certified</p></div><div class="styles_oneFeature__Y7F90"><div class="styles_featureIcon__kDCzJ"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ssOIb normal themes_gray__DEpD2">GDPR compliant</p></div></div></div></div><div class="styles_animations__OCE8C"><div class="styles_oneAnimation__TwjmG"><video autoplay="" playsinline="" loop="" muted="" class="styles_oneVideo__3_yjH"><source src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Homepage_animation_one_7c478bafc7.mp4" type="video/mp4"/></video></div><div class="styles_oneAnimation__TwjmG"><video autoplay="" playsinline="" loop="" muted="" class="styles_oneVideo__3_yjH"><source src="https://delicate-dawn-ac25646e6d.media.strapiapp.com/Homepage_animation_two_a91fc01a48.mp4" type="video/mp4"/></video></div></div><div class="styles_animations__OCE8C"></div><div class="styles_clientsLogos__xfG58"><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="orion_health_logo_grey.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="toyota.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="Logo-engie grey"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="walmart.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="Delivery NB.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="NASA NB.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="societe-generale-2.svg"/></div></div></div><div class="styles_ClientLogo__L_sZh" rel="noreferrer"><div class="styles_logo__gjhnP styles_coloredLogo__l_PB_ styles_coloredOnly__rgNwE"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="Accenture 1.svg"/></div></div></div></div></div></section><div class=""></div></main><footer class="styles_Footer__IEriN"><div class="styles_wrapper__JarSQ"><div class="styles_leftSide__h1O_V"><h1 class="typography_Title__Axpg_ styles_title__LUwKo themes_dark__3Uwp9">Build modern websites without sacrificing customization in minutes instead of days</h1><div class="styles_contentColumn__CicgJ"><div class="styles_codeContainer__vsiBt styles_light__ImlN3"><pre class="styles_code__wltEs">npx create-strapi-app@latest</pre><button class="styles_copyButton__1yY0c">Copy</button></div><div class="styles_featuresRow__NL_p_"><div class="styles_oneFeature__Fh5WO"><div class="styles_featureIcon__rw8Nh"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ESC75 normal themes_gray__DEpD2">Open source (MIT)</p></div><div class="styles_oneFeature__Fh5WO"><div class="styles_featureIcon__rw8Nh"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ESC75 normal themes_gray__DEpD2">SOC 2 certified</p></div><div class="styles_oneFeature__Fh5WO"><div class="styles_featureIcon__rw8Nh"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="icon-image"/></div></div><p class="typography_Text___rU8X styles_featureTitle__ESC75 normal themes_gray__DEpD2">GDPR Compliant</p></div></div></div><div class="styles_scrollWrapper__EYyGd"><div class="styles_logosRow__0y8dL"><div class="styles_logo__Ekkew"><div class="styles_ratio__bpoRn styles_notAbsoluteFluid__uibIY"><img class="styles_Img__QpX3_ styles_notAbsoluteImg__ccv6T styles_cover__xjUrv styles_center__7K_1M" src="" alt="logo-image"/></div></div><div class="styles_logo__Ekkew"><div class="styles_ratio__bpoRn styles_notAbsoluteFluid__uibIY"><img class="styles_Img__QpX3_ styles_notAbsoluteImg__ccv6T styles_cover__xjUrv styles_center__7K_1M" src="" alt="logo-image"/></div></div><div class="styles_logo__Ekkew"><div class="styles_ratio__bpoRn styles_notAbsoluteFluid__uibIY"><img class="styles_Img__QpX3_ styles_notAbsoluteImg__ccv6T styles_cover__xjUrv styles_center__7K_1M" src="" alt="logo-image"/></div></div><div class="styles_logo__Ekkew"><div class="styles_ratio__bpoRn styles_notAbsoluteFluid__uibIY"><img class="styles_Img__QpX3_ styles_notAbsoluteImg__ccv6T styles_cover__xjUrv styles_center__7K_1M" src="" alt="logo-image"/></div></div></div></div></div><div class="styles_rightSide__1iws0"><div class="styles_linksWrapper__0I9Nm"><div class="styles_border__zVevo"></div><div class="styles_content__nlltd"><div class="styles_titleRow__Nugcw"><div class="styles_linkImage__MmENo"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="Cloud_purple"/></div></div><div><p class="styles_linkTitle__Riy_R themes_gray__DEpD2">Ready to deploy?</p></div></div><p class="typography_Text___rU8X styles_linkDescription__ESxeN normal themes_gray__DEpD2">Ready to deploy? Start building with a free account. Set up is fast, simple, and free for 14 days.</p><a class="styles_actionLink__0Sxr3" href="https://cloud.strapi.io/"><p class="typography_Text___rU8X styles_actionLink__0Sxr3 normal themes_gray__DEpD2"> Start Deploying </p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" class="styles_arrow__CQejf"><path d="M14.03 8.53l-4.5 4.5a.751.751 0 11-1.062-1.062l3.22-3.218H2.5a.75.75 0 010-1.5h9.188L8.469 4.03a.751.751 0 011.063-1.063l4.5 4.5a.75.75 0 01-.001 1.063z" fill="#4945FF"></path></svg></a></div></div><div class="styles_linksWrapper__0I9Nm"><div class="styles_border__zVevo"></div><div class="styles_content__nlltd"><div class="styles_titleRow__Nugcw"><div class="styles_linkImage__MmENo"><div class="styles_ratio__bpoRn styles_fluid__HqCOh"><img class="styles_Img__QpX3_ styles_img__wzegy styles_cover__xjUrv styles_center__7K_1M" src="" alt="Buildings_purple"/></div></div><div><p class="styles_linkTitle__Riy_R themes_gray__DEpD2">Explore Strapi Enterprise</p></div></div><p class="typography_Text___rU8X styles_linkDescription__ESxeN normal themes_gray__DEpD2">Explore Strapi Enterprise with an interactive product tour, trial, or a personalized demo.</p><a class="styles_actionLink__0Sxr3" href="https://strapi.io/enterprise"><p class="typography_Text___rU8X styles_actionLink__0Sxr3 normal themes_gray__DEpD2"> Explore Enterprise </p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" class="styles_arrow__CQejf"><path d="M14.03 8.53l-4.5 4.5a.751.751 0 11-1.062-1.062l3.22-3.218H2.5a.75.75 0 010-1.5h9.188L8.469 4.03a.751.751 0 011.063-1.063l4.5 4.5a.75.75 0 01-.001 1.063z" fill="#4945FF"></path></svg></a></div></div></div></div><div class="styles_maxWidth__UJE63"><div class="styles_wrapper__bspHs"><div class="styles_content__Et4Tr"><div class="styles_leftContent__f_lyl"><a class="styles_Link__mwEVw styles_Logo__eg9yu styles_logo__va1pu" target="" alt="" href="/"><div class="styles_img__mNwIr"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img alt="Strapi logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="styles_img__mNwIr" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain"/><noscript><img alt="Strapi logo" loading="lazy" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:contain" class="styles_img__mNwIr" sizes="100vw" srcSet="/assets/strapi-logo-dark.svg 640w, /assets/strapi-logo-dark.svg 750w, /assets/strapi-logo-dark.svg 828w, /assets/strapi-logo-dark.svg 1080w, /assets/strapi-logo-dark.svg 1200w, /assets/strapi-logo-dark.svg 1920w, /assets/strapi-logo-dark.svg 2048w, /assets/strapi-logo-dark.svg 3840w" src="/assets/strapi-logo-dark.svg"/></noscript></span></div></a><p class="typography_Text___rU8X styles_tagline__qVmHq typography_legend__FRDBs themes_gray__DEpD2">Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.</p><div class="styles_badges__B1Ype"><img src="/_next/static/media/soc2.5af5f027.png" class="styles_badge__BlyGH" alt="Soc 2"/><svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="styles_badge__BlyGH" alt="GDPR"><path fill="url(#gdpr_svg__pattern0_1463_84)" d="M.576 0h36v48h-36z"></path><defs><pattern id="gdpr_svg__pattern0_1463_84" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#gdpr_svg__image0_1463_84" transform="scale(.00833 .00625)"></use></pattern><image id="gdpr_svg__image0_1463_84" width="120" height="160" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAACgCAYAAADHCaiQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nO2dd5xU1fm4n3NnZmd7YVk6LLDAggoKtoiKFFEURaMm9hj9aayxYYkm0Qh2jSZGjYkYDYnG2KKACCgGO3UBEaQJ0pbOFrbOzsz5/XHbudNnd5Yd8/m+fnCfOfecc099z3vKvVcQRXqPe0VzuXscId3FFwotazQEh6Fl5iLc0YLYIgGRAk5pZClNVMeJ9EOwqQ60r2WwcYHw7/93wF/5zbb5Pw9G8h4x1aWnzzuCjB6PCC1rAmhuhACkkc94LEAYbqSA01HMZIk0YIJ+GWycg6/yni1zT/smNKmOCh504tOar2DkL6Sn+Akh3LlJN1wpjYrmf6bD/FBESn+taNl/t6fmy79u+OI2qze7TBh44lO0FJ7yIJ7ix4RwZVghkyloYf5Ppo47XCX/MFqeEJoXLfusYEZXT5eugz/ev3UuAJrpoaXgxOtwF92LEHpPlEZBS0VNqhozIgv7r+rWWpaKLkoXlsYQYqUxjVho4C6615d/4nXGFb1GSk+fdwSZ/b8Qwp3vqFBHL0qHXpNO3NGDb3SW+Gtp2nTilrmnfePqPe4VTWQOmiZE5tDo6kfYRlRCnEJR40wLVtOWnizQvGjePvm9j/+32+XucQRa9gTLOIo1xgiRHKdKkr1vuzNpz0LLnuBy9zhCk+7iCxGuBCe38bg9JJH7Hkr+gYhwuaW7+EJNX8RANx4co7b5JxkjyzDOrJ8p4rQS08hSyihNWWhZozUIDrMrVLESI2VGxGEJlhWObDtbyWiHRtMWthZgZHozwWEaWmauwxhTMxQ6LkuZIGM3lrZwqFJJF7bqWqQ3a5m5bnDFNpLUShbEZ2fgFHAaWS5hTJoYfdHqz4UW0+qVKieixiKFawOnXBzd739fhEBzGlc4K8zhloBqFhJrBcxyawOnWPoWV9K3uLJtkSS1stfx7LYXQYwx1+rRIQOztcsTg8E2lESK2EpD2/nUwQsBmPb5ea2PJ8y4TGkSU86a7mD2QuN/Vs8UOHqpELFZWpGkhtXG1lYWMKZ8MWPKFxvJbkucPxxxh1vKqtEEYddFLDYghTZM640MyYAuW8n2NgFQmHWQId03ATBq4DKqG/MAaGjOZOPePonHH1Y+6c36CpY6JYrUSJVOHJtFkv7jcBtFCJhy9nOUd/3e4f6XS6cAsG53X+58e3KSkaYmbYdKNMevUOvYkRmpXI/Git9UcATnLE9TgtEINuwp5bK/PcLMVacgEQghEUgkglmrTuGyvz3Chj2l2MNL7DizPE2Ku/xBsF7BakVaK0ko46JUelYsVio7FRxq0CC55uS3Ihg60bmuOYdHP7iaBl+moV4FDb5MHvngauqacxKOB9DvrU61ZPqzZq8YhfQcs3JN50Qst1SLWslS0rtoF5cfP4u8zDqHezwe0WcNORmNbK3qxtYD3cjJaGREnzUJhTU5L7OOy4+fRe+iXUreRdqzZk2N4v0jARYkFlcy/6Qd58iyFeR5Gxg1oMLhHo/HlC9m/trjuXja41w87XHmrz3esKbjhzV51IAK8jIbGFm2Qsk7ac8JbBMmI6m1QIpzqrjihJl43c0AnFi2AgT8v5PeYVivdQA0+LJ45atzqDGs4nDrV1Kx9TDeWzkaf9ADwK1v3MU5Ry6A0KmPwgXZdfz8hPfIzmgE4Ni+qwG4/PhZ9O+8HYBmv5e/f3U2++uLUprvVIroe+730mFFm6rZ+t2RDMN6rufx85+ib/FOe1gU+uXv9vbm9jfvZL1pKEUUdSxJxN2+PqjLFp76yROUlWyz7mvaHN/v785db9/O1zsG2b3dsknSh12Fg2/5nTNjkVq0mbME2Cx9M3ybGHbXFvP+N6MY2nMDPQt3IxBIIVmw/jhu+NdvqKzuknQSE+X9DYW8/80oBnTZRr/iSqSQCGDR90O55h8PsOVAzwhllV6shc07hWFgWOMQdo7jsSDEWEsBC6hqyGdXbWcwKhcJldUl1DTmKvenXbimIZfK6hLrvhLYVduZqvr81Oe1HViLaDSFrlTFM66I4JaqfwjcWoDRg5aytaobU2Zdz+6DnTlpYAVet8+Z5nZgr8fHSQMr2F3bmSnvX8/Wqu6MHrQUtyuQWJl0MLsKB9/6O6KJ2YPVXh6TQ9VBauS4vqsoyavil6/fy+LvhzFn9YkcU7qGDXv6sudgccrvp8qQbps5rPsmbnjtNyzcfBRzVp9Eedfv2VdXxPbqriRYMB3Gou+5m6Vj7mSJOliDtekg4nCShlTnvCr21XWK6adPp11U1pTgD7ise3ndzXTOrWZHddfE09YK7lm0m311hTS3eK2yc2t+ehTsZeuB7ljDk7VGbXOGy0emx0dtU25UP+3NxlKlWolm7ZuVK7Em/olwgosPJl9+/Cx6Fu6K4kdP2tYD3fAH3Mq9oNmfwY6qLk47oR14R1VXmv0ZtjvgD7jYeqAb1v63qb1CeFiv9Zw59NOYftqbNatCrZ5teAip64QkSS2iCcmY8iWMLV8cxY968zRh1ZCJY6GNLV+s500k5r89WLMGZXVwNv9JSGpQT9IQ6Nd5O32LdzB28OLo/tPEWIlsABKTxw5exPDeaynKrk3If3uwsdARqREoXcrs8og4bAaV9k0UdokAV534H8aUL0YgKcw+SN/OlfgDLlZXDkBKqPdl8czHl/L1jvKkNUJH80kDKvjFyW/i0fxommRYz/UIAet2ldLgyyQoNd5bOYY3lk44ZGlzFZbf8jtrrDUNDCCs0gT2j6hsxmFF4mCJxtfbB9Epp4aJQz+jc24NAnBpkm4F+/H5M5g6+zpW7ShXwpNmHFpO9vWtB7qzv76Qc45cQFnJdstb59wa8rwN/O3LH/NWxWlINXA7p1f0PWezdFxRpzpm73OMOzHEaidKmEgs4IzDP+fpnz6Oae1t2teTy//2CPvrCyPcz4w4DVgtyCjSq2g3b1xzB52ya0AIpISLpz3Oiu3l8QOnWLSIrTNsX5HEWo4pUimISCwhK0PfQPAH9R3LgqyD+AJup38rfpkSFhoITbQtHhNlbM7OaCKIIBDU75eZ0ZRw2FSy2ypNR6FGcAvz0zYeW76Iyuou3D/zBo7v9zVXnDCDo3qt47ONR6f0Xh4PnHpsFuOPz6ash76b9F1lCx8uauCjJY20+FObLzB2vZA8Me9K9tQW8+sz/8q48sUs3HTUIR9a3GGObRFLpStxRuBMdzNCwCUvPcqu2hI+3zicldvLGdHnWz7bcHTK0jOgl5vHf9mZowZmIBRbYNhAL+eOymHFBh93/WkfG7f7U3NDACTlXTfzi3/ez+LvhwGwZld/bhn7Km7Njz+Y4h3aOBK+XWjWQlQLORYrKj7GKlaWpwlfwE3AzKyhlnO9DdQ1ZccMmyiX9/Hw6pSuFBe4kFJaFRzKB2qDXHrfbtZt8SUefwz7QmiSLE8zDc2ZDnevp4WgFLT43VHDtgdrDoXtWMkK5QQUvlQLREblRp/XqFzVHaVyQ8KSHLtd8IfbO1uVa8rBhiB1jdKqXIDiAhd/uL0zbncy94ouMiho8GWFuTe3eGgJeGKGbQ9xO9IbajGr16TiEI3BMKJkaliNOglD96yTchhcmmFVYk1dkAdfrmJBhX46Y/SILH5zZRGFeXoDKO/j4ayTcnh3QV3i94pcQGnHysF3Q0J/t0ZSZSSEpidBPvukbAMFUkpueXofny63j7y+/d969lYHeOW3XSx1ffZJ2bz7SX1y92pNng4xO89Fp5u0otG6NDi8n/2arw3bWvi0oinM/6fLm9iwrcVyPrxfBi7N6ed/gfUsmRsM0SThSGOPT0mLUOJMkDMzBBkeuxlv2+2P6n/bbtt6zvAIMjNEgvdK0CZJA45uZIUZXGYjiMVgbflF+TegZCudc6vi+rP/KelJhM1US4mUkqAkqv+gtP3ZksC9pOo3Me6cV82Akq2tCtsW1sI6ndqbw3q2jM0SewwQkfm0w75g1IBlMf2EsUyCFRGOsTOyfyGE018S8ScjowYs4/TDv2hbJK2QcCNLFbXCSJBjXHMZZ6t2HyzmnRWnJh5vgmno09VN12IXLpddafnZGkeUZRBJ8rNtE8TlEhzWP4Pd+wNsNVV3rDwmmnaDxwxeTNe8/bzwyU8JSFdSYdvCzqcLY1Wo42I0Dnfqlr8Xj0svsJK8KoZ038SALlvpV7wdf1DPaGOLVz+2EzG6+PfVBEz5RScuHJ+LJpyG7nGHe3nvie5EEtVfXrbg9aldCUr494d13PfXA7p6j5bHONI59wBZHn293a0FOLFsOR6XnyN7r2PvQf2gfEvAza7akqTiTVYirGSBQ5cL83+ShM4ChayCnVhWwYPnPEu3gn12vNZiBmze34s735rM6p1lYWH1pChpi8KH9/fw7uPdcWm2Wo61ehWP/QHJuXftZPWmlij3JSwfoXx49408ccHv6d95B0hpOAuLd9WW8Jv3buKLjcNjxtNW1o0sdfVIGhWGUWmh786Kx46FEskXG0dw6UuPsnjz0BADQDBvzYlc+tKjrK4cYMehhAVwNLwo3LnAhduVXA+LJS5NjzPyfUnIwFldWcalLz3KnNUjkUZZSqNyF38/jEtfelSv3DjxpMbIimhMSYVJYsoSfqPK6hJue+MuK6MAB+oLuOfdW/QD5NESaW5bmg0vKreTxL1X7IGwqj6fe9+9hQP1BYazQCK47Y27qKzpknA8beHYTxfSBg75d0LZCjQBu2pKqKovoCi7liHdNkW/d1L3NcsvxZzIfePwkG6bKMqupaq+gF01ndEEnFC2IqGwqWD7VKUpUTuETJKdMrZ8MZ9tGM5FLz7OxS89xpqdZYwpXxLV//+KjC5fwpqdZVz80mNc9OLjfLZhuH7S8hCJuXdl/DTG49DtpzauT3vdzSzfNoR/LTmDgGE5X/7yw/x4+HxcWsByC5NEtwgt7603rEI56TREYJcIsLOmhMtffphGnxeE4LrX7uPiYz/A626m2e9tU/yJsG5FW47YndBhTOBoA1E5NJyI4yfZsFH4lBFZvPxbdUxru1w5dQ+fLG+MnE5TInUGlcPyF8e9Hdgde3swROJp5mgdXUa5Fs092fviHENTJnFHnzgJC8tfHPd2YHdCajhWDwtl83cqORG/7SGh06OIftKbjbfsmLpbuWhOnwhxi8f/J2klmlPPYVesNU5IZ0+Kye2namJxY7O9I6QaSK1lKSWNzVHuG2kxJo1Z2Q82/jnORmOz+TsWq8uLCXBpp8rYfqzBSsbkVd/5WL3ZZ1nC5hZga3n1Zh+rvvNFvq9Q8i1ETM7yNFKSX5Ww//Zgd5h6lWC9Ft5kqV6MwUm0LI/bz+Tx07njrcn4/J7o/hPpwU1BLv/dHiadnENBbtsOqdTUBZnxWT2NTeq3Hls3Bh1d+i0DS7by8pfntClNbZHY24XJGDlJGjylnSoZU76YspLtfLurf3KBI0j1wSDTZx9sczyWJGqVOwwxJ48tX0RZyTZe+WoS1pO6Mfy3BxvbhUSeY6ZQhAji0QLW77GDF+NxBRg3eCHf7e1tufuDLoIyvY+KAc6Zh8FuzY+mfBRjbPliCrLq6FG4l70HOxmu6Gej23FxI3yhQ9XfwhhvQrcASYIjbCXmeeu5b+ILDO+zFoCi7BpyMppoaPFyoL4QgK+3D+J3s66jtilPibMV929XNn5aq342/6jfSn414SVyvY0IEaRHwR6EEOw5WITPn4HP7+bFz8/nP8vHhYVtL3a+J0stT2E6hJQ1cVgV5bcv4OGL74bTLX8fI8tWkOFpQQBut588bwOzV5/MQ7Ovoa4pJzwtidz3ULKVP+WCEGyv6sqqHYMYU77ENiCFICejEZ/fw9T3r2POmpMihm0vDnl8NIYkUxAxOoEA7jr9b/x85HtW1K8umshDs69Bqi/bbp1dc2glSjkUZh9k1k03UZxbpV+QcOazz7N5X89D3ihjG1mRMtRGlkC/4h0IoL45k+yMJvp13oG+Vywih01niZDHTjk15GfWEQi4CARdeD0t9C2uZPO+Xikpw2RYS6irJDdrMX5HnvYUZtcyvM+3vLdyNOf8+RneWT6OYT3X0zmnOnLYtBPp+BOJTxpQQVOLlzvevoOr//EA26q6MrZ8UVT/7cm2kWX2abUXhdo5SakIw8AK4ZMGVlDaqZLXlpyJlAKB5KfHzGV3bTEL1h0XOayh5tKDsRtghN0bIeCO017h7YpT2bS3FwhBp+wabh77Tx7+4Bp9zh8lbHuw80VopkQbVxMyQGLfMMPdgi+QkZh7WlhUETjGZSEkLi2gv9dLcde0IEJIAgFXzKhTPwaHVW6ECkoqcqn8DmdfwJOUe9pxHJFSRHzIOxjUOsSuiGxkRVoZSWaAT1ULTPR+h5pJwE+asPNMVqpsmxQXZJ9ObfwcXTtIOqYpkjjfVRmmipLlVgaLFZ2U3H7qdONzOtLh3iGMJMvTxO2nTrevJbLT1kFsbxeqYnpSv+lrZC42q39TwFJSlFPLyLKV+scwrMuydeyIu7XxCEaWLWdk/5UUZdeQ7mI82YCz5kF3c3xNWihGVDRW/spWsgCXCOISAVxakB/1+5o8bz2nDl6ISwvi0nR3oUkcb6dPgLvm76dr/v6E/ZssNInLFcDl0u9/6uBF5GXWc3y/r3U3w922QWTasH2qMtXSyh0Qr7uZO8b/nVMGLUUgycuqpzCrjma/hz21+o7M1gPduX/mDWyv7pZUki46ZjYAry89M6lwvQp38cCk5+lTtBOALvkH8LpbqGnMpbZRXztfsP5YnvzwCsd7pa3pZQdy++3LtdK4avZ7eWzuVbyzfBzdCvZRmKW/GMXraqFX0W427u3NHW9Ptis34RFEMm7IIsYNWWRfTDDs9upu3PHWZDbu7U2vot143fpDaQVZdXQr2Mfby8fz2Nyr9HPOaWI9m2LsJgm7e0tjrhK69ZRIc1F7ZBtSFpSCpVuOoK4ph5MHVOhRCsmnG47hxtd/TYMv276XObyEsaQou5b8zHpyvI30KNzLjaNfp1v+fhasPw63FiDH20iGu4WmFi+O7dIIcTb5M5mz+kSO6LHR+MSPfsTn0TlX87cvfkwQV3gZpAG7rfoJXdRwWJGR6zOM1QDWtdZzryL9TfA+vxuPq4UehXvQhCQAzkYXkaG86/dMmfQcxTnVaFqQTLcPgDd+MZlgUGN/fSH3zbiRhZv1N9LFi1MTkh6Fe5BS0hLwkOH262m0si3TjrVwA8v4K6z/2c7xLE3r0Bd2L2gto5+IWLRpKBOffY5XvjqX0k476Ve8I8HMwcLNR3Ll36eyYU8pmW6f3iGFJNPtY8OeUq78+1QWbj4y4QLrV7yD0k47eeWrc5n47HMs3DRUeaN7wmPFIeVwI0vtlR0oZSVbOefI//Lsfy/W16iRnHbYl+Rn1vFWxelJxdUpp5q5N19HXmYDUupfJJ3wzAv6q4uTkJ+MmEtNUy7z1owEBBkuHzeN+RfvrRzDd+ZHptNMIlSwqZawG0QHVLj+cFaG0eDsscXr8SX90NaP+q/k5Z/9lrpm/QVpud4Grpo+ha82HZVUPFaaHAUi8bqNNKWhRF7osFSOdFY08dhU220fQ6wCs4w2vZB1dxnmHovHlS9i7a5+XDztMS6e9hhrd/Vj7OBFScdjVa5jtQiaWzLstB/CVapEOPw9WZHGxUQXKdTxGJkejKSqIZ/LXn6EjXv6sHFvHy57+RGqzKfuk44T0mL+kyBH3w92TJ0IV9nRGEjdx53UOFvPQkikeYDAHIFUt2TjtPIr7IpPU478xndTQrcKE2k0zgjaxqYGiTnfjc/SXFNX3O1PRiUZp5lMRyWnL7fPSlaqNEwq40plmn5AYu8Hh6rp0N8dMZ8zLfq0YvPvD4PddsGaY56if6TAevjMcpYx2FSFifhNgNNSOqCht4GdD4CHeQqVRHocdoNoK5vGllnxacHpME4kzoqRZaoh45r12GiIcREvXhLw80Mf9yKdWUtTDjeyrE1+xaOixePy/0laSYSVLHMQVP5Zaoo4bAaRqeG0FJnaPLYzuy3jyEw4YFWyAHt/WMlcVDYbRyoGYKWGUxllW1kqaYuz3JoOHOWbDVLR0Ml0JbM3K2HawqoNkDasSPrYUlHZ7TCiwNlqWxuxGYe5qtJaViMV6cQJlkMacPjLSCNlIllJVQIBZ7dJB/5hiVsGW+L7+j/5wYroM3iMo3lGGmr+TyKLWlbpym4RqLbGPWlcEpjvZbGDSOMKyOhs2mYCp/XdatZfTCaM8S8t2ColZ0WnK7v12Y0IuSAUG0e9ZldnRBY6SyV8W1i/sUgvxs61zqQ1axFtKond11W2u3l0Np7aTwUDCGVulx7MD0rClir1aZ+0VBNCWmpJX8+Iw6Rurg6kT1cw06em00hsOrNbWi5mLiRSmY9Ka3w1XnkvicFYTTxVbK0ciTRhIezGrIzJ6cpuYfxANZLMzJi5sz0Zw1E0NgrDOurSNpZG9AJhaJN0YKkUhzGkpDG7pVSMGlMtGwXteNEs4HCIwMJs4Slia/w3SzQNWNXcVqGlMbv1mZA0fgq7K5puIiSzxGDDn7rn0GY2k5pObBoKZlrTmDVMN/XUoOqGotfjsFQCWydSW8mapuH1etGMXm3tgKUBW+WDSHt2S0NnS2vQM3qt2nExMydjsm5xm4EMYyQJzs/L5dxzzmT0ySMpLe2NNyODuvp6vv7mW956ewaLly43WqZuL/z88os4ZdQJhEpzs499+w6w8utv+OSzr9izd59huAkr7JT776Z3rx5hYQHq6xtZt2EjM2bOYcvW7VbYO2+7gcOGDIoYprGxme82bWbGrLls/G4zjiPXHciidMAIpeOZFrFzhUqvCKWyo7K0RqmkWMD4cacw9f5f0bVrCZE+keP3+3nz7Rn87sEnaG7yIZE88uBvuOTC88L8qlJ7sI6X//4az73wMr5mn3XfD2a+zmGDI1eWKfX19dx5zxRmz/kIJLw6/c+ceMJxMcM0NDby0CNP8+rrb2MZFJZKP/SsIbA/NmqoQ1s165yoSe7s+YnzpLMm8Pwzj9Gtm/PjVuoHM9xuNxdfeB4PPXCvc9yPI/l5udxy0y949g+PkJnlTSpsTk4Ojz98H/369rHNDGuuqQxPCmdlZnL/b+5g2NDD7PsI0WHstrJrzIXNzuNcjhPWoB2TlcZjWsDxuEtJZx564B48Hv0djsFgkPdmzuGdd9/nQFU1w4Yexo3XXUnvXj2pq6unqroGl8tFIGC/PR6gurqGX9//CABebwZDDx/CueecSVGh/gzS+HGncNUVl/D8X14OXXlk0eJlPPH08wB43G4mnjmeSy86HyEEubk5nHP2BP7wp78aedMDf7t2A/dNecwKM37cKVxx+UW4XBoZGRlc8OOz+XrVGvsm6j0PIbsBx2K6Lva46FTCccRs5VhKIC7/7LKfkpeXi5mOJ59+nhde/LvVK9asWceCT7/gmqsu45Xpr7Nte6UdgSJNTc28/8GHlpH2zrvv8+rrb/Pa3/9Mly662r/26p/x4t/+SYvPuUVaVV3D0mUrrLArV61h3JiT6d6tKwADyvo5biel5GBdHUuXrbBskEVLKhh18gmU9e+LEIIBZX2tRSDTT0ewZqpZKfTVKqOD2dYjGBZyAv9JU20bcSbA48aMwvyszdZt2/nLtOlW5bo0DZdLY++efTz86B+orNyFSzNeSmCteinfTFLdgQ3fbeKFF6dbfvLz8zhmxJFxw/bq2Z38vDzremNjE5FEVc29e/WguFOR5d7Y1BzmpyPYWMnSe6qjrxrWqrUAgWFqxWCrpMwxNg5nZWXR1ehdUkoWLa4gGAwgEQweVMbzzzweXqrA1IefYsGnX+jJdOjbcANu8dIKh59evbojFglH2KNHHMn0aX/SC8Tt5rAhg8jJybYK6quFS50aUAjKBw1g+kvPWmEGDx5IUVGh1WsXLlqKvd1qluyhZ/vgu2X86AWjqlOz8Ow37kdns9ITYU0ThrGnX/H79coFidfrpX+/UqsS1M+/5uZmWypTdbfSrXAwGHT40YQWFrakczGjTj7BcS9TKpZ/zey58+1SMMIU5OdxyqiRYWkAWLd+I/9+y/xkQQcNvgY7dpMEIMxtOpwiEMq1yGyGMgs4HtfXN3CgqhohBEIIhh91BJoQCASBQIC6unoOHqyjrr4+fOqkrrRFcDf5+OOOdvip3Lk7YtjQeGprD/LOu7O46tpbaWxsDPMXLezsOfO5/KqbqK1N4Tec2iAhLzaWjj/WvMrqfXbnj8iGppZIvdIT4M8+X2j11MHlA5l01gTem/EB69Z/x9gJ+hy3c6dOfDDzdUfPcqQ6invf0t5cc9Xllp/GxiaWVqwIC7t46XJ+/4c/W24NDY3s2rWbffsPRL3f2nUbuH/qExxxWDm/vXeyMswsY8+ePbrBhj1b6Cg2tguxB0ZhOpg1ptScqU5jsKX+lBE9Fk9/9Q0uueh8PB69rT364G/oW9qLt/4zi337DtC3tBeXXHR+mBq0LHbD3eNxc+TQwwHIyspkxPBhXHH5hXTtUmI1gH+89iYNDU1hYauqqlm0uAJ9p8hcC1DZWbmgL6AsXlLB0mUr+Mn55zBk8EAAbrjuSmbOnseBA/Y3KNTmd6hZ2S60q99qAUarFGbFxWMpnb1ayri8adP3PPH0c/zqzptxaRqZmV5uu/k6brv5uvBKRVfrW7Zut7aLzevFxZ147+3pRJOly1bwp+en2XNxJSzYLR4RnUPDAASDAZ55/kWe/+NjCCHo2qWEa6/+GY8+8YxyH4l1QuUQc8iJDj1HwlgN0TulsIe1OKyvZJmlkji/9PKrPPzYH2ho0Me6UJVrTle2b6/k6utuY9U33xrGmO3XMeVR2O/389Y7M7nmhskcPFivXw8Ja90HO09ROWRqBYL5H3/K6jXrLPdLLz6fvqW9LZsWw+DrCA7/dqEi1qpWkgacUH4nwsFgkJdefpX5H3/KFZddyOhRI+nVqwdCCIqeWzQAAA3ESURBVPx+P+s3bGLG+3N5860Z1NTWGmmS7Nmzlw0bN4Wlu7nZx779+mbDB3M/Zv2G75AyqBhIkq1bt+N26e+XrNy523I3ExWJt++otO63fXullWWfr4U/PT+Nybdeb6Vh0lkTeOa5F8PK8pBz6cDhEqVFqyrIHGIxer05PEdjeyyGtp6eyPB4yMnJpq6unha/30gQdkPqKDZ+SHONIM3ZbSspRe1Iq85tNSzRz2qZ43QUNluEpG3c3NJCc3W1I05dOpglqM9QK5ZFWrJbP22jLG5YXRHUpqufRTf8RWG9AKRSHm1niVDO36UL290iVQ9StheHHXx3nNFSVTe6QRSTQxcd2jiQSLORCYF0PO3QcayOzanIY3uzFlYnoPceSzU7Ky4mK+rckjawMMbjdGJH5f4AxG0PykZvxWRpT31wGmBR2VTpeitpO4M9DIr0YKsDgF7jac6adSbLMb+TxgqOPlBLU0WZlRiV9bgdyz9tYbM7i/RhKfXNFUtZpTm7LYVjVL5lLKmaKLTMo7J6iK7thSqsRAklgR3L6jEla7aRxuw2E22f6LBrzbKuzUuAFCImRzoa3haJd79DzY5xWCmXdGXjTJbeSh0H38Ha+VENx1DO8HoYO/pkxo4+mZLOnaiqqWHehwuY/9/PaGlpsfWFALfLxUkn/ojx406he/euHDxYx5Jly3lvxhwOHqzDVB65eTlcqmxAzJg1l61bd1hJy8rK5IrLLsTt1leiZs3+kO+3bKNP755MOsv5uv9AMMiuXXv4/ItF7N23HyTkKfG/8+5sKnfuAqlk3eALfnw23bqVULFiFV9+tcTSUgDHHn0Uxx83AoCXXnnNPvVh9HYz7KbNW41Tmbq7pmnccO3PAfjHa2/hzcjgpxdMIpZ8/uViVqz8xhF/omyfyVKnPWouDbanTzZ3Ki7imaceCjtKeu7ZZ/Lp519x4y13U1/fAFKvlKcen8rp40dj7v8CTDrrdK664hJuuPluvl27HiEE+Xl53PLLX5CdlWVUaBZP/P45K/7jjhnBr+682fr97doNfL9lG31L+3DHbTdGLKS9+/Zzw813s2TJckf8i5cu1ys4glxy0XmMGD6Mv0ybrlcwWCr6rsk3cewxw5FSsm37Tt6b+YFlZAoj7PCjhtLY2MTmzVtYs3aD3qPcbibfegNCCGbN/pD8vDzuuO1Gy/4x60HlpmYfK1Z+44g/UdasAVnJmPqUgsnmLEhpxDw69deceMJxNDY2MeWh33PJz64zNg0aOOXkE/jVnTfr8Qi49+5bmXDaGFpa/Dz9zF+48LJruO3O37J9RyX9+vbhuT8+Sl5erjMdhuE38Yzx1lAogQmnjbGuORf+7TC33P5rrrvpTu7+9VRWr1lH5+JOTL3/bkWH4QgrlfjVTzaG+gHoV9qHo0ccaV274MdnRSk9yM7O4v7f3ommCYe7KTt37+axJ//E479/lj89P03XesCb78yw3JcsXR6hRhJjt32eSl3kMivTuf1nr1vC0COGMP7U0UgJN99+Lx/O/wQhBF8tXMK+fQd4aMo9TDxjPA88+CQ9e3TjgvPOBuCBh57gtX+9bRS0YPGS5cyf8xZl/fvy40ln8o/X3nBUgN8foG9pb4YNPYyvV63G5XIz/tTR+I31afO4bej24bz5C/STGFKwes1aZv3nVQaXD6SwsMCK31rgsTIu7VoUMoofwU/On2Tl9agjj+CYY46ib2lvvt+y1SpLU4LBID867mh+ev4k/v3Wu2EVvHfvfv7815cBKCoq4pqrLsPj8fD+7A/55LMvrRqxx1Yl/gRY+Sy1Ov7q3VUYJ+LVYyomjx41EiEEW7Zu49PPv0I9ND9z9lzGTbiAiedcQjAY5PjjjiYrM5Pq6hpmzJprqAM9nh2VO5n/38+RUjJ61Ei7gAGfz8eXXy0G4KwzxiOBY0YcSXGnIlauWsPeffutXhTJtjO1R0F+vlHY0uohgCOsNb1QOYIfrzeDs848DSklL0ybTsWKVWR6vUw841TAXH2zEzPvo0/w+/1MvvUGunQpCbu37V+EXTPdVT/JctiZLLuhCkehOVU49OjRHYDtOyrxGeeMzfbh9wfYuWsXO3ftJhgM0rOH/p3BPXv3U1dXZ9/MiHXT5u8RQtCzZ/ewipr1wYcEAkFOGz+GDI+HCaeNBWD2nI8IBOwtwFD55Q1Xc/vN1/PAb+/i6SemAvDVwiW6TaDmUcl7xFlbiJ/jjz2a3r16sHPXbhYvqWDW7HkIITh74ul4PJ6QlULBJ599yawPPqRLl87cYYy9akeJlPzQPDnjTI4dRpaVOTN35gvBsS1q0M9SmT0h02t+L0gf3KWUaJpGbm4uAkFdfb3tNzPD8oPQD9dJKa04fL6WsFGqYvnXbN22nT69e3LcMSMYN/ZkmpqamPfRAq782cW2RyWglJIbrr3S4mAwyMpVq7n3voeJKMrMwMER/Fxw3tkIIfj0s4V4vV6+WrgUvz9A+aABHDn0MJYsW6kYs7o98OAjTzP65JGcd+5E5sz7b8hKoKlR7Qw4DiJIY7IqWsduc+SVSMeURs+QfSN95Utamnzd+o1IKSkr60dRUSEHqqosvwMH9Odf018AIThz0sWsW/8dUkq6lJRQ2qcX32/ZZiREb62mNbpuw0ZHRgFaWlqYO+9jrr3mCm6/9Xp69ujOoiUVbDeecLBUXUilXP/Lu2hubiYYDLJn7342bNyEr6UFtSU4wypHkHAuxZp+Soo76cMIcM7ZE5hwuq5N9OO/gvPOnciSihWhWWDfvn088dRzPPjAPdz368nOi0LalRwi9r6u6ic51oQ0FiisRRBhsT4O63+tRBs8Z95/aWpupqiwgDtuvR6X5gIpcblcXH/tzyku7kR1dQ279+xl4eJl7Nq9l6ysTO6a/EuyMjP1+wjBRT85lyOH6Yfl3psxRzUnLJnx/jwAjh4+DJfLxazZ8+zysYwg6XBb8OkXfLzgcxZ88gVr1qyjpaUFIaVyxNe2KTQh0IRmseO5LCX+08aPIT8/j+qaWipWfM3qNWtZvWatfoTIsPYzvZkOm8UsszffmcGSZSvoW9rbqfaloa6VRuEIL51+kmW3Of0IO/RtWtbGNYmtpiWwf98BHn3iGe67dzKXXHQ+I4YPY/2GTZQPKqN80AB8Ph/3T3kcCRw8WMfUh3/PH3//EBPPOJUhgweyctVqunfryrFHDwfgzXdm8uXCJWE9EWDNt+vY8N1mBpb1o6XFzwdz5itGippe53ATjU2RUvLHJx+iqbnZ4f7kU88x02hEavw/vWASUkqm//PfPPXHv5gTAQoLC1jw4X8oLCjg9PGjmTFzbljY5uYWpjz0JG++No3MzEw7DRidKGIX1t2ltP0ky261xejpVY0rm9Xbmzz9n2/Q2NDIzTddw5DBgxhiPG+7c9dunnzqeT7/cpE185g95yOkDHLHbTfSv18p/fuVAlBTW8v0f77Js3+eRjAYjPoeqpmz5jL51uv54stFVFXXhPcSM21qXqKw6hb6yCroK2mh8Q8c0J8jhx5OIBDg/Q8+ctRHdXUNX3y5hIlnnMp5556lzxTC7g/frF7L9Fff5Nqrf+Zwjyoi3E/SXDrQfADcXgMJX1UxB21loUPhrKxMBg0so3NxJ6prali7diP1DQ2GH+U1S0gyMzMZ0L8v3bp14WBdHes3bKK6usZMAhJdzZuPfVZV1xAMBsnIyCA/L5fGxiYr7qJOhbg0jdrag/haWvB4PBTk5wHoh9ajGE+aplFUWBDVAj9YV09zUzMFhfl43G4aGpvw+/3k5+USlJKqqmq9MSr5ysnJJjsri0AwSFVVNQUFelgzLrMcPB63NW07UFVNIBCwVasm6FRUiBCCmtqD1lJvaBkmw6KPcujOKgVzV8I8zeCo7OhsT7AjmaSt5VTHlwI2ysU+Upy+rG8XGhVqZcMal7HErtDYLMxCsAyHNrCRGGu3Ky0Y7HFEKmWUnqw8m+SwHRWP9iBsHciLwlbjMEMJ0WZGMfLSgVO9Hdre4gbhQ5DhcDUbqK2hjQoXVgeLxLEMslazSDP+YYlPAw6ArWp1m8pQ2Ya9bW1DSBJicxGjzaykK+3Ykci05QNuYK2UshvYA7RUeqS5n2QuLyKJw2AO4rKtrGgFO+6OZsXANN3SlIG1GjBfCBDGkpUwxlRhvHRTKAO3gPgszTCi7SzUozLpwaohoxqi6cjAfFE6cMQRwDLQx2Gp+HS0CCNkrJUiFOMsJQlVenDacfqLDzha09zaGmCelFatWyUtTRbm8VlisvkqQzOaNrNhB6QdG2UlIW0ZmKe5tTXa5m+XBhHiHiGo0+vI6LFS2qpJ6nNAEYeRhro2qqitDGp8acJKD1Y7czqxENQhxD2bv10a1AC2rF/2DXCProLs+WxoBHb/isyJrHYlwx1dUNFYt1PSl4F7jDq1T3RogucRPAWAoYasPm9KvFecGj3Y1LVtZXNctyz0NGKrgacbw1OakM+bP1wmVO/fKYs79/xIImsR4mQQHsBezTEMqPjc9tUrky0tkkZs2tTWqYk0YYRoAH7lwjV184ZlQUxnIkjpwBHHAI9JGE2EL7NEFbMlqRZ4WxhB9DffdBzrvVg5AdKBjBBBAQuAu7dsqFgaWiURKxig36AR7qAUx4C8GBgLDAIy4k28pPE79ARqa9is6ESmaIeKdQdMc6Wj2AesBz4G8S9NyKWb11f4I9Xj/wdmubEQjYTD5wAAAABJRU5ErkJggg=="></image></defs></svg></div></div><nav class="styles_navigation__Iwx6_"><div class="styles_MenuColumn__4_C_R"><p class="typography_Text___rU8X styles_sectionTitle__uive2 typography_small__vIMI7 themes_dark__3Uwp9">Product</p><ul><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/five">Strapi 5</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="0-Strapi Design System" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://design-system.strapi.io/">Strapi Design System</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/why-strapi">Why Strapi?</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/content-architecture">Content Architecture</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/features">Features</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/enterprise">Enterprise Edition</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="0-Roadmap" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://feedback.strapi.io/">Roadmap</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/support">Support</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/demo">Try live demo</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/changelog">Changelog</a></li></ul></div><div class="styles_MenuColumn__4_C_R"><p class="typography_Text___rU8X styles_sectionTitle__uive2 typography_small__vIMI7 themes_dark__3Uwp9">Solutions</p><ul><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/solutions/static-websites">Static websites</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/solutions/mobile-cms">Mobile applications</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/solutions/corporate-website-cms">Corporate websites</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/solutions/editorial-cms">Editorial sites</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/solutions/ecommerce-cms">Ecommerce</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/for-developers">For developers</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/for-content-teams">For content teams</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/for-business-teams">For business teams</a></li></ul></div><div class="styles_MenuColumn__4_C_R"><p class="typography_Text___rU8X styles_sectionTitle__uive2 typography_small__vIMI7 themes_dark__3Uwp9">Resources</p><ul><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/resource-center">Resource Center</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="2-How to get started" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html">How to get started</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/community">Meet the community</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/blog/categories/tutorials">Tutorials</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="2-API documentation" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html">API documentation</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="2-GitHub repository" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://github.com/strapi/strapi">GitHub repository</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/blog/introducing-the-new-strapi-starter-with-nextjs13-tailwind-and-typescript">Starters</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/user-stories">User stories</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/headless-cms/comparison/strapi-vs-wordpressheadless">Strapi vs Wordpress</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/headless-cms/comparison/strapi-vs-contentful">Strapi vs Contentful</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/headless-cms-guide">Headless CMS guide</a></li></ul></div><div class="styles_MenuColumn__4_C_R"><p class="typography_Text___rU8X styles_sectionTitle__uive2 typography_small__vIMI7 themes_dark__3Uwp9">Integrations</p><ul><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" alt="" icons="" href="/integrations">All integrations</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/integrations/react-cms">React CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/integrations/nextjs-cms">Next.js CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/integrations/vuejs-cms">Vue.js CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/integrations/gatsby-cms">Gatsby CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/integrations/nuxtjs-cms">Nuxt.js CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" alt="" icons="" href="/integrations/flutter-cms">Flutter CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" alt="" icons="" href="/integrations/gridsome-cms">Gridsome CMS</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" alt="" icons="" href="/integrations/hugo-cms">Hugo CMS</a></li></ul></div><div class="styles_MenuColumn__4_C_R"><p class="typography_Text___rU8X styles_sectionTitle__uive2 typography_small__vIMI7 themes_dark__3Uwp9">Company</p><ul><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/about-us">About us</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/blog">Blog</a></li><li class="styles_MenuColumnLink__uLohw"><a icons="" id="4-Handbook" class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" rel="noopener" alt="" href="https://handbook.strapi.io/">Handbook</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/careers">Careers</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/partner-program">Partner Program</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/contact">Contact</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="" alt="" icons="" href="/faq">FAQ</a></li><li class="styles_MenuColumnLink__uLohw"><a class="styles_Link__mwEVw styles_link__05nxc typography_FooterLink__PgM59" target="_blank" alt="" icons="" href="/newsroom">Newsroom</a></li></ul></div></nav></div><div class="styles_legals__gbRdS"><ul class="styles_subLinks__UeeCh"><li class="typography_Text___rU8X styles_subLink__y1LmA typography_smaller__E7EA3 themes_gray__DEpD2">© 2025, Strapi</li><li class="styles_subLink__y1LmA"><a class="styles_Link__mwEVw" target="_blank" rel="noopener" alt="" href="https://github.com/strapi/strapi/blob/master/LICENSE"><span class="typography_Text___rU8X styles_subLink__y1LmA typography_smaller__E7EA3 themes_gray__DEpD2">License</span></a></li><li class="styles_subLink__y1LmA"><a class="styles_Link__mwEVw" target="" alt="" href="/terms-of-use"><span class="typography_Text___rU8X styles_subLink__y1LmA typography_smaller__E7EA3 themes_gray__DEpD2">Terms</span></a></li><li class="styles_subLink__y1LmA"><a class="styles_Link__mwEVw" target="" alt="" href="/privacy"><span class="typography_Text___rU8X styles_subLink__y1LmA typography_smaller__E7EA3 themes_gray__DEpD2">Privacy</span></a></li></ul><div class="styles_SocialLinks__05yci"><p class="typography_Text___rU8X styles_text__2i0JZ typography_smaller__E7EA3 themes_blue-haze__Q0mPi">Join us on</p><ul class=""><li class="styles_IconLink__MbhGB"><a aria-label="GitHub" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://github.com/strapi"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="GithubLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="Discord" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://discord.strapi.io"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="DiscordLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="Twitch" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://www.twitch.tv/strapijs"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="TwitchLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="X" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://x.com/strapijs"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="XLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="Facebook" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://www.facebook.com/strapijs/"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="FacebookLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="LinkedIn" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://www.linkedin.com/company/strapi"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="LinkedinLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="Instagram" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://www.instagram.com/strapijs/"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="InstagramLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="YouTube" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://www.youtube.com/c/Strapi/featured"><div class="styles_iconWrapper__FTolP"><div class="styles_icon__l_326"><div class="styles_ratio__bpoRn" style="padding-bottom:100%"><img class="styles_Img__QpX3_ styles_img__wzegy styles_contain__GgeEe styles_center__7K_1M" src="" alt="YoutubeLogo.svg"/></div></div></div></a></li><li class="styles_IconLink__MbhGB"><a aria-label="Bluesky" class="styles_Link__mwEVw styles_link__6Zmh2" target="_blank" rel="noopener" alt="" href="https://bsky.app/profile/strapijs.bsky.social "></a></li></ul></div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"pageData":{"id":1,"createdAt":"2020-04-20T16:01:51.149Z","updatedAt":"2025-02-21T12:25:50.953Z","publishedAt":"2020-04-20T16:01:51.149Z","settings":{"theme":"light"},"seo":{"metaTitle":"Strapi - Open source Node.js Headless CMS 🚀","metaDescription":"Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created, managed and exposed to any digital device.","metaImage":{"data":{"id":1052,"attributes":{"name":"HP meta","alternativeText":"","width":2208,"height":1103,"formats":{"thumbnail":{"url":"/uploads/thumbnail_HP_meta_b32f546a40.png","mime":"image/png","name":"thumbnail_HP meta","size":27.29,"width":245,"height":122}},"mime":"image/png","size":291.2,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/HP_meta_b32f546a40.png","createdAt":"2020-05-15T10:29:22.397Z","updatedAt":"2023-05-04T15:09:16.224Z"}}},"metaSocial":[]},"homeHero":{"hero":{"strapi5Hero":true,"intro":{"theme":"purple","title":"Build modern websites with the most customizable Headless CMS","text":"The open-source Headless CMS for developers that makes API creation easy, and supports your favorite frameworks. Customize and host your projects in the cloud or on your own servers.","cliContent":"npx create-strapi-app@latest","button":[{"theme":"purple","link":{"href":"/demo","target":"_blank","text":"Start your demo","icons":[]}}],"smallTextWithLink":[],"newsWithLink":{"badgeText":"New","text":"Strapi 5 is available now!","link":{"href":"https://strapi.io/launch-week","target":"_self","text":"Start building today!","icons":[]}}},"topRightBackgroundImage":{"media":{"data":{"id":89,"attributes":{"name":"hp-hero","alternativeText":"","width":1025,"height":1032,"formats":{},"mime":"image/svg+xml","size":5.35,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/hp-logo-hero_c94026101f.svg","createdAt":"2020-04-23T14:47:59.813Z","updatedAt":"2022-11-03T15:14:11.171Z"}}}},"bottomLeftBackgroundImage":{"media":{"data":{"id":88,"attributes":{"name":"hp-square-hero_dabb2415b2","alternativeText":"","width":178,"height":179,"mime":"image/svg+xml","size":0.72,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/hp-square-hero_dabb2415b2.svg","createdAt":"2020-04-23T14:47:59.792Z","updatedAt":"2024-10-24T13:09:55.701Z"}}}},"animation":[],"animations":[{"width":"2.04fr","media":{"data":{"id":6496,"attributes":{"name":"Homepage-animation-one.mp4","mime":"video/mp4","size":11456.61,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Homepage_animation_one_7c478bafc7.mp4","createdAt":"2024-10-29T14:00:24.661Z","updatedAt":"2024-10-29T14:00:24.661Z"}}}},{"media":{"data":{"id":6495,"attributes":{"name":"Homepage-animation-two.mp4","mime":"video/mp4","size":3715.81,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Homepage_animation_two_a91fc01a48.mp4","createdAt":"2024-10-29T13:48:16.727Z","updatedAt":"2024-10-29T13:48:16.727Z"}}}}],"brands":{"brands":[{"logo":{"media":{"data":{"id":2953,"attributes":{"name":"orion_health_logo_grey.svg","alternativeText":"","width":292,"height":108,"mime":"image/svg+xml","size":3.03,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/orion_health_logo_grey_09bd33f2a3.svg","createdAt":"2021-12-23T17:21:57.358Z","updatedAt":"2021-12-23T17:21:57.377Z"}}}}},{"logo":{"media":{"data":{"id":2907,"attributes":{"name":"toyota.svg","alternativeText":"","width":94,"height":16,"mime":"image/svg+xml","size":3.12,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/toyota_91b7b86cc6.svg","createdAt":"2021-11-30T11:38:41.160Z","updatedAt":"2021-11-30T11:38:41.180Z"}}}}},{"logo":{"media":{"data":{"id":3549,"attributes":{"name":"Logo-engie grey","alternativeText":"","width":75,"height":27,"mime":"image/svg+xml","size":3.95,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Logo_engie_1_7860d8a8f7.svg","createdAt":"2022-09-07T10:40:16.799Z","updatedAt":"2022-09-07T10:40:24.881Z"}}}}},{"logo":{"media":{"data":{"id":2908,"attributes":{"name":"walmart.svg","alternativeText":"","width":103,"height":26,"mime":"image/svg+xml","size":6.4,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/walmart_270d4a7ce1.svg","createdAt":"2021-11-30T11:38:41.186Z","updatedAt":"2021-11-30T11:38:41.213Z"}}}}},{"logo":{"media":{"data":{"id":2905,"attributes":{"name":"Delivery NB.svg","alternativeText":"","width":108,"height":17,"mime":"image/svg+xml","size":4.5,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Delivery_NB_17f8d97df5.svg","createdAt":"2021-11-30T11:38:41.147Z","updatedAt":"2021-11-30T11:38:41.167Z"}}}}},{"logo":{"media":{"data":{"id":2902,"attributes":{"name":"NASA NB.svg","alternativeText":"","width":75,"height":21,"mime":"image/svg+xml","size":2.58,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/NASA_NB_dc288f8032.svg","createdAt":"2021-11-30T11:38:40.871Z","updatedAt":"2021-11-30T11:38:41.103Z"}}}}},{"logo":{"media":{"data":{"id":2906,"attributes":{"name":"societe-generale-2.svg","alternativeText":"","width":91,"height":25,"mime":"image/svg+xml","size":3.79,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/societe_generale_2_1ff3d37f70.svg","createdAt":"2021-11-30T11:38:41.152Z","updatedAt":"2021-11-30T11:38:41.194Z"}}}}},{"logo":{"media":{"data":{"id":2901,"attributes":{"name":"Accenture 1.svg","alternativeText":"","width":89,"height":24,"mime":"image/svg+xml","size":3.74,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Accenture_1_e2a6211ba4.svg","createdAt":"2021-11-30T11:38:40.740Z","updatedAt":"2021-11-30T11:38:40.794Z"}}}}}]},"features":[{"title":"Open source (MIT)","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]},{"title":"SOC 2 certified","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]},{"title":"GDPR compliant","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]}]}},"slices":[{"__component":"slices.issues-header","upperTitle":"The problem","title":"Building your website \u2028the way you want is hard","description":" because your CMS is slowing you down and holding you back.","features":[{"title":"Lack of customization","text":"You're unable to customize or extend the CMS to fit your unique project needs.","icon":{"media":{"data":{"id":6021,"attributes":{"name":"Code.svg","width":24,"height":25,"mime":"image/svg+xml","size":2.64,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_fac35ef2d3.svg","createdAt":"2024-09-17T15:54:44.352Z","updatedAt":"2024-09-17T15:54:44.352Z"}}}},"links":[]},{"title":"Lack of plugins","text":"You are not able to use your favorite tools, and lack plugins or integrations. ","icon":{"media":{"data":{"id":6385,"attributes":{"name":"Puzzle_Piece_4008818639.svg","width":25,"height":25,"mime":"image/svg+xml","size":1.66,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Puzzle_Piece_4008818639_f37a35fe71.svg","createdAt":"2024-10-14T12:24:52.759Z","updatedAt":"2024-10-14T12:24:52.759Z"}}}},"links":[]},{"title":"Lack of community","text":"You're dealing with a CMS that lacks a large, active community of developers.","icon":{"media":{"data":{"id":5567,"attributes":{"name":"UsersThree.svg","width":32,"height":32,"mime":"image/svg+xml","size":3.08,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_4c0703abc4.svg","createdAt":"2024-06-19T13:04:26.732Z","updatedAt":"2024-06-19T13:04:26.732Z"}}}},"links":[]}]},{"__component":"slices.side-hero-with-image","upperTitle":"The solution","title":"Helping developers to build websites in minutes instead of days with a fully customizable CMS","description":"And supported by a vibrant open source community!","isHero":false,"image":{"media":{"data":{"id":6095,"attributes":{"name":"Content Management.png","width":4000,"height":4000,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Content_Management_cfd037fcc2.png","mime":"image/png","name":"thumbnail_Content Management.png","size":15.42,"width":156,"height":156,"sizeInBytes":15415}},"mime":"image/png","size":738.09,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Content_Management_cfd037fcc2.png","createdAt":"2024-09-19T17:16:08.016Z","updatedAt":"2024-09-19T17:16:08.016Z"}}}},"features":[],"logos":[],"whiteCards":[{"title":"66k","text":"GitHub stars","icon":{"media":{"data":{"id":6387,"attributes":{"name":"star_grey","alternativeText":"star_grey","width":24,"height":24,"mime":"image/svg+xml","size":1.26,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Star_14ebecc385_b87b150f27.svg","createdAt":"2024-10-14T12:27:27.057Z","updatedAt":"2024-10-14T12:27:46.513Z"}}}},"links":[]},{"title":"72K","text":"Active developers","icon":{"media":{"data":{"id":6388,"attributes":{"name":"User_grey","alternativeText":"User_grey","width":24,"height":24,"mime":"image/svg+xml","size":1,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/User_0fd4f5f0d9_e23f9ef292.svg","createdAt":"2024-10-14T12:28:34.437Z","updatedAt":"2024-10-14T12:28:44.696Z"}}}},"links":[]},{"title":"50M","text":"Downloads","icon":{"media":{"data":{"id":6389,"attributes":{"name":"Earth_grey","alternativeText":"Earth_grey","width":24,"height":24,"mime":"image/svg+xml","size":1.84,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Earth_52c3027f2b_8bbc43ca75.svg","createdAt":"2024-10-14T12:29:18.124Z","updatedAt":"2024-10-14T12:29:28.512Z"}}}},"links":[]}]},{"__component":"slices.capability-cards","capabilityCards":[{"upperTitle":"Create APIs","title":"Simplify API Creation, Content Modeling, and Delivery","text":"Build and manage your content model and infrastructure with our Content-Type Builder and Custom Fields. Skip tedious setup. Design content structures and relations in a no-code UI. Deliver content efficiently with our REST and GraphQL APIs. Ensure your content is structured and accessible.","icon":{"media":{"data":{"id":6075,"attributes":{"name":"Code (2).svg","width":24,"height":24,"mime":"image/svg+xml","size":2.63,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_2_fdea2e592e.svg","createdAt":"2024-09-18T12:22:29.911Z","updatedAt":"2024-09-18T12:22:29.911Z"}}}},"button":{"href":"https://strapi.io/create-apis","target":"_self","text":"Learn more","icons":[]},"image":{"media":{"data":{"id":6103,"attributes":{"name":"Create APIs.png","width":4000,"height":4000,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Create_AP_Is_bd0995d42a.png","mime":"image/png","name":"thumbnail_Create APIs.png","size":15.07,"width":156,"height":156,"sizeInBytes":15073}},"mime":"image/png","size":319.97,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_AP_Is_bd0995d42a.png","createdAt":"2024-09-19T22:00:37.742Z","updatedAt":"2024-09-19T22:00:37.742Z"}}}},"features":[{"title":"Content Type Builder","description":"Create and manage content models through a user-friendly interface, simplifying the development process.","icon":{"media":{"data":{"id":6028,"attributes":{"name":"Layout.svg","width":24,"height":24,"mime":"image/svg+xml","size":0.57,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_119b18a333.svg","createdAt":"2024-09-17T16:03:38.612Z","updatedAt":"2024-09-17T16:03:38.612Z"}}}}},{"title":"Dynamic Zones","description":"Give editors the flexibility to quickly adjust web pages structure, without the help of developers.","icon":{"media":{"data":{"id":6042,"attributes":{"name":"Infinity.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.37,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Infinity_04f26af963.svg","createdAt":"2024-09-17T16:03:39.121Z","updatedAt":"2024-09-17T16:03:39.121Z"}}}}},{"title":"Custom Fields","description":"Add any type of fields to your project, customizing data structures to suit your specific requirements.","icon":{"media":{"data":{"id":6023,"attributes":{"name":"PencilRuler.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_fea9f0e3d1.svg","createdAt":"2024-09-17T16:03:35.083Z","updatedAt":"2024-09-17T16:03:35.083Z"}}}}}]},{"upperTitle":"Customization","title":"Customize your CMS and work with your favorite tools and frameworks","text":"Tailor your CMS to meet specific project needs and leverage a thriving marketplace of plugins and integrations. Strapi helps you future-proof your modern website with features like unique field types and custom layouts.","icon":{"media":{"data":{"id":6023,"attributes":{"name":"PencilRuler.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_fea9f0e3d1.svg","createdAt":"2024-09-17T16:03:35.083Z","updatedAt":"2024-09-17T16:03:35.083Z"}}}},"button":{"href":"https://market.strapi.io","target":"_self","text":"Explore the Marketplace","icons":[]},"image":{"media":{"data":{"id":6093,"attributes":{"name":"Customization.png","width":4000,"height":4000,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Customization_6abc7697f5.png","mime":"image/png","name":"thumbnail_Customization.png","size":12.11,"width":156,"height":156,"sizeInBytes":12107}},"mime":"image/png","size":420.59,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Customization_6abc7697f5.png","createdAt":"2024-09-19T16:56:22.015Z","updatedAt":"2024-09-19T17:21:36.398Z"}}}},"features":[{"title":"Reviewed and Tested Plugins","description":"Leverage a thriving marketplace of plugins and integrations developed by an active developer community.","icon":{"media":{"data":{"id":6054,"attributes":{"name":"PuzzlePiece.svg","width":24,"height":24,"mime":"image/svg+xml","size":1.59,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Puzzle_Piece_225fa1a2df.svg","createdAt":"2024-09-17T16:03:39.303Z","updatedAt":"2024-09-17T16:03:39.303Z"}}}}},{"title":"Design System","description":"Build plugins fast with a comprehensive design system to create a consistent experience for all users.","icon":{"media":{"data":{"id":6024,"attributes":{"name":"Palette.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.69,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Palette_ace1f0d957.svg","createdAt":"2024-09-17T16:03:38.413Z","updatedAt":"2024-09-17T16:03:38.413Z"}}}}},{"title":"Thriving Developer Community","description":"Tap into a vibrant community of thousands of developers. Whether you need help with an edge case or a simple bug, our active community is ready to support and collaborate.","icon":{"media":{"data":{"id":6066,"attributes":{"name":"UsersThree.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.15,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_336fbd43bc.svg","createdAt":"2024-09-17T16:47:57.732Z","updatedAt":"2024-09-17T16:47:57.732Z"}}}}}]},{"upperTitle":"Deployment","title":"Deploy with confidence","text":"From prototype to production, host your projects on robust, secure servers in minutes with Strapi Cloud. Build, deploy, and scale your Strapi app quickly and remain in complete control over your tech stack with a fully-managed infrastructure, optimized for Strapi. Or host on your own servers — it’s open-source after all.","icon":{"media":{"data":{"id":6029,"attributes":{"name":"Cloud.svg","width":24,"height":24,"mime":"image/svg+xml","size":1.17,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1f023b06f8.svg","createdAt":"2024-09-17T16:03:38.809Z","updatedAt":"2024-09-17T16:03:38.809Z"}}}},"button":{"href":"https://strapi.io/hosting","target":"_self","text":"Strapi Cloud","icons":[]},"image":{"media":{"data":{"id":6096,"attributes":{"name":"Hosting.png","width":4000,"height":4000,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Hosting_8756d344ef.png","mime":"image/png","name":"thumbnail_Hosting.png","size":5.25,"width":156,"height":156,"sizeInBytes":5252}},"mime":"image/png","size":143.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Hosting_8756d344ef.png","createdAt":"2024-09-19T17:31:55.405Z","updatedAt":"2024-09-19T17:31:55.405Z"}}}},"features":[{"title":"The Strapi Stack","description":"Enjoy a Strapi-optimized stack including a Postgres database, email provider, and CDN without having to manage it all yourself. Don’t worry about the infrastructure, it just works!","icon":{"media":{"data":{"id":6062,"attributes":{"name":"Stack.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.3,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Stack_082234351f.svg","createdAt":"2024-09-17T16:47:57.458Z","updatedAt":"2024-09-17T16:47:57.458Z"}}}}},{"title":"Deploy in a Few Clicks","description":"Launch your Strapi applications in minutes. Simply deploy code directly from your GitHub repositories, choose your region, and get started with generous usage limits.","icon":{"media":{"data":{"id":6393,"attributes":{"name":"Cursor_Click_Blue","alternativeText":"Cursor_Click_Blue","width":21,"height":21,"mime":"image/svg+xml","size":3.49,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_24af9872ff_1913824cac.svg","createdAt":"2024-10-14T12:37:32.793Z","updatedAt":"2024-10-14T12:37:44.819Z"}}}}},{"title":"Customize your Stack","description":"Manage custom domains, monitor real-time logs and swap out any component of your tech stack. Don’t get stuck on outdated technology but stay flexible so that you’re ready for anything that comes next.","icon":{"media":{"data":{"id":6023,"attributes":{"name":"PencilRuler.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_fea9f0e3d1.svg","createdAt":"2024-09-17T16:03:35.083Z","updatedAt":"2024-09-17T16:03:35.083Z"}}}}}]}]},{"__component":"slices.integration-cards-grid","buttonText":"Create Project","intro":{"theme":"purple","label":"Integrations","title":"All your favorite dev tools work with Strapi.","text":"Connect your favorite databases, frontend frameworks, or static site generators. Choose where you want to host your websites. Integrate with your favorite tools, and work with the best of each world. No vendor lock-in.","button":[],"smallTextWithLink":[]},"integrations":{"data":[{"id":4,"attributes":{"slug":"nextjs-cms","isExternal":false,"title":"Next.js","description":"Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.","content":"## What is Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## What is Next.js?\nNext.js is a popular [React](https://react.dev/) framework known for its performance and ease of use. It includes features such as [server-side rendering (SSR), static site generation (SSG)](https://strapi.io/blog/ssr-vs-ssg-in-nextjs-differences-advantages-and-use-cases), and other advanced features, which makes it a go-to choice for modern web development.\n\nVisit the [Next.js documentation](https://nextjs.org/docs) for more.\n\n## Strapi and Next.js Integration\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n\nLearn more about [Strapi features](https://strapi.io/features).\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our Strapi 5 project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: that article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Next.js application.\n\n\n## Creat a Next.js App\nIt is recommended to use the `create-next-app`, which sets up everything automatically for you. \n\n```bash\nnpx create-next-app@latest\n```\nDepending on your project setup, you will answer the following prompts:\n\n```bash\n✔ What is your project named? … nextjs-project\n✔ Would you like to use TypeScript? … Yes\n✔ Would you like to use ESLint? … No\n✔ Would you like to use Tailwind CSS? … Yes\n✔ Would you like your code inside a `src/` directory? … Yes\n✔ Would you like to use App Router? (recommended) … Yes\n✔ Would you like to use Turbopack for `next dev`? … Yes\n✔ Would you like to customize the import alias (`@/*` by default)? … No\n```\n\nEnsure you select **\"Yes\"** for [Tailwind CSS](https://tailwindcss.com/).\n\n### Start Your Next.js Application\nStart Next.js in development mode by running the command below.\n\n```bash\nnpm run dev\n```\n\nHere is what your new Next.js application should look like on the URL http://localhost:3000:\n\n![New Nextjs project.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Nextjs_project_d6293795ef.png)\n\n## Use an HTTP Client For Requests\nMany HTTP clients are available, but on this integration page, we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\n### Using Axios\nInstall Axios by running any of the commands below:\n\n```bash\n# npm\nnpm i axios\n\n# yarn\nyarn add axios\n```\n\n### Using fetch\nNo installation needed\n\n## Fetch Contents from Strapi\nExecute a `GET` request on the **Article** collection type in order to fetch all your articles.\n\nBe sure that you activated the `find` permission for the `Article` collection type.\n\n\u003e 🖐️ NOTE: We want to also fetch **covers (images)** of articles, so we have to use the `populate` parameter as seen below.\n\n### Using Axios\n```javascript\nimport axios;\n\n// fetch articles along with their covers\nconst response = await axios.get(\"http://localhost:1337/api/articles?populate=*\");\nconsole.log(response.data.data);\n```\n\n### Using Fetch\n```javascript\nconst response = await fetch(\"http://localhost:1337/api/articles?populate=*\");\nconst data = await response.json();\nconsole.log(data.data);\n```\n\n## Project Example\nIn this project example, you will fetch data from Strapi and display them in your Next.js application.\n\nHead over to your Next.js entry file `./src/app/page.tsx` to proceed.\n\n### Step 1: Specify the \"use client\" Directory\nInside the `./src/app/page.tsx` file, add the code below:\n\n```javascript\n// Path: ./src/app/page.tsx\n\n\"use client\"; // This is a client-side component\n\n```\n\nThe `\"use client\"` directive will tell Next.js to render a component on the [client-side](https://nextjs.org/docs/app/api-reference/directives/use-client) instead of the default [server](https://nextjs.org/docs/app/api-reference/directives/use-server) directive.\n\n### Step 2: Import React hooks and Image component\nImport the React hooks `useEffect` and `useState` for side effects and state management respectively.\n\nAlso, import the `Image` component which provides automatic image optimization.\n\n\n```javascript\n\"use client\"; // This is a client-side component\n\n// Import React hooks and Image component\nimport { useEffect, useState } from \"react\";\nimport Image from \"next/image\";\n```\n\n### Step 3: Allow Images from Localhost in Next.js\nSince you are working on a development environment localhost, you have to configure Next.js to allow images.\n\nNavigate to `./next.config.ts` and add the following code:\n\n```javascript\n// Path: ./next.config.ts\n\nimport type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n /* config options here */\n\n // Allow images from localhost\n images: {\n domains: [\"localhost\"],\n },\n};\n\nexport default nextConfig;\n```\n\n### Step 4: Create Data Type and Constant\nCreate an interface called `Article` which represents the data structure of the articles we will fetch from Strapi. Also, create a Strapi URL constant.\n\n```javascript\nexport interface Article {\n id: string;\n title: string;\n content: string;\n cover: any;\n publishedAt: Date;\n}\n\n// Define Strapi URL\nconst STRAPI_URL = \"http://localhost:1337\";\n```\n\n### Step 5: Define `articles` State Variable\nCreate a state variable `articles` to hold articles data fetched from Strapi.\n\n```javascript\n// Define articles state\nconst [articles, setArticles] = useState\u003cArticle[]\u003e([]);\n\n```\n\n### Step 6: Create Function to Fetch Articles\nCreate an asynchronous function that fetches the articles from the Strapi API. The data fetched is passed to `setArticles` to update the `articles` state.\n\n```javascript\nconst getArticles = async () =\u003e {\n const response = await fetch(`${STRAPI_URL}/api/articles?populate=*`);\n const data = await response.json();\n setArticles(data.data);\n};\n\n```\n\n### Step 7: Create a Function to Format Dates\nCreate a helper function to format the `publishedAt` date of the article into a human-readable format (MM/DD/YYYY).\n\n```javascript\nconst formatDate = (date: Date) =\u003e {\n const options: Intl.DateTimeFormatOptions = {\n year: \"numeric\",\n month: \"2-digit\",\n day: \"2-digit\",\n };\n return new Date(date).toLocaleDateString(\"en-US\", options);\n};\n\n```\n\n### Step 8: Fetching Articles on Component Mount\nUse the `useEffect` to run the `getArticles` function when the component mounts.\n\n```javascript\nuseEffect(() =\u003e {\n getArticles();\n}, []);\n\n```\n\n### Step 9: Render and Display Articles\n```javascript\nreturn (\n \u003cdiv className=\"p-6\"\u003e\n \u003ch1 className=\"text-4xl font-bold mb-8\"\u003eNext.js and Strapi Integration\u003c/h1\u003e\n \u003cdiv\u003e\n \u003ch2 className=\"text-2xl font-semibold mb-6\"\u003eArticles\u003c/h2\u003e\n \u003cdiv className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n {articles.map((article) =\u003e (\n \u003carticle\n key={article.id}\n className=\"bg-white shadow-md rounded-lg overflow-hidden\"\n \u003e\n \u003cImage\n className=\"w-full h-48 object-cover\"\n src={STRAPI_URL + article.cover.url}\n alt={article.title}\n width={180}\n height={38}\n priority\n /\u003e\n \u003cdiv className=\"p-4\"\u003e\n \u003ch3 className=\"text-lg font-bold mb-2\"\u003e{article.title}\u003c/h3\u003e\n \u003cp className=\"text-gray-600 mb-4\"\u003e{article.content}\u003c/p\u003e\n \u003cp className=\"text-sm text-gray-500\"\u003e\n Published: {formatDate(article.publishedAt)}\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n);\n\n```\n\nNow, this is what your Next.js project should look like:\n\n![Nextjs and Strapi integration project sample.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_integration_project_sample_9fcce1bbd0.png)\n\nAwesome, congratulations!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/nextjs-strapi-integration).\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Next.js documentation](https://nextjs.org/docs).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e","createdAt":"2020-04-21T18:38:23.689Z","updatedAt":"2025-02-24T06:29:12.054Z","publishedAt":"2020-04-21T18:38:23.689Z","seo":{"metaTitle":"The best open-source headless CMS for Next.js","metaDescription":"The #1 headless CMS to build powerful applications with Next.js. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Next.js.","metaImage":{"data":{"id":6907,"attributes":{"name":"Nextjs and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Nextjs_and_Strapi_Integration_6a376d71cf.png","mime":"image/png","name":"thumbnail_Nextjs and Strapi Integration.png","size":12.89,"width":245,"height":138,"sizeInBytes":12893}},"mime":"image/png","size":162.9,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_Integration_6a376d71cf.png","createdAt":"2024-12-20T07:00:35.522Z","updatedAt":"2024-12-20T07:00:35.522Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":6833,"attributes":{"name":"Next.png","width":320,"height":320,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Next_8a2bb31230.png","mime":"image/png","name":"thumbnail_Next.png","size":6.8,"width":156,"height":156,"sizeInBytes":6798}},"mime":"image/png","size":3.95,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Next_8a2bb31230.png","createdAt":"2024-12-11T13:43:33.993Z","updatedAt":"2024-12-11T13:43:33.993Z"}}}},"image":{"media":{"data":{"id":6907,"attributes":{"name":"Nextjs and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Nextjs_and_Strapi_Integration_6a376d71cf.png","mime":"image/png","name":"thumbnail_Nextjs and Strapi Integration.png","size":12.89,"width":245,"height":138,"sizeInBytes":12893}},"mime":"image/png","size":162.9,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_Integration_6a376d71cf.png","createdAt":"2024-12-20T07:00:35.522Z","updatedAt":"2024-12-20T07:00:35.522Z"}}}}}},{"id":6,"attributes":{"slug":"react-cms","isExternal":false,"title":"React","description":"React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.","content":"# Integrate Strapi with React for Efficient Content Management\n\n## Introduction to Strapi and React\n\nStrapi and React together form a powerful duo for creating dynamic, content-rich web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while React, a popular JavaScript library, excels at building interactive user interfaces.\n\n### Why Use Strapi with React?\n\nBy integrating Strapi with React, developers can build highly performant, scalable, and dynamic applications. Strapi's flexible API and content management features complement React's component-based architecture, enabling efficient data handling and rendering.\n\n## Key Features\n\n### Strapi Highlights:\n- **Customizable API**: Tailor the API to your specific needs using Strapi's intuitive interface.\n- **Roles \u0026 Permissions**: Manage user access with detailed permissions.\n- **Media Library**: Easily handle and optimize media assets.\n- **Internationalization**: Create multilingual websites effortlessly.\n- **Authentication**: Secure your API with JWT or OAuth providers.\n\n### React Highlights:\n- **Component-Based**: Build encapsulated components that manage their own state.\n- **Declarative**: Design interactive UIs with ease by describing how the UI should look.\n- **Virtual DOM**: Efficiently update and render components.\n- **Hooks**: Use state and other React features without writing classes.\n- **Community \u0026 Ecosystem**: Leverage a vast ecosystem of libraries and tools.\n\n## Best Practices for Using Strapi with React\n\n1. **Data Fetching**: Use hooks like `useEffect` for fetching data from Strapi.\n2. **State Management**: Utilize state management solutions like Redux or Context API.\n3. **Authentication**: Implement JWT or OAuth for secure API interactions.\n4. **Error Handling**: Ensure robust error handling for data fetching and API calls.\n5. **Environment Variables**: Store sensitive information like API keys in environment variables.\n\n## Getting Started\n\n### Setting Up Strapi\n\n1. **Install Strapi**:\n\n```bash\nnpx create-strapi-app@latest my-project\n```\n\n2. **Configure Strapi**: Customize your API endpoints and content types in the Strapi admin panel.\n\n### Integrating with React\n\n1. **Install React**:\n\n```bash\n npx create-react-app my-react-app\n```\n\n2. **Fetch Data from Strapi**:\n Use hooks like `useEffect` to fetch data from Strapi.\n\n```javascript\nimport React, { useEffect, useState } from 'react';\n\nfunction App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() =\u003e {\n fetch('http://localhost:1337/posts')\n .then(response =\u003e response.json())\n .then(data =\u003e setPosts(data));\n }, []);\n\n return (\n \u003cdiv\u003e\n {posts.data.map(post =\u003e (\n \u003carticle key={post.id}\u003e\n \u003ch2\u003e{post.attributes.title}\u003c/h2\u003e\n \u003cp\u003e{post.attributes.content}\u003c/p\u003e\n \u003c/article\u003e\n ))}\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n3. **Display Content**: Render the fetched data in your React components as shown above.\n\nStrapi and React together provide a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and React's UI flexibility, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [React documentation](https://reactjs.org/docs).","createdAt":"2020-04-21T18:40:30.361Z","updatedAt":"2025-02-21T15:39:32.695Z","publishedAt":"2020-04-21T18:40:30.361Z","settings":{"theme":"dark"},"seo":{"metaTitle":"The best Headless CMS for React","metaDescription":"The #1 headless CMS to build powerful applications with React. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and React.","metaImage":{"data":{"id":1107,"attributes":{"name":"cover-react-cms","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_cover-react-cms_09dce2416d.jpeg","mime":"image/png","size":19.68,"width":245,"height":141}},"mime":"image/png","size":231.27,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/cover-react-cms_09dce2416d.jpeg","createdAt":"2020-05-16T22:35:09.062Z","updatedAt":"2020-10-07T15:13:41.584Z"}}},"metaSocial":[]},"link":{"text":"Create Project","icons":[]},"logo":{"media":{"data":{"id":113,"attributes":{"name":"React-logo","alternativeText":"","width":842,"height":595,"mime":"image/svg+xml","size":3.45,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/React-logo_663c3a4121.svg","createdAt":"2020-04-23T15:27:41.598Z","updatedAt":"2020-04-23T15:27:41.598Z"}}}},"image":{"media":{"data":{"id":1107,"attributes":{"name":"cover-react-cms","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_cover-react-cms_09dce2416d.jpeg","mime":"image/png","size":19.68,"width":245,"height":141}},"mime":"image/png","size":231.27,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/cover-react-cms_09dce2416d.jpeg","createdAt":"2020-05-16T22:35:09.062Z","updatedAt":"2020-10-07T15:13:41.584Z"}}}}}},{"id":104,"attributes":{"slug":"react-router-7","isExternal":false,"title":"React Router 7","description":"React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture.","content":"## Why Use React Router 7?\n\nReact Router 7 introduces several enhancements that aim to improve developer workflow and application performance. Here's a breakdown:\n\nFor Developers:\n- Simplified Installation: React Router 7 unifies core functionality into a single package, react-router, streamlining installation and management.\n- Streamlined Data Handling: The removal of the json() utility function in favor of manual response object construction offers greater flexibility and transparency in data handling.\n- Simplified defer Functionality: The defer function, used for delayed data loading, has been simplified, reducing boilerplate code.\n- Framework Mode for Full-Stack Development: React Router 7 introduces a \"framework mode\" enabling full-stack React application development with features like server-side rendering (SSR), code splitting, and file-based routing, all within a familiar tool.\n- Improved Nested Routing with Layout Routes: Layout routes, using the Outlet component, allow developers to define shared layouts for nested routes, reducing code duplication and promoting a clear separation of layout and content.\n- Enhanced Type Safety: Improved type safety for route parameters, loader data, and actions ensures better developer experience and reduces runtime errors.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our React Router 7 client.\n\n## Getting Started with React Router 7\n\nI will walk you through the steps to setup a new React Router 7 project. But here is the link to the [React Router 7 Docs](https://reactrouter.com/home) that I used for reference.\n\n### React Router 7 Installation and Initial Setup\n\nWe are going to got the **React Router 7 Framework** Route.\n\nMake sure that you are in the `root` directory of your project and run the following command to install React Router 7.\n\n``` bash\n npx create-react-router@latest client\n```\n\nSay **Yes** to all the default options.\n\nOnce everything is installed, you can start your React Router 7 server with the following command:\n\n``` bash\n cd client\n npm run dev\n```\n\n![009-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/009_react_router_7_2e62fa5de5.png)\n\nNice, now that we have our React Router 7 client setup, we can start to integrate it with our Strapi 5 server.\n\n### React Router 7 File Based Routing\n\nWe are going to opt in to use the **File Based Routing Convention** for our React Router 7 application. \n\nYou can read more about it [here](https://reactrouter.com/how-to/file-route-conventions).\n\nIn order to do this, we must first install the following package:\n\n``` bash\n npm i @react-router/fs-routes\n```\n\nNext, let's navigate to the `app/routes.tsx` file and update the file to the following:\n\n``` tsx\n// https://reactrouter.com/how-to/file-route-conventions\n\nimport { type RouteConfig } from \"@react-router/dev/routes\";\nimport { flatRoutes } from \"@react-router/fs-routes\";\n\nexport default flatRoutes() satisfies RouteConfig;\n```\n\nAnd finally, in the `client/app/routes` folder, rename the `home.tsx` file to `_index.tsx`.\n\nand update the file to the following:\n\n``` tsx\n//old:\nimport type { Route } from \"./+types/home\";\n\n// updated:\nimport type { Route } from \"./+types/_index\";\n\n```\n\nNow restart your React Router 7 and everything should still be working.\n\nIf you wanted to add a new route, you can do so by creating a new file in the `app/routes` folder.\n\nLet's do a simple example.\n\nIn the `app/routes` folder, create a new file called `about.tsx`.\n\nAnd update the file to the following:\n\n``` tsx\nimport type { Route } from \"./+types/about\";\n\nexport function meta({}: Route.MetaArgs) {\n return [\n { title: \"About\" },\n { name: \"description\", content: \"About Page\" },\n ];\n}\n\nexport default function About() {\n return \u003cdiv className=\"container mx-auto p-4\"\u003eThis is the about page\u003c/div\u003e;\n}\n\n```\n\nNow restart your React Router 7 and you should be able to navigate to the about page at `http://localhost:5173/about`.\n\n![010-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/010_react_router_7_efe463e8e0.png)\n\nNice, now that we have a basic route setup, we can start to integrate it with our Strapi 5 server.\n\n\n### Fetching Data from Strapi 5 with React Router 7\n\nWe are going to opt in to use server loader to fetch data from our Strapi 5 server.\n\nYou can read more about it [here](https://reactrouter.com/start/framework/data-loading#server-data-loading).\n\nTo make this work, we need to update our `app/routes/_index.tsx` let's update the file with the following code:\n\n``` tsx\nimport qs from \"qs\";\n\nimport type { Route } from \"./+types/_index\";\nimport { ArticleCard } from \"../components/article-card\";\n\ninterface Article {\n id: number;\n documentId: string;\n title: string;\n description: string;\n slug: string;\n createdAt: string;\n updatedAt: string;\n publishedAt: string;\n cover: {\n url: string;\n alternativeText: string;\n };\n}\n\ninterface ArticleResponse {\n data: Article[];\n}\n\ninterface LoaderData {\n articlesData: ArticleResponse;\n}\n\n// Server Side Loader\nexport async function loader({ params }: Route.LoaderArgs) {\n const BASE_URL = import.meta.env.VITE_STRAPI_URL || \"http://localhost:1337\";\n const path = \"/api/articles\";\n const url = new URL(path, BASE_URL);\n\n url.search = qs.stringify({\n populate: {\n cover: {\n fields: [\"url\", \"alternativeText\"],\n },\n },\n });\n\n const articlesData = await fetch(url.href);\n const data = await articlesData.json();\n return { articlesData: data as ArticleResponse };\n}\n\nexport function meta(/*{}: Route.MetaArgs */) {\n return [\n { title: \"Home | React Router 7\" },\n { name: \"description\", content: \"Home Page\" },\n ];\n}\n\nexport default function IndexRoute({ loaderData }: { loaderData: LoaderData }) {\n if (!loaderData) return \u003cp\u003eNo data found\u003c/p\u003e;\n return (\n \u003cdiv className=\"container mx-auto px-4 py-8\"\u003e\n \u003ch1 className=\"text-3xl font-bold mb-6\"\u003e\n React Router 7 and Strapi 5 Demo\n \u003c/h1\u003e\n \u003cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n {loaderData.articlesData.data.map((article: Article) =\u003e (\n \u003cArticleCard\n key={article.id}\n title={article.title}\n description={article.description}\n publishedAt={article.publishedAt}\n slug={article.slug}\n cover={article.cover}\n /\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n\n```\n\nBefore this will work, we need to add two more components to our project, and install the `qs` package that will help us with the query string.\n\nIn our projects `app` folder, create a new folder called `components`. And let's add two new components to our project.\n\nWe will start with the `StrapiImage` component.\n\nCreate a new file called `strapi-image.tsx` and update the file with the following code:\n\n``` tsx\ninterface StrapiImageProps {\n src: string;\n alt: string | null;\n height?: number;\n width?: number;\n className?: string;\n}\n\nconst STRAPI_API_URL = process.env.STRAPI_API_URL ?? \"http://localhost:1337\";\n\nexport function getStrapiMedia(url: string | null) {\n if (url == null) return null;\n if (url.startsWith(\"data:\")) return url;\n if (url.startsWith(\"http\") || url.startsWith(\"//\")) return url;\n return `${STRAPI_API_URL}${url}`;\n}\n\nexport function StrapiImage({\n src,\n alt,\n className,\n ...rest\n}: Readonly\u003cStrapiImageProps\u003e) {\n const imageUrl = getStrapiMedia(src);\n if (!imageUrl) return null;\n return (\n \u003cimg\n src={imageUrl}\n alt={alt ?? \"No alternative text provided\"}\n className={className}\n {...rest}\n /\u003e\n );\n}\n```\nNow let's create the `ArticleCard` component.\n\nCreate a new file called `article-card.tsx` and update the file with the following code:\n\n``` tsx \nimport { StrapiImage } from \"./strapi-image\";\n\nexport interface ArticleCardProps {\n title: string;\n description: string;\n publishedAt: string;\n slug: string;\n cover: {\n url: string;\n alternativeText: string;\n };\n}\n\nexport function ArticleCard({\n title,\n description,\n publishedAt,\n slug,\n cover,\n}: Readonly\u003cArticleCardProps\u003e) {\n return (\n \u003cdiv className=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300\"\u003e\n \u003cdiv className=\"aspect-w-16 aspect-h-9\"\u003e\n \u003cStrapiImage\n src={cover.url}\n alt={cover.alternativeText}\n className=\"object-cover w-full h-full\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"p-6\"\u003e\n \u003ch2 className=\"text-xl font-bold text-gray-800 mb-2\"\u003e{title}\u003c/h2\u003e\n \u003cp className=\"text-gray-600 mb-4 line-clamp-2\"\u003e{description}\u003c/p\u003e\n \u003cdiv className=\"flex justify-between items-center text-sm text-gray-500\"\u003e\n \u003cspan\u003e{new Date(publishedAt).toLocaleDateString()}\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n```\n\nAnd finally, let's add the `qs` package to our project.\n\n``` bash\n npm i qs\n npm i @types/qs\n```\n\nNow restart your React Router 7 app and you Strapi 5 app and you should be able to the following screen.\n\n![011-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/011_react_router_7_53f8e14a6d.png)\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/PaulBratslavsky/react-router-7-strapi-5-example).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [React Router 7 documentation](https://reactrouter.com/home).\n","createdAt":"2024-12-20T03:19:54.314Z","updatedAt":"2025-01-15T18:46:55.199Z","publishedAt":"2024-12-20T03:43:09.517Z","seo":{"metaTitle":"The best open-source headless CMS for React Router 7","metaDescription":"Get started in minutes with Strapi and React Router 7.","keywords":"strapi, react router 7","canonicalURL":"https://strapi.io/integrations/react-router-7","metaImage":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}},"metaSocial":[{"socialNetwork":"Facebook","title":"The best open-source headless CMS for React Router 7","description":"Get started in minutes with Strapi and React Router 7.","image":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}},{"socialNetwork":"Twitter","title":"The best open-source headless CMS for React Router 7","description":"Get started in minutes with Strapi and React Router 7.","image":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}}]},"logo":{"media":{"data":{"id":6894,"attributes":{"name":"react-router-7.png","width":320,"height":320,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0f71a95982.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":7.36,"width":156,"height":156,"sizeInBytes":7356}},"mime":"image/png","size":4.25,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0f71a95982.png","createdAt":"2024-12-20T02:58:41.032Z","updatedAt":"2024-12-20T02:58:41.032Z"}}}},"image":{"media":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}}}},{"id":82,"attributes":{"slug":"astro","isExternal":false,"title":"Astro","description":"Astro is a modern static site builder that allows you to build a static website with a with various frameworks. Including React, Vue, Svelte, and more.\n","content":"## Why Use Astro 5?\n\nAstro.js is a powerful web framework that offers several compelling reasons to use it for your web development projects. Here are the key benefits and reasons to choose Astro:\n\n- **Performance and Speed**\n- **Flexibility and Developer Experience**\n- **Content Focus**\n- **SEO Benefits**\n- **Server-Side Rendering and Static Site Generation**\n\nBy choosing Astro, you get a modern, performant, and flexible framework that prioritizes content delivery and user experience, making it an excellent choice for a wide range of web development projects.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Astro 5 client.\n\n## Getting Started with Astro 5.\n\nI will walk you through the steps to setup a new Astro 5 project. But here is the link to the [Astro 5 Docs](https://docs.astro.build/en/getting-started) that I used for reference.\n\n### Astro 5 Installation and Initial Setup\n\nLet's get started with **Astro 5**.\n\nMake sure that you are in the `root` directory of your project and run the following command to install Astro 5.\n\n``` bash\nnpm create astro@latest\n```\n\nYou will be asked `Where should we create your new project?`. I will install it in the `client` directory. Once you have entered your project name, press enter.\n\n``` bash\npaul@Mac astro % npm create astro@latest\n\n astro Launch sequence initiated.\n\n dir Where should we create your new project?\n ./client\n```\n\nWe will go with the `basic` setup.\n\n``` bash\n tmpl How would you like to start your new project?\n ● A basic, minimal starter (recommended)\n ○ Use blog template \n ○ Use docs (Starlight) template \n```\n\nClick yes for the remaining questions.\n\n``` bash\n ██████ Project initializing...\n ■ Template copied\n ▶ Dependencies installing with npm...\n\n ✔ Project initialized!\n ■ Template copied\n ■ Dependencies installed\n\n next Liftoff confirmed. Explore your project!\n\n Enter your project directory using cd ./client-temp \n Run npm run dev to start the dev server. CTRL+C to stop.\n Add frameworks like react or tailwind using astro add.\n\n Stuck? Join us at https://astro.build/chat\n\n╭──🎩─╮ Houston:\n│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀\n╰─────╯\n```\n\nOnce everything is installed, you can start your Astro 5 project with the following command:\n\n``` bash\n cd client\n npm run dev\n```\n\nYour project should be running at `http://localhost:4321`.\n\n![002-astro-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/002_astro_5_17e6a0c87b.png)\n\nNice, now that we have our Astro 5 project setup, we can start to integrate it with our Strapi 5 server.\n\n### Building out our Astro 5 Project \n\nAstro 5 uses a file based routing system. This means that you can create a new file in the `src/pages` folder and it will be automatically added to your project.\n\nYou can read more about it [here](https://docs.astro.build/en/reference/routing-reference).\n\nBut for today, we will be using the `index.astro` file in the `src/pages` folder.\n\nLet's update the `index.astro` file with the following code:\n\n``` astro\n---\n// Import necessary components and utilities\nimport Layout from '../layouts/Layout.astro';\nimport { getCollection } from 'astro:content';\n\n// Fetch all posts from Strapi using Astro's content collection\nconst strapiPosts = await getCollection(\"strapiPostsLoader\");\n// Get Strapi URL from environment variables with fallback to localhost\nconst BASE_URL = await import.meta.env.STRAPI_URL || \"http://localhost:1337\";\n\n// Helper function to handle media URLs from Strapi\nfunction getStrapiMedia(url: string | null) {\n if (url == null) return null;\n // Return as-is if it's a data URL (base64)\n if (url.startsWith(\"data:\")) return url;\n // Return as-is if it's an absolute URL\n if (url.startsWith(\"http\") || url.startsWith(\"//\")) return url;\n // Prepend BASE_URL for relative URLs\n return `${BASE_URL}${url}`;\n}\n---\n\n\u003cLayout\u003e\n \u003cdiv class=\"container mx-auto p-4\"\u003e\n \u003c!-- Main heading --\u003e\n\t\u003ch1 class=\"text-3xl font-bold mb-8\"\u003eHello Strapi 5 and Astro 5 World\u003c/h1\u003e\n\t\u003c!-- Responsive grid layout using Tailwind CSS --\u003e\n\t\u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\"\u003e\n\t\t{/* Map through posts and create article cards */}\n\t\t{strapiPosts.map((post) =\u003e (\n\t\t\t\u003carticle class=\"bg-white rounded-lg shadow-lg overflow-hidden\"\u003e\n\t\t\t\t{/* Post cover image */}\n\t\t\t\t\u003cimg \n\t\t\t\t\tsrc={getStrapiMedia(post.data.cover.url)} \n\t\t\t\t\talt={post.data.cover.alternativeText} \n\t\t\t\t\tclass=\"w-full h-48 object-cover\"\n\t\t\t\t/\u003e\n\t\t\t\t{/* Post content container */}\n\t\t\t\t\u003cdiv class=\"p-4\"\u003e\n\t\t\t\t\t\u003ch2 class=\"text-xl font-bold mb-2\"\u003e{post.data.title}\u003c/h2\u003e\n\t\t\t\t\t\u003cp class=\"text-gray-600 mb-4\"\u003e{post.data.description}\u003c/p\u003e\n\t\t\t\t\t\u003cdiv class=\"text-sm text-gray-500\"\u003e\n\t\t\t\t\t\tPublished: {new Date(post.data.publishedAt).toLocaleDateString()}\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/article\u003e\n\t\t))}\n\t\u003c/div\u003e\n\u003c/div\u003e\n\u003c/Layout\u003e\n```\nBrief Description:\nThis is an Astro page component that displays a grid of blog posts fetched from a Strapi CMS. \n\nThe page features:\n- Integration with Strapi CMS using Astro's content collections\n- A responsive grid layout using Tailwind CSS (1 column on mobile, 2 on tablet, 4 on desktop)\n- Article cards with cover images, titles, descriptions, and publication dates\n- A utility function (getStrapiMedia) to handle different types of media URLs from Strapi\n- Proper handling of environment variables for the Strapi backend URL\n\n\n### Adding Tailwind CSS to our Astro 5 Project\n\nNotice that we are using Tailwind CSS in our project. Astro 5 uses the `@astrojs/tailwind` package.\n\nYou can read more about it [here](https://docs.astro.build/en/guides/integrations-guide/tailwind/).\n\nLet's add it to our project by running the following command:\n\n``` bash\n npx astro add tailwind\n```\n\nAstro will ask you a few questions, and then it will add the necessary files to your project.\n\n``` bash\nAstro will run the following command:\n If you skip this step, you can always run it yourself later\n\n ╭───────────────────────────────────────────────────────────╮\n │ npm install @astrojs/tailwind@^5.1.4 tailwindcss@^3.4.17 │\n ╰───────────────────────────────────────────────────────────╯\n\n✔ Continue? … yes\n✔ Installing dependencies...\n\n Astro will generate a minimal ./tailwind.config.mjs file.\n\n✔ Continue? … yes\n\n Astro will make the following changes to your config file:\n\n ╭ astro.config.mjs ─────────────────────────────╮\n │ // @ts-check │\n │ import { defineConfig } from 'astro/config'; │\n │ │\n │ import tailwind from '@astrojs/tailwind'; │\n │ │\n │ // https://astro.build/config │\n │ export default defineConfig({ │\n │ integrations: [tailwind()] │\n │ }); │\n ╰───────────────────────────────────────────────╯\n\n✔ Continue? … yes\n \n success Added the following integration to your project:\n - @astrojs/tailwind\n```\n\nNice, now that we have Tailwind CSS added to our project, can start working on the most important part of our project, which is how to fetch our data from Strapi 5 via the Astro Content Loader API.\n\n### Fetching Data from Strapi 5 with Astro Content Loader API\n\nIn our `index.astro` file, you may have noticed that we are using the `getCollection` function to fetch our data from Strapi 5.\n\n``` astro\nconst strapiPosts = await getCollection(\"strapiPostsLoader\");\n```\n\nThis is a custom function that Astro provides that allows you to fetch data via their Content Loader API.\n\nSo let's see how we can create a custom loader for our Strapi 5 data.\n\nYou can also read more about it [here](https://docs.astro.build/en/reference/content-loader-reference).\n\nTo make this work, we need to create a new file in the `src` folder called `content.config.mjs`.\n\nThis is where we will configure our custom loader.\n\nLet's update the file with the following code:\n\n``` astro\nimport { defineCollection, z } from \"astro:content\";\nimport qs from \"qs\";\n\n// Define a custom content collection that loads data from Strapi\nconst strapiPostsLoader = defineCollection({\n // Async loader function that fetches data from Strapi API\n loader: async () =\u003e {\n // Get Strapi URL from environment variables or fallback to localhost\n const BASE_URL = import.meta.env.STRAPI_URL || \"http://localhost:1337\";\n const path = \"/api/articles\";\n const url = new URL(path, BASE_URL);\n\n // Build query parameters using qs to populate cover image data\n url.search = qs.stringify({\n populate: {\n cover: {\n fields: [\"url\", \"alternativeText\"],\n },\n },\n });\n\n // Fetch articles from Strapi\n const articlesData = await fetch(url.href);\n const { data }= await articlesData.json();\n\n // Transform the API response into the desired data structure\n return data.map((item) =\u003e ({\n id: item.id.toString(),\n title: item.title,\n description: item.description,\n slug: item.slug,\n createdAt: item.createdAt,\n updatedAt: item.updatedAt,\n publishedAt: item.publishedAt,\n cover: {\n id: Number(item.cover.id),\n documentId: item.cover.documentId,\n url: item.cover.url,\n alternativeText: item.cover.alternativeText,\n }\n }));\n },\n // Define the schema for type validation using Zod\n schema: z.object({\n id: z.string(),\n title: z.string(),\n description: z.string(),\n slug: z.string(),\n createdAt: z.string(),\n updatedAt: z.string(),\n publishedAt: z.string(),\n cover: z.object({\n id: z.number(),\n documentId: z.string(),\n url: z.string(),\n alternativeText: z.string(),\n }),\n }),\n});\n\n// Export the collection for use in Astro pages\nexport const collections = {\n strapiPostsLoader,\n};\n```\n\nBrief Description:\nThis configuration file sets up a content collection in Astro that integrates with a Strapi CMS backend. It:\n1. Fetches article data from Strapi's API including cover images\n2. Transforms the API response into a consistent data structure\n3. Validates the data structure using Zod schema validation\n4. Makes the data available throughout the Astro application via the getCollection() function\n5. The loader can be used in Astro pages to fetch and display blog posts or articles stored in Strapi, with proper typing and validation. This creates a type-safe bridge between Strapi's headless CMS and Astro's static site generation.\n\nBefore this will work, we need to install the `qs` package and it's types, since we are using it to build our query string.\n\n``` bash\n npm i qs\n npm i @types/qs\n```\n\nNow restart your Astro 5 project and you should be able to see the data from Strapi 5 in your project.\n\n![003-astro-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_astro_5_356f4da376.png)\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/PaulBratslavsky/astro-5-strapi-5-example).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Astro.js documentation](https://docs.astro.build/en/getting-started).\n\n","createdAt":"2024-10-29T20:12:42.726Z","updatedAt":"2025-02-21T15:37:20.837Z","publishedAt":"2024-11-14T09:43:40.964Z","seo":{"metaTitle":"Integrate Astro with Strapi","metaDescription":"Integrating Astro with Strapi CMS comes with multiple benefits. Find out how to do it the right way.","keywords":"integrate strapi with astro, strapi, astro,","canonicalURL":"https://strapi.io/integrations/astro","metaImage":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}},"metaSocial":[{"socialNetwork":"Facebook","title":"Integrate Astro with Strapi 5","description":"Integrating Astro with Strapi CMS comes with multiple benefits. ","image":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}},{"socialNetwork":"Twitter","title":"Integrate Astro with Strapi 5","description":"Integrating Astro with Strapi CMS comes with multiple benefits. ","image":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}}]},"logo":{"media":{"data":{"id":6916,"attributes":{"name":"astro-icon-dark.png","width":170,"height":214,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_icon_dark_c4e62cc0a3.png","mime":"image/png","name":"thumbnail_astro-icon-dark.png","size":5.34,"width":124,"height":156,"sizeInBytes":5340}},"mime":"image/png","size":1.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_icon_dark_c4e62cc0a3.png","createdAt":"2025-01-06T14:02:59.534Z","updatedAt":"2025-01-06T14:02:59.534Z"}}}},"image":{"media":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}}}},{"id":2,"attributes":{"slug":"vuejs-cms","isExternal":false,"title":"Vue.js","description":"Vue.js is a JavaScript framework for building user interfaces that provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.","content":"## Why Use Vue.js?\n[Vue.js](https://vuejs.org/) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.\n\nVisit the [Vue.js documentation](https://vuejs.org/guide/introduction.html) for more.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\n\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Vue.js application.\n\n## Getting Started with Vue.js\n### Install Vue.js\nCreate a basic Vue.js application using the command below. This command will install and execute `create-vue`, the official Vue project scaffolding tool.\n\n```bash\nnpm create vue@latest\n```\n\nAfter running the command above, you will prompted with the following. Your answers will depend on your preferred setup.\n\n```bash\n✔ Project name: … vue-project\n✔ Add TypeScript? … No / Yes\n✔ Add JSX Support? … No / Yes\n✔ Add Vue Router for Single Page Application development? … No / Yes\n✔ Add Pinia for state management? … No / Yes\n✔ Add Vitest for Unit Testing? … No / Yes\n✔ Add an End-to-End Testing Solution? › No\n✔ Add ESLint for code quality? › No\n```\n\nOnce your project is created, run the command below to install dependencies and start the dev server:\n\n```bash\ncd \u003cyour-project-name\u003e\nnpm install\nnpm run dev\n```\n\nYou should now have your first Vue project running on \"http://localhost:5173\" as shown below:\n\n![New Vue.js Project](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Vue_js_Project_72bb8a47e3.png)\n\n\n\n## Add Tailwind CSS To Vue.js Project\nWe will install [Tailwind CSS](https://tailwindcss.com/) as a PostCSS plugin. This is the most seamless way.\n\n### Install Tailwind\nRun the command below:\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\nThe command above will create a Tailwind CSS configuration file called `tailwind.config.js`.\n\n### Add Tailwind CSS to your PostCSS configuration\nCreate a configuration file called `postcss.config.cjs` at the root of your project and add the following code:\n\n\n```javascript\n// Path: ./postcss.config.cjs\n\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n### Add Template Paths\nAdd the paths to all of your template files:\n\n```javascript\n// Path: ./tailwind.config.js\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n theme: {\n extend: {\n },\n },\n plugins: [],\n}\n```\n\n### Add the Tailwind directives to your CSS\nInside the `./src/assets/main.css` file, replace the code with the following code:\n\n```css\n/** Path: ./src/assets/main.css **/\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### Restart Vue.js Application\nAfter Tailwind CSS setup, ensure you restart your application.\n\n```bash\nnpm run dev\n```\n\n## Use an HTTP Client For Requests\nMany HTTP clients are available, but on this integration page, we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\n### Using Axios\nInstall Axios by running any of the commands below:\n\n```bash\n# npm\nnpm i axios\n\n# yarn\nyarn add axios\n```\n\n### Using fetch\nNo installation needed\n\n## GET Request Your Collection type\nExecute a `GET` request on the **Article** collection type in order to fetch all your articles.\n\nBe sure that you activated the `find` permission for the `Article` collection type.\n\n\u003e 🖐️ NOTE: We want to also fetch covers (images) of articles, so we have to use the `populate` parameter as seen below.\n\n### Using Axios\n```javascript\nimport axios;\n\n// fetch articles along with their covers\nconst response = await axios.get(\"http://localhost:1337/api/articles?populate=*\");\nconsole.log(response.data.data);\n```\n\n### Using Fetch\n```javascript\nconst response = await fetch(\"http://localhost:1337/api/articles?populate=*\");\nconst data = await response.json();\nconsole.log(data.data);\n```\n\n## Example Code\nInside the `./src/App.vue`, we will be using the Composition API. Check out [Vue.js API styles](https://vuejs.org/guide/introduction.html#api-styles) to learn more.\n\n### Set Up The Script Section\nAdd the following to the `\u003cscript setup\u003e` section:\n\n```javascript\n// Path: ./src/App.vue\n\n\u003cscript setup\u003e\n// Import dependencies\nimport { ref, onMounted } from \"vue\";\n\n// Variables\nconst articles = ref([]);\n\n// Strapi Base URL\nconst STRAPI_URL = \"http://localhost:1337\" || import.meta.env.VITE_STRAPI_URL;\n\n// Fetch articles\nconst getArticles = async () =\u003e {\n const response = await fetch(`${STRAPI_URL}/api/articles?populate=*`);\n const data = await response.json();\n articles.value = data.data;\n};\n\n// Format date\nconst formatDate = (date) =\u003e {\n const options = { year: \"numeric\", month: \"2-digit\", day: \"2-digit\" };\n return new Date(date).toLocaleDateString(\"en-US\", options);\n};\n\n// Fetch articles on component mount\nonMounted(() =\u003e {\n getArticles();\n});\n\u003c/script\u003e\n```\n\nHere is what we did above:\n* The `ref` and `onMounted` are imported from Vue for managing reactive state and lifecycle hooks, respectively.\n* `articles` reactive variable initialized as an empty array. This will store the articles fetched from the Strapi API.\n* `STRAPI_URL` Defines the base URL for the Strapi API. It falls back to \"http://localhost:1337\" by default but allows for environment configuration using `import.meta.env.VITE_STRAPI_URL`.\n* `getArtices`: An asynchronous function that fetches articles from Strapi. It sends a request to the Strapi API's `/api/articles?populate=*` endpoint, which retrieves all articles along with their associated media (images). The response is parsed into JSON, and the article data is assigned to the `articles` reactive variable.\n* `formatDate` function formats the `publishedAt` date of each article into a human-readable string (e.g., 01/14/2025). It uses the `toLocaleDateString` method with options to display the year, month, and day in a `MM/DD/YYYY` format.\n* The `onMounted` hook ensures that the `getArticles` function is called once the component is mounted to the DOM. This is when the data is fetched from Strapi.\n\n### Display Articles in The Template Section: `\u003ctemplate\u003e`\nThis section defines the structure and layout of the UI, utilizing Tailwind CSS classes for styling.\n\n```javascript\n// Path: ./src/App.vue\n\n\u003ctemplate\u003e\n \u003cdiv class=\"p-6\"\u003e\n \u003ch1 class=\"text-4xl font-bold mb-8\"\u003eVue.js and Strapi Integration\u003c/h1\u003e\n \u003cdiv\u003e\n \u003ch2 class=\"text-2xl font-semibold mb-6\"\u003eArticles\u003c/h2\u003e\n \u003cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n \u003carticle\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"bg-white shadow-md rounded-lg overflow-hidden\"\n \u003e\n \u003cimg\n :src=\"STRAPI_URL + article.cover.url\"\n alt=\"Article Image\"\n class=\"w-full h-48 object-cover\"\n /\u003e\n \u003cdiv class=\"p-4\"\u003e\n \u003ch3 class=\"text-lg font-bold mb-2\"\u003e{{ article.title }}\u003c/h3\u003e\n \u003cp class=\"text-gray-600 mb-4\"\u003e{{ article.content }}\u003c/p\u003e\n \u003cp class=\"text-sm text-gray-500\"\u003e\n Published: {{ formatDate(article.publishedAt) }}\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n```\n\nNow, this is what your Vue.js project should look like:\n\n![Vuejs and Strapi Example project.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vuejs_and_Strapi_Example_project_d276b3154b.png)\n\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/strapi-vue-integration).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Vue.js documentation](https://vuejs.org/guide/introduction.html).","createdAt":"2020-04-21T18:35:26.384Z","updatedAt":"2025-02-21T15:41:24.181Z","publishedAt":"2020-04-21T18:35:26.384Z","settings":{"theme":"dark"},"seo":{"metaTitle":"The best Headless CMS for Vue.js","metaDescription":"The #1 headless CMS to build powerful applications with Vue.js. Strapi is a new generation API-first CMS, made by developers for developers. ","metaImage":{"data":{"id":6955,"attributes":{"name":"Vue.js and Strapi Integration.png","alternativeText":"Vue.js and Strapi Integration","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Vue_js_and_Strapi_Integration_15a4d7abb1.png","mime":"image/png","name":"thumbnail_Vue.js and Strapi Integration.png","size":13.53,"width":245,"height":138,"sizeInBytes":13532}},"mime":"image/png","size":92.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vue_js_and_Strapi_Integration_15a4d7abb1.png","createdAt":"2025-01-14T14:42:47.153Z","updatedAt":"2025-01-14T14:43:05.378Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1035,"attributes":{"name":"vuejs-logo","alternativeText":"vuejs-logo","width":99,"height":85,"mime":"image/svg+xml","size":90.84,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg","createdAt":"2020-05-13T14:20:50.723Z","updatedAt":"2025-01-14T14:47:04.660Z"}}}},"image":{"media":{"data":{"id":6955,"attributes":{"name":"Vue.js and Strapi Integration.png","alternativeText":"Vue.js and Strapi Integration","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Vue_js_and_Strapi_Integration_15a4d7abb1.png","mime":"image/png","name":"thumbnail_Vue.js and Strapi Integration.png","size":13.53,"width":245,"height":138,"sizeInBytes":13532}},"mime":"image/png","size":92.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vue_js_and_Strapi_Integration_15a4d7abb1.png","createdAt":"2025-01-14T14:42:47.153Z","updatedAt":"2025-01-14T14:43:05.378Z"}}}}}},{"id":13,"attributes":{"slug":"angular-cms","isExternal":false,"title":"Angular","description":"Angular is a platform for building mobile and desktop web applications.","content":"# Integrate Strapi with Angular for Effective Content Management\n\n## Introduction to Strapi and Angular\n\nCombining Strapi with Angular provides a powerful solution for developing dynamic, content-driven web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while Angular, a popular framework by Google, excels at building efficient and scalable web applications.\n\n### Why Use Strapi with Angular?\n\nIntegrating Strapi with Angular allows developers to create high-performance, scalable applications. Strapi’s flexible API and content management capabilities complement Angular’s component-based architecture and powerful features for building complex applications.\n\n## Key Features\n\n### Strapi Highlights:\n- **Customizable API**: Modify the API to fit your specific requirements using Strapi’s intuitive interface.\n- **Roles \u0026 Permissions**: Control access with detailed permissions.\n- **Media Library**: Manage and optimize media assets easily.\n- **Internationalization**: Build multilingual websites effortlessly.\n- **Authentication**: Secure API access with JWT or OAuth providers.\n\n### Angular Highlights:\n- **Component-Based Architecture**: Create encapsulated components that manage their own state.\n- **Two-Way Data Binding**: Simplifies the process of data binding between the model and view.\n- **Dependency Injection**: Improves code maintainability and reusability.\n- **Reactive Programming**: Use RxJS for handling asynchronous data streams.\n- **CLI**: Powerful Angular CLI for project scaffolding and management.\n\n## Best Practices for Using Strapi with Angular\n\n1. **Data Fetching**: Use Angular’s `HttpClient` module to fetch data from Strapi.\n2. **State Management**: Utilize services and state management libraries like NgRx.\n3. **Authentication**: Implement JWT or OAuth for secure API interactions.\n4. **Error Handling**: Ensure robust error handling for data fetching and API calls.\n5. **Environment Variables**: Store sensitive information like API keys in environment variables.\n\n## Getting Started\n\n### Setting Up Strapi\n\n1. **Install Strapi**:\n ```bash\n npx create-strapi-app@latest my-project\n ```\n2. **Configure Strapi**: Customize your API endpoints and content types through the Strapi admin panel.\n\n### Integrating with Angular\n\n1. **Install Angular CLI**:\n ```bash\n npm install -g @angular/cli\n ng new my-angular-app\n ```\n2. **Fetch Data from Strapi**:\n Use Angular’s `HttpClient` to fetch data from Strapi.\n\n ```typescript\n import { HttpClient } from '@angular/common/http';\n import { Component, OnInit } from '@angular/core';\n\n @Component({\n selector: 'app-root',\n template: `\n \u003cdiv *ngFor=\"let post of posts\"\u003e\n \u003ch2\u003e{{ post.attributes.title }}\u003c/h2\u003e\n \u003cp\u003e{{ post.attributes.content }}\u003c/p\u003e\n \u003c/div\u003e\n `\n })\n export class AppComponent implements OnInit {\n posts: any[] = [];\n\n constructor(private http: HttpClient) {}\n\n ngOnInit() {\n this.http.get('http://localhost:1337/posts').subscribe((data: any) =\u003e {\n this.posts = data.data;\n });\n }\n }\n ```\n\n3. **Display Content**: Render the fetched data in your Angular components as shown above.\n\nIntegrating Strapi with Angular provides a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and Angular's robust framework, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Angular documentation](https://angular.io/docs).","createdAt":"2020-06-29T17:21:05.798Z","updatedAt":"2024-11-06T11:03:45.537Z","publishedAt":"2020-06-29T17:21:05.798Z","seo":{"metaTitle":"The best open-source headless CMS for Angular","metaDescription":"The #1 headless CMS to build powerful applications with Angular. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Angular.","metaImage":{"data":{"id":1186,"attributes":{"name":"angular","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_af1ba4ed75.jpeg","mime":"image/png","size":19.89,"width":245,"height":141}},"mime":"image/png","size":229.7,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_af1ba4ed75.jpeg","createdAt":"2020-06-29T17:06:20.003Z","updatedAt":"2020-10-07T15:13:10.416Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1185,"attributes":{"name":"angular (1)","alternativeText":"","width":2500,"height":677,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_(1)_d2355b8666.png","mime":"image/png","size":9.55,"width":245,"height":66}},"mime":"image/png","size":41.75,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_(1)_d2355b8666.png","createdAt":"2020-06-29T17:05:05.014Z","updatedAt":"2020-06-29T17:05:05.014Z"}}}},"image":{"media":{"data":{"id":1186,"attributes":{"name":"angular","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_af1ba4ed75.jpeg","mime":"image/png","size":19.89,"width":245,"height":141}},"mime":"image/png","size":229.7,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_af1ba4ed75.jpeg","createdAt":"2020-06-29T17:06:20.003Z","updatedAt":"2020-10-07T15:13:10.416Z"}}}}}},{"id":30,"attributes":{"slug":"flutter-cms","isExternal":false,"title":"Flutter","description":"Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.","content":"## What is Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## What is Flutter?\nFlutter is an open source [Google](https://www.google.com/)'s UI toolkit framework for building beautiful, natively compiled, multi-platform applications from a single codebase.\n\nVisit the [Flutter documentation](https://docs.flutter.dev/) for more.\n\n## Strapi and FLutter Integration\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n\nLearn more about [Strapi features](https://strapi.io/features).\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our Strapi 5 project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: that article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Next.js application.\n\n\n## Getting Started With Flutter\nIt is recommended to use the `create-next-app`, which sets up everything automatically for you. \n\n### Prerequisites\nBefore you proceed, ensure you have the following:\n\n* [Flutter SDK](https://flutter.dev/) (latest version)\n* [VS Code](https://code.visualstudio.com/) or whatever code editor you like.\n* An environment setup for Flutter. Check out how to [install and setup Flutter](https://docs.flutter.dev/get-started/install).\n\n### Step 1: Create a New Flutter Project\nRun the Flutter `create` command to create a new Flutter project. We will name the project `my_flutter_app`.\n\n```bash\nflutter create my_flutter_app\n```\n\n### Step 2: Start Your Flutter Application\nRun the command below to start your Flutter app, make sure to CD into your flutter project:\n\n```bash\ncd my_flutter_app\nflutter run\n```\n\nThis is what your app should look like:\n\n![New Flutter App.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Flutter_App_e850fbe3cf.png)\n\n### Step 3: Install HTTP Package\nIn your project folder terminal, add the HTTP package to communicate with Strapi using the command below:\n\n```bash\nflutter pub add http\n```\n\nNext, head over to `./lib/main.dart` file to continue the next steps.\n\n### Step 4: Import Packages and Define Constant\nImports Flutter's Material Design package (`flutter/material.dart`), HTTP package (`http`) and Dart's library for encoding and decoding JSON (`dart:convert`).\n\nAlso, define the Strapi API URL\n\n```dart\n// Path: `./lib/main.dart`\n\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\n\nconst String strapiUrl = 'http://localhost:1337';\n```\n\n### Step 5: Create Entry Point - Main Function\n\nInitialize your Flutter app with `runApp(MyApp())` and set `MyApp` as the root widget of your application.\n\n```dart\n// ...\n\nvoid main() {\n runApp(MyApp());\n}\n```\n\n### Step 6: Create Root Widget - MyApp\n\nSet `MaterialApp` as the main container for your app. And `ArticleScreen` as the home screen.\n```dart\n// ...\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: ArticleScreen(),\n );\n }\n}\n\n```\n\n### Step 7: Create Stateful Widget - ArticleScreen\nCreate `ArticleScreen` stateful widget which will manage the state in `_ArticleScreenState`.\n\n```dart\n// ...\n\nclass ArticleScreen extends StatefulWidget {\n @override\n _ArticleScreenState createState() =\u003e _ArticleScreenState();\n}\n\n```\n\n### Step 8: Create State Class - `_ArticleScreenState`\n```dart\n// ...\n\nclass _ArticleScreenState extends State\u003cArticleScreen\u003e {\n List articles = [];\n\n @override\n void initState() {\n super.initState();\n fetchArticles();\n }\n\n```\n* Define the `_ArticleScreenState class`. \n* `articles` list holds fetched articles.\n* `initState()` is called when the widget is created, triggering `fetchArticles()`.\n\n### Step 9: Fetch Articles from Strapi\nSend a `GET` request to http://localhost:1337/api/articles?populate=*. If the response is successful (`statusCode == 200`), decode the JSON and update the articles list.\n\nUse `setState()` to refresh the UI with new data.\n\n```dart\n// ...\n\nFuture\u003cvoid\u003e fetchArticles() async {\n final response =\n await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));\n if (response.statusCode == 200) {\n print('Raw API Response: ${jsonEncode(response.body)}');\n setState(() {\n articles = jsonDecode(response.body)['data'];\n });\n }\n}\n\n```\n\n### Step 10: Scaffold the UI and Display Articles\nUse `Scaffold` to provide a basic app structure with an `AppBar` and `body`. Use the `ListView.builder` to dynamically create a list of articles.\n\nWrap each article inside a `Card` for better UI styling. Display the article cover image, title and description inside a `Padding` widget.\n\n```bash\n// ...\n\n@override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Strapi + Flutter')),\n body: ListView.builder(\n itemCount: articles.length,\n itemBuilder: (context, index) {\n var article = articles[index];\n debugPrint(article.toString());\n return Card(\n margin: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // if (article['image'] != null)\n Image.network('$strapiUrl${article['cover']['url']}'),\n Padding(\n padding: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n article['title'],\n style: TextStyle(\n fontSize: 20, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 5),\n Text(article['description']),\n ],\n ),\n ),\n ],\n ),\n );\n },\n ),\n );\n }\n```\n\n## Complete Project Code\nHere is the complete code from the steps above:\n\n```dart\n// Path: `./lib/main.dart`\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\n\nconst String strapiUrl = 'http://localhost:1337';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: ArticleScreen(),\n );\n }\n}\n\nclass ArticleScreen extends StatefulWidget {\n @override\n _ArticleScreenState createState() =\u003e _ArticleScreenState();\n}\n\nclass _ArticleScreenState extends State\u003cArticleScreen\u003e {\n List articles = [];\n\n @override\n void initState() {\n super.initState();\n fetchArticles();\n }\n\n Future\u003cvoid\u003e fetchArticles() async {\n final response =\n await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));\n if (response.statusCode == 200) {\n print('Raw API Response: ${jsonEncode(response.body)}');\n setState(() {\n articles = jsonDecode(response.body)['data'];\n print(articles);\n });\n }\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Strapi + Flutter')),\n body: ListView.builder(\n itemCount: articles.length,\n itemBuilder: (context, index) {\n var article = articles[index];\n debugPrint(article.toString());\n return Card(\n margin: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // if (article['image'] != null)\n Image.network('$strapiUrl${article['cover']['url']}'),\n Padding(\n padding: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n article['title'],\n style: TextStyle(\n fontSize: 20, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 5),\n Text(article['description']),\n ],\n ),\n ),\n ],\n ),\n );\n },\n ),\n );\n }\n}\n\n```\n\n\n## Refresh your Flutter Application\nInside your terminal, press `r` on your keyboard to refresh your application to see the latest changes.\n\nAfter that is done, this is what our Flutter application should look like:\n\n```bash\nnpm run dev\n```\n\nHere is what your updated application should look like:\n\n![Flutter and Strapi Integration App.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_App_eae6a4cb4c.png)\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/nextjs-strapi-integration).\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Flutter documentation](https://docs.flutter.dev/).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e","createdAt":"2021-02-25T14:57:46.560Z","updatedAt":"2025-02-18T12:09:43.110Z","publishedAt":"2021-02-25T14:57:46.560Z","seo":{"metaTitle":"The best open-source headless CMS for Flutter","metaDescription":"The #1 headless CMS to build powerful mobile applications with Flutter.\nStrapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Flutter.","metaImage":{"data":{"id":7246,"attributes":{"name":"Flutter and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Flutter_and_Strapi_Integration_187dc34d3b.png","mime":"image/png","name":"thumbnail_Flutter and Strapi Integration.png","size":10.88,"width":245,"height":138,"sizeInBytes":10884}},"mime":"image/png","size":45.17,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_187dc34d3b.png","createdAt":"2025-02-17T12:11:15.776Z","updatedAt":"2025-02-17T12:11:15.776Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1901,"attributes":{"name":"logo_lockup_flutter_horizontal.svg","alternativeText":"","width":560,"height":157,"mime":"image/svg+xml","size":12.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg","createdAt":"2021-02-25T14:31:13.451Z","updatedAt":"2021-02-25T14:31:13.544Z"}}}},"image":{"media":{"data":{"id":7246,"attributes":{"name":"Flutter and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Flutter_and_Strapi_Integration_187dc34d3b.png","mime":"image/png","name":"thumbnail_Flutter and Strapi Integration.png","size":10.88,"width":245,"height":138,"sizeInBytes":10884}},"mime":"image/png","size":45.17,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_187dc34d3b.png","createdAt":"2025-02-17T12:11:15.776Z","updatedAt":"2025-02-17T12:11:15.776Z"}}}}}}]},"cards":[{"id":4,"slug":"nextjs-cms","isExternal":false,"title":"Next.js","description":"Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.","content":"## What is Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## What is Next.js?\nNext.js is a popular [React](https://react.dev/) framework known for its performance and ease of use. It includes features such as [server-side rendering (SSR), static site generation (SSG)](https://strapi.io/blog/ssr-vs-ssg-in-nextjs-differences-advantages-and-use-cases), and other advanced features, which makes it a go-to choice for modern web development.\n\nVisit the [Next.js documentation](https://nextjs.org/docs) for more.\n\n## Strapi and Next.js Integration\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n\nLearn more about [Strapi features](https://strapi.io/features).\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our Strapi 5 project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: that article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Next.js application.\n\n\n## Creat a Next.js App\nIt is recommended to use the `create-next-app`, which sets up everything automatically for you. \n\n```bash\nnpx create-next-app@latest\n```\nDepending on your project setup, you will answer the following prompts:\n\n```bash\n✔ What is your project named? … nextjs-project\n✔ Would you like to use TypeScript? … Yes\n✔ Would you like to use ESLint? … No\n✔ Would you like to use Tailwind CSS? … Yes\n✔ Would you like your code inside a `src/` directory? … Yes\n✔ Would you like to use App Router? (recommended) … Yes\n✔ Would you like to use Turbopack for `next dev`? … Yes\n✔ Would you like to customize the import alias (`@/*` by default)? … No\n```\n\nEnsure you select **\"Yes\"** for [Tailwind CSS](https://tailwindcss.com/).\n\n### Start Your Next.js Application\nStart Next.js in development mode by running the command below.\n\n```bash\nnpm run dev\n```\n\nHere is what your new Next.js application should look like on the URL http://localhost:3000:\n\n![New Nextjs project.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Nextjs_project_d6293795ef.png)\n\n## Use an HTTP Client For Requests\nMany HTTP clients are available, but on this integration page, we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\n### Using Axios\nInstall Axios by running any of the commands below:\n\n```bash\n# npm\nnpm i axios\n\n# yarn\nyarn add axios\n```\n\n### Using fetch\nNo installation needed\n\n## Fetch Contents from Strapi\nExecute a `GET` request on the **Article** collection type in order to fetch all your articles.\n\nBe sure that you activated the `find` permission for the `Article` collection type.\n\n\u003e 🖐️ NOTE: We want to also fetch **covers (images)** of articles, so we have to use the `populate` parameter as seen below.\n\n### Using Axios\n```javascript\nimport axios;\n\n// fetch articles along with their covers\nconst response = await axios.get(\"http://localhost:1337/api/articles?populate=*\");\nconsole.log(response.data.data);\n```\n\n### Using Fetch\n```javascript\nconst response = await fetch(\"http://localhost:1337/api/articles?populate=*\");\nconst data = await response.json();\nconsole.log(data.data);\n```\n\n## Project Example\nIn this project example, you will fetch data from Strapi and display them in your Next.js application.\n\nHead over to your Next.js entry file `./src/app/page.tsx` to proceed.\n\n### Step 1: Specify the \"use client\" Directory\nInside the `./src/app/page.tsx` file, add the code below:\n\n```javascript\n// Path: ./src/app/page.tsx\n\n\"use client\"; // This is a client-side component\n\n```\n\nThe `\"use client\"` directive will tell Next.js to render a component on the [client-side](https://nextjs.org/docs/app/api-reference/directives/use-client) instead of the default [server](https://nextjs.org/docs/app/api-reference/directives/use-server) directive.\n\n### Step 2: Import React hooks and Image component\nImport the React hooks `useEffect` and `useState` for side effects and state management respectively.\n\nAlso, import the `Image` component which provides automatic image optimization.\n\n\n```javascript\n\"use client\"; // This is a client-side component\n\n// Import React hooks and Image component\nimport { useEffect, useState } from \"react\";\nimport Image from \"next/image\";\n```\n\n### Step 3: Allow Images from Localhost in Next.js\nSince you are working on a development environment localhost, you have to configure Next.js to allow images.\n\nNavigate to `./next.config.ts` and add the following code:\n\n```javascript\n// Path: ./next.config.ts\n\nimport type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n /* config options here */\n\n // Allow images from localhost\n images: {\n domains: [\"localhost\"],\n },\n};\n\nexport default nextConfig;\n```\n\n### Step 4: Create Data Type and Constant\nCreate an interface called `Article` which represents the data structure of the articles we will fetch from Strapi. Also, create a Strapi URL constant.\n\n```javascript\nexport interface Article {\n id: string;\n title: string;\n content: string;\n cover: any;\n publishedAt: Date;\n}\n\n// Define Strapi URL\nconst STRAPI_URL = \"http://localhost:1337\";\n```\n\n### Step 5: Define `articles` State Variable\nCreate a state variable `articles` to hold articles data fetched from Strapi.\n\n```javascript\n// Define articles state\nconst [articles, setArticles] = useState\u003cArticle[]\u003e([]);\n\n```\n\n### Step 6: Create Function to Fetch Articles\nCreate an asynchronous function that fetches the articles from the Strapi API. The data fetched is passed to `setArticles` to update the `articles` state.\n\n```javascript\nconst getArticles = async () =\u003e {\n const response = await fetch(`${STRAPI_URL}/api/articles?populate=*`);\n const data = await response.json();\n setArticles(data.data);\n};\n\n```\n\n### Step 7: Create a Function to Format Dates\nCreate a helper function to format the `publishedAt` date of the article into a human-readable format (MM/DD/YYYY).\n\n```javascript\nconst formatDate = (date: Date) =\u003e {\n const options: Intl.DateTimeFormatOptions = {\n year: \"numeric\",\n month: \"2-digit\",\n day: \"2-digit\",\n };\n return new Date(date).toLocaleDateString(\"en-US\", options);\n};\n\n```\n\n### Step 8: Fetching Articles on Component Mount\nUse the `useEffect` to run the `getArticles` function when the component mounts.\n\n```javascript\nuseEffect(() =\u003e {\n getArticles();\n}, []);\n\n```\n\n### Step 9: Render and Display Articles\n```javascript\nreturn (\n \u003cdiv className=\"p-6\"\u003e\n \u003ch1 className=\"text-4xl font-bold mb-8\"\u003eNext.js and Strapi Integration\u003c/h1\u003e\n \u003cdiv\u003e\n \u003ch2 className=\"text-2xl font-semibold mb-6\"\u003eArticles\u003c/h2\u003e\n \u003cdiv className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n {articles.map((article) =\u003e (\n \u003carticle\n key={article.id}\n className=\"bg-white shadow-md rounded-lg overflow-hidden\"\n \u003e\n \u003cImage\n className=\"w-full h-48 object-cover\"\n src={STRAPI_URL + article.cover.url}\n alt={article.title}\n width={180}\n height={38}\n priority\n /\u003e\n \u003cdiv className=\"p-4\"\u003e\n \u003ch3 className=\"text-lg font-bold mb-2\"\u003e{article.title}\u003c/h3\u003e\n \u003cp className=\"text-gray-600 mb-4\"\u003e{article.content}\u003c/p\u003e\n \u003cp className=\"text-sm text-gray-500\"\u003e\n Published: {formatDate(article.publishedAt)}\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n);\n\n```\n\nNow, this is what your Next.js project should look like:\n\n![Nextjs and Strapi integration project sample.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_integration_project_sample_9fcce1bbd0.png)\n\nAwesome, congratulations!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/nextjs-strapi-integration).\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Next.js documentation](https://nextjs.org/docs).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e","createdAt":"2020-04-21T18:38:23.689Z","updatedAt":"2025-02-24T06:29:12.054Z","publishedAt":"2020-04-21T18:38:23.689Z","seo":{"metaTitle":"The best open-source headless CMS for Next.js","metaDescription":"The #1 headless CMS to build powerful applications with Next.js. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Next.js.","metaImage":{"data":{"id":6907,"attributes":{"name":"Nextjs and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Nextjs_and_Strapi_Integration_6a376d71cf.png","mime":"image/png","name":"thumbnail_Nextjs and Strapi Integration.png","size":12.89,"width":245,"height":138,"sizeInBytes":12893}},"mime":"image/png","size":162.9,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_Integration_6a376d71cf.png","createdAt":"2024-12-20T07:00:35.522Z","updatedAt":"2024-12-20T07:00:35.522Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":6833,"attributes":{"name":"Next.png","width":320,"height":320,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Next_8a2bb31230.png","mime":"image/png","name":"thumbnail_Next.png","size":6.8,"width":156,"height":156,"sizeInBytes":6798}},"mime":"image/png","size":3.95,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Next_8a2bb31230.png","createdAt":"2024-12-11T13:43:33.993Z","updatedAt":"2024-12-11T13:43:33.993Z"}}}},"image":{"media":{"data":{"id":6907,"attributes":{"name":"Nextjs and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Nextjs_and_Strapi_Integration_6a376d71cf.png","mime":"image/png","name":"thumbnail_Nextjs and Strapi Integration.png","size":12.89,"width":245,"height":138,"sizeInBytes":12893}},"mime":"image/png","size":162.9,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Nextjs_and_Strapi_Integration_6a376d71cf.png","createdAt":"2024-12-20T07:00:35.522Z","updatedAt":"2024-12-20T07:00:35.522Z"}}}},"link":{"href":"/integrations/nextjs-cms","text":"Create Project"}},{"id":6,"slug":"react-cms","isExternal":false,"title":"React","description":"React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.","content":"# Integrate Strapi with React for Efficient Content Management\n\n## Introduction to Strapi and React\n\nStrapi and React together form a powerful duo for creating dynamic, content-rich web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while React, a popular JavaScript library, excels at building interactive user interfaces.\n\n### Why Use Strapi with React?\n\nBy integrating Strapi with React, developers can build highly performant, scalable, and dynamic applications. Strapi's flexible API and content management features complement React's component-based architecture, enabling efficient data handling and rendering.\n\n## Key Features\n\n### Strapi Highlights:\n- **Customizable API**: Tailor the API to your specific needs using Strapi's intuitive interface.\n- **Roles \u0026 Permissions**: Manage user access with detailed permissions.\n- **Media Library**: Easily handle and optimize media assets.\n- **Internationalization**: Create multilingual websites effortlessly.\n- **Authentication**: Secure your API with JWT or OAuth providers.\n\n### React Highlights:\n- **Component-Based**: Build encapsulated components that manage their own state.\n- **Declarative**: Design interactive UIs with ease by describing how the UI should look.\n- **Virtual DOM**: Efficiently update and render components.\n- **Hooks**: Use state and other React features without writing classes.\n- **Community \u0026 Ecosystem**: Leverage a vast ecosystem of libraries and tools.\n\n## Best Practices for Using Strapi with React\n\n1. **Data Fetching**: Use hooks like `useEffect` for fetching data from Strapi.\n2. **State Management**: Utilize state management solutions like Redux or Context API.\n3. **Authentication**: Implement JWT or OAuth for secure API interactions.\n4. **Error Handling**: Ensure robust error handling for data fetching and API calls.\n5. **Environment Variables**: Store sensitive information like API keys in environment variables.\n\n## Getting Started\n\n### Setting Up Strapi\n\n1. **Install Strapi**:\n\n```bash\nnpx create-strapi-app@latest my-project\n```\n\n2. **Configure Strapi**: Customize your API endpoints and content types in the Strapi admin panel.\n\n### Integrating with React\n\n1. **Install React**:\n\n```bash\n npx create-react-app my-react-app\n```\n\n2. **Fetch Data from Strapi**:\n Use hooks like `useEffect` to fetch data from Strapi.\n\n```javascript\nimport React, { useEffect, useState } from 'react';\n\nfunction App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() =\u003e {\n fetch('http://localhost:1337/posts')\n .then(response =\u003e response.json())\n .then(data =\u003e setPosts(data));\n }, []);\n\n return (\n \u003cdiv\u003e\n {posts.data.map(post =\u003e (\n \u003carticle key={post.id}\u003e\n \u003ch2\u003e{post.attributes.title}\u003c/h2\u003e\n \u003cp\u003e{post.attributes.content}\u003c/p\u003e\n \u003c/article\u003e\n ))}\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n3. **Display Content**: Render the fetched data in your React components as shown above.\n\nStrapi and React together provide a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and React's UI flexibility, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [React documentation](https://reactjs.org/docs).","createdAt":"2020-04-21T18:40:30.361Z","updatedAt":"2025-02-21T15:39:32.695Z","publishedAt":"2020-04-21T18:40:30.361Z","settings":{"theme":"dark"},"seo":{"metaTitle":"The best Headless CMS for React","metaDescription":"The #1 headless CMS to build powerful applications with React. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and React.","metaImage":{"data":{"id":1107,"attributes":{"name":"cover-react-cms","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_cover-react-cms_09dce2416d.jpeg","mime":"image/png","size":19.68,"width":245,"height":141}},"mime":"image/png","size":231.27,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/cover-react-cms_09dce2416d.jpeg","createdAt":"2020-05-16T22:35:09.062Z","updatedAt":"2020-10-07T15:13:41.584Z"}}},"metaSocial":[]},"link":{"href":"/integrations/react-cms","text":"Create Project"},"logo":{"media":{"data":{"id":113,"attributes":{"name":"React-logo","alternativeText":"","width":842,"height":595,"mime":"image/svg+xml","size":3.45,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/React-logo_663c3a4121.svg","createdAt":"2020-04-23T15:27:41.598Z","updatedAt":"2020-04-23T15:27:41.598Z"}}}},"image":{"media":{"data":{"id":1107,"attributes":{"name":"cover-react-cms","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_cover-react-cms_09dce2416d.jpeg","mime":"image/png","size":19.68,"width":245,"height":141}},"mime":"image/png","size":231.27,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/cover-react-cms_09dce2416d.jpeg","createdAt":"2020-05-16T22:35:09.062Z","updatedAt":"2020-10-07T15:13:41.584Z"}}}}},{"id":104,"slug":"react-router-7","isExternal":false,"title":"React Router 7","description":"React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture.","content":"## Why Use React Router 7?\n\nReact Router 7 introduces several enhancements that aim to improve developer workflow and application performance. Here's a breakdown:\n\nFor Developers:\n- Simplified Installation: React Router 7 unifies core functionality into a single package, react-router, streamlining installation and management.\n- Streamlined Data Handling: The removal of the json() utility function in favor of manual response object construction offers greater flexibility and transparency in data handling.\n- Simplified defer Functionality: The defer function, used for delayed data loading, has been simplified, reducing boilerplate code.\n- Framework Mode for Full-Stack Development: React Router 7 introduces a \"framework mode\" enabling full-stack React application development with features like server-side rendering (SSR), code splitting, and file-based routing, all within a familiar tool.\n- Improved Nested Routing with Layout Routes: Layout routes, using the Outlet component, allow developers to define shared layouts for nested routes, reducing code duplication and promoting a clear separation of layout and content.\n- Enhanced Type Safety: Improved type safety for route parameters, loader data, and actions ensures better developer experience and reduces runtime errors.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our React Router 7 client.\n\n## Getting Started with React Router 7\n\nI will walk you through the steps to setup a new React Router 7 project. But here is the link to the [React Router 7 Docs](https://reactrouter.com/home) that I used for reference.\n\n### React Router 7 Installation and Initial Setup\n\nWe are going to got the **React Router 7 Framework** Route.\n\nMake sure that you are in the `root` directory of your project and run the following command to install React Router 7.\n\n``` bash\n npx create-react-router@latest client\n```\n\nSay **Yes** to all the default options.\n\nOnce everything is installed, you can start your React Router 7 server with the following command:\n\n``` bash\n cd client\n npm run dev\n```\n\n![009-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/009_react_router_7_2e62fa5de5.png)\n\nNice, now that we have our React Router 7 client setup, we can start to integrate it with our Strapi 5 server.\n\n### React Router 7 File Based Routing\n\nWe are going to opt in to use the **File Based Routing Convention** for our React Router 7 application. \n\nYou can read more about it [here](https://reactrouter.com/how-to/file-route-conventions).\n\nIn order to do this, we must first install the following package:\n\n``` bash\n npm i @react-router/fs-routes\n```\n\nNext, let's navigate to the `app/routes.tsx` file and update the file to the following:\n\n``` tsx\n// https://reactrouter.com/how-to/file-route-conventions\n\nimport { type RouteConfig } from \"@react-router/dev/routes\";\nimport { flatRoutes } from \"@react-router/fs-routes\";\n\nexport default flatRoutes() satisfies RouteConfig;\n```\n\nAnd finally, in the `client/app/routes` folder, rename the `home.tsx` file to `_index.tsx`.\n\nand update the file to the following:\n\n``` tsx\n//old:\nimport type { Route } from \"./+types/home\";\n\n// updated:\nimport type { Route } from \"./+types/_index\";\n\n```\n\nNow restart your React Router 7 and everything should still be working.\n\nIf you wanted to add a new route, you can do so by creating a new file in the `app/routes` folder.\n\nLet's do a simple example.\n\nIn the `app/routes` folder, create a new file called `about.tsx`.\n\nAnd update the file to the following:\n\n``` tsx\nimport type { Route } from \"./+types/about\";\n\nexport function meta({}: Route.MetaArgs) {\n return [\n { title: \"About\" },\n { name: \"description\", content: \"About Page\" },\n ];\n}\n\nexport default function About() {\n return \u003cdiv className=\"container mx-auto p-4\"\u003eThis is the about page\u003c/div\u003e;\n}\n\n```\n\nNow restart your React Router 7 and you should be able to navigate to the about page at `http://localhost:5173/about`.\n\n![010-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/010_react_router_7_efe463e8e0.png)\n\nNice, now that we have a basic route setup, we can start to integrate it with our Strapi 5 server.\n\n\n### Fetching Data from Strapi 5 with React Router 7\n\nWe are going to opt in to use server loader to fetch data from our Strapi 5 server.\n\nYou can read more about it [here](https://reactrouter.com/start/framework/data-loading#server-data-loading).\n\nTo make this work, we need to update our `app/routes/_index.tsx` let's update the file with the following code:\n\n``` tsx\nimport qs from \"qs\";\n\nimport type { Route } from \"./+types/_index\";\nimport { ArticleCard } from \"../components/article-card\";\n\ninterface Article {\n id: number;\n documentId: string;\n title: string;\n description: string;\n slug: string;\n createdAt: string;\n updatedAt: string;\n publishedAt: string;\n cover: {\n url: string;\n alternativeText: string;\n };\n}\n\ninterface ArticleResponse {\n data: Article[];\n}\n\ninterface LoaderData {\n articlesData: ArticleResponse;\n}\n\n// Server Side Loader\nexport async function loader({ params }: Route.LoaderArgs) {\n const BASE_URL = import.meta.env.VITE_STRAPI_URL || \"http://localhost:1337\";\n const path = \"/api/articles\";\n const url = new URL(path, BASE_URL);\n\n url.search = qs.stringify({\n populate: {\n cover: {\n fields: [\"url\", \"alternativeText\"],\n },\n },\n });\n\n const articlesData = await fetch(url.href);\n const data = await articlesData.json();\n return { articlesData: data as ArticleResponse };\n}\n\nexport function meta(/*{}: Route.MetaArgs */) {\n return [\n { title: \"Home | React Router 7\" },\n { name: \"description\", content: \"Home Page\" },\n ];\n}\n\nexport default function IndexRoute({ loaderData }: { loaderData: LoaderData }) {\n if (!loaderData) return \u003cp\u003eNo data found\u003c/p\u003e;\n return (\n \u003cdiv className=\"container mx-auto px-4 py-8\"\u003e\n \u003ch1 className=\"text-3xl font-bold mb-6\"\u003e\n React Router 7 and Strapi 5 Demo\n \u003c/h1\u003e\n \u003cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n {loaderData.articlesData.data.map((article: Article) =\u003e (\n \u003cArticleCard\n key={article.id}\n title={article.title}\n description={article.description}\n publishedAt={article.publishedAt}\n slug={article.slug}\n cover={article.cover}\n /\u003e\n ))}\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n\n```\n\nBefore this will work, we need to add two more components to our project, and install the `qs` package that will help us with the query string.\n\nIn our projects `app` folder, create a new folder called `components`. And let's add two new components to our project.\n\nWe will start with the `StrapiImage` component.\n\nCreate a new file called `strapi-image.tsx` and update the file with the following code:\n\n``` tsx\ninterface StrapiImageProps {\n src: string;\n alt: string | null;\n height?: number;\n width?: number;\n className?: string;\n}\n\nconst STRAPI_API_URL = process.env.STRAPI_API_URL ?? \"http://localhost:1337\";\n\nexport function getStrapiMedia(url: string | null) {\n if (url == null) return null;\n if (url.startsWith(\"data:\")) return url;\n if (url.startsWith(\"http\") || url.startsWith(\"//\")) return url;\n return `${STRAPI_API_URL}${url}`;\n}\n\nexport function StrapiImage({\n src,\n alt,\n className,\n ...rest\n}: Readonly\u003cStrapiImageProps\u003e) {\n const imageUrl = getStrapiMedia(src);\n if (!imageUrl) return null;\n return (\n \u003cimg\n src={imageUrl}\n alt={alt ?? \"No alternative text provided\"}\n className={className}\n {...rest}\n /\u003e\n );\n}\n```\nNow let's create the `ArticleCard` component.\n\nCreate a new file called `article-card.tsx` and update the file with the following code:\n\n``` tsx \nimport { StrapiImage } from \"./strapi-image\";\n\nexport interface ArticleCardProps {\n title: string;\n description: string;\n publishedAt: string;\n slug: string;\n cover: {\n url: string;\n alternativeText: string;\n };\n}\n\nexport function ArticleCard({\n title,\n description,\n publishedAt,\n slug,\n cover,\n}: Readonly\u003cArticleCardProps\u003e) {\n return (\n \u003cdiv className=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300\"\u003e\n \u003cdiv className=\"aspect-w-16 aspect-h-9\"\u003e\n \u003cStrapiImage\n src={cover.url}\n alt={cover.alternativeText}\n className=\"object-cover w-full h-full\"\n /\u003e\n \u003c/div\u003e\n \u003cdiv className=\"p-6\"\u003e\n \u003ch2 className=\"text-xl font-bold text-gray-800 mb-2\"\u003e{title}\u003c/h2\u003e\n \u003cp className=\"text-gray-600 mb-4 line-clamp-2\"\u003e{description}\u003c/p\u003e\n \u003cdiv className=\"flex justify-between items-center text-sm text-gray-500\"\u003e\n \u003cspan\u003e{new Date(publishedAt).toLocaleDateString()}\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n}\n```\n\nAnd finally, let's add the `qs` package to our project.\n\n``` bash\n npm i qs\n npm i @types/qs\n```\n\nNow restart your React Router 7 app and you Strapi 5 app and you should be able to the following screen.\n\n![011-react-router-7.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/011_react_router_7_53f8e14a6d.png)\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/PaulBratslavsky/react-router-7-strapi-5-example).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [React Router 7 documentation](https://reactrouter.com/home).\n","createdAt":"2024-12-20T03:19:54.314Z","updatedAt":"2025-01-15T18:46:55.199Z","publishedAt":"2024-12-20T03:43:09.517Z","seo":{"metaTitle":"The best open-source headless CMS for React Router 7","metaDescription":"Get started in minutes with Strapi and React Router 7.","keywords":"strapi, react router 7","canonicalURL":"https://strapi.io/integrations/react-router-7","metaImage":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}},"metaSocial":[{"socialNetwork":"Facebook","title":"The best open-source headless CMS for React Router 7","description":"Get started in minutes with Strapi and React Router 7.","image":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}},{"socialNetwork":"Twitter","title":"The best open-source headless CMS for React Router 7","description":"Get started in minutes with Strapi and React Router 7.","image":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}}]},"logo":{"media":{"data":{"id":6894,"attributes":{"name":"react-router-7.png","width":320,"height":320,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0f71a95982.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":7.36,"width":156,"height":156,"sizeInBytes":7356}},"mime":"image/png","size":4.25,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0f71a95982.png","createdAt":"2024-12-20T02:58:41.032Z","updatedAt":"2024-12-20T02:58:41.032Z"}}}},"image":{"media":{"data":{"id":6948,"attributes":{"name":"react-router-7.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_react_router_7_0bf1278dd9.png","mime":"image/png","name":"thumbnail_react-router-7.png","size":14.85,"width":245,"height":138,"sizeInBytes":14850}},"mime":"image/png","size":169.07,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/react_router_7_0bf1278dd9.png","createdAt":"2025-01-14T13:50:52.774Z","updatedAt":"2025-01-14T13:50:52.774Z"}}}},"link":{"href":"/integrations/react-router-7","text":"Create Project"}},{"id":82,"slug":"astro","isExternal":false,"title":"Astro","description":"Astro is a modern static site builder that allows you to build a static website with a with various frameworks. Including React, Vue, Svelte, and more.\n","content":"## Why Use Astro 5?\n\nAstro.js is a powerful web framework that offers several compelling reasons to use it for your web development projects. Here are the key benefits and reasons to choose Astro:\n\n- **Performance and Speed**\n- **Flexibility and Developer Experience**\n- **Content Focus**\n- **SEO Benefits**\n- **Server-Side Rendering and Static Site Generation**\n\nBy choosing Astro, you get a modern, performant, and flexible framework that prioritizes content delivery and user experience, making it an excellent choice for a wide range of web development projects.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Astro 5 client.\n\n## Getting Started with Astro 5.\n\nI will walk you through the steps to setup a new Astro 5 project. But here is the link to the [Astro 5 Docs](https://docs.astro.build/en/getting-started) that I used for reference.\n\n### Astro 5 Installation and Initial Setup\n\nLet's get started with **Astro 5**.\n\nMake sure that you are in the `root` directory of your project and run the following command to install Astro 5.\n\n``` bash\nnpm create astro@latest\n```\n\nYou will be asked `Where should we create your new project?`. I will install it in the `client` directory. Once you have entered your project name, press enter.\n\n``` bash\npaul@Mac astro % npm create astro@latest\n\n astro Launch sequence initiated.\n\n dir Where should we create your new project?\n ./client\n```\n\nWe will go with the `basic` setup.\n\n``` bash\n tmpl How would you like to start your new project?\n ● A basic, minimal starter (recommended)\n ○ Use blog template \n ○ Use docs (Starlight) template \n```\n\nClick yes for the remaining questions.\n\n``` bash\n ██████ Project initializing...\n ■ Template copied\n ▶ Dependencies installing with npm...\n\n ✔ Project initialized!\n ■ Template copied\n ■ Dependencies installed\n\n next Liftoff confirmed. Explore your project!\n\n Enter your project directory using cd ./client-temp \n Run npm run dev to start the dev server. CTRL+C to stop.\n Add frameworks like react or tailwind using astro add.\n\n Stuck? Join us at https://astro.build/chat\n\n╭──🎩─╮ Houston:\n│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀\n╰─────╯\n```\n\nOnce everything is installed, you can start your Astro 5 project with the following command:\n\n``` bash\n cd client\n npm run dev\n```\n\nYour project should be running at `http://localhost:4321`.\n\n![002-astro-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/002_astro_5_17e6a0c87b.png)\n\nNice, now that we have our Astro 5 project setup, we can start to integrate it with our Strapi 5 server.\n\n### Building out our Astro 5 Project \n\nAstro 5 uses a file based routing system. This means that you can create a new file in the `src/pages` folder and it will be automatically added to your project.\n\nYou can read more about it [here](https://docs.astro.build/en/reference/routing-reference).\n\nBut for today, we will be using the `index.astro` file in the `src/pages` folder.\n\nLet's update the `index.astro` file with the following code:\n\n``` astro\n---\n// Import necessary components and utilities\nimport Layout from '../layouts/Layout.astro';\nimport { getCollection } from 'astro:content';\n\n// Fetch all posts from Strapi using Astro's content collection\nconst strapiPosts = await getCollection(\"strapiPostsLoader\");\n// Get Strapi URL from environment variables with fallback to localhost\nconst BASE_URL = await import.meta.env.STRAPI_URL || \"http://localhost:1337\";\n\n// Helper function to handle media URLs from Strapi\nfunction getStrapiMedia(url: string | null) {\n if (url == null) return null;\n // Return as-is if it's a data URL (base64)\n if (url.startsWith(\"data:\")) return url;\n // Return as-is if it's an absolute URL\n if (url.startsWith(\"http\") || url.startsWith(\"//\")) return url;\n // Prepend BASE_URL for relative URLs\n return `${BASE_URL}${url}`;\n}\n---\n\n\u003cLayout\u003e\n \u003cdiv class=\"container mx-auto p-4\"\u003e\n \u003c!-- Main heading --\u003e\n\t\u003ch1 class=\"text-3xl font-bold mb-8\"\u003eHello Strapi 5 and Astro 5 World\u003c/h1\u003e\n\t\u003c!-- Responsive grid layout using Tailwind CSS --\u003e\n\t\u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\"\u003e\n\t\t{/* Map through posts and create article cards */}\n\t\t{strapiPosts.map((post) =\u003e (\n\t\t\t\u003carticle class=\"bg-white rounded-lg shadow-lg overflow-hidden\"\u003e\n\t\t\t\t{/* Post cover image */}\n\t\t\t\t\u003cimg \n\t\t\t\t\tsrc={getStrapiMedia(post.data.cover.url)} \n\t\t\t\t\talt={post.data.cover.alternativeText} \n\t\t\t\t\tclass=\"w-full h-48 object-cover\"\n\t\t\t\t/\u003e\n\t\t\t\t{/* Post content container */}\n\t\t\t\t\u003cdiv class=\"p-4\"\u003e\n\t\t\t\t\t\u003ch2 class=\"text-xl font-bold mb-2\"\u003e{post.data.title}\u003c/h2\u003e\n\t\t\t\t\t\u003cp class=\"text-gray-600 mb-4\"\u003e{post.data.description}\u003c/p\u003e\n\t\t\t\t\t\u003cdiv class=\"text-sm text-gray-500\"\u003e\n\t\t\t\t\t\tPublished: {new Date(post.data.publishedAt).toLocaleDateString()}\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/article\u003e\n\t\t))}\n\t\u003c/div\u003e\n\u003c/div\u003e\n\u003c/Layout\u003e\n```\nBrief Description:\nThis is an Astro page component that displays a grid of blog posts fetched from a Strapi CMS. \n\nThe page features:\n- Integration with Strapi CMS using Astro's content collections\n- A responsive grid layout using Tailwind CSS (1 column on mobile, 2 on tablet, 4 on desktop)\n- Article cards with cover images, titles, descriptions, and publication dates\n- A utility function (getStrapiMedia) to handle different types of media URLs from Strapi\n- Proper handling of environment variables for the Strapi backend URL\n\n\n### Adding Tailwind CSS to our Astro 5 Project\n\nNotice that we are using Tailwind CSS in our project. Astro 5 uses the `@astrojs/tailwind` package.\n\nYou can read more about it [here](https://docs.astro.build/en/guides/integrations-guide/tailwind/).\n\nLet's add it to our project by running the following command:\n\n``` bash\n npx astro add tailwind\n```\n\nAstro will ask you a few questions, and then it will add the necessary files to your project.\n\n``` bash\nAstro will run the following command:\n If you skip this step, you can always run it yourself later\n\n ╭───────────────────────────────────────────────────────────╮\n │ npm install @astrojs/tailwind@^5.1.4 tailwindcss@^3.4.17 │\n ╰───────────────────────────────────────────────────────────╯\n\n✔ Continue? … yes\n✔ Installing dependencies...\n\n Astro will generate a minimal ./tailwind.config.mjs file.\n\n✔ Continue? … yes\n\n Astro will make the following changes to your config file:\n\n ╭ astro.config.mjs ─────────────────────────────╮\n │ // @ts-check │\n │ import { defineConfig } from 'astro/config'; │\n │ │\n │ import tailwind from '@astrojs/tailwind'; │\n │ │\n │ // https://astro.build/config │\n │ export default defineConfig({ │\n │ integrations: [tailwind()] │\n │ }); │\n ╰───────────────────────────────────────────────╯\n\n✔ Continue? … yes\n \n success Added the following integration to your project:\n - @astrojs/tailwind\n```\n\nNice, now that we have Tailwind CSS added to our project, can start working on the most important part of our project, which is how to fetch our data from Strapi 5 via the Astro Content Loader API.\n\n### Fetching Data from Strapi 5 with Astro Content Loader API\n\nIn our `index.astro` file, you may have noticed that we are using the `getCollection` function to fetch our data from Strapi 5.\n\n``` astro\nconst strapiPosts = await getCollection(\"strapiPostsLoader\");\n```\n\nThis is a custom function that Astro provides that allows you to fetch data via their Content Loader API.\n\nSo let's see how we can create a custom loader for our Strapi 5 data.\n\nYou can also read more about it [here](https://docs.astro.build/en/reference/content-loader-reference).\n\nTo make this work, we need to create a new file in the `src` folder called `content.config.mjs`.\n\nThis is where we will configure our custom loader.\n\nLet's update the file with the following code:\n\n``` astro\nimport { defineCollection, z } from \"astro:content\";\nimport qs from \"qs\";\n\n// Define a custom content collection that loads data from Strapi\nconst strapiPostsLoader = defineCollection({\n // Async loader function that fetches data from Strapi API\n loader: async () =\u003e {\n // Get Strapi URL from environment variables or fallback to localhost\n const BASE_URL = import.meta.env.STRAPI_URL || \"http://localhost:1337\";\n const path = \"/api/articles\";\n const url = new URL(path, BASE_URL);\n\n // Build query parameters using qs to populate cover image data\n url.search = qs.stringify({\n populate: {\n cover: {\n fields: [\"url\", \"alternativeText\"],\n },\n },\n });\n\n // Fetch articles from Strapi\n const articlesData = await fetch(url.href);\n const { data }= await articlesData.json();\n\n // Transform the API response into the desired data structure\n return data.map((item) =\u003e ({\n id: item.id.toString(),\n title: item.title,\n description: item.description,\n slug: item.slug,\n createdAt: item.createdAt,\n updatedAt: item.updatedAt,\n publishedAt: item.publishedAt,\n cover: {\n id: Number(item.cover.id),\n documentId: item.cover.documentId,\n url: item.cover.url,\n alternativeText: item.cover.alternativeText,\n }\n }));\n },\n // Define the schema for type validation using Zod\n schema: z.object({\n id: z.string(),\n title: z.string(),\n description: z.string(),\n slug: z.string(),\n createdAt: z.string(),\n updatedAt: z.string(),\n publishedAt: z.string(),\n cover: z.object({\n id: z.number(),\n documentId: z.string(),\n url: z.string(),\n alternativeText: z.string(),\n }),\n }),\n});\n\n// Export the collection for use in Astro pages\nexport const collections = {\n strapiPostsLoader,\n};\n```\n\nBrief Description:\nThis configuration file sets up a content collection in Astro that integrates with a Strapi CMS backend. It:\n1. Fetches article data from Strapi's API including cover images\n2. Transforms the API response into a consistent data structure\n3. Validates the data structure using Zod schema validation\n4. Makes the data available throughout the Astro application via the getCollection() function\n5. The loader can be used in Astro pages to fetch and display blog posts or articles stored in Strapi, with proper typing and validation. This creates a type-safe bridge between Strapi's headless CMS and Astro's static site generation.\n\nBefore this will work, we need to install the `qs` package and it's types, since we are using it to build our query string.\n\n``` bash\n npm i qs\n npm i @types/qs\n```\n\nNow restart your Astro 5 project and you should be able to see the data from Strapi 5 in your project.\n\n![003-astro-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_astro_5_356f4da376.png)\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/PaulBratslavsky/astro-5-strapi-5-example).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Astro.js documentation](https://docs.astro.build/en/getting-started).\n\n","createdAt":"2024-10-29T20:12:42.726Z","updatedAt":"2025-02-21T15:37:20.837Z","publishedAt":"2024-11-14T09:43:40.964Z","seo":{"metaTitle":"Integrate Astro with Strapi","metaDescription":"Integrating Astro with Strapi CMS comes with multiple benefits. Find out how to do it the right way.","keywords":"integrate strapi with astro, strapi, astro,","canonicalURL":"https://strapi.io/integrations/astro","metaImage":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}},"metaSocial":[{"socialNetwork":"Facebook","title":"Integrate Astro with Strapi 5","description":"Integrating Astro with Strapi CMS comes with multiple benefits. ","image":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}},{"socialNetwork":"Twitter","title":"Integrate Astro with Strapi 5","description":"Integrating Astro with Strapi CMS comes with multiple benefits. ","image":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}}]},"logo":{"media":{"data":{"id":6916,"attributes":{"name":"astro-icon-dark.png","width":170,"height":214,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_icon_dark_c4e62cc0a3.png","mime":"image/png","name":"thumbnail_astro-icon-dark.png","size":5.34,"width":124,"height":156,"sizeInBytes":5340}},"mime":"image/png","size":1.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_icon_dark_c4e62cc0a3.png","createdAt":"2025-01-06T14:02:59.534Z","updatedAt":"2025-01-06T14:02:59.534Z"}}}},"image":{"media":{"data":{"id":6949,"attributes":{"name":"astro-integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_integration_9f092e3135.png","mime":"image/png","name":"thumbnail_astro-integration.png","size":14.14,"width":245,"height":138,"sizeInBytes":14139}},"mime":"image/png","size":190.62,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_integration_9f092e3135.png","createdAt":"2025-01-14T13:56:21.209Z","updatedAt":"2025-01-14T13:56:21.209Z"}}}},"link":{"href":"/integrations/astro","text":"Create Project"}},{"id":2,"slug":"vuejs-cms","isExternal":false,"title":"Vue.js","description":"Vue.js is a JavaScript framework for building user interfaces that provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.","content":"## Why Use Vue.js?\n[Vue.js](https://vuejs.org/) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.\n\nVisit the [Vue.js documentation](https://vuejs.org/guide/introduction.html) for more.\n\n## Why Use Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## Strapi 5 Highlights\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure.\n2. **Draft and Publish**: Reduce the risk of publishing errors and streamline collaboration.\n3. **100% TypeScript Support**: Enjoy type safety \u0026 easy maintainability \n4. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n5. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n6. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n7. **Authentication**: Secure and authorize access to your API with JWT or providers.\n8. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n9. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n10. **Plugins**: Customize and extend Strapi using plugins.\n\nLearn more about [Strapi 5 feature](https://strapi.io/five).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our [Strapi 5](https://strapi.io/five) project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n### Install Strapi\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo, let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\n\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Vue.js application.\n\n## Getting Started with Vue.js\n### Install Vue.js\nCreate a basic Vue.js application using the command below. This command will install and execute `create-vue`, the official Vue project scaffolding tool.\n\n```bash\nnpm create vue@latest\n```\n\nAfter running the command above, you will prompted with the following. Your answers will depend on your preferred setup.\n\n```bash\n✔ Project name: … vue-project\n✔ Add TypeScript? … No / Yes\n✔ Add JSX Support? … No / Yes\n✔ Add Vue Router for Single Page Application development? … No / Yes\n✔ Add Pinia for state management? … No / Yes\n✔ Add Vitest for Unit Testing? … No / Yes\n✔ Add an End-to-End Testing Solution? › No\n✔ Add ESLint for code quality? › No\n```\n\nOnce your project is created, run the command below to install dependencies and start the dev server:\n\n```bash\ncd \u003cyour-project-name\u003e\nnpm install\nnpm run dev\n```\n\nYou should now have your first Vue project running on \"http://localhost:5173\" as shown below:\n\n![New Vue.js Project](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Vue_js_Project_72bb8a47e3.png)\n\n\n\n## Add Tailwind CSS To Vue.js Project\nWe will install [Tailwind CSS](https://tailwindcss.com/) as a PostCSS plugin. This is the most seamless way.\n\n### Install Tailwind\nRun the command below:\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\nThe command above will create a Tailwind CSS configuration file called `tailwind.config.js`.\n\n### Add Tailwind CSS to your PostCSS configuration\nCreate a configuration file called `postcss.config.cjs` at the root of your project and add the following code:\n\n\n```javascript\n// Path: ./postcss.config.cjs\n\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n### Add Template Paths\nAdd the paths to all of your template files:\n\n```javascript\n// Path: ./tailwind.config.js\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n theme: {\n extend: {\n },\n },\n plugins: [],\n}\n```\n\n### Add the Tailwind directives to your CSS\nInside the `./src/assets/main.css` file, replace the code with the following code:\n\n```css\n/** Path: ./src/assets/main.css **/\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### Restart Vue.js Application\nAfter Tailwind CSS setup, ensure you restart your application.\n\n```bash\nnpm run dev\n```\n\n## Use an HTTP Client For Requests\nMany HTTP clients are available, but on this integration page, we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\n### Using Axios\nInstall Axios by running any of the commands below:\n\n```bash\n# npm\nnpm i axios\n\n# yarn\nyarn add axios\n```\n\n### Using fetch\nNo installation needed\n\n## GET Request Your Collection type\nExecute a `GET` request on the **Article** collection type in order to fetch all your articles.\n\nBe sure that you activated the `find` permission for the `Article` collection type.\n\n\u003e 🖐️ NOTE: We want to also fetch covers (images) of articles, so we have to use the `populate` parameter as seen below.\n\n### Using Axios\n```javascript\nimport axios;\n\n// fetch articles along with their covers\nconst response = await axios.get(\"http://localhost:1337/api/articles?populate=*\");\nconsole.log(response.data.data);\n```\n\n### Using Fetch\n```javascript\nconst response = await fetch(\"http://localhost:1337/api/articles?populate=*\");\nconst data = await response.json();\nconsole.log(data.data);\n```\n\n## Example Code\nInside the `./src/App.vue`, we will be using the Composition API. Check out [Vue.js API styles](https://vuejs.org/guide/introduction.html#api-styles) to learn more.\n\n### Set Up The Script Section\nAdd the following to the `\u003cscript setup\u003e` section:\n\n```javascript\n// Path: ./src/App.vue\n\n\u003cscript setup\u003e\n// Import dependencies\nimport { ref, onMounted } from \"vue\";\n\n// Variables\nconst articles = ref([]);\n\n// Strapi Base URL\nconst STRAPI_URL = \"http://localhost:1337\" || import.meta.env.VITE_STRAPI_URL;\n\n// Fetch articles\nconst getArticles = async () =\u003e {\n const response = await fetch(`${STRAPI_URL}/api/articles?populate=*`);\n const data = await response.json();\n articles.value = data.data;\n};\n\n// Format date\nconst formatDate = (date) =\u003e {\n const options = { year: \"numeric\", month: \"2-digit\", day: \"2-digit\" };\n return new Date(date).toLocaleDateString(\"en-US\", options);\n};\n\n// Fetch articles on component mount\nonMounted(() =\u003e {\n getArticles();\n});\n\u003c/script\u003e\n```\n\nHere is what we did above:\n* The `ref` and `onMounted` are imported from Vue for managing reactive state and lifecycle hooks, respectively.\n* `articles` reactive variable initialized as an empty array. This will store the articles fetched from the Strapi API.\n* `STRAPI_URL` Defines the base URL for the Strapi API. It falls back to \"http://localhost:1337\" by default but allows for environment configuration using `import.meta.env.VITE_STRAPI_URL`.\n* `getArtices`: An asynchronous function that fetches articles from Strapi. It sends a request to the Strapi API's `/api/articles?populate=*` endpoint, which retrieves all articles along with their associated media (images). The response is parsed into JSON, and the article data is assigned to the `articles` reactive variable.\n* `formatDate` function formats the `publishedAt` date of each article into a human-readable string (e.g., 01/14/2025). It uses the `toLocaleDateString` method with options to display the year, month, and day in a `MM/DD/YYYY` format.\n* The `onMounted` hook ensures that the `getArticles` function is called once the component is mounted to the DOM. This is when the data is fetched from Strapi.\n\n### Display Articles in The Template Section: `\u003ctemplate\u003e`\nThis section defines the structure and layout of the UI, utilizing Tailwind CSS classes for styling.\n\n```javascript\n// Path: ./src/App.vue\n\n\u003ctemplate\u003e\n \u003cdiv class=\"p-6\"\u003e\n \u003ch1 class=\"text-4xl font-bold mb-8\"\u003eVue.js and Strapi Integration\u003c/h1\u003e\n \u003cdiv\u003e\n \u003ch2 class=\"text-2xl font-semibold mb-6\"\u003eArticles\u003c/h2\u003e\n \u003cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n \u003carticle\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"bg-white shadow-md rounded-lg overflow-hidden\"\n \u003e\n \u003cimg\n :src=\"STRAPI_URL + article.cover.url\"\n alt=\"Article Image\"\n class=\"w-full h-48 object-cover\"\n /\u003e\n \u003cdiv class=\"p-4\"\u003e\n \u003ch3 class=\"text-lg font-bold mb-2\"\u003e{{ article.title }}\u003c/h3\u003e\n \u003cp class=\"text-gray-600 mb-4\"\u003e{{ article.content }}\u003c/p\u003e\n \u003cp class=\"text-sm text-gray-500\"\u003e\n Published: {{ formatDate(article.publishedAt) }}\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/article\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n```\n\nNow, this is what your Vue.js project should look like:\n\n![Vuejs and Strapi Example project.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vuejs_and_Strapi_Example_project_d276b3154b.png)\n\n\nAwesome, great job!\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/strapi-vue-integration).\n\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Vue.js documentation](https://vuejs.org/guide/introduction.html).","createdAt":"2020-04-21T18:35:26.384Z","updatedAt":"2025-02-21T15:41:24.181Z","publishedAt":"2020-04-21T18:35:26.384Z","settings":{"theme":"dark"},"seo":{"metaTitle":"The best Headless CMS for Vue.js","metaDescription":"The #1 headless CMS to build powerful applications with Vue.js. Strapi is a new generation API-first CMS, made by developers for developers. ","metaImage":{"data":{"id":6955,"attributes":{"name":"Vue.js and Strapi Integration.png","alternativeText":"Vue.js and Strapi Integration","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Vue_js_and_Strapi_Integration_15a4d7abb1.png","mime":"image/png","name":"thumbnail_Vue.js and Strapi Integration.png","size":13.53,"width":245,"height":138,"sizeInBytes":13532}},"mime":"image/png","size":92.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vue_js_and_Strapi_Integration_15a4d7abb1.png","createdAt":"2025-01-14T14:42:47.153Z","updatedAt":"2025-01-14T14:43:05.378Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1035,"attributes":{"name":"vuejs-logo","alternativeText":"vuejs-logo","width":99,"height":85,"mime":"image/svg+xml","size":90.84,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg","createdAt":"2020-05-13T14:20:50.723Z","updatedAt":"2025-01-14T14:47:04.660Z"}}}},"image":{"media":{"data":{"id":6955,"attributes":{"name":"Vue.js and Strapi Integration.png","alternativeText":"Vue.js and Strapi Integration","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Vue_js_and_Strapi_Integration_15a4d7abb1.png","mime":"image/png","name":"thumbnail_Vue.js and Strapi Integration.png","size":13.53,"width":245,"height":138,"sizeInBytes":13532}},"mime":"image/png","size":92.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vue_js_and_Strapi_Integration_15a4d7abb1.png","createdAt":"2025-01-14T14:42:47.153Z","updatedAt":"2025-01-14T14:43:05.378Z"}}}},"link":{"href":"/integrations/vuejs-cms","text":"Create Project"}},{"id":13,"slug":"angular-cms","isExternal":false,"title":"Angular","description":"Angular is a platform for building mobile and desktop web applications.","content":"# Integrate Strapi with Angular for Effective Content Management\n\n## Introduction to Strapi and Angular\n\nCombining Strapi with Angular provides a powerful solution for developing dynamic, content-driven web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while Angular, a popular framework by Google, excels at building efficient and scalable web applications.\n\n### Why Use Strapi with Angular?\n\nIntegrating Strapi with Angular allows developers to create high-performance, scalable applications. Strapi’s flexible API and content management capabilities complement Angular’s component-based architecture and powerful features for building complex applications.\n\n## Key Features\n\n### Strapi Highlights:\n- **Customizable API**: Modify the API to fit your specific requirements using Strapi’s intuitive interface.\n- **Roles \u0026 Permissions**: Control access with detailed permissions.\n- **Media Library**: Manage and optimize media assets easily.\n- **Internationalization**: Build multilingual websites effortlessly.\n- **Authentication**: Secure API access with JWT or OAuth providers.\n\n### Angular Highlights:\n- **Component-Based Architecture**: Create encapsulated components that manage their own state.\n- **Two-Way Data Binding**: Simplifies the process of data binding between the model and view.\n- **Dependency Injection**: Improves code maintainability and reusability.\n- **Reactive Programming**: Use RxJS for handling asynchronous data streams.\n- **CLI**: Powerful Angular CLI for project scaffolding and management.\n\n## Best Practices for Using Strapi with Angular\n\n1. **Data Fetching**: Use Angular’s `HttpClient` module to fetch data from Strapi.\n2. **State Management**: Utilize services and state management libraries like NgRx.\n3. **Authentication**: Implement JWT or OAuth for secure API interactions.\n4. **Error Handling**: Ensure robust error handling for data fetching and API calls.\n5. **Environment Variables**: Store sensitive information like API keys in environment variables.\n\n## Getting Started\n\n### Setting Up Strapi\n\n1. **Install Strapi**:\n ```bash\n npx create-strapi-app@latest my-project\n ```\n2. **Configure Strapi**: Customize your API endpoints and content types through the Strapi admin panel.\n\n### Integrating with Angular\n\n1. **Install Angular CLI**:\n ```bash\n npm install -g @angular/cli\n ng new my-angular-app\n ```\n2. **Fetch Data from Strapi**:\n Use Angular’s `HttpClient` to fetch data from Strapi.\n\n ```typescript\n import { HttpClient } from '@angular/common/http';\n import { Component, OnInit } from '@angular/core';\n\n @Component({\n selector: 'app-root',\n template: `\n \u003cdiv *ngFor=\"let post of posts\"\u003e\n \u003ch2\u003e{{ post.attributes.title }}\u003c/h2\u003e\n \u003cp\u003e{{ post.attributes.content }}\u003c/p\u003e\n \u003c/div\u003e\n `\n })\n export class AppComponent implements OnInit {\n posts: any[] = [];\n\n constructor(private http: HttpClient) {}\n\n ngOnInit() {\n this.http.get('http://localhost:1337/posts').subscribe((data: any) =\u003e {\n this.posts = data.data;\n });\n }\n }\n ```\n\n3. **Display Content**: Render the fetched data in your Angular components as shown above.\n\nIntegrating Strapi with Angular provides a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and Angular's robust framework, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Angular documentation](https://angular.io/docs).","createdAt":"2020-06-29T17:21:05.798Z","updatedAt":"2024-11-06T11:03:45.537Z","publishedAt":"2020-06-29T17:21:05.798Z","seo":{"metaTitle":"The best open-source headless CMS for Angular","metaDescription":"The #1 headless CMS to build powerful applications with Angular. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Angular.","metaImage":{"data":{"id":1186,"attributes":{"name":"angular","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_af1ba4ed75.jpeg","mime":"image/png","size":19.89,"width":245,"height":141}},"mime":"image/png","size":229.7,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_af1ba4ed75.jpeg","createdAt":"2020-06-29T17:06:20.003Z","updatedAt":"2020-10-07T15:13:10.416Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1185,"attributes":{"name":"angular (1)","alternativeText":"","width":2500,"height":677,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_(1)_d2355b8666.png","mime":"image/png","size":9.55,"width":245,"height":66}},"mime":"image/png","size":41.75,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_(1)_d2355b8666.png","createdAt":"2020-06-29T17:05:05.014Z","updatedAt":"2020-06-29T17:05:05.014Z"}}}},"image":{"media":{"data":{"id":1186,"attributes":{"name":"angular","alternativeText":"","width":931,"height":536,"formats":{"thumbnail":{"url":"/uploads/thumbnail_angular_af1ba4ed75.jpeg","mime":"image/png","size":19.89,"width":245,"height":141}},"mime":"image/png","size":229.7,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/angular_af1ba4ed75.jpeg","createdAt":"2020-06-29T17:06:20.003Z","updatedAt":"2020-10-07T15:13:10.416Z"}}}},"link":{"href":"/integrations/angular-cms","text":"Create Project"}},{"id":30,"slug":"flutter-cms","isExternal":false,"title":"Flutter","description":"Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.","content":"## What is Strapi?\nStrapi is the leading open-source headless CMS offering [features](https://strapi.io/features), like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern [frontend frameworks](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks).\n\nExplore the [Strapi documentation](https://docs.strapi.io/) for more details.\n\n## What is Flutter?\nFlutter is an open source [Google](https://www.google.com/)'s UI toolkit framework for building beautiful, natively compiled, multi-platform applications from a single codebase.\n\nVisit the [Flutter documentation](https://docs.flutter.dev/) for more.\n\n## Strapi and FLutter Integration\n\nThe out-of-the-box Strapi features allow you to get up and running in no time:\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.\n\nLearn more about [Strapi features](https://strapi.io/features).\n\n## Setup Strapi 5 Headless CMS\n\nWe are going to start by setting up our Strapi 5 project with the following command:\n\n\u003e 🖐️ Note: make sure that you have created a new directory for your project.\n\nYou can find the full documentation for Strapi 5 [here](https://docs.strapi.io/dev-docs/intro).\n\n``` bash\nnpx create-strapi-app@latest server\n```\n\nYou will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.\n\n``` bash\n Strapi v5.6.0 🚀 Let's create your new project\n\n \nWe can't find any auth credentials in your Strapi config.\n\nCreate a free account on Strapi Cloud and benefit from:\n\n- ✦ Blazing-fast ✦ deployment for your projects\n- ✦ Exclusive ✦ access to resources to make your project successful\n- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem\n\nStart your 14-day free trial now!\n\n\n? Please log in or sign up. \n Login/Sign up \n❯ Skip \n```\n\nAfter that, you will be asked how you would like to set up your project. We will choose the following options:\n\n``` bash\n? Do you want to use the default database (sqlite) ? Yes\n? Start with an example structure \u0026 data? Yes \u003c-- make sure you say yes \n? Start with Typescript? Yes\n? Install dependencies with npm? Yes\n? Initialize a git repository? Yes\n```\n\nOnce everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:\n\n``` bash\ncd server\nnpm run develop\n```\n\nYou will be greeted with the **Admin Create Account** screen.\n\n![003-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_strapi_5_0ec1eaaa6a.png)\n\nGo ahead and create your first Strapi user. All of this is local so you can use whatever you want.\n\nOnce you have created your user, you will be redirected to the **Strapi Dashboard** screen.\n\n![004-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_strapi_5_87bc6d8f39.png)\n\n### Publish Article Entries\nSince we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us.\n\n![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png)\n\nNow, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button.\n\n![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png)\n\n### Enable API Access\nOnce all your articles are published, we will expose our Strapi API for the **Articles Collection**. This can be done in ***Settings -\u003e Users \u0026 Permissions plugin -\u003e Roles -\u003e Public -\u003e Article***.\n\nYou should have `find` and `findOne` selected. If not, go ahead and select them.\n\n![007-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/007_strapi_5_edd775db5f.png)\n\n### Test API \nNow, if we make a `GET` request to `http://localhost:1337/api/articles`, we should see the following data for our articles.\n\n![008-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/008_strapi_5_66883c2963.png)\n\n\u003e 🖐️ Note: that article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about [REST API: Population \u0026 Field Selection](https://docs.strapi.io/dev-docs/api/rest/populate-select).\n\n\nSo let's get the article covers by using the `populate=*` parameter: `http://localhost:1337/api/articles?populate=*`\n\n![vuejs strapi integration - api request.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs_strapi_integration_api_request_c748d16c83.png)\n\nNice, now that we have our Strapi 5 server setup, we can start to setup our Next.js application.\n\n\n## Getting Started With Flutter\nIt is recommended to use the `create-next-app`, which sets up everything automatically for you. \n\n### Prerequisites\nBefore you proceed, ensure you have the following:\n\n* [Flutter SDK](https://flutter.dev/) (latest version)\n* [VS Code](https://code.visualstudio.com/) or whatever code editor you like.\n* An environment setup for Flutter. Check out how to [install and setup Flutter](https://docs.flutter.dev/get-started/install).\n\n### Step 1: Create a New Flutter Project\nRun the Flutter `create` command to create a new Flutter project. We will name the project `my_flutter_app`.\n\n```bash\nflutter create my_flutter_app\n```\n\n### Step 2: Start Your Flutter Application\nRun the command below to start your Flutter app, make sure to CD into your flutter project:\n\n```bash\ncd my_flutter_app\nflutter run\n```\n\nThis is what your app should look like:\n\n![New Flutter App.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/New_Flutter_App_e850fbe3cf.png)\n\n### Step 3: Install HTTP Package\nIn your project folder terminal, add the HTTP package to communicate with Strapi using the command below:\n\n```bash\nflutter pub add http\n```\n\nNext, head over to `./lib/main.dart` file to continue the next steps.\n\n### Step 4: Import Packages and Define Constant\nImports Flutter's Material Design package (`flutter/material.dart`), HTTP package (`http`) and Dart's library for encoding and decoding JSON (`dart:convert`).\n\nAlso, define the Strapi API URL\n\n```dart\n// Path: `./lib/main.dart`\n\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\n\nconst String strapiUrl = 'http://localhost:1337';\n```\n\n### Step 5: Create Entry Point - Main Function\n\nInitialize your Flutter app with `runApp(MyApp())` and set `MyApp` as the root widget of your application.\n\n```dart\n// ...\n\nvoid main() {\n runApp(MyApp());\n}\n```\n\n### Step 6: Create Root Widget - MyApp\n\nSet `MaterialApp` as the main container for your app. And `ArticleScreen` as the home screen.\n```dart\n// ...\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: ArticleScreen(),\n );\n }\n}\n\n```\n\n### Step 7: Create Stateful Widget - ArticleScreen\nCreate `ArticleScreen` stateful widget which will manage the state in `_ArticleScreenState`.\n\n```dart\n// ...\n\nclass ArticleScreen extends StatefulWidget {\n @override\n _ArticleScreenState createState() =\u003e _ArticleScreenState();\n}\n\n```\n\n### Step 8: Create State Class - `_ArticleScreenState`\n```dart\n// ...\n\nclass _ArticleScreenState extends State\u003cArticleScreen\u003e {\n List articles = [];\n\n @override\n void initState() {\n super.initState();\n fetchArticles();\n }\n\n```\n* Define the `_ArticleScreenState class`. \n* `articles` list holds fetched articles.\n* `initState()` is called when the widget is created, triggering `fetchArticles()`.\n\n### Step 9: Fetch Articles from Strapi\nSend a `GET` request to http://localhost:1337/api/articles?populate=*. If the response is successful (`statusCode == 200`), decode the JSON and update the articles list.\n\nUse `setState()` to refresh the UI with new data.\n\n```dart\n// ...\n\nFuture\u003cvoid\u003e fetchArticles() async {\n final response =\n await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));\n if (response.statusCode == 200) {\n print('Raw API Response: ${jsonEncode(response.body)}');\n setState(() {\n articles = jsonDecode(response.body)['data'];\n });\n }\n}\n\n```\n\n### Step 10: Scaffold the UI and Display Articles\nUse `Scaffold` to provide a basic app structure with an `AppBar` and `body`. Use the `ListView.builder` to dynamically create a list of articles.\n\nWrap each article inside a `Card` for better UI styling. Display the article cover image, title and description inside a `Padding` widget.\n\n```bash\n// ...\n\n@override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Strapi + Flutter')),\n body: ListView.builder(\n itemCount: articles.length,\n itemBuilder: (context, index) {\n var article = articles[index];\n debugPrint(article.toString());\n return Card(\n margin: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // if (article['image'] != null)\n Image.network('$strapiUrl${article['cover']['url']}'),\n Padding(\n padding: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n article['title'],\n style: TextStyle(\n fontSize: 20, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 5),\n Text(article['description']),\n ],\n ),\n ),\n ],\n ),\n );\n },\n ),\n );\n }\n```\n\n## Complete Project Code\nHere is the complete code from the steps above:\n\n```dart\n// Path: `./lib/main.dart`\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\n\nconst String strapiUrl = 'http://localhost:1337';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: ArticleScreen(),\n );\n }\n}\n\nclass ArticleScreen extends StatefulWidget {\n @override\n _ArticleScreenState createState() =\u003e _ArticleScreenState();\n}\n\nclass _ArticleScreenState extends State\u003cArticleScreen\u003e {\n List articles = [];\n\n @override\n void initState() {\n super.initState();\n fetchArticles();\n }\n\n Future\u003cvoid\u003e fetchArticles() async {\n final response =\n await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));\n if (response.statusCode == 200) {\n print('Raw API Response: ${jsonEncode(response.body)}');\n setState(() {\n articles = jsonDecode(response.body)['data'];\n print(articles);\n });\n }\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Strapi + Flutter')),\n body: ListView.builder(\n itemCount: articles.length,\n itemBuilder: (context, index) {\n var article = articles[index];\n debugPrint(article.toString());\n return Card(\n margin: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // if (article['image'] != null)\n Image.network('$strapiUrl${article['cover']['url']}'),\n Padding(\n padding: EdgeInsets.all(10),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n article['title'],\n style: TextStyle(\n fontSize: 20, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 5),\n Text(article['description']),\n ],\n ),\n ),\n ],\n ),\n );\n },\n ),\n );\n }\n}\n\n```\n\n\n## Refresh your Flutter Application\nInside your terminal, press `r` on your keyboard to refresh your application to see the latest changes.\n\nAfter that is done, this is what our Flutter application should look like:\n\n```bash\nnpm run dev\n```\n\nHere is what your updated application should look like:\n\n![Flutter and Strapi Integration App.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_App_eae6a4cb4c.png)\n\n## Github Project Repo\nYou can find the complete code for this project in the following [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/nextjs-strapi-integration).\n\n## Strapi Open Office Hours\nIf you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at **Strapi's Discord Open Office Hours** Monday through Friday at 12:30 pm - 1:30 pm CST: [Strapi Discord Open Office Hours](https://discord.com/invite/strapi)\n\nFor more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Flutter documentation](https://docs.flutter.dev/).\n\n\u003ccta title=\"See Strapi in action with an interactive demo\" text=\"Explore Strapi in an instant, hands-on demo set up just for you.\" buttontext=\"Access Live Demo!\" buttonlink=\"https://strapi.io/demo\"\u003e\u003c/cta\u003e","createdAt":"2021-02-25T14:57:46.560Z","updatedAt":"2025-02-18T12:09:43.110Z","publishedAt":"2021-02-25T14:57:46.560Z","seo":{"metaTitle":"The best open-source headless CMS for Flutter","metaDescription":"The #1 headless CMS to build powerful mobile applications with Flutter.\nStrapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Flutter.","metaImage":{"data":{"id":7246,"attributes":{"name":"Flutter and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Flutter_and_Strapi_Integration_187dc34d3b.png","mime":"image/png","name":"thumbnail_Flutter and Strapi Integration.png","size":10.88,"width":245,"height":138,"sizeInBytes":10884}},"mime":"image/png","size":45.17,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_187dc34d3b.png","createdAt":"2025-02-17T12:11:15.776Z","updatedAt":"2025-02-17T12:11:15.776Z"}}},"metaSocial":[]},"logo":{"media":{"data":{"id":1901,"attributes":{"name":"logo_lockup_flutter_horizontal.svg","alternativeText":"","width":560,"height":157,"mime":"image/svg+xml","size":12.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg","createdAt":"2021-02-25T14:31:13.451Z","updatedAt":"2021-02-25T14:31:13.544Z"}}}},"image":{"media":{"data":{"id":7246,"attributes":{"name":"Flutter and Strapi Integration.png","width":1920,"height":1080,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_Flutter_and_Strapi_Integration_187dc34d3b.png","mime":"image/png","name":"thumbnail_Flutter and Strapi Integration.png","size":10.88,"width":245,"height":138,"sizeInBytes":10884}},"mime":"image/png","size":45.17,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Flutter_and_Strapi_Integration_187dc34d3b.png","createdAt":"2025-02-17T12:11:15.776Z","updatedAt":"2025-02-17T12:11:15.776Z"}}}},"link":{"href":"/integrations/flutter-cms","text":"Create Project"}}],"categories":null,"res":{"count":101,"categoryId":null,"integrations":[{"id":58,"slug":"Crowdin","isExternal":false,"title":"Crowdin","description":"Crowdin, a cloud-based translation management technology, provides a convenient solution for maintaining your Strapi content in multiple languages.\n\nThis integration is not a Strapi plugin like most plugins here, this integration works as a Crowdin application that establishes a connection between Crowdin and your Strapi instance via APIs. This connection allows you to effectively synchronize content for translation, whether you prefer manual control or automated processes.","content":"## Setting up the Crowdin-Strapi connection\n\nStart by creating a [Crowdin account](https://crowdin.com/pricing). Once your account is ready, proceed to install the [Strapi App from the Crowdin Store](https://store.crowdin.com/strapi). After installation, a Quick Start Wizard will guide you to a point where you can choose professional translations for your content or use AI-powered translation options.\n\n## Key features of Crowdin and Strapi Connector\n\n- Crowdin serves as a comprehensive enterprise-level translation management solution. We make sure you don't have to send content to your translators or invite translators into your CMS. Instead, Crowdin allows you to seamlessly coordinate the translation of content through a combination of automated processes, AI-driven methods, and human intervention. In addition, Crowdin manages the translation process of constantly changing content.\n\n- The Strapi app provides the flexibility to manually synchronize selected items for translation. Alternatively, you can automate the synchronization of your content for translation for all or part of Strapi.\n\n- Crowdin ensures that both human translators and AI-driven solutions have access to sufficient context to produce high-quality translations of your content.\n\n- If you're looking for a translation agency but don't have one yet, Crowdin provides a curated list of agencies along with their areas of expertise to help you choose the best service.\n\nCrowdin is used by some of the brightest tech companies, including GitLab, Discord, Valve, and Buffer. Crowdin offers a free plan for small or open source projects. For those interested in enterprise level options, please [contact us](https://crowdin.com/enterprise).","createdAt":"2023-09-08T20:38:30.047Z","updatedAt":"2023-09-11T18:52:26.707Z","publishedAt":"2023-09-11T18:52:26.594Z","seo":{"metaTitle":"Integrate your headless CMS Strapi with Crowdin","metaDescription":"With Crowdin, you can manage the translation of your Strapi content in a single location, regardless of the number of languages you need to support.","metaImage":{},"metaSocial":[]},"link":{"href":"/integrations/Crowdin","text":"Create Project"},"user":{},"logo":{"media":{"data":{"id":4419,"attributes":{"name":"crowdin-stacked-logo-cDark.png","width":512,"height":336,"formats":{"thumbnail":{"url":"/uploads/thumbnail_crowdin_stacked_logo_c_Dark_24e86b6596.png","mime":"image/png","name":"thumbnail_crowdin-stacked-logo-cDark.png","size":13.47,"width":238,"height":156}},"mime":"image/png","size":5.61,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/crowdin_stacked_logo_c_Dark_24e86b6596.png","createdAt":"2023-09-08T20:11:41.321Z","updatedAt":"2023-09-08T20:11:41.321Z"}}}},"slices":[{"__component":"slices.cta-banner"}],"integration_topics":{"data":[]}},{"id":8,"slug":"send-grid","isExternal":true,"title":"SendGrid","description":"Sendgrid provider for strapi email","createdAt":"2020-05-05T08:57:30.557Z","updatedAt":"2023-01-24T11:16:35.964Z","publishedAt":"2020-05-05T08:57:30.557Z","link":{"href":"https://market.strapi.io/providers/@strapi-provider-email-sendgrid","text":"Get package","icons":[]},"user":{},"logo":{"media":{"data":{"id":920,"attributes":{"name":"SendGrid-Logo","alternativeText":"","width":771,"height":724,"formats":{"thumbnail":{"url":"/uploads/thumbnail_SendGrid-Logo_0375766527.png","mime":"image/png","size":1.87,"width":166,"height":156}},"mime":"image/png","size":5.91,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/SendGrid-Logo_0375766527.png","createdAt":"2020-05-05T08:56:36.553Z","updatedAt":"2020-05-05T08:56:36.553Z"}}}},"slices":[],"integration_topics":{"data":[]}},{"id":49,"slug":"hugo-cms","isExternal":false,"title":"Hugo","description":"Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.","content":"Manage your Hugo application content with a powerful headless CMS. \nOpen Source, customizable, and self-hosted, Strapi provides an intuitive admin panel as well as an API consumable from any http client.\n\n## The easiest way to manage your content\n\nEffortlessly create content structures that flex to your needs. No matter which data structure is the best for your business, you can easily define models and add relations to create rich layout experiences.\nSeamlessly write, edit and manage any content types.\nEasily build apps and digital experiences without the distraction of CMS complexities.\nConsume the API from Hugo using REST or GraphQL.\n\n## Hugo has a lot of benefits\n\n[Hugo](https://gohugo.io/) is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.\n\n1. **Blistering Speed**: Hugo is the fastest tool of its kind. At \u003c1 ms per page, the average site builds in less than a second.\n2. **Built-in Templates**: Hugo ships with pre-made templates to make quick work of SEO, commenting, analytics and other functions. One line of code, and you're done.\n3. **Shortcodes**: We love the beautiful simplicity of markdown’s syntax, but there are times when we want more flexibility. Hugo shortcodes allow for both beauty and flexibility.\n\n## Strapi, the best fit with Hugo\n\nThe out-of-the-box Strapi features allow you to get up-and-running in no time:\n\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.","createdAt":"2021-03-24T11:37:39.049Z","updatedAt":"2023-01-25T09:25:24.537Z","publishedAt":"2021-03-24T11:37:39.049Z","seo":{"metaTitle":"The best open-source headless CMS for Hugo","metaDescription":"The #1 headless CMS to build powerful applications with Hugo.\nStrapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Hugo.","metaImage":{"data":{"id":1998,"attributes":{"name":"hugo.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":310.04,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/hugo_f44e4486ef.svg","createdAt":"2021-03-18T14:28:18.024Z","updatedAt":"2021-03-18T14:28:18.038Z"}}},"metaSocial":[]},"user":{},"logo":{"media":{"data":{"id":2027,"attributes":{"name":"Logo_of_Hugo_the_static_website_generator.svg","alternativeText":"","width":1500,"height":410,"mime":"image/svg+xml","size":113.27,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Logo_of_Hugo_the_static_website_generator_c669c4f785.svg","createdAt":"2021-03-24T11:35:46.336Z","updatedAt":"2021-03-24T11:35:46.357Z"}}}},"image":{"media":{"data":{"id":1998,"attributes":{"name":"hugo.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":310.04,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/hugo_f44e4486ef.svg","createdAt":"2021-03-18T14:28:18.024Z","updatedAt":"2021-03-18T14:28:18.038Z"}}}},"slices":[{"__component":"slices.related-blog-posts"},{"__component":"slices.embed-form"},{"__component":"slices.brands-with-intro"}],"integration_topics":{"data":[]},"link":{"href":"/integrations/hugo-cms","text":"Create Project"}},{"id":39,"slug":"rails-cms","isExternal":false,"title":"Rails","description":"Ruby on Rails, or Rails, is a server-side web application framework written in Ruby under the MIT License.","content":"Manage your Rails application content with a powerful headless CMS. \nOpen Source, customizable, and self-hosted, Strapi provides an intuitive admin panel as well as an API consumable from any http client.\n\n## The easiest way to manage your content\n\nEffortlessly create content structures that flex to your needs. No matter which data structure is the best for your business, you can easily define models and add relations to create rich layout experiences.\nSeamlessly write, edit and manage any content types.\nEasily build apps and digital experiences without the distraction of CMS complexities.\nConsume the API from Rails using REST or GraphQL.\n\n## Rails has a lot of benefits\n\nLearning to build a modern web application is daunting. [Ruby on Rails](https://rubyonrails.org/) makes it much easier and more fun. It includes everything you need to build fantastic applications, and you can learn it with the support of our large, friendly community.\n\n1. **Easy to manage changes**: This framework is most effective for long-term projects due to its stability and predictability.\n2. **Secure**: Some security measures are built within the framework and enabled by default. Using Ruby on Rails also means that following the secure development lifecycle, that may be a complicated security assurance method.\n3. **Performance**: For applications with lots of computation or data handling, Rails could slow the application down. If this is often happening in your application, have a fresh set of eyes take a glance at code optimization — this will greatly improve performance outcomes.\n\nMany http clients exists in x in order to communicate with a Strapi API: [net/http](https://ruby-doc.org/stdlib-2.7.0/libdoc/net/http/rdoc/Net/HTTP.html), [httparty](https://github.com/jnunemaker/httparty) or [faraday](https://github.com/lostisland/faraday).\n\n## Strapi, the best fit with Rails\n\nThe out-of-the-box Strapi features allow you to get up-and-running in no time:\n\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.","createdAt":"2021-03-18T17:02:53.167Z","updatedAt":"2023-01-25T09:38:22.556Z","publishedAt":"2021-03-18T17:02:53.167Z","seo":{"metaTitle":"The best open-source headless CMS for Rails","metaDescription":"The #1 headless CMS to build powerful applications with Rails.\nStrapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Rails.","metaImage":{"data":{"id":2016,"attributes":{"name":"rails.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":64.2,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/rails_26e1d2a9a3.svg","createdAt":"2021-03-18T15:21:17.650Z","updatedAt":"2021-03-18T15:21:17.675Z"}}},"metaSocial":[]},"user":{},"logo":{"media":{"data":{"id":2006,"attributes":{"name":"Ruby_On_Rails_Logo.svg","alternativeText":"","width":411,"height":155,"mime":"image/svg+xml","size":2.77,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Ruby_On_Rails_Logo_e267507b7e.svg","createdAt":"2021-03-18T14:29:16.432Z","updatedAt":"2021-03-18T14:29:16.447Z"}}}},"image":{"media":{"data":{"id":2016,"attributes":{"name":"rails.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":64.2,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/rails_26e1d2a9a3.svg","createdAt":"2021-03-18T15:21:17.650Z","updatedAt":"2021-03-18T15:21:17.675Z"}}}},"slices":[{"__component":"slices.embed-form"},{"__component":"slices.brands-with-intro"}],"integration_topics":{"data":[]},"link":{"href":"/integrations/rails-cms","text":"Create Project"}},{"id":1,"slug":"gatsby-cms","isExternal":false,"title":"Gatsby ","description":"Gatsby is a blazing fast modern site generator for React.","content":"\n## The best Headless CMS for Gatsby\n\nUse Strapi to maintain and manage your Gatsby static site\n\nBlazing fast combination: Strapi is powered by a modern technology stack using Node.js – it's fast. Really fast. Plus, it can deliver your content with GraphQL.\n\nGatsby automates code-splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast.\n\n## Strapi + Gatsby benefits\n\nBeing a static site generator brings a lot of advantages: **Performance**, **security**, **lower cost of scaling** but also an **excellent developer experience**.\n\nGatsby brings **huge benefits to content creators and developers** by helping to solve many of the challenges with the **headless approach**.\n\n\u003e Strapi provides a perfect solution as a source for Gatsby’s static markup generation. Whether building a static site, or a more dynamic app/website Strapi has you covered with its flexibility of content types, plugins, and customization. \n\n*Chris, GatsbyJS developer.*\n\n\n\n\n## Automate builds using Webhooks\n\nTake advantage of the built-in [webhook](/blog/webhooks) feature that will allow you to automatically build your Gatsby project upon the update of your data.\n\nInstants after you made modifications in Strapi, **your new content is live**.\n\n![webhooks-screenshot](/uploads/webhooks-screenshot_8eefc50bee.png)\n\n## Getting Started with Gatsby\n\nFollow the integration guide from our documentation to see how to consume Strapi's Content Type's API from Gatsby. As a **[Static Site Generator](https://www.staticgen.com/), Gatsby** will fetch your content from Strapi at build time. Therefore, you need to configure Gatsby to communicate with your Strapi application using the following CLI command. \n\n```jsx\nyarn add gatsby-source-strapi\n```\n\n```jsx\nmodule.exports = {\n plugins: [\n {\n resolve: \"gatsby-source-strapi\",\n options: {\n apiURL: process.env.STRAPI_API_URL || \"http://localhost:1337\",\n accessToken: process.env.STRAPI_TOKEN,\n collectionTypes: [\n {\n singularName: \"restaurant\",\n queryParams: {\n publicationState:\n process.env.GATSBY_IS_PREVIEW === \"true\" ? \"preview\" : \"live\",\n populate: {\n cover: \"*\",\n blocks: {\n populate: \"*\",\n },\n },\n },\n },\n {\n singularName: \"category\n }\n ],\n },\n },\n ],\n}\n```\n\nHere is an example of the GraphQL API query `./src/pages/index.js`\n\n```jsx\nimport React from 'react';\n\nimport { StaticQuery, graphql } from 'gatsby';\n\nconst query = graphql`\n query {\n allStrapiRestaurant {\n edges {\n node {\n strapiId\n name\n description\n }\n }\n }\n }\n`;\n\nconst IndexPage = () =\u003e (\n \u003cStaticQuery\n query={query}\n render={data =\u003e (\n \u003cul\u003e\n {data.allStrapiRestaurant.edges.map(restaurant =\u003e (\n \u003cli key={restaurant.node.strapiId}\u003e{restaurant.node.name}\u003c/li\u003e\n ))}\n \u003c/ul\u003e\n )}\n /\u003e\n);\n\nexport default IndexPage;\n```\n\nYou can use the [Gatsby Source Strapi plugin](https://github.com/strapi/gatsby-source-strapi) for pulling documents into Gatsby from a Strapi API.\n\n\n","createdAt":"2020-04-21T18:34:49.876Z","updatedAt":"2024-05-29T08:51:16.608Z","publishedAt":"2020-04-21T18:34:49.876Z","settings":{"theme":"dark"},"seo":{"metaTitle":"The best Headless CMS for Gatsby","metaDescription":"The #1 headless CMS to build powerful applications with Gatsby. Strapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Gatsby.","metaImage":{},"metaSocial":[]},"link":{"href":"/integrations/gatsby-cms","text":"Create Project"},"user":{},"logo":{"media":{"data":{"id":1036,"attributes":{"name":"Gatsby-Monogram","alternativeText":"","width":28,"height":28,"mime":"image/svg+xml","size":0.43,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Gatsby-Monogram_dae6f92141.svg","createdAt":"2020-05-13T14:21:23.068Z","updatedAt":"2020-05-13T14:21:23.068Z"}}}},"image":{"media":{"data":{"id":3231,"attributes":{"name":"carbon (9).png","alternativeText":"","width":1258,"height":744,"formats":{"thumbnail":{"url":"/uploads/thumbnail_carbon_9_f327d3dcd2.png","mime":"image/png","name":"thumbnail_carbon (9).png","size":16.08,"width":245,"height":145}},"mime":"image/png","size":58.19,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/carbon_9_f327d3dcd2.png","createdAt":"2022-04-11T17:31:45.256Z","updatedAt":"2022-04-11T17:31:45.281Z"}}}},"slices":[{"__component":"slices.features-slice","title":"Why choose Strapi with Gatsby? ","layout":"three","iconLayout":"row"},{"__component":"slices.related-blog-posts"},{"__component":"slices.quote","quote":"Developers today often choose between open-source and cloud headless CMSs. Strapi combines the best of both. It's low-cost, customizable, and portable; it also has a great API, is scalable, and easy to set up."},{"__component":"slices.large-video","url":"https://www.youtube.com/watch?v=mHprtSyajgQ","darkMode":false,"size":"medium"},{"__component":"slices.content-videos-list","displayLimitedList":true},{"__component":"slices.quote","quote":"I had zero Gatsby knowledge - within a day of reading their docs, I seamlessly integrated it with Strapi using the gatsby-source-strapi plugin. After providing my Strapi API URL and registering content-types, I was able to make an awesome personal website within a few days of work."},{"__component":"slices.cta-banner"},{"__component":"slices.embed-form"},{"__component":"slices.brands-with-intro"}],"integration_topics":{"data":[]}},{"id":35,"slug":"ionic-cms","isExternal":false,"title":"Ionic","description":"An open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.","content":"Manage your Ionic application content with a powerful headless CMS. \nOpen Source, customizable, and self-hosted, Strapi provides an intuitive admin panel as well as an API consumable from any http client.\n\n## The easiest way to manage your content\n\nEffortlessly create content structures that flex to your needs. No matter which data structure is the best for your business, you can easily define models and add relations to create rich layout experiences.\nSeamlessly write, edit and manage any content types.\nEasily build apps and digital experiences without the distraction of CMS complexities.\nConsume the API from Ionic using REST or GraphQL.\n\n## Ionic has a lot of benefits\n\nFree and open source, [Ionic](https://ionicframework.com/) offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps.\n\n1. **Pre-designed UI components**: Ionic’s [UI components](https://ionicframework.com/docs/components) look great on all mobile devices and platforms. Start with pre-made components, typography, and a base theme that adapts to each platform.\n2. **Write once, run anywhere**: Ionic lets developers to ship apps to the app stores and as a PWA with a single code base. With [Adaptive Styling](https://ionicframework.com/docs/intro/concepts#adaptive-styling), apps look and feel at home on every platform.\n3. **Developer-friendly tooling**: Create, build, test, and deploy your app with the [Ionic CLI](https://ionicframework.com/docs/cli). Take advantage of Live Reload, deployments, integrations, and even use your favorite JS framework’s CLI.\n\nMany http clients exists in Javascript in order to communicate with a Strapi API: [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), [axios](https://github.com/axios/axios) or [request](https://github.com/request/request).\n\n## Strapi, the best fit with Ionic\n\nThe out-of-the-box Strapi features allow you to get up-and-running in no time:\n\n1. **Single types**: Create one-off pages that have a unique content structure\n2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.\n3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.\n4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.\n5. **Authentication**: Secure and authorize access to your API with JWT or providers.\n6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, safeguard against unauthorized access or configuration modifications.\n7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.","createdAt":"2021-03-18T14:54:13.550Z","updatedAt":"2023-01-25T09:36:42.197Z","publishedAt":"2021-03-18T14:54:13.550Z","seo":{"metaTitle":"The best open-source headless CMS for Ionic","metaDescription":"The #1 headless CMS to build powerful applications with Ionic.\nStrapi is a new generation API-first CMS, made by developers for developers. Get started in minutes with Strapi and Ionic.","metaImage":{"data":{"id":1992,"attributes":{"name":"iionic.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":63.73,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/iionic_f529910f10.svg","createdAt":"2021-03-18T14:28:16.004Z","updatedAt":"2021-03-18T14:28:16.024Z"}}},"metaSocial":[]},"user":{},"logo":{"media":{"data":{"id":2002,"attributes":{"name":"Ionic_Logo.svg","alternativeText":"","width":436,"height":147,"mime":"image/svg+xml","size":1.79,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Ionic_Logo_b54b3efce0.svg","createdAt":"2021-03-18T14:29:16.127Z","updatedAt":"2021-03-18T14:29:16.162Z"}}}},"image":{"media":{"data":{"id":1992,"attributes":{"name":"iionic.svg","alternativeText":"","width":931,"height":536,"mime":"image/svg+xml","size":63.73,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/iionic_f529910f10.svg","createdAt":"2021-03-18T14:28:16.004Z","updatedAt":"2021-03-18T14:28:16.024Z"}}}},"slices":[{"__component":"slices.embed-form"},{"__component":"slices.brands-with-intro"}],"integration_topics":{"data":[]},"link":{"href":"/integrations/ionic-cms","text":"Create Project"}}]}},{"__component":"slices.reviews-slider","noMargin":false,"isNameBlue":true,"isSimpleCard":true,"upperTitle":"REVIEWS","title":"Developers love Strapi","reviews":null,"type":"reviews","items":[{"id":11,"quote":"Strapi and Next.js both build on the same philosophy: open source is the path to success. Combine them with Vercel deployment and you have a stack with virtually infinite scalability, global performance, and security.","createdAt":"2021-05-26T12:03:10.847Z","updatedAt":"2021-05-26T12:45:02.110Z","author":{"name":"Guillermo Rauch","description":"CEO","image":{"media":{"data":{"id":2204,"attributes":{"name":"1549659251156.jpeg","alternativeText":"","width":200,"height":200,"formats":{"thumbnail":{"url":"/uploads/thumbnail_1549659251156_5e6d212538.jpeg","mime":"image/jpeg","name":"thumbnail_1549659251156.jpeg","size":5.56,"width":156,"height":156}},"mime":"image/jpeg","size":7.68,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/1549659251156_5e6d212538.jpeg","createdAt":"2021-05-26T12:03:00.334Z","updatedAt":"2021-05-26T12:03:00.347Z"}}}}},"logo":{"media":{"data":{"id":2203,"attributes":{"name":"vercel-logotype-dark.png","alternativeText":"","width":8875,"height":2000,"formats":{"thumbnail":{"url":"/uploads/thumbnail_vercel_logotype_dark_bdcc70f85c.png","mime":"image/png","name":"thumbnail_vercel-logotype-dark.png","size":4.36,"width":245,"height":55}},"mime":"image/png","size":142.64,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/vercel_logotype_dark_bdcc70f85c.png","createdAt":"2021-05-26T12:02:45.745Z","updatedAt":"2021-05-26T12:02:45.762Z"}}}},"link":{"href":"/integrations/nextjs-cms","icons":[]}},{"id":17,"quote":"With Strapi, we can be sure that the solution can be customized to always fit our needs. It helped us reduce time-to-market and deliver the project on time.","createdAt":"2023-05-04T10:50:45.222Z","updatedAt":"2023-05-04T10:51:38.454Z","author":{"name":"Michał Pawłowski","description":"Head of Software Development @Tesco Technology","image":{"media":{"data":{"id":3990,"attributes":{"name":"Michal Pawlowski","width":470,"height":400,"formats":{"thumbnail":{"url":"/uploads/thumbnail_7b92b9a925c614c47808554fcdc6d62220925c71_ca340226c2.jpg","mime":"image/jpeg","name":"thumbnail_7b92b9a925c614c47808554fcdc6d62220925c71.jpg","size":7.73,"width":183,"height":156}},"mime":"image/jpeg","size":34.39,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/7b92b9a925c614c47808554fcdc6d62220925c71_ca340226c2.jpg","createdAt":"2023-04-06T11:05:54.490Z","updatedAt":"2023-05-04T10:49:51.738Z"}}}}},"logo":{"media":{"data":{"id":3924,"attributes":{"name":"2560px_Tesco_Logo_svg_aaf4397a54.png","width":2560,"height":721,"formats":{"thumbnail":{"url":"/uploads/thumbnail_2560px_Tesco_Logo_svg_aaf4397a54_d6671f2b78.png","mime":"image/png","name":"thumbnail_2560px_Tesco_Logo_svg_aaf4397a54.png","size":11.07,"width":245,"height":69}},"mime":"image/png","size":20.04,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/2560px_Tesco_Logo_svg_aaf4397a54_d6671f2b78.png","createdAt":"2023-03-30T09:22:07.781Z","updatedAt":"2025-01-31T00:35:24.362Z"}}}},"link":{"href":"https://strapi.io/user-stories/tesco","icons":[]}},{"id":1,"quote":"Strapi has turned out to be a great choice so far: technical setup was really quick, and in a few days we were able to have a drafted site up \u0026 running, leveraging Strapi main functionalities.","createdAt":"2020-04-22T11:24:02.939Z","updatedAt":"2021-05-26T12:26:45.537Z","author":{"name":"Jérôme Chauveau","description":"DevOps Team Lead","image":{"media":{"data":{"id":162,"attributes":{"name":"jerome_chauveau","alternativeText":"","width":1296,"height":1296,"formats":{"thumbnail":{"url":"/uploads/thumbnail_jerome_chauveau_723cb44e8e.png","mime":"image/png","size":51.04,"width":156,"height":156}},"mime":"image/png","size":834.06,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/jerome_chauveau_723cb44e8e.png","createdAt":"2020-04-27T14:17:09.374Z","updatedAt":"2020-04-27T14:17:09.374Z"}}}},"companyLogo":{"media":{}}},"logo":{"media":{"data":{"id":99,"attributes":{"name":"societe-generale","alternativeText":"","width":345,"height":70,"mime":"image/svg+xml","size":11.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/societe-generale_2219adc9d6.svg","createdAt":"2020-04-23T14:50:13.777Z","updatedAt":"2020-04-23T14:50:13.777Z"}}}},"link":{"href":"/user-stories/societe-generale-e-training-platform","icons":[]}}]}],"newsletter":{"title":"Join our Newsletter","text":"Get all the latest Strapi updates, news and events.","networkErrorMessage":"Network error","successMessage":"Thank you for subscribing! ✅","invalidEmailMessage":"Invalid email address ⚠️","requiredEmailMessage":"Please fill in your email address","placeholder":"Email","submitButtonText":"Submit","portalId":"6893032","formGuid":"d3fe1d5f-9812-4046-81ed-4dd913373f2f","disclaimer":"By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties."}},"preview":null},"header":{"panels":[{"navigationLabel":{"href":"/features","text":"Product","icons":[]},"sections":[{"title":"Capabilities","links":[{"href":"/create-apis","text":"Create APIs","summary":"Design REST and GraphQL Content Delivery APIs to connect to any frontend.","icons":[{"media":{"data":{"id":6149,"attributes":{"name":"Code.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg","createdAt":"2024-09-20T14:16:35.106Z","updatedAt":"2024-09-20T14:16:35.106Z"}}}}]},{"href":"/content-management","text":"Content Management","summary":"Craft experiences and easily manage editing, publishing, and translation.","icons":[{"media":{"data":{"id":6155,"attributes":{"name":"Layout.svg","width":24,"height":24,"mime":"image/svg+xml","size":0.57,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Layout_a3f87ead5e.svg","createdAt":"2024-09-20T14:16:35.232Z","updatedAt":"2024-09-20T14:16:35.232Z"}}}}]},{"href":"/customization","text":"Customization","summary":"Personalize your CMS to meet your project's unique requirements.","icons":[{"media":{"data":{"id":6161,"attributes":{"name":"PencilRuler.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.4,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Pencil_Ruler_0e0d561151.svg","createdAt":"2024-09-20T14:16:35.314Z","updatedAt":"2024-09-20T14:16:35.314Z"}}}}]},{"href":"/collaboration","text":"Collaboration","summary":"Work together easily on code and content.","icons":[{"media":{"data":{"id":6163,"attributes":{"name":"UsersThree.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.11,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Users_Three_d0dc586891.svg","createdAt":"2024-09-20T14:16:35.354Z","updatedAt":"2024-09-20T14:16:35.354Z"}}}}]},{"href":"/hosting","text":"Hosting","summary":"Host your projects on robust, secure servers in minutes.","icons":[{"media":{"data":{"id":6157,"attributes":{"name":"Vector.svg","width":12,"height":14,"mime":"image/svg+xml","size":0.73,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Vector_df120271e6.svg","createdAt":"2024-09-20T14:16:35.234Z","updatedAt":"2024-09-20T14:16:35.234Z"}}}}]},{"href":"/security","text":"Security","summary":"Implement robust security measures to protect your information.","icons":[{"media":{"data":{"id":6166,"attributes":{"name":"Lock.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.23,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lock_0e89ed83b8.svg","createdAt":"2024-09-20T14:23:47.582Z","updatedAt":"2024-09-20T14:23:47.582Z"}}}}]}]},{"title":"Product \u0026 Features","links":[{"href":"/cloud","text":"Cloud","summary":"PaaS hosting for Strapi projects. ","icons":[{"media":{"data":{"id":6141,"attributes":{"name":"Cloud.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.15,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg","createdAt":"2024-09-20T14:16:34.923Z","updatedAt":"2024-09-20T14:16:34.923Z"}}}}]},{"href":"/enterprise","text":"Enterprise Edition","summary":"A self hosted, Enterprise-ready Edition. ","icons":[{"media":{"data":{"id":6134,"attributes":{"name":"Buildings.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.54,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_b7559ce937.svg","createdAt":"2024-09-20T14:16:34.783Z","updatedAt":"2024-09-20T14:16:34.783Z"}}}}]},{"href":"https://market.strapi.io","target":"_blank","text":"Strapi Market","summary":"Marketplace of plugins and integrations. ","icons":[{"media":{"data":{"id":6160,"attributes":{"name":"ShoppingCart.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.88,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Shopping_Cart_dce4e67639.svg","createdAt":"2024-09-20T14:16:35.279Z","updatedAt":"2024-09-20T14:16:35.279Z"}}}}]},{"href":"/features","text":"Features","summary":"Discover all the features available in Strapi today. ","icons":[{"media":{"data":{"id":6151,"attributes":{"name":"Lightning.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.02,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Lightning_f151151f47.svg","createdAt":"2024-09-20T14:16:35.141Z","updatedAt":"2024-09-20T14:16:35.141Z"}}}}]}]}],"arrowLinks":[],"pushs":[]},{"navigationLabel":{"href":"/user-stories","text":"Solutions","icons":[]},"sections":[{"title":"Use Cases","links":[{"href":"/solutions/ecommerce-cms","text":"Ecommerce","summary":"Level up your eCommerce experiences","icons":[{"media":{"data":{"id":6132,"attributes":{"name":"Basket.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.41,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Basket_c539160ec4.svg","createdAt":"2024-09-20T14:16:34.737Z","updatedAt":"2024-09-20T14:16:34.737Z"}}}}]},{"href":"/solutions/mobile-cms","text":"Mobile applications","summary":"One CMS, any devices.","icons":[{"media":{"data":{"id":6144,"attributes":{"name":"DeviceMobile.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.81,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Device_Mobile_ac5a8ef7c5.svg","createdAt":"2024-09-20T14:16:35.028Z","updatedAt":"2024-09-20T14:16:35.028Z"}}}}]},{"href":"/solutions/corporate-website-cms","text":"Corporate site","summary":"Manage your brand narrative.","icons":[{"media":{"data":{"id":6147,"attributes":{"name":"Globe.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.36,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Globe_c0eedf397b.svg","createdAt":"2024-09-20T14:16:35.083Z","updatedAt":"2024-09-20T14:16:35.083Z"}}}}]}]},{"title":"Teams","links":[{"href":"/for-developers","text":"Developers","summary":"Integrate Strapi with your favorite tools","icons":[{"media":{"data":{"id":6149,"attributes":{"name":"Code.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg","createdAt":"2024-09-20T14:16:35.106Z","updatedAt":"2024-09-20T14:16:35.106Z"}}}}]},{"href":"/for-content-teams","text":"Content Managers","summary":"Manage Content Autonomously ","icons":[{"media":{"data":{"id":6152,"attributes":{"name":"Feather.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.03,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Feather_7f4cd5b259.svg","createdAt":"2024-09-20T14:16:35.145Z","updatedAt":"2024-09-20T14:16:35.145Z"}}}}]},{"href":"/for-business-teams","text":"Website agencies","summary":"Unlock the benefit of structured content","icons":[{"media":{"data":{"id":6139,"attributes":{"name":"Briefcase.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.26,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Briefcase_8d689febf0.svg","createdAt":"2024-09-20T14:16:34.919Z","updatedAt":"2024-09-20T14:16:34.919Z"}}}}]}]},{"title":"Industries","links":[{"href":"/financial-services","text":"Financial Services","summary":"Build trustful relations with your customers","icons":[{"media":{"data":{"id":6148,"attributes":{"name":"Coins.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.24,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Coins_370cb6e3ea.svg","createdAt":"2024-09-20T14:16:35.084Z","updatedAt":"2024-09-20T14:16:35.084Z"}}}}]},{"href":"/tech-business-services","text":"Tech and Business Services","summary":"Stand out with exceptional B2B content.","icons":[{"media":{"data":{"id":6145,"attributes":{"name":"HeadCircuit.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.45,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Head_Circuit_e02b98942e.svg","createdAt":"2024-09-20T14:16:35.085Z","updatedAt":"2024-09-20T14:16:35.085Z"}}}}]},{"href":"/telco-media-gaming","text":"Telco, Media, and Gaming","summary":"Create and manage content on any platform","icons":[{"media":{"data":{"id":6150,"attributes":{"name":"Megaphone.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.37,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Megaphone_0f377169e0.svg","createdAt":"2024-09-20T14:16:35.139Z","updatedAt":"2024-09-20T14:16:35.139Z"}}}}]}]}],"arrowLinks":[],"pushs":[]},{"navigationLabel":{"href":"/community","text":"Developers","icons":[]},"sections":[{"title":"Resources","links":[{"href":"/blog","text":"Blog","summary":"Latest Strapi news \u0026 updates","icons":[{"media":{"data":{"id":6131,"attributes":{"name":"Article.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.48,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Article_1067c8180a.svg","createdAt":"2024-09-20T14:16:34.735Z","updatedAt":"2024-09-20T14:16:34.735Z"}}}}]},{"href":"/events","text":"Events","summary":"Upcoming and On-demand Events ","icons":[{"media":{"data":{"id":6136,"attributes":{"name":"Calendar.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.12,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Calendar_7e38ad5e4c.svg","createdAt":"2024-09-20T14:16:34.826Z","updatedAt":"2024-09-20T14:16:34.826Z"}}}}]},{"href":"/partner-program","text":"Partners","summary":"Find new opportunities, and scale your business with Strapi’s partner program","icons":[{"media":{"data":{"id":6143,"attributes":{"name":"Handshake.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.3,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Handshake_38fba9bb73.svg","createdAt":"2024-09-20T14:16:34.986Z","updatedAt":"2024-09-20T14:16:34.986Z"}}}}]},{"href":"/user-stories","text":"Case studies","summary":"Discover who uses Strapi","icons":[{"media":{"data":{"id":6140,"attributes":{"name":"Confetti.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.13,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Confetti_e2e878a534.svg","createdAt":"2024-09-20T14:16:34.920Z","updatedAt":"2024-09-20T14:16:34.920Z"}}}}]}]},{"title":"Support","links":[{"href":"https://github.com/strapi/strapi","text":"Open Source","summary":"Contribute \u0026 collaborate on GitHub","icons":[{"media":{"data":{"id":6149,"attributes":{"name":"Code.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Code_cf95dc4dae.svg","createdAt":"2024-09-20T14:16:35.106Z","updatedAt":"2024-09-20T14:16:35.106Z"}}}}]},{"href":"https://forum.strapi.io","target":"_blank","text":"Forum","summary":"Discuss, ask questions and find answers","icons":[{"media":{"data":{"id":6142,"attributes":{"name":"ChatsCircle.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.01,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg","createdAt":"2024-09-20T14:16:34.985Z","updatedAt":"2024-09-20T14:16:34.985Z"}}}}]},{"href":"https://discord.strapi.io","text":"Discord","summary":"Discuss, ask question and find answers","icons":[{"media":{"data":{"id":6142,"attributes":{"name":"ChatsCircle.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.01,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chats_Circle_3df902edc6.svg","createdAt":"2024-09-20T14:16:34.985Z","updatedAt":"2024-09-20T14:16:34.985Z"}}}}]},{"href":"https://www.youtube.com/strapi","text":"Video Tutorials","summary":"Discuss, ask question and find answers","icons":[{"media":{"data":{"id":6154,"attributes":{"name":"Play.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.73,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Play_ec33946179.svg","createdAt":"2024-09-20T14:16:35.188Z","updatedAt":"2024-09-20T14:16:35.188Z"}}}}]}]}],"arrowLinks":[],"pushs":[],"buttonIcons":{"title":"Integrations","links":[{"href":"/integrations/react-cms","icons":[{"media":{"data":{"id":2380,"attributes":{"name":"React_logo","alternativeText":"React_logo","width":124,"height":124,"mime":"image/svg+xml","size":6.33,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/reactjs_affdb2a81b_880e938939.svg","createdAt":"2021-07-06T17:47:39.983Z","updatedAt":"2024-10-14T12:40:34.613Z"}}}}]},{"href":"/integrations/nextjs-cms","icons":[{"media":{"data":{"id":5606,"attributes":{"name":"next.svg","width":52,"height":52,"mime":"image/svg+xml","size":23.87,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/next_62ccad57c8.svg","createdAt":"2024-06-20T14:47:15.216Z","updatedAt":"2024-06-20T14:47:15.216Z"}}}}]},{"href":"/integrations/vuejs-cms","icons":[{"media":{"data":{"id":1035,"attributes":{"name":"vuejs-logo","alternativeText":"vuejs-logo","width":99,"height":85,"mime":"image/svg+xml","size":90.84,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/vuejs-logo_1c5c570e34.svg","createdAt":"2020-05-13T14:20:50.723Z","updatedAt":"2025-01-14T14:47:04.660Z"}}}}]},{"href":"/integrations/nuxtjs-cms","icons":[{"media":{"data":{"id":2281,"attributes":{"name":"nuxt-2021.svg","alternativeText":"","width":640,"height":640,"mime":"image/svg+xml","size":0.94,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/nuxt_2021_e30c8bb5e6.svg","createdAt":"2021-06-14T10:41:21.923Z","updatedAt":"2022-02-02T16:46:07.190Z"}}}}]},{"href":"/integrations/flutter-cms","icons":[{"media":{"data":{"id":1901,"attributes":{"name":"logo_lockup_flutter_horizontal.svg","alternativeText":"","width":560,"height":157,"mime":"image/svg+xml","size":12.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_lockup_flutter_horizontal_9e61b7d8d8.svg","createdAt":"2021-02-25T14:31:13.451Z","updatedAt":"2021-02-25T14:31:13.544Z"}}}}]},{"href":"/integrations/svelte-cms","icons":[{"media":{"data":{"id":1452,"attributes":{"name":"svelte-logo","alternativeText":"","width":1200,"height":1445,"formats":{"thumbnail":{"url":"/uploads/thumbnail_svelte_logo_47aa97b851.png","mime":"image/png","size":9.23,"width":130,"height":156}},"mime":"image/png","size":62.11,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/svelte_logo_47aa97b851.png","createdAt":"2020-10-06T13:12:08.977Z","updatedAt":"2020-10-06T13:12:08.977Z"}}}}]},{"href":"/integrations/angular-cms","icons":[{"media":{"data":{"id":109,"attributes":{"name":"Angular_logo","alternativeText":"","width":250,"height":250,"mime":"image/svg+xml","size":0.9,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Angular_logo_d6e28562b5.svg","createdAt":"2020-04-23T15:27:41.403Z","updatedAt":"2020-04-23T15:27:41.403Z"}}}}]},{"href":"/integrations/astro","icons":[{"media":{"data":{"id":6916,"attributes":{"name":"astro-icon-dark.png","width":170,"height":214,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_icon_dark_c4e62cc0a3.png","mime":"image/png","name":"thumbnail_astro-icon-dark.png","size":5.34,"width":124,"height":156,"sizeInBytes":5340}},"mime":"image/png","size":1.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_icon_dark_c4e62cc0a3.png","createdAt":"2025-01-06T14:02:59.534Z","updatedAt":"2025-01-06T14:02:59.534Z"}}}}]},{"href":"/integrations/tan-stack-start-strapi-integration","icons":[{"media":{"data":{"id":7119,"attributes":{"name":"logo-color-600w-Er4SOkq1.png","width":616,"height":616,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_logo_color_600w_Er4_S_Okq1_53e9d1772c.png","mime":"image/png","name":"thumbnail_logo-color-600w-Er4SOkq1.png","size":26.85,"width":156,"height":156,"sizeInBytes":26849}},"mime":"image/png","size":33.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/logo_color_600w_Er4_S_Okq1_53e9d1772c.png","createdAt":"2025-02-03T15:53:35.663Z","updatedAt":"2025-02-22T19:12:23.700Z"}}}}]}],"button":{"href":"/integrations","text":"See all integrations","icons":[{"media":{"data":{"id":6916,"attributes":{"name":"astro-icon-dark.png","width":170,"height":214,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_astro_icon_dark_c4e62cc0a3.png","mime":"image/png","name":"thumbnail_astro-icon-dark.png","size":5.34,"width":124,"height":156,"sizeInBytes":5340}},"mime":"image/png","size":1.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_icon_dark_c4e62cc0a3.png","createdAt":"2025-01-06T14:02:59.534Z","updatedAt":"2025-01-06T14:02:59.534Z"}}}}]}}},{"navigationLabel":{"href":"https://docs.strapi.io","target":"_blank","text":"Docs","icons":[]},"sections":[],"arrowLinks":[],"pushs":[]},{"navigationLabel":{"href":"/pricing-cloud","text":"Pricing","icons":[]},"sections":[],"arrowLinks":[],"pushs":[]},{"navigationLabel":{"href":"https://cloud.strapi.io","target":"_blank","text":"Cloud","icons":[]},"sections":[{"title":"Discover","links":[{"href":"/cloud","text":"Discover Strapi Cloud","summary":"PaaS hosting for Strapi projects","icons":[{"media":{"data":{"id":6141,"attributes":{"name":"Cloud.svg","width":16,"height":16,"mime":"image/svg+xml","size":1.15,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_737d463253.svg","createdAt":"2024-09-20T14:16:34.923Z","updatedAt":"2024-09-20T14:16:34.923Z"}}}}]}]},{"title":"Login","links":[{"href":"https://cloud.strapi.io/login","text":"Login to Strapi Cloud","summary":"Login or Sign up for Strapi Cloud. ","icons":[{"media":{"data":{"id":6164,"attributes":{"name":"SignIn.svg","width":17,"height":16,"mime":"image/svg+xml","size":1.6,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Sign_In_2d9d2c57fb.svg","createdAt":"2024-09-20T14:16:35.355Z","updatedAt":"2024-09-20T14:16:35.355Z"}}}}]}]},{"title":"Documentation","links":[{"href":"https://docs.strapi.io/cloud/intro","text":"Strapi Cloud Docs","summary":"Strapi Cloud hosting technical documentation","icons":[{"media":{"data":{"id":6138,"attributes":{"name":"Book.svg","width":17,"height":16,"mime":"image/svg+xml","size":0.79,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Book_c70e3d2d35.svg","createdAt":"2024-09-20T14:16:34.917Z","updatedAt":"2024-09-20T14:16:34.917Z"}}}}]}]}],"arrowLinks":[],"pushs":[]}],"button":{"theme":"white","link":{"href":"https://docs.strapi.io/dev-docs/quick-start","target":"_blank","text":"Get Started","icons":[]}},"lowerLinks":[{"href":"/contact-sales","text":"Contact Sales","icons":[{"media":{"data":{"id":6137,"attributes":{"name":"ChatCircleDots.svg","width":16,"height":16,"mime":"image/svg+xml","size":2.28,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Chat_Circle_Dots_203173560d.svg","createdAt":"2024-09-20T14:16:34.915Z","updatedAt":"2024-09-20T14:16:34.915Z"}}}}]},{"href":"/demo","text":"Interactive Demo","icons":[{"media":{"data":{"id":6135,"attributes":{"name":"CursorClick.svg","width":16,"height":16,"mime":"image/svg+xml","size":3.31,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cursor_Click_ca31d5a02d.svg","createdAt":"2024-09-20T14:16:34.831Z","updatedAt":"2024-09-20T14:16:34.831Z"}}}}]},{"href":"https://cloud.strapi.io","text":"Host your Project","icons":[{"media":{"data":{"id":6133,"attributes":{"name":"Cloud (1).svg","width":16,"height":16,"mime":"image/svg+xml","size":1.15,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_1_bd0c325cbd.svg","createdAt":"2024-09-20T14:16:34.781Z","updatedAt":"2024-09-20T14:16:34.781Z"}}}}]}]},"footer":{"tagline":"Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.","showDesignStudio":false,"copyright":"© 2024, Strapi","cta":{"title":"Build modern websites without sacrificing customization in minutes instead of days","cliContent":"npx create-strapi-app@latest","features":[{"title":"Open source (MIT)","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]},{"title":"SOC 2 certified","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]},{"title":"GDPR Compliant","icon":{"media":{"data":{"id":6019,"attributes":{"name":"Check.svg","width":16,"height":16,"mime":"image/svg+xml","size":0.99,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Check_5f2ef36f5a.svg","createdAt":"2024-09-17T13:29:09.518Z","updatedAt":"2024-09-17T13:29:09.518Z"}}}},"links":[]}],"logos":[{"href":"/","media":{"data":{"id":6665,"attributes":{"name":"Airbus_Logo.svg","width":399,"height":74,"mime":"image/svg+xml","size":1.65,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Airbus_Logo_a87fca5a4f.svg","createdAt":"2024-11-15T14:17:34.489Z","updatedAt":"2024-11-15T14:17:34.489Z"}}}},{"href":"/","media":{"data":{"id":6667,"attributes":{"name":"Adidas_Logo.svg","width":725,"height":500,"mime":"image/svg+xml","size":3.61,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Adidas_Logo_d742375923.svg","createdAt":"2024-11-15T14:17:34.538Z","updatedAt":"2024-11-15T14:17:34.538Z"}}}},{"href":"/","media":{"data":{"id":6664,"attributes":{"name":"Toyota_Logo.svg","width":102,"height":27,"mime":"image/svg+xml","size":3.51,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Toyota_Logo_c8179b9525.svg","createdAt":"2024-11-15T14:17:33.706Z","updatedAt":"2024-11-15T14:17:33.706Z"}}}},{"href":"/","media":{"data":{"id":3924,"attributes":{"name":"2560px_Tesco_Logo_svg_aaf4397a54.png","width":2560,"height":721,"formats":{"thumbnail":{"url":"/uploads/thumbnail_2560px_Tesco_Logo_svg_aaf4397a54_d6671f2b78.png","mime":"image/png","name":"thumbnail_2560px_Tesco_Logo_svg_aaf4397a54.png","size":11.07,"width":245,"height":69}},"mime":"image/png","size":20.04,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/2560px_Tesco_Logo_svg_aaf4397a54_d6671f2b78.png","createdAt":"2023-03-30T09:22:07.781Z","updatedAt":"2025-01-31T00:35:24.362Z"}}}}],"links":[{"title":"Ready to deploy?","text":"Ready to deploy? Start building with a free account. Set up is fast, simple, and free for 14 days.","icon":{"href":"https://cloud.strapi.io/","media":{"data":{"id":6394,"attributes":{"name":"Cloud_purple","alternativeText":"Cloud_purple","width":24,"height":25,"mime":"image/svg+xml","size":1.2,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Cloud_ccf7021c70_d670bb24f4.svg","createdAt":"2024-10-14T12:45:52.325Z","updatedAt":"2024-10-14T12:46:02.062Z"}}}},"links":[{"href":"https://cloud.strapi.io/","text":"Start Deploying","icons":[]}]},{"title":"Explore Strapi Enterprise","text":"Explore Strapi Enterprise with an interactive product tour, trial, or a personalized demo.","icon":{"media":{"data":{"id":6395,"attributes":{"name":"Buildings_purple","alternativeText":"Buildings_purple","width":24,"height":25,"mime":"image/svg+xml","size":3.67,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Buildings_44b0905935_71559b83a9.svg","createdAt":"2024-10-14T12:46:59.262Z","updatedAt":"2024-10-14T12:47:12.127Z"}}}},"links":[{"href":"https://strapi.io/enterprise","text":"Explore Enterprise","icons":[]}]}]},"sections":[{"title":"Product","links":[{"href":"/five","text":"Strapi 5","icons":[]},{"href":"https://design-system.strapi.io/","text":"Strapi Design System","icons":[]},{"href":"/why-strapi","text":"Why Strapi?","icons":[]},{"href":"/content-architecture","text":"Content Architecture","icons":[]},{"href":"/features","text":"Features","icons":[]},{"href":"/enterprise","text":"Enterprise Edition","icons":[]},{"href":"https://feedback.strapi.io/","target":"_blank","text":"Roadmap","icons":[]},{"href":"/support","text":"Support","icons":[]},{"href":"/demo","text":"Try live demo","icons":[]},{"href":"/changelog","text":"Changelog","icons":[]}]},{"title":"Solutions","links":[{"href":"/solutions/static-websites","text":"Static websites","icons":[]},{"href":"/solutions/mobile-cms","text":"Mobile applications","icons":[]},{"href":"/solutions/corporate-website-cms","text":"Corporate websites","icons":[]},{"href":"/solutions/editorial-cms","text":"Editorial sites","icons":[]},{"href":"/solutions/ecommerce-cms","text":"Ecommerce","icons":[]},{"href":"/for-developers","text":"For developers","icons":[]},{"href":"/for-content-teams","text":"For content teams","icons":[]},{"href":"/for-business-teams","text":"For business teams","icons":[]}]},{"title":"Resources","links":[{"href":"/resource-center","text":"Resource Center","icons":[]},{"href":"https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html","target":"_blank","text":"How to get started","icons":[]},{"href":"/community","text":"Meet the community","icons":[]},{"href":"/blog/categories/tutorials","text":"Tutorials","icons":[]},{"href":"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html","target":"_blank","text":"API documentation","icons":[]},{"href":"https://github.com/strapi/strapi","target":"_blank","text":"GitHub repository","icons":[]},{"href":"/blog/introducing-the-new-strapi-starter-with-nextjs13-tailwind-and-typescript","text":"Starters","icons":[]},{"href":"/user-stories","text":"User stories","icons":[]},{"href":"/headless-cms/comparison/strapi-vs-wordpressheadless","text":"Strapi vs Wordpress","icons":[]},{"href":"/headless-cms/comparison/strapi-vs-contentful","text":"Strapi vs Contentful","icons":[]},{"href":"/headless-cms-guide","text":"Headless CMS guide","icons":[]}]},{"title":"Integrations","links":[{"href":"/integrations","target":"_blank","text":"All integrations","icons":[]},{"href":"/integrations/react-cms","text":"React CMS","icons":[]},{"href":"/integrations/nextjs-cms","text":"Next.js CMS","icons":[]},{"href":"/integrations/vuejs-cms","text":"Vue.js CMS","icons":[]},{"href":"/integrations/gatsby-cms","text":"Gatsby CMS","icons":[]},{"href":"/integrations/nuxtjs-cms","text":"Nuxt.js CMS","icons":[]},{"href":"/integrations/flutter-cms","target":"_blank","text":"Flutter CMS","icons":[]},{"href":"/integrations/gridsome-cms","target":"_blank","text":"Gridsome CMS","icons":[]},{"href":"/integrations/hugo-cms","target":"_blank","text":"Hugo CMS","icons":[]}]},{"title":"Company","links":[{"href":"/about-us","text":"About us","icons":[]},{"href":"/blog","text":"Blog","icons":[]},{"href":"https://handbook.strapi.io/","text":"Handbook","icons":[]},{"href":"/careers","text":"Careers","icons":[]},{"href":"/partner-program","text":"Partner Program","icons":[]},{"href":"/contact","text":"Contact","icons":[]},{"href":"/faq","text":"FAQ","icons":[]},{"href":"/newsroom","target":"_blank","text":"Newsroom","icons":[]}]}],"sublinks":[{"href":"https://github.com/strapi/strapi/blob/master/LICENSE","target":"_blank","text":"License","icons":[]},{"href":"/terms-of-use","text":"Terms","icons":[]},{"href":"/privacy","text":"Privacy","icons":[]}],"socials":{"text":"Join us on","socials":[{"link":{"href":"https://github.com/strapi","target":"_blank","text":"GitHub","icons":[]},"icon":{"media":{"data":{"id":5227,"attributes":{"name":"GithubLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.04,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Github_Logo_6ba2bf8500.svg","createdAt":"2024-04-23T12:55:17.636Z","updatedAt":"2024-04-23T12:55:17.636Z"}}}}},{"link":{"href":"https://discord.strapi.io","target":"_blank","text":"Discord","icons":[]},"icon":{"media":{"data":{"id":5224,"attributes":{"name":"DiscordLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":4.57,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Discord_Logo_163e662522.svg","createdAt":"2024-04-23T12:55:17.623Z","updatedAt":"2024-04-23T12:55:17.623Z"}}}}},{"link":{"href":"https://www.twitch.tv/strapijs","target":"_blank","text":"Twitch","icons":[]},"icon":{"media":{"data":{"id":5228,"attributes":{"name":"TwitchLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":1.61,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Twitch_Logo_9d2363163b.svg","createdAt":"2024-04-23T12:55:17.641Z","updatedAt":"2024-04-23T12:55:17.641Z"}}}}},{"link":{"href":"https://x.com/strapijs","target":"_blank","text":"X","icons":[]},"icon":{"media":{"data":{"id":5230,"attributes":{"name":"XLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":1.4,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/X_Logo_9344577284.svg","createdAt":"2024-04-23T12:56:51.249Z","updatedAt":"2024-04-23T12:56:51.249Z"}}}}},{"link":{"href":"https://www.facebook.com/strapijs/","target":"_blank","text":"Facebook","icons":[]},"icon":{"media":{"data":{"id":5226,"attributes":{"name":"FacebookLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.2,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Facebook_Logo_f95177c5f1.svg","createdAt":"2024-04-23T12:55:17.632Z","updatedAt":"2024-04-23T12:55:17.632Z"}}}}},{"link":{"href":"https://www.linkedin.com/company/strapi","target":"_blank","text":"LinkedIn","icons":[]},"icon":{"media":{"data":{"id":5225,"attributes":{"name":"LinkedinLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.39,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Linkedin_Logo_bbb836b73e.svg","createdAt":"2024-04-23T12:55:17.631Z","updatedAt":"2024-04-23T12:55:17.631Z"}}}}},{"link":{"href":"https://www.instagram.com/strapijs/","target":"_blank","text":"Instagram","icons":[]},"icon":{"media":{"data":{"id":5223,"attributes":{"name":"InstagramLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":2.05,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Instagram_Logo_65fe0055ba.svg","createdAt":"2024-04-23T12:55:17.621Z","updatedAt":"2024-04-23T12:55:17.621Z"}}}}},{"link":{"href":"https://www.youtube.com/c/Strapi/featured","target":"_blank","text":"YouTube","icons":[]},"icon":{"media":{"data":{"id":5229,"attributes":{"name":"YoutubeLogo.svg","width":24,"height":24,"mime":"image/svg+xml","size":1.64,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/Youtube_Logo_e082ba66d9.svg","createdAt":"2024-04-23T12:55:17.643Z","updatedAt":"2024-04-23T12:55:17.643Z"}}}}},{"link":{"href":"https://bsky.app/profile/strapijs.bsky.social ","target":"_blank","text":"Bluesky","icons":[{"media":{"data":{"id":7122,"attributes":{"name":"bluesky.png","width":200,"height":200,"formats":{"thumbnail":{"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/thumbnail_bluesky_796a3c86b8.png","mime":"image/png","name":"thumbnail_bluesky.png","size":8.05,"width":156,"height":156,"sizeInBytes":8049}},"mime":"image/png","size":2.72,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/bluesky_796a3c86b8.png","createdAt":"2025-02-05T05:20:43.119Z","updatedAt":"2025-02-05T05:20:43.119Z"}}}}]}}]}},"dictionary":[{"key":"blog.read_time_short","value":"%{value} min read"},{"key":"blog.read_time","value":"%{value} min read"},{"key":"action.copy","value":"Copy"},{"key":"blog.last_updated","value":"Last updated: %{date}"},{"key":"blog.see_all_related","value":"See all %{category} articles"},{"key":"blog.latest_articles","value":"Latest articles"}],"newsletter":{"title":"Join our Newsletter","text":"Get all the latest Strapi updates, news and events.","networkErrorMessage":"Network error","successMessage":"Thank you for subscribing! ✅","invalidEmailMessage":"Invalid email address ⚠️","requiredEmailMessage":"Please fill in your email address","placeholder":"Email","submitButtonText":"Submit","portalId":"6893032","formGuid":"d3fe1d5f-9812-4046-81ed-4dd913373f2f","disclaimer":"By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties."},"logoPopin":{"title":"Looking for our logo ?","asset":{"media":{"data":{"id":3634,"attributes":{"name":"strapi-logo-figma-lines.png","alternativeText":"","width":1312,"height":647,"formats":{"thumbnail":{"url":"/uploads/thumbnail_strapi_logo_figma_lines_5155cb4b84.png","mime":"image/png","name":"thumbnail_strapi-logo-figma-lines.png","size":12.83,"width":245,"height":121}},"mime":"image/png","size":24.75,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_logo_figma_lines_5155cb4b84.png","createdAt":"2022-10-12T14:36:58.045Z","updatedAt":"2022-10-12T14:36:58.059Z"}}}},"links":[{"theme":"purple","link":{"href":"https://www.strapi.io/hubfs/New%20logos/Strapi%20logo%20kit.zip","text":"Download Logo Pack","icons":[]}},{"theme":"white","link":{"href":"https://handbook.strapi.io/strapi-brand-book-2022","text":"See more Strapi assets","icons":[]}}]},"seo":{"metaTitle":"Strapi, the leading open-source headless CMS","metaDescription":"Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first. Unleash your content with Strapi.","metaRobots":"noindex","metaImage":{"data":{"id":982,"attributes":{"name":"strapi-cover","alternativeText":"Strapi logo","width":4444,"height":1914,"formats":{"thumbnail":{"url":"/uploads/thumbnail_strapi-cover_1fabc982ce.png","mime":"image/png","name":"thumbnail_strapi-cover","size":3.68,"width":245,"height":106}},"mime":"image/png","size":57.4,"url":"https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi-cover_1fabc982ce.png","createdAt":"2020-05-08T18:00:47.462Z","updatedAt":"2022-10-24T15:10:20.828Z"}}},"metaSocial":[]},"banner":{"content":"🚀 **StrapiConf 2025 – May 13 |** Big product updates, expert talks \u0026 more! [Save your spot →](https://conf.strapi.io/)\n\n\n\n\n\n","date":"2025-05-13"},"githubStars":65193,"amplitudeAPIKey":"181a95e5a6b8053f7ffb7da9f0ef7ef4","__N_SSG":true},"page":"/","query":{},"buildId":"vuOxsQmmbOpxHzaPLq1SJ","isFallback":false,"dynamicIds":[38038],"gsp":true,"appGip":true,"scriptLoader":[{"data-cookieconsent":"marketing","type":"text/javascript","id":"hs-script-loader","async":true,"defer":true,"src":"//js.hs-scripts.com/6893032.js","strategy":"afterInteractive"},{"id":"hotjar","strategy":"afterInteractive","children":"\n (function(h,o,t,j,a,r){\n h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n h._hjSettings={hjid:1095300,hjsv:6};\n a=o.getElementsByTagName('head')[0];\n r=o.createElement('script');r.async=1;\n r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n a.appendChild(r);\n })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n "}]}</script><div class="You seem to be curious! Check out Strapi Cloud before its official release: https://strapi.io/cloud?code"></div></body></html>