{"id":36194,"date":"2023-08-24T04:39:32","date_gmt":"2023-08-24T11:39:32","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36194"},"modified":"2023-08-24T04:39:49","modified_gmt":"2023-08-24T11:39:49","slug":"introducing-npm-integration","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/","title":{"rendered":"Merge npm Integration \u2013 Another Way of Importing Components"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/bo-vbFNDaRNTkiuVTqE9OwmnOP-GhKLlMifHoYWNum50KS-Kg6wigPd-pgsKImII-E6tUoqC3AhcJliJLJPjgnDpWhHC5754gkDpv08Tm7zTFDfBbZiZKu4waxIBAOJ1OtKMy14HdVA9_0xxePx2OA\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Here&#8217;s a designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our npm integration that makes Merge accessible to teams who lack active engineer\u2019s support.<\/p>\n\n\n\n<p>Try npm integration to speed up interactive prototyping and stay 100% consistent with the final product. The npm components will behave like a lego bricks that you can drag and drop to build advanced prototypes. <a href=\"https:\/\/www.uxpin.com\/merge\" 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            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover 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-revolutionize-your-design-process-with-uxpin-merge\">Revolutionize Your Design Process with UXPin Merge<\/h2>\n\n\n\n<p>UXPin with Merge technology allows you to create a new level of fidelity and interactivity in&nbsp; prototypes, smoothen design handoff, and unify designers and devs\u2019 work with a single source of truth. It truly streamlines product development process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-move-away-from-static-change-to-fully-interactive-design\">Move Away from Static, Change to Fully-interactive Design<\/h3>\n\n\n\n<p>Gone are the days of static prototypes. Companies, especially the ones that reached a higher <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design maturity level<\/a>, look for more efficient ways of prototyping. Linking lifeless artboards, translating design to code with imperfect tools, and documenting nuanced interactions time and time again adds more work and stalls growth.<\/p>\n\n\n\n<p>This is where Merge comes in. With this technology, you can create prototypes with the elements that have true functionality built into them. It scales design like it did for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">Erica\u2019s team at PayPal<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-streamline-collaboration-between-design-and-development\">Streamline Collaboration Between Design and Development<\/h3>\n\n\n\n<p>With Merge, the design and development teams work with the same interactive components throughout the entire production process. Designers use the UI components, whereas developers copy the ready code from the very same design.<\/p>\n\n\n\n<p>The translation of design into code is already there. Getting the most of a single source of truth unites design and engineering and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">simplifies the design handoff stage<\/a>. In short: designers are happy, same as developers, and they don\u2019t waste time on back-and-forths.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-accurate-ui-components-that-guarantee-design-consistency\">Use Accurate UI Components that Guarantee Design Consistency<\/h3>\n\n\n\n<p>Coded UI components used in the design process make the prototypes consistent from start to finish. The product is being built according to the designer\u2019s intention. The best part \u2013 designers don\u2019t even need to deal with code.<\/p>\n\n\n\n<p>The outcome is that there is no drift between design and the end product\u2019s look and feel which is extremely time and energy consuming without <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-third-way-of-importing-ui-components-to-uxpin-merge\">The Third way of Importing UI components to UXPin Merge<\/h2>\n\n\n\n<p>Before you can design with true components, you need to import a component library. There are three ways of bringing coded components to UXPin Merge.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png\" alt=\"merge component manager npm packages import library\" class=\"wp-image-35052\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Git integration<\/strong><\/a> \u2013 developers use Git to host source code and its history; it requires technical help to import code components into UXPin.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-uxpin-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Storybook integration<\/strong><\/a> &#8211; Storybook stores public and private component libraries that you can bring to UXPin.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>npm integration<\/strong><\/a> \u2013 that gives designers a lot of autonomy.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UXPin Merge npm Integration is Here!\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/2Tg5My4yff4?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>\n<\/div><\/figure>\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-merge-npm-integration-what-do-you-get\">Merge npm integration \u2013 What Do You Get?<\/h2>\n\n\n\n<p>Many design teams might struggle with the Merge Git integration if they lack developer\u2019s active support. To make it easy for them to benefit from Merge, we\u2019re releasing a designer-friendly way of importing a component library to UXPin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-npm-integration\">How to use npm integration?&nbsp;<\/h2>\n\n\n\n<p>Time to see how you can use npm integration. Let&#8217;s start with a written description of how to do it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-import-npm-components-to-uxpin\">Import npm Components to UXPin<\/h3>\n\n\n\n<p>An npm is an online registry of packages with ready-made development elements that you can download to use in your project. Some of the most popular open-source design systems are being distributed in this way.<\/p>\n\n\n\n<p>You can use <a href=\"https:\/\/adele.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adele<\/a> (UXPin\u2019s design system repository) to find which design system is in an npm package. Just scroll to the final column to see the way of distribution.<\/p>\n\n\n\n<p>Alternatively, you can upload your own React-based component library to npm and use it in UXPin.<\/p>\n\n\n\n<p>Here\u2019s how to do the steps of bringing the npm design system into UXPin.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Add a New Library to UXPin Merge<\/h4>\n\n\n\n<p>Once you know which React-based design system to use, it\u2019s time to sync it with UXPin Merge. Go to the Merge Tab in your UXPin dashboard and add a library via npm package. You need to provide an npm package name and the version you want to use. If your documentation requires it, add styles to the \u201cassets location\u201d field.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Configure UI Components<\/h4>\n\n\n\n<p>Open Merge Component Manager and specify components you want to import. You can categorize the components the way you want to. After publishing components, manage their properties and define which you want to import. Go to the library documentation to find the names and types of properties.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Start Creating Fully Interactive Prototypes<\/h4>\n\n\n\n<p>Time to create your first design. Go to the design editor and drop components on the canvas. See how easy it is to change the properties of the components you use! To check the components\u2019 interactivity, go to \u201cPreview\u201d mode.&nbsp;<\/p>\n\n\n\n<p>Finished your prototype? Now, you can just pass the project link to your fellow developer so that they can copy the code from your design and check the specs.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-follow-our-instructions-and-import-interactive-components\">Follow our instructions and import interactive components<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-1-watch-a-step-by-step-video-that-tells-you-how-to-use-the-integration\">1. Watch a step-by-step video that tells you how to use the integration<\/h4>\n\n\n\n<p>We prepared a video walk-through of the integration. Watch it to learn how you can import an npm design system to UXPin.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UXPin Merge npm Integration Walkthrough \u2013 Design with Component Libraries\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/C7p6Zf07w-g?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>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">2. Import npm components from MUI to UXPin<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/8GBMhKFDDi\">https:\/\/t.co\/8GBMhKFDDi<\/a>\ud83e\udef6 MUI \u2795 <a href=\"https:\/\/twitter.com\/hashtag\/UXPinMerge?src=hash&amp;ref_src=twsrc%5Etfw\">#UXPinMerge<\/a> \ud83d\udff0 fast, interactive prototyping as easy as 1,2,3!<br><br>Check our tutorial on how to bring <a href=\"https:\/\/twitter.com\/npmjs?ref_src=twsrc%5Etfw\">@npmjs<\/a> components to UXPin starring <a href=\"https:\/\/twitter.com\/MUI_hq?ref_src=twsrc%5Etfw\">@MUI_hq<\/a> library!<\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1557344058476986368?ref_src=twsrc%5Etfw\">August 10, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Would you like to bring MUI to UXPin? Our step-by-step article will guide you through the process.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to import MUI components to UXPin?<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">3. Import npm components from Ant Design to UXPin<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/9nysjW1FGN\">https:\/\/t.co\/9nysjW1FGN<\/a> \ud83c\udfa8 No need to code to create real-life product prototypes! <br><br>\ud83e\udd73 See how fast and interactive design gets when you import <a href=\"https:\/\/twitter.com\/AntDesignUI?ref_src=twsrc%5Etfw\">@AntDesignUI<\/a> components to UXPin! \ud83d\udc47<\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1557346983454691331?ref_src=twsrc%5Etfw\">August 10, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Ant Design is one of the most popular libraries. When you log in to UXPin, you will see some of the Ant Design components that we\u2019ve imported through npm. They are ready for you to use. Check how we imported them to UXPin in this article.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to import Ant Design components to UXPin?<\/strong><\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-npm-integration-patterns\">Use npm integration + Patterns<\/h3>\n\n\n\n<p>Once you import everything you need and save changes, you can build more complex components out of basic ones or save components with properties to avoid repeating the same steps over and over. In other words, create Patterns.<\/p>\n\n\n\n<p>Read all about it: <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Patterns documentation<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/3VOImSeSS5\">https:\/\/t.co\/3VOImSeSS5<\/a> \ud83d\udc48 Eliminate repetitive work with Patterns! See how you can use it in <a href=\"https:\/\/twitter.com\/hashtag\/UXPinMerge?src=hash&amp;ref_src=twsrc%5Etfw\">#UXPinMerge<\/a> \ud83d\udc4f <a href=\"https:\/\/t.co\/xPuXQeD0rz\">pic.twitter.com\/xPuXQeD0rz<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1542885496589885442?ref_src=twsrc%5Etfw\">July 1, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\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-try-merge-npm-integration\">Try Merge npm integration<\/h2>\n\n\n\n<p>With npm integration, you don\u2019t need developers\u2019 help to bring coded UI elements to UXPin. The designers can import and manage the UI components by themselves in UXPin. Just the way they want.<\/p>\n\n\n\n<p>Bring UI components through npm integration. Connect the design and development team with a single source of truth and break organizational silos. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day trial to test the integration<\/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\/npm-integration\" target=\"_blank\" rel=\"noopener\">Try npm integration<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our npm integration that makes Merge accessible to teams who lack active engineer\u2019s support. Try npm integration to speed up interactive prototyping and stay 100% consistent with the final product. The npm components will behave like a lego bricks that you can<\/p>\n","protected":false},"author":3,"featured_media":36195,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,440,19],"tags":[],"class_list":["post-36194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-merge","category-uxpin"],"yoast_title":"What is Merge npm integration?","yoast_metadesc":"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is Merge npm integration?<\/title>\n<meta name=\"description\" content=\"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.\" \/>\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\/introducing-npm-integration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Merge npm Integration \u2013 Another Way of Importing Components\" \/>\n<meta property=\"og:description\" content=\"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-24T11:39:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T11:39:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.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=\"6 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\\\/introducing-npm-integration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Merge npm Integration \u2013 Another Way of Importing Components\",\"datePublished\":\"2023-08-24T11:39:32+00:00\",\"dateModified\":\"2023-08-24T11:39:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/\"},\"wordCount\":1114,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MCM_Blog_02.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Merge by UXPin\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/\",\"name\":\"What is Merge npm integration?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MCM_Blog_02.png\",\"datePublished\":\"2023-08-24T11:39:32+00:00\",\"dateModified\":\"2023-08-24T11:39:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MCM_Blog_02.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MCM_Blog_02.png\",\"width\":1200,\"height\":600,\"caption\":\"MCM Blog 02\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/introducing-npm-integration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Merge npm Integration \u2013 Another Way of Importing Components\"}]},{\"@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 Merge npm integration?","description":"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.","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\/introducing-npm-integration\/","og_locale":"en_US","og_type":"article","og_title":"Merge npm Integration \u2013 Another Way of Importing Components","og_description":"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-24T11:39:32+00:00","article_modified_time":"2023-08-24T11:39:49+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Merge npm Integration \u2013 Another Way of Importing Components","datePublished":"2023-08-24T11:39:32+00:00","dateModified":"2023-08-24T11:39:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/"},"wordCount":1114,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.png","articleSection":["Blog","Component-Driven Prototyping","Merge by UXPin","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/","name":"What is Merge npm integration?","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.png","datePublished":"2023-08-24T11:39:32+00:00","dateModified":"2023-08-24T11:39:49+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Meet our designer-friendly way of bringing UI code components into UXPin\u2019s editor. It\u2019s our Merge npm integration.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MCM_Blog_02.png","width":1200,"height":600,"caption":"MCM Blog 02"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Merge npm Integration \u2013 Another Way of Importing Components"}]},{"@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\/36194","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=36194"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36194\/revisions"}],"predecessor-version":[{"id":49669,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36194\/revisions\/49669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36195"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}