CINXE.COM
Meshery The Kubernetes and Cloud Native Manager - an extensible developer platform | Meshery
<!-- 1. Add latest jQuery and fancybox files --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="test" content="testing" /> <!-- Google Tag Manager --> <meta name="description" content="" /> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KL6SSW5');</script> <!-- End Google Tag Manager --> <link rel="canonical" href="https://layer5.io/" /> <!-- Begin Jekyll SEO tag v2.8.0 --> <title>Meshery The Kubernetes and Cloud Native Manager - an extensible developer platform | Meshery</title> <meta name="generator" content="Jekyll v4.3.4" /> <meta property="og:title" content="Meshery The Kubernetes and Cloud Native Manager - an extensible developer platform" /> <meta name="author" content="The Meshery Authors" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="As a CNCF project, Meshery is the open source, cloud native manager, with multi-cluster Kubernetes management." /> <meta property="og:description" content="As a CNCF project, Meshery is the open source, cloud native manager, with multi-cluster Kubernetes management." /> <link rel="canonical" href="https://meshery.io/" /> <meta property="og:url" content="https://meshery.io/" /> <meta property="og:site_name" content="Meshery" /> <meta property="og:image" content="https://meshery.io/assets/images/logos/meshery-gradient.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://meshery.io/assets/images/logos/meshery-gradient.png" /> <meta property="twitter:title" content="Meshery The Kubernetes and Cloud Native Manager - an extensible developer platform" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","author":{"@type":"Person","name":"The Meshery Authors"},"description":"As a CNCF project, Meshery is the open source, cloud native manager, with multi-cluster Kubernetes management.","headline":"Meshery The Kubernetes and Cloud Native Manager - an extensible developer platform","image":"https://meshery.io/assets/images/logos/meshery-gradient.png","name":"Meshery","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://meshery.io/assets/images/logos/meshery-gradient.png"},"name":"The Meshery Authors"},"sameAs":["https://github.com/meshery/meshery.io"],"url":"https://meshery.io/"}</script> <!-- End Jekyll SEO tag --> <link type="application/atom+xml" rel="alternate" href="https://meshery.io/feed.xml" title="Meshery" /> <link rel="stylesheet" href="/css/stellarnav.css" /> <link rel="stylesheet" href="/css/screen.css" /> <link rel="icon" type="image/png" href="/favicon.ico" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" /> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "https://meshery.io", "name": "Meshery", "description": "The extensible cloud native manager. Confidently wrangle cloud native infrastructure with Meshery." } </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" /> <link rel="stylesheet" href="/css/subscribe.css" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Meshery" /> <meta name="twitter:site" content="@mesheryio" /> <meta name="twitter:creator" content="@mesheryio" /> <meta name="author" content="Meshery Authors"> <meta name="twitter:image" content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" /> <meta name="image" property="og:image" content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" /> <meta property="og:type" content="website"> <meta name="og:image" content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" /> </head> <body style="overflow-x: hidden" class="dark-mode"> <script> const body = document.body; if (localStorage.getItem("mode") === "light-mode") { body.classList.remove("dark-mode"); let allLogos = document.querySelectorAll("#logo-dark-light"); allLogos.forEach(e => e.src = e.dataset.logoForLight); } // Automatically set logos based on initial theme window.addEventListener('load', () => { let allLogos = document.querySelectorAll("#logo-dark-light"); allLogos.forEach(e => { e.src = body.classList.contains("dark-mode") ? e.dataset.logoForDark : e.dataset.logoForLight; }); // emit the theme event document.dispatchEvent(new CustomEvent("themeChange",{ detail : {value : localStorage.getItem("mode")}, bubbles: true , })) }); document.addEventListener("DOMContentLoaded", function() { // $('.sitewide-banner').animate({top: 0}); const banner = document.querySelector(".sitewide-banner"); setTimeout(function() { banner.classList.remove("hidden"); }, 0); // Add a delay of 1 second before showing the banner }); </script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KL6SSW5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!-- Sitewide Banner <div class="sitewide-banner hidden"> <p>Meshery's CNCF incubation proposal is here. Are you a fan of Meshery?</p> <p> <a href="https://github.com/cncf/toc/pull/1264">Show your support by adding a reaction!</a> </p> </div> --> <header id="mainHeader" class="filledHeader"> <div class="container nav-container"> <div class="project-name"> <a href="/"> <img src="/assets/images/logos/meshery-logo.png" alt="Meshery Logo" /> <img src="/assets/images/logos/meshery-logo-text.png" data-logo-for-dark="/assets/images/logos/meshery-logo-text.png" data-logo-for-light="/assets/images/logos/meshery-logo-text-dark.png" alt="Meshery Logo" id="logo-dark-light" /> </a> </div> <nav class="navmenu-container" style="margin-left: 10rem; width: 60%;"> <a class="editor-link btn" href="cloudcannon:collections/_data/navigation.yml" class="btn"><strong>✎</strong> Edit navigation</a> <div class="stellarnav"> <ul class="nav-list"> <li class="nav-item"> <a href="https://docs.meshery.io " class="nav-text" target="_blank" > Docs </a> </li> <li class="nav-item"> <a href="/catalog " class="nav-text" > Catalog </a> </li> <li class="nav-item"> <a href="https://play.meshery.io " class="nav-text" target="_blank" > Playground </a> </li> <li class="nav-item"> <a href="/community " class="nav-text" > Community </a> <ul class=""> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/community.svg"> <a href="/community" class="subnav-item">Participate </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Calendar.svg"> <a href="/calendar" class="subnav-item">Calendar </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Programs.svg"> <a href="/programs" class="subnav-item">Programs </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Mail.svg"> <a href="/subscribe" class="subnav-item">Mailing Lists </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Discuss.svg"> <a href="/community#discussion-forums" target="_blank" class="subnav-item">Discussion forums <img src="/assets/images/buttons/external-link_gray.svg" alt="Link Icon" class="nav-sublink-logo"> </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Github.svg"> <a href="https://github.com/meshery" target="_blank" class="subnav-item">GitHub <img src="/assets/images/buttons/external-link_gray.svg" alt="Link Icon" class="nav-sublink-logo"> </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Slack.svg"> <a href="https://slack.meshery.io" target="_blank" class="subnav-item">Slack <img src="/assets/images/buttons/external-link_gray.svg" alt="Link Icon" class="nav-sublink-logo"> </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Youtube.svg"> <a href="https://www.youtube.com/channel/UCgXlqWDCg-9RP1eckf0s6KA?sub_confirmation=1" target="_blank" class="subnav-item">Youtube <img src="/assets/images/buttons/external-link_gray.svg" alt="Link Icon" class="nav-sublink-logo"> </a> </div> </li> </ul> </li> <li class="nav-item"> <a class="nav-text" > Resources </a> <ul class=""> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Blog.svg"> <a href="/blog" class="subnav-item">Blog </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/meshery-extensions.svg"> <a href="/extensions" class="subnav-item">Extensions </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/Contribute.svg"> <a href="https://docs.meshery.io/project/contributing" target="_blank" class="subnav-item">Contributing <img src="/assets/images/buttons/external-link_gray.svg" alt="Link Icon" class="nav-sublink-logo"> </a> </div> </li> <li > <div class="sub-nav-li" > <img class="nav-img" src="/assets/images/nav-icons/meshery.svg"> <a href="/brand" class="subnav-item">Branding </a> </div> </li> </ul> </li> <li class="nav-item"> <a href="/#getting-started " class="nav-text highlight" > Getting Started </a> </li> </ul> </div> </nav> <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center; background: transparent;"> <img class="nav-text" id="logo-dark-light" src="/assets/images/nav-icons/mode-toggle-icon-moon.png" data-logo-for-dark="/assets/images/nav-icons/mode-toggle-icon-moon.png" data-logo-for-light="/assets/images/nav-icons/mode-toggle-icon-sun.png" alt="theme-logo" /> </button> </div> </header> </body> </html> <!-- 1. Add latest jQuery and fancybox files --> <link type="text/css" rel="stylesheet" href="/integrations/main.css" /> <style> a{ color: #00d3a9; text-decoration: none !important; } a:hover{ color: #00b39f; } ul > li { font-family:'Qanelas Soft', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; } .element { width: 120px; height: 160px; /* box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5); */ filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 10px); border: 1px solid rgba(127, 255, 255, 0.25); text-align: center; line-height: normal; cursor: default; } .element:hover { box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75); /* filter: drop-shadow(rgba(0, 0, 0, 0.9) 0px 4px 20px); */ border: 1px solid white; } .element .number { position: absolute; top: 20px; right: 20px; font-size: 12px; color: black; } .element .symbol { position: absolute; top: 40px; left: 0px; right: 0px; font-size: 60px; font-weight: bold; color: rgba(255, 255, 255, 0.75); text-shadow: 0 0 10px rgba(0, 255, 255, 0.95); } .element .details { position: absolute; bottom: 15px; left: 0px; right: 0px; font-size: 12px; color: black; } button { color: white; background: transparent; border: 0px; padding: 5px 10px; cursor: pointer; } button:hover { background-color: rgba(0, 255, 255, 0.5); } button:active { color: #000000; background-color: rgba(0, 255, 255, 0.75); } #integration-container > div:hover{ box-shadow: rgb(50 50 93 / 5%) 0px 30px 60px -12px inset, rgb(0 0 0 / 12%) 2px 8px 33px 8px inset; } </style> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <style> h2.sub-text { font-family: "Qanelas Soft", "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; } </style> <a id="button-scroll-to-up" style="text-decoration: none; color: white;"></a> <section class="hero" style="padding-bottom: 1rem"> <div class="text-container"> <h1 style="margin: 0rem 0rem 1rem 0rem;">the <span class="special-text" style="animation-delay: .5s;"> extensible</span> Kubernetes manager</h1> <div class="video-box"> <div class="ribbon"><span>video</span></div> <a href="https://www.youtube.com/watch?v=Do7htKrRzDA" data-fancybox="images" data-caption="cloud native management plane" title="watch video"> <video class="box-shadow-primary" width="100%" autoplay loop muted> <source src="/assets/videos/hero-img.webm" type="video/webm" /> <!-- Added track to provide subtitles or captions for the video. This ensures that the video is accessible to users who are deaf or hard of hearing --> <track kind="captions" src="" srclang="en" label="English" default /> </video> </a> </div> <h2 class="sub-text" style="padding-top:1rem; font-size: 1.05rem; font-weight: 500;">Example extension. See other <a style="font-size:1.05rem" href="/extensions">Meshery Extensions</a>.</h2> <a href="https://github.com/meshery/meshery"> <img class="meshery-repo" src="https://img.shields.io/github/stars/meshery/meshery.svg?style=social&label=Stars" alt="Stars on meshery.io GitHub repository" style="height: 1.75rem; margin-top: 1rem;" /> </a> <a href="https://github.com/meshery/meshery"> <img class="meshery-repo" src="https://img.shields.io/github/forks/meshery/meshery.svg?style=social&label=Fork" alt="Fork meshery.io GitHub repository" style="height: 1.75rem; margin-top: 1rem;" /> </a> </div> </section> <section> </section> <!-- <hr style="width: 70%; margin-bottom:3rem; border: 1px solid; color: var(--color-secondary-dark);"> --> <section id="integrations"> <div class="integrations-heading" style="padding-top: 2rem;"> <div class="parallel-left"></div> <div class="parallel-right"></div> <h1 id="integration-heading"></h1> <h2> for your Cloud Native Infrastructure and Apps </h2> <p style="margin: auto 10vw;"> Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters. </p> </div> <div id="integContainer" class="integrations-container container" style="column-gap: max(2vh, 2vw); row-gap: 1.5rem; display: flex; flex-wrap: wrap; padding-bottom: 3.5rem;"> </div> <div class="integrations-3d-link"> <div class="button-container" style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap;"> <a class="highlight show-all-button toggle-text" style="display: inline-block; width: fit-content; cursor:pointer;">Show More Integrations</a> <a class="highlight show-all-button" href="/integrations" style="display: inline-block; width: fit-content;">View Integrations in 3D</a> </div> </div> <script type="module"> // integrations.js import data from '../../integrations/data.js'; const integHeading = document.getElementById("integration-heading"); const roundedIntegNumber = Math.floor(data.length / 10) * 10; integHeading.textContent = `${roundedIntegNumber}+ Built-In Integrations`; const integContainer = document.getElementById("integContainer"); let allDataShown = false; function renderIntegrationCards(data, showAll) { const cardsToShow = showAll ? data.length : 40; return data.slice(0, cardsToShow).map(item => { const iconURL = item.color.split('/').slice(1).join('/'); return ` <a href="${item.permalink}" class="integrations-card"> <div class="integrations-card-inner"> <div class="card-front"> <img src="${iconURL}" loading="lazy" id="logo-dark-light" data-logo-for-dark="${iconURL}" data-logo-for-light="${iconURL}" alt="${item.name}-card-image"/> </div> <div class="card-back"> <p> ${item.name} </p> </div> </div> </a>`; }).join(''); } const scrollOptions = { behavior: "smooth" }; integContainer.innerHTML = renderIntegrationCards(data, allDataShown); document.querySelector('.show-all-button').addEventListener('click', () => { allDataShown = !allDataShown; const button = document.querySelector('.toggle-text'); if (allDataShown) { button.textContent = 'See Less Integrations'; // Change button text when allDataShown is true } else { button.textContent = 'See All Integrations'; // Change button text when allDataShown is false } integContainer.innerHTML = renderIntegrationCards(data, allDataShown); // Scroll to the <h2> tag if (!allDataShown) { const h2Tag = document.querySelector('h2'); h2Tag.scrollIntoView(scrollOptions); } }); </script> </section> <!-- Features Section --> <div class="content"> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title">Platform Engineering with Meshery's <span class="special-text"> Extension Points</span></h2> <p>Meshery includes both REST APIs and GraphQL APIs, pluggable adapters via gRPCs, hot-loadable ReactJS and hot-loadable Golang binaries. The great number of <a style="width:auto;" href="https://docs.meshery.io/extensibility">extension points</a> in Meshery make it ideal as the foundation of your internal developer platform. <div class="button-para"> <a href="https://docs.meshery.io/project/contributing/contributing-models#instructions-for-creating-a-new-model" class="highlight">Example: Create your own model</a> </div> </p> </div> <div class="image flex"> <a style="width: auto;" href="" data-fancybox="images" data-caption='Meshery includes both REST APIs and GraphQL APIs, pluggable adapters via gRPCs, hot-loadable ReactJS and hot-loadable Golang binaries. The great number of <a style="width:auto; href="https://docs.meshery.io/extensibility">extension points</a> in Meshery make it ideal as the foundation of your internal developer platform.'> <img src="/assets/images/features/meshery-platform-engineering.webp" style="max-width:100%" alt="Meshery the Internal Developer Platform" loading="lazy" class="screenshot"/> </a> </div> </div> </section> <section style="display:block;margin-top:3rem;margin-bottom:0rem;padding-bottom:0rem;"> <div class="container flex" style="align-items: normal;" > <div class="text" style="padding: 0 20px 20px 0;"> <h2 class="feature-title"><span class="special-text">Visually</span> and <span class="special-text">collaboratively</span> manage your infrastructure</h2> <p>Meshery uses context-aware <a href="https://docs.meshery.io/concepts/logical/relationships">relationships</a> to define how and when components interrelate with one another. Meshery supports a variety of relationships between components. These relationships are categorized into two types: semantic and non-semantic. <div class="button-para"> <a href="https://docs.meshery.io/concepts/logical/relationships#types-of-relationships" class="highlight">See more examples</a> </div> </p> </div> <div class="tab-container" > <div class="tab"> <button class="tablinks active" onclick="openTab(event, 'edge')">Edge</button> <button class="tablinks" onclick="openTab(event, 'hierarchical')">Hierarchical</button> <button class="tablinks" onclick="openTab(event, 'sibling')">Sibling</button> </div> <div id="carousel"> <figure class="tabcontent hierarchical" id="hierarchical" data-fancybox="images" data-caption="Example: Kubernetes Deployment with ConfigMap applied" href="https://docs.meshery.io/assets/img/meshmodel/relationships/hierarchical_inventory_relationship.svg"><br> <img alt="Example: Kubernetes Deployment with ConfigMap applied" src="/assets/images/features/relationships/hierarchical_inventory_relationship.svg"> <figcaption>Example: Kubernetes Deployment with ConfigMap applied</figcaption> </figure> <figure class="tabcontent hierarchical" id="hierarchical" data-fancybox="images" data-caption=" Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child)" href="https://docs.meshery.io/assets/img/meshmodel/relationships/hierarchical_parent_relationship.svg"><br> <img alt=" Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child)" src="/assets/images/features/relationships/hierarchical_parent_relationship.svg"> <figcaption> Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child) </figcaption> </figure> <figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_mount_relationship_pod_persistent_volume.svg"><br> <img alt="Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim" src="/assets/images/features/relationships/edge_mount_relationship_pod_persistent_volume.svg" style="display:block;"> <figcaption>Example: Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim</figcaption> </figure> <figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Ingress mapped a Service" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_network_ingress_to_service_relationship.svg"><br> <img alt="Kubernetes Ingress mapped a Service" src="/assets/images/features/relationships/edge_network_ingress_to_service_relationship.svg"> <figcaption>Example: Kubernetes Ingress mapped a Service</figcaption> </figure> <figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Cluster Role assigned to a Service Account" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_permission_relationship_cluster_role_service_account.svg"><br> <img alt="Kubernetes Cluster Role assigned to a Service Account" src="/assets/images/features/relationships/edge_permission_relationship_cluster_role_service_account.svg"> <figcaption>Example: Kubernetes Cluster Role assigned to a Service Account</figcaption> </figure> <figure class="tabcontent sibling" id="sibling" style="width: 60%;" data-fancybox="images" data-caption="Kubernetes Service and Deployment with matching label selectors" href="https://docs.meshery.io/assets/img/meshmodel/relationships/sibling_relationship.png"><br> <img alt="Kubernetes Service and Deployment with matching label selectors" src="/assets/images/features/relationships/sibling_relationship.png"> <figcaption>Example: Kubernetes Service and Deployment with matching label selectors</figcaption> </figure> <style> .hierarchical, .edge, .sibling { margin: 0; } .hierarchical figcaption, .edge figcaption, .sibling figcaption { text-align: center; padding-top: .2em; color: var(--color-secondary-dark); } .hierarchical img, .edge img, .sibling img { display: block; width: 100%; background: none; padding-bottom: 20px; margin-left: auto; margin-right: auto; object-fit: contain; } .edge, .sibling { display: none; } </style> </div> </div> </div> </section> <section style="margin-top: 0rem;padding-top: 0rem;"> <div class="container flex"> <div class="text "> <h2 class="feature-title"><span class="special-text">Multi-cluster management</span> for Kubernetes and Clouds</h2> <p>Span domains. Perform multi-cluster operations from a central console.</p> <div class="button-para"> <a href="https://docs.meshery.io/guides/configuration-management" class="highlight">View Docs</a> </div> </div> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <div style="display: flex;"> <img src="/assets/images/screens/multi-cluster-management.gif" class="screenshot" style="max-height: 50vh;" alt="Multi-cluster Kubernetes Manager" loading="lazy" /> <span> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> </div> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title"><span class="special-text">Workspaces</span>: Your team's Google Drive for cloud native projects</h2> <p>Workspaces let you organize your work and serve as the central point of collaboration for you and your teams and point of access control to Environments and their resources.</p> <div class="button-para"> <a href="https://docs.meshery.io/concepts/logical/workspaces" class="highlight">Learn about Workspaces</a> </div> </div> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <div style="display: flex;"> <img src="/assets/images/features/workspace.gif" class="screenshot" alt="Multi-cluster Kubernetes Manager" loading="lazy" /> <span> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> </div> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title"><span class="special-text">Performance Profiles</span> with built-in load generator</h2> <p>Create and reuse performance profiles for consistent characterization of the configuration of your infrastructure in context of how it performs.</p> <div class="button-para"> <a href="https://docs.meshery.io/tasks/performance/managing-performance" class="highlight">View Docs</a> </div> </div> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <div style="display: flex;"> <img src="/assets/images/features/performance-metrics.gif" class="screenshot" alt="Multi-cluster Kubernetes Manager" loading="lazy" /> <span> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> </div> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <img src="/assets/images/kanvas-icon-color.svg" style="max-width:20%;position:relative;float:left; margin-right:20px;margin-bottom: 10px;" loading="lazy" alt="kanvas image"/> <h2 class="feature-title">Dry-run your changes to your infra <span class="special-text">before you merge</span></h2> <p>Get snapshots of your infrastructure directly in your PRs. Preview your deployment, view changes pull request-to-pull request and get infrastructure snapshots within your PRs by connecting Kanvas to your GitHub repositories.</p> <!-- <ul style="line-height: 1.5em;height: auto;text-align: left; color: var(--color-secondary-light)"> <li>Connect Kanvas to your GitHub repo and see changes pull request-to-pull request</li> <li>Connect Kanvas to your GitHub repo and see changes pull request-to-pull request</li> <li>Get snapshots of your infrastructure directly in your PRs</li> </ul> --> <div class="button-para"><a href="https://docs.meshery.io/guides/infrastructure-management/gitops-with-meshery" class="highlight">Meshery's GitOps tools</a></div> </div> <div class="container-slider"> <div class='img background-img'> <div class="overlay"> <div class="gradient-box-after">After</div> </div> </div> <div class='img foreground-img'> <div class="overlay"> <div class="gradient-box-before">Before</div> </div> </div> <label for="slider" id="slider-label">Slider</label> <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider" aria-labelledby="gradient-box-before gradient-box-after"> <div class='slider-button'></div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title"></span></h2> <p> </p> </div> <div class="image"> <a href="" data-fancybox="images" data-caption=""> <img class="screenshot" src="" alt="" loading="lazy" /> </a> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <img src="/assets/images/webassembly_logo.svg" style="max-width:30%;position:relative;float:left; margin-right:20px;margin-bottom: 10px;" alt="" loading="lazy" /> <h2 class="feature-title">Manage data plane intelligence with <span class="special-text">WebAssembly filters</span></h2> <p>Dynamically load and manage your own WebAssembly filters using Meshery.</p> </div> <!-- <div class="image flex"> <a style="width: 100%;" href="" data-fancybox="images" data-caption=""> <img src="" alt="" class="screenshot" loading="lazy" /> </a> </div> --> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <button id="video-modal" class="link recording-link" style="width:100%"><img src="/assets/images/features/wasm-filter-mgmt-poster.png" loading="lazy" alt="Envoy WASM Filter Management image" aria-label="Envoy WASM Filter Management image"></button> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> <!-- example open modal --> <!-- <button id="video-modal">Open Modal</button> --> <!-- modal --> <div id="modal" class="modal-video"> <!-- modal content --> <div class="modal-content-video"> <div></div> <div><h3 class="video-title">Envoy WASM Filter Management</h3></div> <div class="close-video"><h3 class="video">×</h3></div> <video id="video" width="100%" controls> <source src="/assets/images/features/wasm-filters.webm" type="video/webm"> Your browser does not support HTML video. </video> </div> </div> <script src="/assets/js/video-modal.js"></script> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title">Control all of your infrastructure with <span class="special-text">mesheryctl</span></h2> <p>Whether managing multiple Meshery deployments, importing designs, discoverying Kubernetes clusters, do so with ease using Meshery CLI in your terminal. <div class="button-para"><a href="https://docs.meshery.io/reference/mesheryctl/" class="highlight">View Docs</a></div></p> </div> <div class="image flex"> <a style="width: 100%;" href="/assets/images/features/ctl/mesheryctl-system-update.jpeg" data-fancybox="images" data-caption="Webassembly based Envoy Filters" aria-label="Webassembly based Envoy Filters"> <img src="/assets/images/features/ctl/mesheryctl-system-update.jpeg" class="screenshot" loading="lazy" alt="Webassembly based Envoy Filter image" /> </a> </div> </div> </section> <!-- <section> <div class="container flex"> <div class="text "> <img src="" style="max-width:30%;position:relative;float:left; margin-right:20px;margin-bottom: 10px;" alt="Unified policy engine" loading="lazy" /> <h2 class="feature-title"></h2> <p></p> </div> <div class="image flex"> <a style="width: auto;" href="" data-fancybox="images"> <img src="" alt="" class="screenshot" loading="lazy" /> </a> </div> </div> </section> --> <section> <div class="container flex"> <div class="text "> <div style="display: flex;"> <img src="/assets/images/patterns/service-mesh-patterns-side.svg" data-logo-for-light="/assets/images/patterns/service-mesh-patterns-side-white.png" data-logo-for-dark="" id="logo-dark-light" alt="Cloud native design patterns" style="height: 4rem;" loading="lazy" /> <span> </div> <h2 class="feature-title">Access the <span class="special-text">Cloud Native Patterns</span> for Kubernetes</h2> <p>Design and manage all of your cloud native infrastructure using the design configurator in Meshery or start from a template using the patterns from the catalog. <div class="button-para"> <a href="/catalog" class="highlight">View Catalog</a> </div> </p> </div> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <button id="video-modal" class="link recording-link" style="width:100%" aria-label="cloud native design pattern video"><img src="/assets/images/patterns/smp-video-poster-play.png" loading="lazy" class="screenshot" alt="cloud native design pattern"></button> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> <!-- example open modal --> <!-- <button id="video-modal">Open Modal</button> --> <!-- modal --> <div id="modal" class="modal-video"> <!-- modal content --> <div class="modal-content-video"> <div></div> <div><h3 class="video-title">Cloud Native Design Patterns</h3></div> <div class="close-video"><h3 class="video">×</h3></div> <video id="video" width="100%" controls> <source src="assets/images/patterns/service-mesh-patterns-clip.mov" type="video/mp4"> Your browser does not support HTML video. </video> </div> </div> <script src="/assets/js/video-modal.js"></script> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title">Manage the <span class="special-text">performance</span> of your infrastructure and its workloads</h2> <ul style="line-height: 1.5em;height: auto;text-align: left; color: var(--color-secondary-light)"> <li>Use performance profiles to track the historical performance of your workloads.</li> <li>Track your application performance from version to version.</li> <li>Understand behavioral differences between cloud native network functions.</li> <li>Compare performance across infrastructure deployments.</li> </ul> </p> </div> <div class="image"> <a href="https://raw.githubusercontent.com/layer5io/meshery.io/master/assets/images/screens/service-mesh-performance-example.gif" data-fancybox="images" data-caption="Baseline and track your cloud native performance from release to release."> <img src="/assets/images/screens/service-mesh-performance-example.gif" alt="Microservices Performance Comparison" class="screenshot" loading="lazy" /> </a> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title">Manage your resources with <span class="special-text">Environments</span></h2> <p> Environments make it easier for you to manage, share, and work with a collection of resources as a group, instead of dealing with all your connections and credentials on an individual basis.</p> <div class="button-para"> <a href="https://docs.meshery.io/concepts/logical/environments" class="highlight">View Docs</a> </div> </div> <div class="image flex" style="flex-flow: column wrap;"> <div align="center" style="margin-top: 3rem;"> <div style="display: flex;"> <img src="/assets/images/features/environments.gif" class="screenshot" alt="Multi-cluster Kubernetes Manager" loading="lazy" /> <span> <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns in-action)</p> --> </div> </div> </div> </div> </section> <section> <div class="container flex"> <div class="text "> <h2 class="feature-title"></h2> <p></p> </div> <div class="image flex"> <a style="width: auto;" href="" data-fancybox="images" data-caption=""> <img src="" style="max-width:100%" alt="" loading="lazy" class="screenshot"/> </a> </div> </div> </section> <script> window.onload = function() { document.querySelector('.tab button.active').click(); }; let timeOutId; function openTab(evt, relationshipType) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } evt.currentTarget.className += " active"; // document.getElementById(relationshipType).style.display = "block"; clearTimeout(timeOutId); displayRelationships(relationshipType) } function displayRelationships(relationships) { let index = 0; displayImages(); function displayImages() { let i; const images = document.getElementsByClassName(`${relationships}`); for (i = 0; i < images.length; i++) { images[i].style.display = "none"; } index++; if (index > images.length) { index = 1; } images[index-1].style.display = "block"; timeOutId = setTimeout(displayImages, 3000); } } </script> <style> h2.feature-title { text-align: left; } .tab { display: flex; flex-direction: row; align-self: center; justify-content: space-between; width: 70%; box-shadow: var(--box-shadow-primary) !important; border-radius: .5rem; padding: .5rem 1.5rem; & button { padding: .5em; color:var(--color-secondary-dark); &:hover{ background-color: #00d3a9; color: white !important; border-radius: .5rem; } } } .feature-section { max-height: 300px; } .tab-container { display: flex; flex-direction: column; align-items: center; justify-content: center; justify-items: center; flex-basis: 40%; height: 22rem; width: 100%; margin: auto 1rem auto auto; } #carousel { position: relative; width: 100%; height: 100%; } .tabcontent img { max-width: 100%; max-height: 100%; position: absolute; } .tabcontent img.active { display: block; } .tabcontent figcaption { display: none; } </style> </div> <div class="content"> <!-- Created By Section --> <div class="created-and-used-by-sections"> <section class="created-by-section"> <div class="created-by-container"> <h1 class="created-by">Created By</h1> <div class="company-image"> <a href="https://layer5.io/" target="_blank"> <img id="logo-dark-light" alt="Layer5 logo" src = "./assets/images/company-logo/layer5-no-trim.svg" data-logo-for-dark = "./assets/images/company-logo/layer5-dark-mode-logo.svg" data-logo-for-light = "./assets/images/company-logo/layer5-no-trim.svg" loading="lazy" style="filter: none;"/> </a> </div> </div> </section> <!-- Used by Section --> <section class="used-by-section"> <div class="used-by-container"> <h1 class="used-by">Used By</h1> <div class="companies-image"> <div class="company-image"> <img src="./assets/images/company-logo/hpe-logo-color-no-trim.svg" alt="Hewlett Packard logo" loading="lazy" id="logo-dark-light" data-logo-for-dark="./assets/images/company-logo/hpe-logo-dark.svg" data-logo-for-light="./assets/images/company-logo/hpe-logo-color-no-trim.svg" style="filter: none;" /> </div> <div class="company-image"> <img src="./assets/images/company-logo/intraserve.png" alt="Intraserve logo" loading="lazy" /> </div> <div class="company-image"> <img src="./assets/images/company-logo/solarwinds.svg" id="logo-dark-light" data-logo-for-dark="/assets/images/company-logo/solarwinds_white.svg" data-logo-for-light="./assets/images/company-logo/solarwinds.svg" style="filter: none;" alt="SolarWinds logo" loading="lazy" /> </div> <div class="company-image"> <img src="./assets/images/company-logo/book-my-show-logo.png" alt="BookMyShow logo" loading="lazy" /> </div> <div id="ericsson-logo" class="company-image"> <img src="./assets/images/company-logo/ericsson-logo.png" alt="Ericsson logo" loading="lazy" /> </div> <div id="metabob-logo" class="company-image"> <img src="./assets/images/company-logo/metabob-logo-1.png" alt="Metabob logo" loading="lazy" /> </div> <div id="asteria-logo" class="company-image"> <img src="./assets/images/company-logo/Asteria_Logo_horizontal_blue.svg" alt="asteria logo" loading="lazy" /> </div> <div id="Bootlabs-logo" class="company-image"> <img src="./assets/images/company-logo/bootlabs-logo-2.png" id="logo-dark-light" data-logo-for-dark="/assets/images/company-logo/bootlabs-white.svg" data-logo-for-light="./assets/images/company-logo/bootlabs-logo-2.png" style="filter: none;" alt="Bootlabs logo" loading="lazy" /> </div> <div id="Intel-logo" class="company-image"> <img src="./assets/images/company-logo/intel-logo.svg" data-logo-for-dark="/assets/images/company-logo/red-hat-dark-logo.png" alt="Intel logo" loading="lazy" style="height: 5.3vh; width:auto" /> </div> <div id="Bootlabs-logo" class="company-image"> <img src="./assets/images/company-logo/vmware-logo.svg" alt="VMWARE logo" loading="lazy" /> </div> <div id="Red-Hat-logo" class="company-image"> <img src="./assets/images/company-logo/red-hat-logo.svg" id="logo-dark-light" data-logo-for-dark="/assets/images/company-logo/red-hat-dark-logo.png" data-logo-for-light="./assets/images/company-logo/red-hat-logo.svg" style="filter: none;" alt="RedHat logo" loading="lazy" /> </div> <div id="Metabit-Trading-logo" class="company-image"> <img src="./assets/images/company-logo/metabit-trading-logo.png" alt="Metabit Trading logo" loading="lazy" /> </div> </div> </div> </section> </div> </div> <div class="content"> <!-- Adopter Section --> <section class="adopter-section"> <div class="adopter-container"> <h2 class="adopter-title">Add yourself as an <strong>adopter</strong></h2> <p class="adopter-description">and share your cloud native story with the community</p> <div class="button-para button-para--center"> <a href="https://github.com/meshery/meshery/blob/master/ADOPTERS.md" target="_blank" class="highlight" style="align-self: center"> Become an Adopter </a> </div> <br> </div> </section> </div> <section class="bg-white"> <div class="callout"> <a class="card" href="https://meshery.io/calendar" target="_blank"> <h3>Community Calendar</h3> <p class="small">Join the weekly meetings by subscribing to our community calendar</p> <div class="go-corner"></div> </a> <a class="card" href="https://www.youtube.com/@mesheryio?sub_confirmation=1" target="_blank"> <h3>Community Meetings</h3> <p class="small">Watch community meeting recordings on our YouTube channel</p> <div class="go-corner"></div> </a> <a class="card" href="/community#discussion-forums" target="_blank"> <h3>Join the Conversation</h3> <p class="small">Ask questions, find answers and share knowledge on our Discussion Forum</p> <div class="go-corner"></div> </a> <a class="card" href="https://docs.meshery.io/project/contributing" target="_blank"> <h3>Community Guide</h3> <p class="small">Read the Welcome Guide to familiarize yourself with the community</p> <div class="go-corner"></div> </a> </div> </section> <section id="getting-started" class="getting-started"> <div class="container" style="width: 100%; text-align: left; margin-top: 30px;"> <h1 class="getting-started-heading">Getting Started </h1> <h2 style>with Meshery</h2> </div> <div class="container"> <div class="text editable code"> <div class="post-content row" itemprop="articleBody"> <div style="display: inline-flex; line-height: 60px;"> <h1 class="step-number" style="margin-right: 0.5rem">01</h1> <h2 class="step-heading">Use Meshery Playground</h2> </div> <p class="grey-bg-text" style="font-size: 1.15rem;"> The fastest way to put your hands on Meshery is in its playground. No installation required. Just click and go! <div class="button-para"><a class="highlight" href="https://play.meshery.io">Use Meshery Playground</a></div> </p> <hr /> <h2 class="step-heading" style="color: #222;justify-content: center;">OR</h2> <hr /> <div style="display: inline-flex; line-height: 60px;"> <h1 class="step-number" style="margin-right: 0.5rem">01</h1> <h2 class="step-heading">Choose Your Platform and Install</h2> </div> <p class="grey-bg-text" style="font-size: 1.15rem;"> Choose a platform and see how easy it is to start managing cloud native infrastructure with a single command. </p> <div class="platformIcon"> <span class="tooltip" id="bash" style="margin: 0 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/bash.png" alt="Bash User" loading="lazy"> <span class="tooltiptext">Bash User</span> </span> <span class="tooltip" id="brew" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/homebrew.png" alt="Brew User" loading="lazy"> <span class="tooltiptext">Brew User</span> </span> <span class="tooltip" id="docker" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounceDocker" src="/assets/images/logos/docker.png" alt="Docker User" loading="lazy"> <span class="tooltiptext">Docker User</span> </span> <span class="tooltip" id="k8s-instructions" style="margin: 0 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/kubernetes.png" alt="Kubernetes User" loading="lazy"> <span class="tooltiptext">Kubernetes User</span> </span> <span class="tooltip" id="windows" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/windows_logo.png" alt="Windows User" loading="lazy"> <span class="tooltiptext">Windows User</span> </span> <span class="tooltip" id="google_kubernetes" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/google_kubernetes.png" alt="Google Kubernetes" loading="lazy"> <span class="tooltiptext">Google Kubernetes</span> </span> <span class="tooltip" id="aws_elastic" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/aws_elastic.jpeg" alt="AWS Elastic Kubernetes" loading="lazy"> <span class="tooltiptext">AWS Elastic Kubernetes</span> </span> <span class="tooltip" id="aks" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/aks.png" alt="AKS" loading="lazy"> <span class="tooltiptext">AKS</span> </span> <span class="tooltip" id="minikube" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/minikube.png" alt="Minikube" loading="lazy"> <span class="tooltiptext">Minikube</span> </span> <!-- <span class="tooltip" id="kind" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/kind.png" style="width: 90px;" alt="KinD" loading="lazy"> <span class="tooltiptext">KinD</span> --> </span> <span class="tooltip" id="helm" style="margin: 0px 20px 0px 0px; padding: 0.5rem;" onclick="displayCode(this.id)"> <img id="bounce" src="/assets/images/logos/helm.png" alt="Helm" loading="lazy"> <span class="tooltiptext">Helm</span> </span> </div> <!-- Docker --> <div id="bash_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Bash using Mac or Linux</h3> <p>Install on Kubernetes</p> <div id="start-k8s" class="highlight-code"> <code class="code-box"> $ curl -L https://meshery.io/install | PLATFORM=kubernetes bash - </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-k8s" data-clipboard-text="curl -L https://meshery.io/install | PLATFORM=kubernetes bash -" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> <p>Install on Docker</p> <div id="start-docker" class="highlight-code"> <code class="code-box"> $ curl -L https://meshery.io/install | PLATFORM=docker bash - </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-docker" data-clipboard-text="curl -L https://meshery.io/install | PLATFORM=docker bash -" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- Brew --> <div id="brew_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Brew User:</h3> <p>Install on Mac or Linux using Homebrew:</p> <div id="start-brew" class="highlight-code"> <code class="code-box"> $ brew install mesheryctl $ mesheryctl system start</code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-brew" data-clipboard-text="brew install mesheryctl mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- Docker User --> <div id="docker_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Docker User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <!-- Docker - mesheryctl --> <h4 style="font-size: 1.5em;">Use mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box">mesheryctl system context create docker --platform docker --set mesheryctl system start</code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system context create docker --platform docker --set mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> <!-- Docker extension for Meshery --> <h4 style="font-size: 1.5em;"> Use Docker Extension for Meshery</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box">docker extension install meshery/docker-extension-meshery:stable-latest</code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="docker extension install meshery/docker-extension-meshery:stable-latest" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- Kubernetes --> <div id="k8s-instructions_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Kubernetes User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <!-- Kubernetes - mesheryctl --> <h4 style="font-size: 1.5em;">Use mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box">mesheryctl system context create k8s --platform kubernetes --set mesheryctl system start</code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system context create k8s --platform kubernetes --set mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- Windows--> <div id="windows_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Windows User:</h3> <div> <h4 style="font-size: 1.5em;">Using Scoop</h4> <div id="start-windows" class="highlight-code"> <code class="code-box"> $ scoop bucket add mesheryctl https://github.com/meshery/scoop-bucket.git $ scoop install mesheryctl $ mesheryctl system start </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-windows" data-clipboard-text="scoop bucket add mesheryctl https://github.com/meshery/scoop-bucket.git scoop install mesheryctl mesheryctl system start " onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> <h4 style="font-size: 1.5em;">Using Binary</h4> <p style="font-size: 1em;">Not a Scoop user? Download and unzip the <a href="https://github.com/meshery/meshery/releases/latest">mesheryctl</a> binary directly from the Meshery releases page. Add mesheryctl to your path for ease of use. Then, execute: </p> <div id="start-windows" class="highlight-code"> <code class="code-box"> $ mesheryctl system start </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-windows" data-clipboard-text="mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- AKS --> <div id="aks_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Azure Kubernetes Service ( AKS ) User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <h4 style="font-size: 1.5em;">Use mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box"> mesheryctl system config aks mesheryctl system start </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system context create k8s -p kubernetes -s mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- Minikube --> <div id="minikube_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Minikube User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, or <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <h4 style="font-size: 1.5em;">Use mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box"> mesheryctl system config minikube </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system config minikube" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- KinD --> <!-- <div id="kind_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>KinD User:</h3> <h4 style="font-size: 1.5em;">Using Helm</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box">kubectl create ns meshery helm repo add meshery https://meshery.io/charts helm install meshery-operator meshery/meshery-operator -n meshery helm install meshery meshery/meshery -n meshery </code> <!-- copy to clipboard --> <!-- <a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3" data-clipboard-text="kubectl create ns meshery helm repo add meshery https://meshery.io/charts/ helm install meshery meshery/meshery -n meshery" onmouseout="resetCopyText(this)"> <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span> </a> </div> <p style="font-size: 1em;">Not a Helm user? Use the Meshery manifests directly.</p> <h4 style="font-size: 1.5em;">Using Manifests</h4> <div id="start-k8s-in-cluster" class="highlight-code"> <code class="code-box">$ git clone https://github.com/meshery/meshery.git; cd meshery $ kubectl create ns meshery $ kubectl -n meshery apply -f install/deployment_yamls/k8s</code> <!-- copy to clipboard --> <!-- <a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-k8s-in-cluster" data-clipboard-text="git clone https://github.com/meshery/meshery.git; cd meshery kubectl create ns meshery kubectl -n meshery apply -f install/deployment_yamls/k8s" onmouseout="resetCopyText(this)"> <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span> </a> </div> <p style="font-size: 1em;">Don't forget to grab a copy of mesheryctl. Install with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> </div> </div> --> <!-- Helm --> <div id="helm_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Using Helm</h3> <div id="start-helm-v3" class="highlight-code"> <code class="code-box">kubectl create ns meshery helm repo add meshery https://meshery.io/charts helm install meshery meshery/meshery -n meshery </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="kubectl create ns meshery helm repo add meshery https://meshery.io/charts/ helm install meshery meshery/meshery -n meshery" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> <p style="font-size: 1em;">Learn about <a href="/charts">Meshery's Helm charts</a>. Don't forget to grab a copy of mesheryctl. Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, or <a onclick="displayCode('windows');">Scoop</a>. </p> </div> </div> </div> <!-- Google Kubernetes Engine --> <div id="google_kubernetes_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>Google Kubernetes Engine User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, or <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <h4 style="font-size: 1.5em;">Using mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box"> mesheryctl system config gke --token *PATH_TO_TOKEN* </code> mesheryctl system start </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system config gke mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <!-- AWS Elastic Kubernetes Service --> <div id="aws_elastic_code" class="toggle hideDiv"> <div class="innerDiv"> <h3>AWS Elastic Kubernetes Service User:</h3> <h4 style="font-size: 1.5em;">Get mesheryctl</h4> <p style="font-size: 1em;margin-left:1rem;">Install mesheryctl with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, <a onclick="displayCode('windows');">Scoop</a>, or <a href="https://github.com/meshery/meshery/releases/latest">download directly</a>.</p> <h4 style="font-size: 1.5em;">Use mesheryctl</h4> <div id="start-helm-v3" class="highlight-code"> <code class="code-box"> mesheryctl system config eks mesheryctl system start </code> <!-- copy to clipboard --> <a class="btn tooltip" data-clipboard-target="#start-helm-v3" data-clipboard-text="mesheryctl system config eks mesheryctl system start" onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;" > <i class="far fa-copy"></i> <span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;"> Copy to clipboard </span> </a> </div> </div> </div> <hr /> <hr /> <div class="login" style="display: inline-flex; line-height: 60px; "> <h1 class="step-number" style="margin-right: 0.5rem">02</h1> <h2 class="step-heading">Manage your Cloud Native Infra</h2> </div> <p id="breakWords" class="grey-bg-text" style="margin-left: 0px; font-size: 1.15em;">There is no step 2. Login and manage cloud native infrastructure! For more detailed instructions, visit <a href="https://docs.meshery.io/installation">Meshery Docs</a>. </p> </p> </div> </div> </div> </section> <div class="testimonials-wrapper"> <h2>Hear what other users have to say...</h2> <div class="slider"> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-three-quote"> <div class="type-three-quote-qmark">❞</div> <div class="type-three-quote-base"> <blockquote class="type-three-quote-text">Kanvas is what the next-generation Operations tooling will look like.</blockquote> <div class="type-three-quote-meta"> <div class="type-three-quote-userpic"><img src="/assets/images/photos/louie-corbo.jpeg" alt="testimonial image"></div> <div class="type-three-quote-meta-info"> <div class="type-three-quote-author"><cite>Louie Corbo</cite></div> <div class="type-three-quote-source"><span>Staff Cloud Infratructure Engineer at SADA</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-one-quote"> <div class="type-one-quote-userpic"><img src="/assets/images/Maximiliano-Churichi.webp" alt="testimonial image"></div> <div class="type-one-quote-qmark">❝</div> <div class="type-one-quote-pattern"></div> <div class="type-one-quote-base"> <blockquote class="type-one-quote-text">The Meshery Extension transforms Docker Desktop into a powerful load generation utility, conveniently enabling me to deploy and configure any cloud native application with a click of the button and invoke and control load-based performance tests from my desktop.</blockquote> <div class="type-one-quote-meta"> <div class="type-one-meta-info"> <div class="type-one-author"><cite>Maximiliano Churichi</cite></div> <div class="type-one-source"><span>Software Engineer at HPE</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-two-quote"> <div class="type-two-quote-pattern"> <div class="type-two-quote-qmark">❝</div> </div> <div class="type-two-quote-userpic"><img src="/assets/images/otto-van-der-schaaf.webp" alt="testimonial image"></div> <div class="type-two-quote-base"> <blockquote class="type-two-quote-text">The precision by which performance measurements are generated and analyzed is a pinnacle focus of Nighthawk. Mesh performance characterization should be distilled from a set of value measurements, and that is where MeshMark compliments to create the ultimate comprehensive efficiency calculation.</blockquote> <div class="type-two-quote-meta"> <div class="type-two-quote-meta-info"> <div class="type-two-quote-author"><cite>Otto Van Der Schaaf</cite></div> <div class="type-two-quote-source"><span>Principal Engineer at Red Hat</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-two-quote"> <div class="type-two-quote-pattern"> <div class="type-two-quote-qmark">❝</div> </div> <div class="type-two-quote-userpic"><img src="/assets/images/nic-jackson.webp" alt="testimonial image"></div> <div class="type-two-quote-base"> <blockquote class="type-two-quote-text">Meshery is the perfect tool for ensuring that your cloud native applications are optimally configured and performing well; it also gives you a fantastic visual insight into what can be a large amount of textual configuration.</blockquote> <div class="type-two-quote-meta"> <div class="type-two-quote-meta-info"> <div class="type-two-quote-author"><cite>Nic Jackson</cite></div> <div class="type-two-quote-source"><span>Principal Developer Advocate at HashiCorp</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-three-quote"> <div class="type-three-quote-qmark">❞</div> <div class="type-three-quote-base"> <blockquote class="type-three-quote-text">While speed is one of Linkerd's core competitive advantages, Linkerd provides much more than just an ultrafast data plane. We are pleased to support MeshMark's establishment of a higher order set of functional considerations that incorporate value into the performance equation.</blockquote> <div class="type-three-quote-meta"> <div class="type-three-quote-userpic"><img src="/assets/images/william-morgan.webp" alt="testimonial image"></div> <div class="type-three-quote-meta-info"> <div class="type-three-quote-author"><cite>William Morgan</cite></div> <div class="type-three-quote-source"><span>CEO of Buoyant and one of the creators of Linkerd</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-two-quote"> <div class="type-two-quote-pattern"> <div class="type-two-quote-qmark">❝</div> </div> <div class="type-two-quote-userpic"><img src="/assets/images/ken-owens.webp" alt="testimonial image"></div> <div class="type-two-quote-base"> <blockquote class="type-two-quote-text">Performance measurement data rarely provides a clear and simple picture of how well our applications are performing from a business point of view, which are so often the key efficiency indicators that we really need.</blockquote> <div class="type-two-quote-meta"> <div class="type-two-quote-meta-info"> <div class="type-two-quote-author"><cite>Ken Owens</cite></div> <div class="type-two-quote-source"><span>Vice President Cyber Cloud Security Engineering at Fiserv</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-one-quote"> <div class="type-one-quote-userpic"><img src="/assets/images/liz-rice.webp" alt="testimonial image"></div> <div class="type-one-quote-qmark">❝</div> <div class="type-one-quote-pattern"></div> <div class="type-one-quote-base"> <blockquote class="type-one-quote-text">Many cloud native adopters have been put off from using service mesh due to the extra resource consumption and complexity that it can involve. We welcome MeshMark as an objective measure of that overhead, to help drive efficiency and make it easier for users to compare service mesh options.</blockquote> <div class="type-one-quote-meta"> <div class="type-one-meta-info"> <div class="type-one-author"><cite>Liz Rice</cite></div> <div class="type-one-source"><span>Chief Open Source Officer, Isovalent and Emeritus Chair of the CNCFs TOC</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-three-quote"> <div class="type-three-quote-qmark">❞</div> <div class="type-three-quote-base"> <blockquote class="type-three-quote-text">The fact that Kanvas automatically renders our Kubernetes configuration is a game-changer for our team.</blockquote> <div class="type-three-quote-meta"> <div class="type-three-quote-userpic"><img src="/assets/images/kaur-kallas.webp" alt="testimonial image"></div> <div class="type-three-quote-meta-info"> <div class="type-three-quote-author"><cite>Kaur Kallas</cite></div> <div class="type-three-quote-source"><span>Software Architect at Entigo</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-one-quote"> <div class="type-one-quote-userpic"><img src="/assets/images/deepak-dinesh.webp" alt="testimonial image"></div> <div class="type-one-quote-qmark">❝</div> <div class="type-one-quote-pattern"></div> <div class="type-one-quote-base"> <blockquote class="type-one-quote-text">It was an intuitive experience to visually place and configure various components saving the time of going through 10 different YAML files.</blockquote> <div class="type-one-quote-meta"> <div class="type-one-meta-info"> <div class="type-one-author"><cite>Deepak Dinesh</cite></div> <div class="type-one-source"><span>Kanvas User</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-one-quote"> <div class="type-one-quote-userpic"><img src="/assets/images/mrittika-ganguli.webp" alt="testimonial image"></div> <div class="type-one-quote-qmark">❝</div> <div class="type-one-quote-pattern"></div> <div class="type-one-quote-base"> <blockquote class="type-one-quote-text">Are my resources utilized as best as possible? Why am I not getting the SLO met with 4 resources when I only needed 1 resource without the service mesh? How can I improve my 99.9% latencies or can I map my service policy to utilization? MeshMark will model and provide an index in answer to such questions.</blockquote> <div class="type-one-quote-meta"> <div class="type-one-meta-info"> <div class="type-one-author"><cite>Mrittika Ganguli</cite></div> <div class="type-one-source"><span>Principal Engineer & Director Cloud Native Network Pathfinding</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-two-quote"> <div class="type-two-quote-pattern"> <div class="type-two-quote-qmark">❝</div> </div> <div class="type-two-quote-userpic"><img src="/assets/images/Maximiliano-Churichi.webp" alt="testimonial image"></div> <div class="type-two-quote-base"> <blockquote class="type-two-quote-text">With a goal to bring workload identity and attestation to all cloud-native infrastructure, HPE Security Engineering uses the Meshery Docker Extension to deploy their preferred cloud-native infrastructure and test the performance of our SPIFFE and SPIRE-based identity solution.</blockquote> <div class="type-two-quote-meta"> <div class="type-two-quote-meta-info"> <div class="type-two-quote-author"><cite>Maximiliano Churichi</cite></div> <div class="type-two-quote-source"><span>Software Engineer at HPE</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-three-quote"> <div class="type-three-quote-qmark">❞</div> <div class="type-three-quote-base"> <blockquote class="type-three-quote-text">The Meshery Docker Extension offers an easy button to go from Docker Compose to Kubernetes to managing cloud-native applications.</blockquote> <div class="type-three-quote-meta"> <div class="type-three-quote-userpic"><img src="/assets/images/nic-jackson.webp" alt="testimonial image"></div> <div class="type-three-quote-meta-info"> <div class="type-three-quote-author"><cite>Nic Jackson</cite></div> <div class="type-three-quote-source"><span>Principal Developer Advocate at HashiCorp</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-one-quote"> <div class="type-one-quote-userpic"><img src="/assets/images/hein.webp" alt="testimonial image"></div> <div class="type-one-quote-qmark">❝</div> <div class="type-one-quote-pattern"></div> <div class="type-one-quote-base"> <blockquote class="type-one-quote-text">Meshery is an innovative tool for managing our multi-cluster and multi-cloud workloads.</blockquote> <div class="type-one-quote-meta"> <div class="type-one-meta-info"> <div class="type-one-author"><cite>Hein Htet Win</cite></div> <div class="type-one-source"><span>SS&C Technologies</span></div> </div> </div> </div> </div> </div> </div> <div class="bq-section"> <div class="type-one-wrapper type-one-wrapper-boxed"> <div class="bq-quote type-two-quote"> <div class="type-two-quote-pattern"> <div class="type-two-quote-qmark">❝</div> </div> <div class="type-two-quote-userpic"><img src="/assets/images/anusha.webp" alt="testimonial image"></div> <div class="type-two-quote-base"> <blockquote class="type-two-quote-text">Meshery has so many really amazing features all of which make DevOps and SRE life easy.</blockquote> <div class="type-two-quote-meta"> <div class="type-two-quote-meta-info"> <div class="type-two-quote-author"><cite>Anusha Sridharan</cite></div> <div class="type-two-quote-source"><span>Lead Software Engineer at Fidelity Investments</span></div> </div> </div> </div> </div> </div> </div> </div> </div> <section class="bg-white"> <div class="container cncf-section"> <h4>MESHERY IS A CLOUD NATIVE COMPUTING FOUNDATION PROJECT</h4> <img src="./assets/images/cncf-horizontal-color.svg" id="logo-dark-light" data-logo-for-dark="./assets/images/cncf-light-logo.svg" data-logo-for-light="./assets/images/cncf-horizontal-color.svg" class="cncf-img" alt="Cloud Native Computing Foundation Logo" loading="lazy" /> <p> <span class="project-caption"> Created by <a href="https://layer5.io/" target="_blank"> <img id="layer5-logo" src="/assets/images/company-logo/layer5-no-trim.svg" alt="Layer5 Logo" /> </a> and its open source community. </span> </p> </div> </section> <section class="reversehero"> <div> <div class="homepage-join"> <div class="form-container" style=""> <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" /> <p class="newsletter-heading"style="">Community Newsletter</p> <div id="mc_embed_signup"> <form action="https://layer5.us15.list-manage.com/subscribe/post?u=6b50be5aea3dfe1fd4c041d80&id=f7bd70043b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" onsubmit="document.getElementById(mc-embedded-subscribe-form).submit();" > <div id="mc_embed_signup_scroll"> <div class="subscribe-inputbox"> <input type="text" value="" placeholder="First Name" name="FNAME" class="NAME" id="mce-FNAME" required /> <input type="text" value="" placeholder="Last Name" name="LNAME" class="NAME" id="mce-LNAME" required /> </div> <div id="mce-responses" class="clear subscribe-inputbox"> <div class="response" id="mce-error-response" style="display: none" ></div> <div class="response" id="mce-success-response" style="display: none" ></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div class="email-div"> <input type="email" value="" name="EMAIL" class="EMAIL" placeholder="Email Address" required /> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="display: none"> <input type="text" name="b_6b50be5aea3dfe1fd4c041d80_6bb65defeb" tabindex="-1" value="" /> </div> <button class="subscribe-button" id="mc-embedded-subscribe" > Subscribe </button> </div> </form> </div> <!--End mc_embed_signup--> </div> </div> <div class="mailinglist"> <h3 class="mail-heading">Project Mailing lists</h3> <p class="mail-subheading">Engage in the Meshery project. Join any of our mailing lists.</p> <div class="mail-container"> <div class="mail-row"> <p class="button-alt"><a href="https://groups.google.com/a/meshery.io/g/developers" class="button-dev">Developers</a></p> <p class="button-alt"><a href="https://groups.google.com/a/meshery.io/g/users" class="button-user">Users</a></p> </div> <div class="mail-row"> <p class="button-alt"><a href="mailto:maintainers@meshery.io" class="button-maintain">Maintainer</a> </p> <p class="button-alt"><a href="mailto:community@meshery.io" class="button-comm">Community</a></p> </div> </div> </div> </section> </div> <footer> <div class="container"> <div class="footer-columns"> <ul class="footer-links"> <li> <h2><a target="_blank" href="/community/ " class="community-icon" > Community</a></h2> </li> <li><a href="/blog " class="blog-icon" > <svg fill="#000000" height="100" viewBox="0 0 32 32" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M 9 3 L 9 14 L 9.15625 14.25 L 10.40625 16.3125 L 10.375 16.3125 L 12 19 L 13.625 16.3125 L 13.59375 16.3125 L 14.84375 14.25 L 15 14 L 15 8 L 24 8 C 24.550781 8 25 8.449219 25 9 L 25 19 L 12 19 L 13.96875 22.28125 L 13.71875 22.46875 L 11 24.71875 L 11 22 L 8 22 C 7.449219 22 7 21.550781 7 21 L 7 9 C 7 8.449219 7.449219 8 8 8 L 8 6 C 6.34375 6 5 7.34375 5 9 L 5 21 C 5 22.65625 6.34375 24 8 24 L 9 24 L 9 29 L 15 24 L 24 24 C 25.65625 24 27 22.65625 27 21 L 27 9 C 27 7.34375 25.65625 6 24 6 L 15 6 L 15 3 Z M 11 5 L 13 5 L 13 11.28125 L 12.3125 11.0625 L 12 10.9375 L 11.6875 11.0625 L 11 11.28125 Z M 12 13.03125 L 13 13.375 L 13 13.46875 L 12 15.125 L 11 13.46875 L 11 13.375 Z"></path></svg> Blog</a></li> <li><a href="/subscribe " class="mail-icon" > <svg fill="#000000" height="18" viewBox="0 0 128 128" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M123.25 24.192c0-.018 0-.034-.005-.052s-.007-.063-.009-.094a1.734 1.734 0 0 0-.083-.408c-.006-.018 0-.037-.011-.055s-.01-.015-.013-.023a1.734 1.734 0 0 0-.227-.407c-.021-.028-.043-.053-.066-.08a1.755 1.755 0 0 0-.31-.294c-.012-.009-.022-.02-.034-.028a1.744 1.744 0 0 0-.414-.2c-.034-.012-.068-.022-.1-.032a1.733 1.733 0 0 0-.474-.073H6.5a1.733 1.733 0 0 0-.474.073c-.035.01-.068.02-.1.032a1.744 1.744 0 0 0-.414.2c-.012.008-.022.019-.034.028a1.755 1.755 0 0 0-.31.294c-.022.027-.045.052-.066.08a1.734 1.734 0 0 0-.227.407c0 .008-.01.015-.013.023s-.005.037-.011.055a1.734 1.734 0 0 0-.083.408c0 .032-.009.063-.009.094s-.005.034-.005.052v79.615c0 .023.006.045.007.068a1.737 1.737 0 0 0 .019.188c.008.051.015.1.027.152a1.74 1.74 0 0 0 .056.179c.017.047.033.094.054.139a1.729 1.729 0 0 0 .093.172c.024.04.048.081.075.119a1.743 1.743 0 0 0 .125.152c.033.036.066.072.1.106.021.019.037.042.059.061s.036.017.052.03a1.736 1.736 0 0 0 .452.263c.035.014.071.022.107.033a1.732 1.732 0 0 0 .488.085c.012 0 .023.006.035.006H121.501c.012 0 .023-.006.034-.006a1.732 1.732 0 0 0 .489-.085c.035-.011.07-.019.1-.033a1.736 1.736 0 0 0 .453-.263c.016-.013.036-.017.052-.03s.038-.042.059-.061c.036-.034.069-.069.1-.106a1.743 1.743 0 0 0 .125-.152c.027-.038.051-.078.075-.119a1.729 1.729 0 0 0 .093-.172c.021-.045.037-.092.054-.139a1.74 1.74 0 0 0 .056-.179c.012-.05.019-.1.027-.152a1.737 1.737 0 0 0 .019-.188c0-.023.007-.045.007-.068zM45.8 60.316l17.058 14.677a1.751 1.751 0 0 0 2.283 0L82.2 60.316l35.512 41.741H10.289zM8.25 99.052V28.007l34.9 30.026zm76.6-41.019 34.9-30.026v71.045zm31.931-32.091L81.276 56.493c-.006.005-.014.008-.02.014l-.019.02L64 71.358 46.763 56.527l-.019-.02-.02-.014-35.507-30.551z"/></svg> Mailing Lists</a></li> <li><a href="/calendar " class="calendar-icon" > <svg fill="#000000" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" /></svg> Calendar</a></li> <li><a target="_blank" href="/programs " class="internship-icon" > <svg fill="#000000" height="18" viewBox="0 0 122.88 86.11" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M5.3,11.83H29.2V3.75A3.76,3.76,0,0,1,32.94,0H60.31a3.78,3.78,0,0,1,3.75,3.75v8.08H88a5.34,5.34,0,0,1,5.3,5.3v2.48A119.42,119.42,0,0,1,74.37,30.33,104,104,0,0,1,54.49,37V31.68a4,4,0,0,0-4.06-4.06H42.82a4.06,4.06,0,0,0-4.06,4.06v5.15a104.53,104.53,0,0,1-19.37-6.5A119.54,119.54,0,0,1,0,19.26V17.13a5.32,5.32,0,0,1,5.3-5.3Zm108.15,67-.28-10.13L96.52,73.49a21,21,0,0,1-9,0L71.58,68.63V78.9c.46,5.34,15.77,7,20.47,7.2,3.77.18,18.65-1.78,20.6-4.85a5.63,5.63,0,0,0,.8-2.44Zm6.75-17.43V73.76h.39a.49.49,0,0,1,.48.49v3.33a.49.49,0,0,1-.48.48h-.39v1.17a1.08,1.08,0,0,1,.87,1.06h0A1.08,1.08,0,0,1,120,81.36h-1.93A1.08,1.08,0,0,1,117,80.29h0a1.08,1.08,0,0,1,.88-1.06V78.06h-.39a.49.49,0,0,1-.49-.48V74.25a.49.49,0,0,1,.49-.49h.39V62.1L97.61,68.41a22.79,22.79,0,0,1-11,0L64.23,61.73l-2-.6c-2.52-1-1.89-3.45.46-4L88,49.57a12.92,12.92,0,0,1,7.83,0L120.64,57c2.69.66,3.23,3.16.09,4.19l-.53.16ZM50.07,32.06H43.18a.38.38,0,0,0-.39.39V47a.44.44,0,0,0,.11.28.38.38,0,0,0,.28.11h6.89a.44.44,0,0,0,.28-.11.36.36,0,0,0,.12-.28V32.45a.39.39,0,0,0-.4-.39ZM57.46,5.12H35.81a.47.47,0,0,0-.47.46v6.1H57.92V5.58a.47.47,0,0,0-.47-.46Zm35.8,22.69V43.64c-.48,0-1,0-1.43,0a20.1,20.1,0,0,0-5.34.79L61.24,51.93a8.33,8.33,0,0,0-4.33,2.68v0a7.15,7.15,0,0,0-1.66,3.82,6.8,6.8,0,0,0,1,4.41,7.83,7.83,0,0,0,3.3,2.94,5.33,5.33,0,0,0,1.12.48L66.26,68l0,.68h0v3.6H5.3A5.31,5.31,0,0,1,0,66.94V27.49A123.26,123.26,0,0,0,15.79,36a112.17,112.17,0,0,0,22.82,7.44l.15,0v4.25a4.06,4.06,0,0,0,4.06,4.07h7.61a4,4,0,0,0,4.06-4.07v-4.2l.66-.08A112.08,112.08,0,0,0,78,36a123.46,123.46,0,0,0,15.3-8.21Z"/></svg> Internships</a></li> <li><a target="_blank" href="/community#discussion-forums " class="forum-icon" > <svg fill="#000000" height="18" viewBox="0 0 32 32" weight="18" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="6.5" r="2.5"/><circle cx="10" cy="6.5" r="2.5"/><path d="M8,11h5.3a3.724,3.724,0,0,0-6.67.137A6.97,6.97,0,0,1,8,11Z"/><circle cx="22" cy="21.5" r="2.5"/><circle cx="10" cy="21.5" r="2.5"/><path d="M24,11a6.97,6.97,0,0,1,1.372.137A3.724,3.724,0,0,0,18.7,11Z"/><path d="M17.78,23a4.27,4.27,0,0,1-.28-1.5,4.5,4.5,0,0,1,9,0,4.2,4.2,0,0,1-.1.86A4.984,4.984,0,0,0,24,13H8a4.984,4.984,0,0,0-2.4,9.36,4.2,4.2,0,0,1-.1-.86,4.5,4.5,0,0,1,9,0,4.27,4.27,0,0,1-.28,1.5Z"/><path d="M25.75,27.75h0A3.75,3.75,0,0,0,22,24h0a3.75,3.75,0,0,0-3.75,3.75h0A1.25,1.25,0,0,0,19.5,29h5A1.25,1.25,0,0,0,25.75,27.75Z"/><path d="M6.25,27.75h0A3.75,3.75,0,0,1,10,24h0a3.75,3.75,0,0,1,3.75,3.75h0A1.25,1.25,0,0,1,12.5,29h-5A1.25,1.25,0,0,1,6.25,27.75Z"/></svg> Discussion Forums</a></li> </ul> <ul class="footer-links"> <li> <h2><a href=" " > Getting Started</a></h2> </li> <li><a href="/features " > Features</a></li> <li><a href="/#getting-started " > Run Meshery</a></li> <li><a target="_blank" href="/integrations " > Integrations</a></li> <li><a href="https://play.meshery.io " > Cloud Native Playground</a></li> </ul> <ul class="footer-links"> <li> <h2><a href=" " > Resources</a></h2> </li> <li><a target="_blank" href="https://docs.meshery.io " > Docs</a></li> <li><a href="/catalog " > Meshery Catalog</a></li> <li><a target="_blank" href="https://docs.meshery.io/guides/tutorials " > Tutorials</a></li> <li><a target="_blank" href="https://smp-spec.io " > Cloud Native Performance</a></li> </ul> <ul class="footer-links"> <li> <h2><a href=" " > Socials</a></h2> </li> <li><a target="_blank" href="https://twitter.com/mesheryio/ " class="twitter-icon" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1450.56 1100.19" style="enable-background:new 0 0 1668.56 1221.19" xml:space="preserve"><path d="m336.33 142.251 386.39 516.64-388.83 420.05h87.51l340.42-367.76 275.05 367.76h297.8l-408.13-545.7 361.92-390.99h-87.51l-313.51 338.7-253.31-338.7h-297.8zm128.69 64.46h136.81l604.13 807.76h-136.81l-604.13-807.76z"/></svg> Twitter</a></li> <li><a target="_blank" href="https://www.youtube.com/channel/UCgXlqWDCg-9RP1eckf0s6KA?sub_confirmation=1 " class="youtube-icon" > <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /></svg> YouTube</a></li> <li><a target="_blank" href="https://hub.docker.com/u/meshery/ " class="dockerhub-icon" > <svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="comp_x5F_97-docker"><g><rect height="43.193" width="47.506" x="229.999" y="147.225"/><rect height="42.69" width="47.506" x="229.999" y="199.115"/><rect height="43.193" width="47.506" x="173.869" y="147.225"/><rect height="42.691" width="47.507" x="286.2" y="199.043"/><rect height="43.625" width="47.506" x="229.999" y="94.975"/><rect height="43.193" width="47.505" x="117.738" y="147.225"/><rect height="42.691" width="47.506" x="173.869" y="199.043"/><path d="M476.441,219.095c-10.35-6.972-34.21-9.487-52.537-6.036c-2.371-17.249-12.003-32.27-29.538-45.782l-10.062-6.685 l-6.685,10.062c-13.225,19.98-16.817,52.896-2.658,74.602c-6.252,3.377-18.545,7.978-34.786,7.689H27.757 c-6.252,36.511,4.169,83.945,31.624,116.501c26.663,31.551,66.623,47.579,118.872,47.579c113.124,0,196.851-52.104,236.021-146.76 c15.381,0.288,48.584,0.073,65.618-32.483c1.078-1.797,4.743-9.488,6.107-12.291L476.441,219.095z"/><polygon points="109.186,199.043 109.113,199.043 61.68,199.043 61.68,241.734 109.186,241.734 "/><rect height="42.691" width="47.505" x="117.738" y="199.043"/></g></g><g id="Layer_1"/></svg> Docker Hub</a></li> <li><a target="_blank" href="https://slack.meshery.io/ " class="slack-icon" > <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m8.843 12.651c-1.392 0-2.521 1.129-2.521 2.521v6.306c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.306c-.001-1.392-1.13-2.521-2.521-2.521z" fill="grey" class="first"/><path d="m.019 15.172c0 1.393 1.13 2.523 2.523 2.523s2.523-1.13 2.523-2.523v-2.523h-2.521c-.001 0-.001 0-.002 0-1.393 0-2.523 1.13-2.523 2.523z" fill="grey" class = "second"/><path d="m8.846-.001c-.001 0-.002 0-.003 0-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h2.521v-2.523c0-.001 0-.003 0-.005-.001-1.391-1.128-2.518-2.518-2.518z" fill="grey" class="third"/><path d="m2.525 11.37h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523z" fill="grey" class="fourth" /><path d="m21.457 6.323c-1.391 0-2.518 1.127-2.518 2.518v.005 2.523h2.521c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523c-.001 0-.002 0-.003 0z" fill="grey" class="fifth"/><path d="m12.641 2.522v6.325c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.325c0-1.392-1.129-2.521-2.521-2.521-1.392 0-2.521 1.129-2.521 2.521z" fill="grey" class="sixth"/><g fill="grey"><path d="m17.682 21.476c0-1.392-1.129-2.521-2.521-2.521h-2.521v2.523c.001 1.391 1.129 2.519 2.521 2.519s2.521-1.129 2.521-2.521z" fill = "grey" class="seventh" /><path d="m21.479 12.649h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523z" fill="grey" class="eigth"/></g></svg> Slack</a></li> <li><a target="_blank" href="https://github.com/meshery/meshery/ " class="github-icon" > <?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg> GitHub</a></li> <li><a target="_blank" href="https://www.linkedin.com/showcase/meshery " class="linkedin-icon" > <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19,19H16V13.7A1.5,1.5 0 0,0 14.5,12.2A1.5,1.5 0 0,0 13,13.7V19H10V10H13V11.2C13.5,10.36 14.59,9.8 15.5,9.8A3.5,3.5 0 0,1 19,13.3M6.5,8.31C5.5,8.31 4.69,7.5 4.69,6.5A1.81,1.81 0 0,1 6.5,4.69C7.5,4.69 8.31,5.5 8.31,6.5A1.81,1.81 0 0,1 6.5,8.31M8,19H5V10H8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg> LinkedIn</a></li> </ul> <!-- <ul class="feed"> <a class="twitter-timeline" data-width="320" data-height="320" data-theme="light" data-link-color="#62ACCD" href="https://twitter.com/mesheryio" data-chrome="nofooter circularborders noscrollbar">Tweets by Meshery</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </ul> --> </div> <div class="container flex copyright"> <div class="text">© 2025 The Meshery Authors</div> <div class="text">Confidently wrangling cloud native infrastructure</div> <div class="text"><a href="https://github.com/meshery/meshery/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a></div> <div class="text"><a href ="https://www.linuxfoundation.org/legal/trademark-usage">The Linux Foundation. Meshery has registered trademarks and uses trademarks</a></div> </div> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="/js/stellarnav.min.js"></script> <script src="/js/main.js"></script> <!-- Site Navigation Menu --> <script type="text/javascript"> jQuery(document).ready(function ($) { jQuery('.stellarnav').stellarNav({ breakpoint: 1140 }); jQuery('.stellarnav.mobile').css('text-align', 'end'); }); </script> <!--Script for Copy to Clipboard--> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script src="/js/vanilla-tilt.min.js"></script> <script> function resetCopyText(element) { let childElements = element.childNodes if (childElements.length > 3) { childElements[3].innerHTML = "Copy to clipboard"; } else { childElements[1].innerHTML = "Copy URL"; childElements[1].style.color = 'white'; childElements[1].style.background = "#00b39fff"; } } var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); let childElements = e.trigger.childNodes; if (childElements.length > 3) { childElements[3].innerHTML = "Copied!"; } else { childElements[1].innerHTML = "Copied"; childElements[1].style.color = 'white'; childElements[1].style.background = "#1a2421"; } e.clearSelection(); }); clipboard.on('error', function (e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script> <script> function displayCode(id) { var divId = id + "_code"; var element = document.getElementById(divId); element.classList.toggle("showDiv"); var toggleDivs = document.getElementsByClassName("toggle"); if (element.style.maxHeight) { element.style.maxHeight = null; } else { element.style.maxHeight = element.scrollHeight + "px"; console.log(element.style.maxHeight); } for (let i = 0; i < toggleDivs.length; i++) { if (toggleDivs[i] != element) { toggleDivs[i].classList.remove("showDiv"); if (toggleDivs[i].style.maxHeight) { toggleDivs[i].style.maxHeight = null; } } } } </script> <script type="text/javascript"> let toggleBtn = document.getElementById("mode-toggle-btn") // console.log(document.body.classList); // console.log(localStorage.getItem("mode")); toggleBtn.onclick = setMode; if (localStorage.getItem("mode") === null) { localStorage.setItem("mode", "dark-mode"); } const isDark = document.body.classList.contains("dark-mode"); const currentMode = localStorage.getItem("mode"); if (isDark ^ (currentMode === "dark-mode")) { setMode(); } function setMode() { document.body.classList.toggle("dark-mode") let layer5Logos = document.querySelectorAll("#layer5-logo"); let allLogos = document.querySelectorAll("#logo-dark-light"); if (document.body.classList.contains("dark-mode")) { layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-dark-mode-logo.svg') allLogos.forEach(e => e.src = e.dataset.logoForDark) } else { layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-no-trim.svg') allLogos.forEach(e => e.src = e.dataset.logoForLight) } if (document.body.classList.contains("dark-mode")) { localStorage.setItem("mode", "dark-mode") } else { localStorage.setItem("mode", "light-mode") } document.dispatchEvent(new CustomEvent("themeChange",{ detail : {value : localStorage.getItem("mode")}, bubbles: true , })) } </script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script> $(document).ready(function () { $('.slider').slick({ dots: false, arrows: false, infinite: true, speed: 400, slidesToShow: 3, slidesToScroll: 1, autoplay: true, // true autoplaySpeed: 1500, responsive: [ { breakpoint: 1300, settings: { slidesToShow: 2.5, } }, { breakpoint: 1200, settings: { slidesToShow: 2, } }, { breakpoint: 1024, settings: { slidesToShow: 2, } }, { breakpoint: 800, settings: { slidesToShow: 1.5, slidesToScroll: 1, } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, autoplaySpeed: 2000, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 400, settings: { slidesToShow: 1, adaptiveWidth: true, slidesToScroll: 1 } }, { breakpoint: 380, settings: { slidesToShow: 1, slidesToScroll: 1, adaptiveWidth: true, } }, { breakpoint: 360, settings: { slidesToShow: 1, slidesToScroll: 1, adaptiveWidth: true, } } ] }); }); </script> </body> </html>