{"id":24097,"date":"2025-04-23T11:28:48","date_gmt":"2025-04-23T18:28:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=24097"},"modified":"2025-04-23T11:28:48","modified_gmt":"2025-04-23T18:28:48","slug":"announcing-sharepoint-framework-1-21-with-updates-on-building-enterprise-extensibility-within-microsoft-365","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-sharepoint-framework-1-21-with-updates-on-building-enterprise-extensibility-within-microsoft-365\/","title":{"rendered":"Announcing SharePoint Framework 1.21 with updates on building enterprise extensibility within Microsoft 365"},"content":{"rendered":"<p>We are excited to announce general availability of the\u00a0<strong>SharePoint Framework (SPFx) 1.21 \u2013 with focus on technical dependency updates<\/strong>. <a href=\"https:\/\/aka.ms\/spfx\">SharePoint Framework<\/a> is the easiest way to build your enterprise solutions for Microsoft 365 with automatic single sign-on, automatic hosting and with industry standard web stack tooling. This release focused primarily on the updating Node.js and TypeScript versions &#8211; including few other new features across SharePoint and Microsoft Viva.<\/p>\n<p><strong>Your input and feedback have been invaluable<\/strong>\u00a0to define the key features for our releases, both current and future.\u00a0<strong>Thank you \ud83d\udc4f<\/strong><\/p>\n<p>You can find the full list of release details from the following documentation:<\/p>\n<ul>\n<li class=\"\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/release-1.21\" target=\"_blank\" rel=\"noopener\">SharePoint Framework 1.21 release notes<\/a><\/li>\n<\/ul>\n<h2 id=\"whats-updated-on-this-latest-beta-version\">Key features in the 1.21 release \ud83d\udcdd<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<p>Key changes and updates in this release are as follows:<\/p>\n<ul>\n<li>Introduction of flexible layout configuration options for web parts.\n<ul>\n<li>Configuration options in the web part manifest file to set the default experience for custom web parts used in flexible layout.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/flex-layout.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-23875\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/flex-layout.png\" alt=\"Image flex layout\" width=\"799\" height=\"450\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/flex-layout.png 799w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/flex-layout-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/flex-layout-768x433.png 768w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Configuration option to enable user specific personalization for the Viva Connections dashboard on card level.\n<ul>\n<li>Viva Connections will start allowing end users to optionally configure and add new cards on the company provided dashboard. Card can be configured to be supported this option with the card manifest configuration.<\/li>\n<li>See more details and live demo on this feature from following blog post &#8211; <a href=\"https:\/\/techcommunity.microsoft.com\/blog\/viva_connections_blog\/introducing-card-personalization-for-end-users-in-viva-connections\/4403586\">Introducing card personalization for end users in Viva Connections<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/card-personalization.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-23876\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/card-personalization.png\" alt=\"Image card personalization\" width=\"801\" height=\"500\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/card-personalization.png 801w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/card-personalization-300x187.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/03\/card-personalization-768x479.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>and more \ud83d\ude80<\/p>\n<p>You can see a live demo of the above mentioned features from the recording of the weekly Microsoft 365 &amp; Power Platform community call on 25th of February. <a href=\"https:\/\/youtu.be\/UE1rkXIHl4U?t=2984\">Specific SPFx 1.21 demo starts at 49:45<\/a>.<\/p>\n<p><iframe title=\"Microsoft 365 &amp; Power Platform weekly call \u2013 25th of February, 2025\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/UE1rkXIHl4U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Everyone is welcome to these weekly calls to stay up to date on the Microsoft 365 &amp; Power Platform topics, get your invite from <a href=\"https:\/\/aka.ms\/community\/calls\">https:\/\/aka.ms\/community\/calls<\/a>.<\/p>\n<h2 id=\"installing-sharepoint-framework-1-13-preview\">Installing SharePoint Framework 1.21\u00a0 \ud83d\udc69\u200d\ud83d\udcbb<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<p>You can install\u00a0<strong>SharePoint Framework 1.21 <\/strong>by using the following command which will install always the latest generally available version.<\/p>\n<pre tabindex=\"0\"><span class=\"pl-c1\">npm install @microsoft\/generator-sharepoint@latest --global\r\n\r\n<\/span><\/pre>\n<h2 id=\"whats-sharepoint-framework\">What\u2019s SharePoint Framework? \ud83d\ude80<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<p>SharePoint Framework is the most widely used extensibility option in <span class=\"brand\">Microsoft 365<\/span>\u00a0with\u00a0<strong>tens of millions of end users each month for the custom components built by developers for Microsoft Teams, Microsoft Viva and SharePoint<\/strong>. It\u2019s the easiest way to build developer extensibility for <span class=\"brand\">Microsoft 365<\/span>\u00a0and it\u2019s taken advantage by thousands of partners and customers on building custom experiences for end users.<\/p>\n<p>You can build SharePoint Framework powered solutions by using\u00a0<a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/set-up-your-development-environment\">SharePoint Framework Yeoman Generator<\/a>, <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Microsoft Teams Toolkit<\/a>,\u00a0or with the <a href=\"https:\/\/github.com\/pnp\/vscode-viva\">SharePoint Framework Toolkit<\/a>. Key advantage is the flexibility of automatic hosting with the option to use the exact same component across the different hosts without any code level changes. This is designed to maximize the value of your development investments regardless of which primary host you are targeting.<\/p>\n<p class=\"\">Key capabilities of the SharePoint Framework for\u00a0<span class=\"brand\">Microsoft 365<\/span> are the following:<\/p>\n<ul>\n<li><b>Content Driven Applications <\/b>\u2013 SharePoint Framework can be used to build content driven applications on surfacing information easily from Microsoft 365 with Microsoft Graph or to integrate with externally hosted content.<\/li>\n<li><strong>Automatic Single Sign On<\/strong>\u00a0\u2013 SharePoint Framework components have automatic and seamless SSO included for all platforms they are hosted. No specific consents needed from Microsoft 365 end users.<\/li>\n<li><strong>Automatic hosting<\/strong>\u00a0\u2013 SharePoint Framework components are automatically hosted in SharePoint without additional maintenance or operational costs.<\/li>\n<li><strong>Industry standard tooling<\/strong> \u2013 SharePoint Framework is using standard web stack tooling with node, npm, TypeScript and any JavaScript framework of your preference. Just standard web skill to succeed without any proprietary tooling.<\/li>\n<\/ul>\n<p>SharePoint Framework has also made the permission and token management for accessing the data in\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0easy. You will be using the awesome\u00a0<strong>Microsoft Graph APIs<\/strong>\u00a0for accessing business data and you can further simplify the development of SharePoint Framework components by taking advantage of the\u00a0<strong>Microsoft Graph Toolkit<\/strong>, which provides reusable controls with data connectivity to Microsoft Graph.<\/p>\n<p>We are also working on numerous interesting Copilot and AI related features with the SharePoint Framework. Already today, <a href=\"https:\/\/techcommunity.microsoft.com\/blog\/spblog\/interact-with-viva-connections-cards-directly-from-any-sharepoint-agent\/4406968\">SharePoint Framework created cards can be accessed directly in the SharePoint agent<\/a> with the help of Copilot and Viva Connections. Much more in the roadmap for the future.<\/p>\n<pre tabindex=\"0\"><span class=\"pl-c1\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-22927\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included.png\" alt=\"Image spfx architecture copilot included\" width=\"1200\" height=\"676\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included.png 1200w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included-1024x577.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/09\/spfx-architecture-copilot-included-768x433.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>\r\n\r\n<\/span><\/pre>\n<h2 id=\"additional-resources-and-support\">Additional resources and support \ud83e\udd1d<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Please report any issues or feedback using following issue list \u2013 <a href=\"https:\/\/aka.ms\/spfx-issues\">https:\/\/aka.ms\/spfx\/issues<\/a>\n<ul>\n<li>We have engineering people monitoring any incoming issues and helping you to get unblocked or getting your questions answered<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/sharepoint-framework-overview?WT.mc_id=m365-47395-cxa\">Overview documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/web-parts\/get-started\/build-a-hello-world-web-part?WT.mc_id=m365-47395-cxa\">Getting started documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/build-for-teams-overview?WT.mc_id=m365-47395-cxa\">Build for Microsoft Teams using SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/overview-viva-connections?WT.mc_id=m365-47395-cxa\">Overview of Viva Connections Extensibility<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/m365\/dev\/learn\/connections\">Microsoft Learn &#8211; Extend Microsoft Viva Connections<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/learn\/paths\/m365-sharepoint-associate\/?WT.mc_id=m365-47395-cxa\">Microsoft Learn &#8211; Extend Microsoft SharePoint &#8211; Associate<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=m365pnp.viva-connections-toolkit\">Microsoft Viva Connections Toolkit &#8211; Simplify your development experience for Viva Connections<\/a><\/li>\n<li><a href=\"https:\/\/techcommunity.microsoft.com\/blog\/spblog\/interact-with-viva-connections-cards-directly-from-any-sharepoint-agent\/4406968\">Interact with Viva Connections cards directly from any SharePoint agent<\/a><\/li>\n<li><a href=\"https:\/\/pnp.github.io\/cli-microsoft365\/cmd\/spfx\/project\/project-upgrade\/\" target=\"_blank\" rel=\"noopener\">CLI for Microsoft 365<\/a>\u00a0\u2013 SharePoint Framework Upgrade tooling from previous versions to latest<\/li>\n<li><a href=\"https:\/\/aka.ms\/spfx-webparts\" target=\"_blank\" rel=\"noopener\">SharePoint Framework web part samples<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/viva\/samples\">Viva Connections samples<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>If you are looking to build experiences for <span class=\"brand\">Microsoft 365<\/span>, we strongly recommend joining our community calls and other <a href=\"https:\/\/aka.ms\/community\/home\"><span class=\"brand\">Microsoft 365<\/span> &amp; Power Platform Community<\/a> activities covering Microsoft Graph, Microsoft Teams, Power Platform, Microsoft Viva, OneDrive, SharePoint and more&#8230; More details here <a href=\"https:\/\/aka.ms\/community\/home\">https:\/\/aka.ms\/community\/home<\/a> \ud83d\ude80<\/p>\n<p>And, follow us on <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">Twitter<\/a> or in LinkedIn to stay up to date on Microsoft 365 Platform announcements.<\/p>\n<p class=\"\">Happy coding! Sharing is caring!\u00a0<a class=\"lightbox-link\" href=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" target=\"_blank\" rel=\"noopener\" aria-label=\"Lightbox image, click or press enter to enlarge\" data-featherlight=\"image\"><img decoding=\"async\" class=\"emoji\" role=\"img\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" alt=\"\ud83e\udde1\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to announce general availability for the SharePoint Framework 1.21. This time focus is primarily on technical platform updates and new UX options in SharePoint and in Viva Connections.<\/p>\n","protected":false},"author":69217,"featured_media":24098,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,128,142,166,9],"tags":[307,306,225,223,116,162,19,221,123],"class_list":["post-24097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","category-microsoft-teams","category-microsoft-viva","category-sharepoint","category-sharepoint-framework","tag-corporate-communications","tag-employee-experiences","tag-microsoft-365","tag-microsoft-teams","tag-microsoft-viva","tag-sharepoint","tag-sharepoint-framework","tag-spfx","tag-viva-connections"],"acf":[],"blog_post_summary":"<p>We are excited to announce general availability for the SharePoint Framework 1.21. This time focus is primarily on technical platform updates and new UX options in SharePoint and in Viva Connections.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/24097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69217"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=24097"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/24097\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/24098"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=24097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=24097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=24097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}