CINXE.COM

<!DOCTYPE html><html class=" is-full has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="JavaScript at Microsoft" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://developer.microsoft.com/en-us/javascript/" /><meta property="og:description" content="Everything from Microsoft for JavaScript developers. Beginning resources, application development, and in production. Tools and learning content for JavaScript developers." /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="sinedied" /> <meta name="depot_name" content="devMSFT.dev" /> <meta name="description" content="Everything from Microsoft for JavaScript developers. Beginning resources, application development, and in production. Tools and learning content for JavaScript developers." /> <meta name="document_id" content="0c50bb1c-ba6b-7899-def7-c0bb9fa4e4ae" /> <meta name="document_version_independent_id" content="0c50bb1c-ba6b-7899-def7-c0bb9fa4e4ae" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="89b2166ea4570c001a7da3612fca0b79ecf6d004" /> <meta name="gitcommit" content="https://github.com/MicrosoftDocs/devmsft/blob/89b2166ea4570c001a7da3612fca0b79ecf6d004/dev/javascript/index.yml" /> <meta name="locale" content="en-us" /> <meta name="ms.author" content="yolasors" /> <meta name="ms.contributors" content="aapowell-09102021" /> <meta name="ms.custom" content="team=cloud_advocates" /> <meta name="ms.date" content="22/05/2023" /> <meta name="ms.service" content="azure" /> <meta name="ms.topic" content="hub-page" /> <meta name="original_content_git_url" content="https://github.com/MicrosoftDocs/devmsft/blob/live/dev/javascript/index.yml" /> <meta name="page_type" content="marketing" /> <meta name="schema" content="Marketing" /> <meta name="services" content="azure" /> <meta name="site_name" content="dev.microsoft.com" /> <meta name="uhfHeaderId" content="DEV_Homeheader" /> <meta name="updated_at" content="2025-01-30 05:06 PM" /> <meta name="persistent_id" content="da7fd3e8-c950-581b-1052-cd663a2559f5" /> <meta name="github_feedback_content_git_url" content="https://github.com/MicrosoftDocs/devmsft/blob/live/dev/javascript/index.yml" /><link href="https://developer.microsoft.com/en-us/javascript/" rel="canonical"><title>JavaScript at Microsoft | Microsoft Developer</title><link rel="stylesheet" href="/static/assets/0.4.029596269/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: false, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'developer', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Marketing', brand: 'developer', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: false,isEditDisplayable: false, hideViewSource: false, hasPageActions: false, hasPrintButton: false, hasBookmark: false, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: false,contributors: [{ name: "juliamuiruri4", url: "https://github.com/juliamuiruri4" },{ name: "mairaw", url: "https://github.com/mairaw" },{ name: "anfibiacreativa", url: "https://github.com/anfibiacreativa" },{ name: "BenDMyers", url: "https://github.com/BenDMyers" },{ name: "jdanyow", url: "https://github.com/jdanyow" }],}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.029596269/global/deprecation.js"></script><script src="/static/assets/0.4.029596269/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="display-none" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container is-full has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile is-gapless"> <section class="primary-holder column ">  <div class="columns is-gapless-mobile has-large-gaps is-gapless"><div id="main-column" class="column "> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"><div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class=""><div id="Marketing" class="has-overflow-hidden"> <div id="hero-section-0" class="hero is-small background-color-white-static color-black-static "> <div class="hero-background "> <img src="media/js-banner-green.png" aria-hidden="true" data-linktype="relative-path"> </div> <div class="hero-body"> <div class="is-reading-width has-backdrop-filter-blur"> <p class="supertitle is-spaced font-size-sm letter-spacing-wide is-uppercase">Developer hub</p> <h1 id="microsoft-for-javascript-developers" class="title is-size-jumbo-responsive">Microsoft for JavaScript developers</h1> <p class="font-size-md margin-top-lg is-reading-width">Everything from Microsoft for JavaScript developers</p> </div> </div> </div> <div id="cards-section-1" class="padding-block-lg"> <div class="uhf-container"> <h2 id="whats-new" class="title is-2 is-responsive">What's new ✨</h2> <ul class="grid "> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/typescript.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Announcing TypeScript 5.7</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> We are excited to announce the availability of TypeScript 5.7! </p> <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/" data-linktype="external">Read more ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/deno.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Deno, the next-generation JavaScript runtime</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Deno features improved security, performance, and developer experience compared to its predecessors. </p> <a href="https://deno.com/" data-linktype="external">Read more ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/angular.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Meet Angular v19</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> In the past two years we doubled down on our investment in developer experience and performance. </p> <a href="https://blog.angular.dev/meet-angular-v19-7b29dfd05b84" data-linktype="external">Read more ›</a> </div> </div> </article> </li> </ul> </div> </div> <div id="cards-section-2" class="padding-block-lg"> <div class="uhf-container"> <ul class="grid "> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/gen-ai-with-js.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Generative AI with JavaScript Series</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Discover the power of Generative AI with JavaScript in our new video series! Learn how to seamlessly integrate AI into your web, mobile, or desktop applications. </p> <a href="https://www.youtube.com/playlist?list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk" data-linktype="external">Read more ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/nextjs-swa-support.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Next.js support on Azure Static Web Apps</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Static Web Apps supports deploying hybrid Next.js websites. </p> <a href="https://learn.microsoft.com/azure/static-web-apps/nextjs" data-linktype="external">Read more ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/azd.png" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Kickstart projects with azd templates</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> The Azure Developer CLI (azd) is an open-source, developer-centric command-line (CLI) tool to help you accelerate the provisioning and deployment of applications to Azure. </p> <a href="https://aka.ms/projects-with-azd/blog" data-linktype="external">Read more ›</a> </div> </div> </article> </li> </ul> </div> </div> <div id="cards-section-3" class="padding-block-lg"> <div class="uhf-container"> <h2 id="what-do-you-want-to-learn" class="title is-2 is-responsive">What do you want to learn? 📚</h2> <ul class="grid "> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/beginner.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">BEGINNER RESOURCES</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Get started and learn the fundamentals of developing JavaScript applications. </p> <a href="https://learn.microsoft.com/training/modules/typescript-get-started/" data-linktype="external">Get started with TypeScript</a> <a href="https://microsoft.github.io/Web-Dev-For-Beginners/#/" data-linktype="external">Web Development for Beginners Curriculum</a> <a href="https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming" data-linktype="external">Mastering GitHub Copilot for Paired Programming</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/app-dev.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">APPLICATION DEVELOPMENT</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Design and build applications at global scale. </p> <a href="https://learn.microsoft.com/azure/developer/javascript/" data-linktype="external">Azure for JavaScript Developers</a> <a href="https://learn.microsoft.com/training/paths/build-javascript-applications-nodejs/" data-linktype="external">Build JavaScript applications with Node.js</a> <a href="https://learn.microsoft.com/azure/developer/javascript/azure-sdk-library-package-index?WT.mc_id=javascript-29163-cxa" data-linktype="external">Azure SDKs for JavaScript</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/in-production.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">IN PRODUCTION</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Test. Manage. Monitor. </p> <a href="https://learn.microsoft.com/shows/getting-started-with-end-to-end-testing-with-playwright/introduction-to-playwright-for-end-to-end-testing" data-linktype="external">Introduction to Playwright for end-to-end testing</a> <a href="https://learn.microsoft.com/azure/developer/javascript/sdk/test-sdk-integration" data-linktype="external">Testing Azure SDK integration in JavaScript applications</a> <a href="https://learn.microsoft.com/azure/azure-monitor/app/nodejs" data-linktype="external">Monitor your Node.js services and apps with Application Insights</a> </div> </div> </article> </li> </ul> </div> </div> <div id="cards-section-4" class="padding-block-lg"> <div class="uhf-container"> <h2 id="build-ai-apps" class="title is-2 is-responsive">Build AI apps 🤖</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/gen-ai-with-js.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Generative AI with JavaScript</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> We cover the basics of generative AI and how to build AI applications using JavaScript, from local development to deployment on Azure, up to running and scaling your AI models. </p> <a href="https://github.com/microsoft/generative-ai-with-javascript" data-linktype="external">View course ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/ai-app-templates.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Featured AI app templates</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Get started with AI application templates. Edit and deploy to Azure using VS Code or GitHub Codespaces. </p> <a href="https://azure.github.io/ai-app-templates/?tags=javascript&tags=typescript" data-linktype="external">View templates ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/develop-ai.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Develop AI apps with JavaScript</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> This article contains an organized list of the best learning resources for JavaScript developers who are getting started building AI apps. </p> <a href="https://learn.microsoft.com/azure/developer/javascript/ai/azure-ai-for-javascript-developers" data-linktype="external">See resources ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/js-azure.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Searching Enterprise data with Azure OpenAI & Azure Search in JavaScript</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> This sample demonstrates how to build ChatGPT-like experiences over your own data using the Retrieval Augmented Generation pattern. </p> <a href="https://youtu.be/uckVTuS36H0?si=y95ooDMYalFzmCoI" data-linktype="external">Watch now ›</a> </div> </div> </article> </li> </ul> </div> </div> <div id="grid-section-5" class="padding-block-md"> <div class="uhf-container"> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/training/modules/use-own-data-azure-openai/" class="card-title stretched-link" data-linktype="external">Implement Retrieval Augmented Generation (RAG) with Azure OpenAI Service</a> <p class="card-content-description margin-top-xxs"> Azure OpenAI on your data allows developers to implement RAG with supported AI chat models to reference specific sources of data to ground the response. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/azure/developer/javascript/ai/get-started-app-chat-evaluations?tabs=github-codespaces" class="card-title stretched-link" data-linktype="external">Evaluating answers in a chat app in JavaScript</a> <p class="card-content-description margin-top-xxs"> This article shows you how to evaluate a chat app's answers against a set of correct or ideal answers (known as ground truth). </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/azure/developer/javascript/ai/get-started-app-chat-assistants-function-calling?tabs=github-codespaces" class="card-title stretched-link" data-linktype="external">Azure OpenAI with Assistants and function calling in JavaScript</a> <p class="card-content-description margin-top-xxs"> Create AI assistants tailored to your needs through custom instructions with advanced tools like code interpreter and custom functions </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/azure/developer/javascript/ai/get-started-app-chat-scaling-with-azure-api-management?tabs=github-codespaces%2Cinitial-deployment" class="card-title stretched-link" data-linktype="external">Scale Azure OpenAI for JavaScript with Azure API Management</a> <p class="card-content-description margin-top-xxs"> Learn how to add enterprise-grade load balancing to your application to extend the chat app beyond the Azure OpenAI token and model quota limits. </p> </div> </article> </li> </ul> </div> </div> <div id="grid-section-6" class="padding-block-md"> <div class="uhf-container"> <h2 id="ai-frameworks-and-libraries" class="title is-2 is-responsive">AI frameworks and libraries</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://www.npmjs.com/package/openai" class="card-title stretched-link" data-linktype="external">OpenAI TS/JS API Library</a> <p class="card-content-description margin-top-xxs"> This library provides convenient access to the OpenAI REST API from TypeScript or JavaScript. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/samples/azure-samples/serverless-chat-langchainjs/serverless-chat-langchainjs/" class="card-title stretched-link" data-linktype="external">LangChain.js</a> <p class="card-content-description margin-top-xxs"> Serverless AI Chat with RAG using LangChain.js </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/samples/azure-samples/llama-index-javascript/llama-index-javascript/" class="card-title stretched-link" data-linktype="external">LlamaIndex</a> <p class="card-content-description margin-top-xxs"> ChatGPT + Enterprise Data with Azure OpenAI and LlamaIndex. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://github.com/Azure-Samples/ollama-javascript-playground" class="card-title stretched-link" data-linktype="external">Ollama JavaScript Playground</a> <p class="card-content-description margin-top-xxs"> Try out generative AI models right in your browser for free using this playground! </p> </div> </article> </li> </ul> </div> </div> <div id="bifold-section-7"> <div class="uhf-container padding-block-lg"> <div class="columns is-gapless-mobile has-large-gaps"> <div class="column is-half display-flex"> <div class="is-full-width display-flex flex-direction-column flex-grow-1 justify-content-center padding-block-xs"> <figure class="image "> <img src="media/security.jpg" alt="Security on Azure" data-linktype="relative-path"> </figure> </div> </div> <div class="column is-half display-flex"> <div class="is-full-width display-flex flex-direction-column flex-grow-1 justify-content-center padding-block-xs"> <h2 id="enforce-security-best-practices-for-your-apps" class="title is-2 is-responsive">Enforce security best practices for your apps</h2> <p class="font-size-lg"></p> <div class="margin-top-xs"> <div class="buttons margin-top-xxs"> <a href="https://learn.microsoft.com/samples/azure-samples/azure-openai-keyless-js/azure-openai-keyless-js/" class="button" data-linktype="external">Azure OpenAI keyless deployment sample</a> <a href="https://learn.microsoft.com/azure/developer/javascript/sdk/authentication/overview" class="button" data-linktype="external">Authentication with Azure Identity library</a> </div> </div> </div> </div> </div> </div> </div> <div id="grid-section-8" class="padding-block-md"> <div class="uhf-container"> <h2 id="tools-for-javascript-developers" class="title is-2 is-responsive">Tools for JavaScript developers ⚙️</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/vscode.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://code.visualstudio.com/" class="card-title stretched-link" data-linktype="external">Visual Studio Code</a> <p class="card-content-description margin-top-xxs"> The most popular code editor for JavaScript developers </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/typescript.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://www.typescriptlang.org/" class="card-title stretched-link" data-linktype="external">TypeScript</a> <p class="card-content-description margin-top-xxs"> Typesafe JavaScript </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/playwright.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://playwright.dev/docs/intro" class="card-title stretched-link" data-linktype="external">Playwright</a> <p class="card-content-description margin-top-xxs"> Automated E2E testing across Chromium, Firefox and WebKit with a single API </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/gh-copilot.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://github.com/features/copilot" class="card-title stretched-link" data-linktype="external">GitHub Copilot</a> <p class="card-content-description margin-top-xxs"> Your AI Pair-programmer </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/gh-codespaces.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://github.com/features/codespaces" class="card-title stretched-link" data-linktype="external">GitHub Codespaces</a> <p class="card-content-description margin-top-xxs"> Develop from anywhere, anytime </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/azure-icon.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://learn.microsoft.com/azure/developer/github-copilot-azure/" class="card-title stretched-link" data-linktype="external">GitHub Copilot for Azure</a> <p class="card-content-description margin-top-xxs"> Use natural language to learn & deploy to Azure, diagnose & troubleshoot problems </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/typespec.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://typespec.io/" class="card-title stretched-link" data-linktype="external">TypeSpec</a> <p class="card-content-description margin-top-xxs"> Describe your data to generate API specs, schemas, code, and more </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/swagger.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://swagger.io/" class="card-title stretched-link" data-linktype="external">Swagger</a> <p class="card-content-description margin-top-xxs"> Design, explore, and document your APIs at scale </p> </div> </div> </div> </article> </li> </ul> </div> </div> <div id="hero-section-9" class="hero is-small has-linear-gradient-background-javascript has-text-javascript-invert uhf-container padding-inline-none margin-block-md border-radius-lg has-overflow-hidden"> <div class="hero-background "> <img src="media/hub-banner-blue.jpg" aria-hidden="true" data-linktype="relative-path"> </div> <div class="hero-body padding-inline-md padding-inline-lg-tablet"> <div class="is-reading-width has-backdrop-filter-blur"> <p class="supertitle is-spaced font-size-sm letter-spacing-wide is-uppercase">More development resources</p> <h2 id="azure-for-javascript-developers" class="title is-2 is-responsive">Azure for JavaScript developers</h2> <p class="font-size-md margin-top-lg is-reading-width">Explore the power of JavaScript on Azure through Quickstarts, How-To Guides, codes samples and more.</p> <div class="buttons margin-top-md"> <a href="https://learn.microsoft.com/azure/developer/javascript/?WT.mc_id=javascript-29163-cxa" class="button button-clear border" data-linktype="external">Explore</a> </div> </div> </div> </div> </div> </div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <div class="border-top is-visible-interactive has-default-focus margin-top-sm margin-top-none"><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkID=206977" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer></div></div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm margin-top-none"><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkID=206977" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>