{"id":34337,"date":"2024-09-06T01:51:44","date_gmt":"2024-09-06T08:51:44","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=34337"},"modified":"2024-09-06T01:52:21","modified_gmt":"2024-09-06T08:52:21","slug":"what-is-npm","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/","title":{"rendered":"What is npm?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/iWwKf8wJcOPi4jHSZKFmjlS-1DGBiQybfHBp_YMIziHRUwPCHyErUAzDRgE_tCC0UJ4EmGp58Gzi-2sbpNdGg_3QvYb0orSpV6sctob-2E-0V3dSKJmgvlRD3GO476nqp2nNINQk\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>npm is a package manager for JavaScript that helps developers install, share, and manage libraries or pieces of code that are commonly used in applications. These packages can range from small utility functions to full-fledged UI components like buttons, form elements, or even complex layouts.<\/p>\n\n\n\n<p>npm is also a key enabler of the design-development collaboration that UXPin Merge facilitates. By packaging React components through npm, developers can hand off real, functioning UI components to designers, who can then integrate them into their designs effortlessly. This results in a more consistent and efficient workflow, ensuring that your design system and the final product are perfectly aligned.. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-npm-node-package-manager\">What is NPM (Node Package Manager)?<\/h2>\n\n\n\n<p><strong>npm<\/strong> or <strong>N<\/strong>ode <strong>P<\/strong>ackage <strong>M<\/strong>anager is an open-source repository of tools engineers use to develop applications and websites.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png\" alt=\"logo uxpin merge npm packages\" class=\"wp-image-35050\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>npm is two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A repository for publishing open-source projects.<br>Simplified version: <strong>a digital storage and retrieval facility<\/strong>.<\/li>\n\n\n\n<li>A command-line interface (CLI) for interacting with the repository.<br>Simplified version: <strong>a tool to communicate with the storage facility<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-a-package-manager\">What is a Package Manager?<\/h3>\n\n\n\n<p>Before we can explain what npm package is, it&#8217;s essential to understand the idea of a <em>package manager<\/em>. Think of a package manager as a toolkit for developers.<\/p>\n\n\n\n<p>Let&#8217;s say you&#8217;re building an application that uses Stripe for payments. A package manager installs all the code your product will need to communicate with Stripe and process payments.<\/p>\n\n\n\n<p>Instead of writing all that code or copy\/pasting it from Stripe&#8217;s docs, engineers simply enter a command, and the package manager installs the code dependencies they need from Stripe.<\/p>\n\n\n\n<p>There are millions of these packages for everything you can think of to develop an application\u2013like different types of search functionality, APIs, payments, authentication tools, maps, icons, hosting, and more.<\/p>\n\n\n\n<p>You get public open-source repositories (like npm) where anyone can upload and install packages, as well as private package repositories with restricted access.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-a-command-line-interface\">What is a Command Line Interface?<\/h3>\n\n\n\n<p>A <a href=\"https:\/\/en.wikipedia.org\/wiki\/Command-line_interface\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">command-line interface<\/a> (CLI) is a text interface developers use to interact with computer programs. This CLI allows you to execute commands to run background operations necessary for software development.<\/p>\n\n\n\n<p>In the case of npm, the CLI allows you to interact with the package registry. For example, engineers can use commands like <strong><em>npm install<\/em><\/strong> followed by the package name to install a specific package.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-npm-registry\">The npm Registry<\/h2>\n\n\n\n<p>The npm website is where engineers can search and learn about packages. This website is just a registry and doesn&#8217;t host the packages. Instead, engineers use platforms like <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GitHub<\/a>, <a href=\"https:\/\/packagecloud.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Packagecloud<\/a>, <a href=\"https:\/\/aws.amazon.com\/codeartifact\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">AWS CodeArtifact<\/a>, and others to host and distribute packages.<\/p>\n\n\n\n<p>For example, if we look at the <a href=\"https:\/\/www.npmjs.com\/package\/@uxpin\/merge-cli\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">UXPin Merge CLI on NPM<\/a>, it has displays GitHub as the repository and <a href=\"https:\/\/github.com\/UXPin\/uxpin-merge-tools\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">relevant link<\/a>. Above that is the command to install the UXPin Merge CLI and its dependencies: <strong><em>npm i @uxpin\/merge-cli<\/em><\/strong>. The &#8220;i&#8221; after npm is an abbreviation for &#8220;install.&#8221; So, typing <strong><em>npm install @uxpin\/merge-cli<\/em><\/strong> would render the same result.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/sU2RuNaW29Z8O0I9RE1znosPnD-XuMxJQZD_JiSyZtX7XCNz42miYhPUlgDM2GXktCthpfmigz1p-nkCqrcuO54jvPMviic9JFLIM-S_H4xp3UTqcOtfA4Ld8bMoaMI6nyu-TQFm\" alt=\"\" style=\"width:650px;height:undefinedpx\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-dependencies\">What are Dependencies?<\/h2>\n\n\n\n<p>Packages consist of other packages that engineers call dependencies\u2013we know, confusing, right! These dependencies are packages of code that perform different tasks within the project.<\/p>\n\n\n\n<p>For example, the UXPin Merge CLI uses Typescript and therefore requires the <a href=\"https:\/\/www.npmjs.com\/package\/typescript\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">typescript package<\/a> as a dependency. Typescript is just one of the 41 dependencies UXPin Merge CLI requires.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-are-devdependencies\">What are Devdependencies?<\/h3>\n\n\n\n<p>Looking at the UXPin Merge CLI&#8217;s dependencies, you&#8217;ll notice 41 <em>Dependencies<\/em> and 41 <em>Dev Dependencies<\/em> (also referred to as devDependencies\u2013one word).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dependencies: The packages required to run a piece of software<\/li>\n\n\n\n<li>Dev Dependencies: The packages needed during the development phase only<\/li>\n<\/ul>\n\n\n\n<p>Dependencies and devDependencies reside in a separate folder called node_modules, so your packages.json file and project code know where to find them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-package-json-file\">What is the <em>package.json<\/em> File?<\/h2>\n\n\n\n<p>There&#8217;s a <strong><em>package.json<\/em><\/strong> file that provides its metadata and dependencies. When installing the project on your computer, npm will reference the package.json file to install the dependencies and devDependencies.<\/p>\n\n\n\n<p>Instead of installing each dependency individually, you simply type <strong><em>npm install<\/em><\/strong> in the command line.<\/p>\n\n\n\n<p>Hosting providers also use the package.json file to install the dependencies (excluding devDependencies) needed to run the project on its servers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-package-lock-json\">What is package-lock.json?<\/h3>\n\n\n\n<p>The package-lock.json specifies the exact version of the package used to build the project. This file locks the dependencies so that when the project is installed, it references the versions used during development rather than the latest release.<\/p>\n\n\n\n<p>Engineers update packages regularly, often changing the way the package works. So, locking your dependencies ensures the project operates as intended.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-npm\">How to use npm<\/h2>\n\n\n\n<p>Here are some common npm commands and what they do:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>npm init:<\/strong> Creates a package.json file for your project. If you&#8217;re building an application from scratch, npm init will be one of the first commands you use to include key project information. NPM will automatically update your package.json file whenever you install or remove packages.<\/li>\n\n\n\n<li><strong>npm install:<\/strong> Installs all of the project dependencies in a package.json file.<\/li>\n\n\n\n<li><strong>npm install &lt;package-name&gt;:<\/strong> Installs a specific package from the NPM registry and saves it to your node_modules folder. For example, <strong><em>npm install @uxpin\/merge-cli<\/em><\/strong> will install the Merge CLI.<\/li>\n\n\n\n<li><strong>npm install &lt;package-name&gt; &#8211;save:<\/strong> Installs an NPM package and adds it to the dependencies in your package.json file.<\/li>\n\n\n\n<li><strong>npm install &lt;package-name&gt; &#8211;save-dev:<\/strong> installs an NPM package and adds it to the devDependencies&nbsp;<\/li>\n\n\n\n<li><strong>npm uninstall &lt;package-name&gt;:<\/strong> Uninstalls a specific package from your project.<\/li>\n\n\n\n<li><strong>npm doctor:<\/strong> Runs diagnostics on your npm installation to check if it has everything it needs to manage your packages.<\/li>\n\n\n\n<li><strong>npm update &lt;package-name&gt;:<\/strong> Updates a specific package to the latest version.<\/li>\n<\/ul>\n\n\n\n<p>These are just a few of the most common npm commands. You can find the complete list in the<a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/commands\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> npm documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-understanding-npm-as-a-designer\">Understanding npm as a Designer<\/h2>\n\n\n\n<p>npm is simply a toolkit comparable to plugins or app extensions for design tools. You don&#8217;t need to know the ins-and-outs of how packages are created, but it may be useful to know a thing or two about it.<\/p>\n\n\n\n<p>First of all, some of code component libraries are shared as npm packages, such as MUI, Ant Design, etc. <\/p>\n\n\n\n<p>How to find component libraries that are distributed as npm packages? Let&#8217;s say you search through <a href=\"https:\/\/adele.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adele<\/a>, UXPin&#8217;s library of publicly available Design Systems, for a component library that you can bring in to UXPin. You pick Shopify&#8217;s Polaris and notice that it is distributed via npm.<\/p>\n\n\n\n<p>So, you go to the NPM site, look for Shopify&#8217;s Polaris, and find it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"347\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-1024x347.png\" alt=\"Zrzut ekranu 2022 03 11 o 15.47.16\" class=\"wp-image-34340\" style=\"width:650px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-1024x347.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-700x237.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-768x260.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-1536x521.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/Zrzut-ekranu-2022-03-11-o-15.47.16-2048x694.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>UXPin with Merge technology allows you to import UI elements from component libraries via NPM packages. Then, you can use those elements to put together fully-functional prototypes.<\/p>\n\n\n\n<p>UXPin Merge is usually being set up by a developer. But if you lack the development support, you can use our new tool&nbsp;\u2013 Merge Component Manager and manage UI components by yourself.<\/p>\n\n\n\n<p>However, if you want to enhance your programming knowledge to collaborate with devs better, then <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/should-designers-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">learning about basic code principles<\/a> (HTML, CSS, Javascript) and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component libraries<\/a> is far more valuable for designers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Can You Do with npm Integration?<\/h2>\n\n\n\n<p>Even though npm is typically a tool developers use, it plays a crucial role in enabling powerful design workflows\u2014like bringing React components into UXPin for seamless drag-and-drop UI building.<\/p>\n\n\n\n<p>Here\u2019s why npm is important for technical designers working with tools like UXPin Merge:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Access to React Components<\/strong>: If your design system is built using React, npm allows you to package these components and make them accessible for use in other applications or tools\u2014like UXPin Merge. React components that are available as npm packages can be directly imported into UXPin, giving designers the ability to drag and drop real code components into their designs without writing code.<\/li>\n\n\n\n<li><strong>Easily Manage Updates<\/strong>: npm simplifies version control. When a developer updates a package (such as a new version of a button component), npm can automatically manage this update in UXPin Merge, ensuring that designers always work with the latest components from the development team. This ensures consistency between design and development without the need for manual updates.<\/li>\n\n\n\n<li><strong>Collaborate Seamlessly with Developers<\/strong>: npm helps technical designers and developers work from the same source of truth. Developers use npm to publish the components they create, while designers can easily import those components into UXPin using Merge. This ensures that the components designers use for prototyping are exactly the same as the ones developers will implement in the final product.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-improve-collaboration-with-uxpin-merge\">Improve Collaboration With UXPin Merge<\/h2>\n\n\n\n<p>Merge enhances collaboration between design and development because designers and engineers work with the same component library.&nbsp;<\/p>\n\n\n\n<p>Instead of having a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI kit<\/a> for designers and code for devs, Merge syncs a repository to UXPin&#8217;s editor so design teams can build fully functioning prototypes using code components.<\/p>\n\n\n\n<p>You can sync your company&#8217;s design system or a component library like MUI so that you only have to drag and drop UI elements to build interfaces. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">Try UXPin Merge<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Many programming languages use packages to build and scale websites, software, and other digital products. These packages allow engineers to extend a project&#8217;s functionality without writing and maintaining additional code. This article will explain these terms from a designer&#8217;s perspective, so you get a basic understanding of how packages work and why engineers use them.<\/p>\n","protected":false},"author":3,"featured_media":34338,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,199,71,172,15,4,7],"tags":[],"class_list":["post-34337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-systems","category-documentation","category-product-design","category-responsive-web-design","category-ui-design","category-web-design"],"yoast_title":"%%title%% %%page%% %%sep%% by UXPin","yoast_metadesc":"NPM stands for Node Package Manager. It's a standard package manager for JavaScript projects. But what is npm from a designer's perspective?","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is npm? - by UXPin<\/title>\n<meta name=\"description\" content=\"NPM stands for Node Package Manager. It&#039;s a standard package manager for JavaScript projects. But what is npm from a designer&#039;s perspective?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is npm?\" \/>\n<meta property=\"og:description\" content=\"NPM stands for Node Package Manager. It&#039;s a standard package manager for JavaScript projects. But what is npm from a designer&#039;s perspective?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-06T08:51:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-06T08:52:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"What is npm?\",\"datePublished\":\"2024-09-06T08:51:44+00:00\",\"dateModified\":\"2024-09-06T08:52:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/\"},\"wordCount\":1512,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/What-is-NPM.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Systems\",\"Documentation\",\"Product Design\",\"Responsive Web Design\",\"UI Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/\",\"name\":\"What is npm? - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/What-is-NPM.png\",\"datePublished\":\"2024-09-06T08:51:44+00:00\",\"dateModified\":\"2024-09-06T08:52:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"NPM stands for Node Package Manager. It's a standard package manager for JavaScript projects. But what is npm from a designer's perspective?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/What-is-NPM.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/What-is-NPM.png\",\"width\":1200,\"height\":600,\"caption\":\"What is NPM\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-npm\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is npm?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is npm? - by UXPin","description":"NPM stands for Node Package Manager. It's a standard package manager for JavaScript projects. But what is npm from a designer's perspective?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/","og_locale":"en_US","og_type":"article","og_title":"What is npm?","og_description":"NPM stands for Node Package Manager. It's a standard package manager for JavaScript projects. But what is npm from a designer's perspective?","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-06T08:51:44+00:00","article_modified_time":"2024-09-06T08:52:21+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"What is npm?","datePublished":"2024-09-06T08:51:44+00:00","dateModified":"2024-09-06T08:52:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/"},"wordCount":1512,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png","articleSection":["Blog","Collaboration","Design Systems","Documentation","Product Design","Responsive Web Design","UI Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/","name":"What is npm? - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png","datePublished":"2024-09-06T08:51:44+00:00","dateModified":"2024-09-06T08:52:21+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"NPM stands for Node Package Manager. It's a standard package manager for JavaScript projects. But what is npm from a designer's perspective?","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/03\/What-is-NPM.png","width":1200,"height":600,"caption":"What is NPM"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What is npm?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/34337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=34337"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/34337\/revisions"}],"predecessor-version":[{"id":54420,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/34337\/revisions\/54420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/34338"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=34337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=34337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=34337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}