{"id":19796,"date":"2020-09-30T08:31:55","date_gmt":"2020-09-30T06:31:55","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=19796"},"modified":"2022-09-01T08:46:16","modified_gmt":"2022-09-01T06:46:16","slug":"inovex-elements-open-source","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/","title":{"rendered":"Announcing @inovex.de\/elements 1.0: Our Open Source UI Library!"},"content":{"rendered":"<p>We\u2019re public, we\u2019re live! Today we are proud to announce our very first open source UI library\u00a0for any framework,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/@inovex.de\/elements\">@inovex.de\/elements<\/a>, on <a href=\"https:\/\/www.npmjs.com\/package\/@inovex.de\/elements\">npm<\/a> and <a href=\"https:\/\/github.com\/inovex\/elements\">GitHub<\/a>\u00a0with a total of 46 core components! ?<\/p>\n<p>inovex elements are used for most of our internal projects built in React, Angular, Vue and plain JavaScript. They are built by 19 developers in total, tested in real-world applications, fully integrated into <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noopener\">Storybook<\/a> and powered by automated CI\/CD for testing and deployment.<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Components-for-Us-and-for-Everyone\" >Components for Us and for Everyone<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Our-Motivation\" >Our Motivation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Problems-We-Try-to-Avoid\" >Problems We Try to Avoid<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Problem-1-Migrating-frontend-projects-from-framework-to-framework\" >Problem #1: Migrating frontend projects from framework to framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Problem-2-Multiplying-UI-components-for-different-frameworks\" >Problem #2: Multiplying UI components for different frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Our-solution-One-codebase-for-many-frameworks\" >Our solution: One codebase for many frameworks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#History\" >History<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Whats-next\" >What&#8217;s next?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Getting-Started-with-inovexdeelements\" >Getting Started with\u00a0@inovex.de\/elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Contributing\" >Contributing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Are-There-Any-Issues-or-do-You-Need-Help\" >Are There Any Issues or do You Need Help?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#Related-Links\" >Related Links<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Components-for-Us-and-for-Everyone\"><\/span>Components for Us and for Everyone<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In 2018, more than two years ago, we started our journey. We spent weeks evaluating which framework matches our needs and which decision may last for the next few years. It\u2019s always a bet on time in front-end worlds and never easy to make the right pick. But today we definitely stand by our decision. With Stencil we built the last UI library for any framework anyone will ever need. With <a href=\"https:\/\/www.npmjs.com\/package\/@inovex.de\/elements\">@inovex.de\/elements<\/a> at v1.0 we reached a new milestone to be ready for open source. The amazing part for us starts now.<\/p>\n<figure id=\"attachment_19807\" aria-describedby=\"caption-attachment-19807\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/elements.inovex.de\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19807 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-23-at-10.55.32-1024x637.png\" alt=\"An excerpt of some components from @inovex.de\/elements\" width=\"1024\" height=\"637\" \/><\/a><figcaption id=\"caption-attachment-19807\" class=\"wp-caption-text\">Some of the elements from <a href=\"https:\/\/www.npmjs.com\/package\/@inovex.de\/elements\">@inovex.de\/elements<\/a>. More to find on <a href=\"https:\/\/elements.inovex.de\">elements.inovex.de<\/a>.<\/figcaption><\/figure>\n<p>We provide a broad set of 46 core components.\u00a0This set includes the following:<\/p>\n<ul>\n<li>Button elements (with Icon, Chip, Fab, Segment-Button)<\/li>\n<li>Form elements (Checkbox, Datepicker, Row, File-Input, Input, Radio, Range, Select, Switch, Textarea)<\/li>\n<li>Graphic elements (Icon, Image, Image-List)<\/li>\n<li>Notification elements (Popover, Progressbar, Snackbar, Spinner, Tooltip)<\/li>\n<li>Structural elements (Card, Header, List, Menu, Drawer, Sidebar, Tab-Bar, Table)<\/li>\n<li>Integrated icons with support for custom (consumer) icons<\/li>\n<li>CSS Custom Properties (aka CSS Variables) support to allow consumers to apply their own colors<\/li>\n<\/ul>\n<p>The library supports plain JavaScript as well as native Angular and React. For Vue you can currently use the plain JavaScript Web Components approach. So you can even use the UI components on simple websites where you don&#8217;t use Angular or React.<\/p>\n<p>You can find all documentation, playgrounds and detailed API descriptions for all components in the <a href=\"https:\/\/elements.inovex.de\/\">@inovex.de\/elements\u00a0Storybook<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Our-Motivation\"><\/span>Our Motivation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It\u2019s clear to say that we don\u2019t want to create the next UI library to have our name in it. We technically needed a more practical approach to not get stuck with another dependency which will go out of date in the next two or maybe three years when there\u2019s a new shiny web framework coming up. Technically, you can compare inovex elements to the <a href=\"https:\/\/ionicframework.com\/docs\/components\">Ionic UI Components<\/a>. They&#8217;re both based on <a href=\"https:\/\/stenciljs.com\/\">Stencil<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Problems-We-Try-to-Avoid\"><\/span>Problems We Try to Avoid<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Problem-1-Migrating-frontend-projects-from-framework-to-framework\"><\/span>Problem #1: Migrating frontend projects from framework to framework<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When you start on the green field, you\u2019re in a very comfortable situation and you normally don&#8217;t waste any thoughts on how you can migrate this project later. In reality, this will not be a problem for the next three to five years. So you choose any framework. These days it could be React. For the UI components part you can pick one of the popular UI libraries built for React. Then you build your business logic around it and make some minor tweaks and adjust the stylings (colors, widths, &#8230;) to integrate the components into your application.<\/p>\n<p>For some visual and behavioral changes, you do some tweaks to overwrite or extend the UI library\u2019s behavior and styling. One may say that this is hacky, but if you really do serious application development, there\u2019s no way to avoid this in some situations. That\u2019s okay, until \u2026 well, until developers join and leave the project, libraries are getting updated and year are passing by. You\u2019re still able to manage the UI parts, but it\u2019s getting harder and more time-consuming.<\/p>\n<p>So, some years later there is this other shiny framework that climbed the ladder and is now one of the most popular frameworks. The ecosystem for your framework is growing slower and your team decides to switch to this new technology. But now, you got a problem. Your components are nicely adapted to your corporate design for exactly that framework you chose some years ago. If you now hop on the new framework bandwaggon, you need to integrate another UI library along with all the integration pain points. It\u2019s possible but very time-consuming. In practice, this often means you need to start from scratch. And most of the time this equals a full rewrite of your code base. It\u2019s not only very expensive, it\u2019s also frustrating and a waste of time.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Problem-2-Multiplying-UI-components-for-different-frameworks\"><\/span>Problem #2: Multiplying UI components for different frameworks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another case is when your company develops WebApps for different framework technologies like Angular, React and Vue. They all need the same look and feel. But how would you achieve that? Well, you can pick a UI library for each framework and customize each UI library to match your brand&#8217;s styles or you create your own UI library for every framework you use. This will work, but it\u2019s error-prone, time-consuming and there\u2019s never exact feature parity between them.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Our-solution-One-codebase-for-many-frameworks\"><\/span>Our solution: One codebase for many frameworks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The problems stated above are all the same for every web project. We made exactly the same experiences on our own. But with the rise of Stencil we have found a solution to this dilemma that makes us independent of concrete frameworks. So the elements as the last UI library for any framework were born.<\/p>\n<p>The next figure shows that we not only use Stencil but also components from the popular <a href=\"https:\/\/material.io\/develop\/web\" target=\"_blank\" rel=\"noopener\">Google Material Web<\/a>,\u00a0<a href=\"https:\/\/flatpickr.js.org\/\" target=\"_blank\" rel=\"noopener\">flatpickr<\/a> and some other 3rd party dependencies.<\/p>\n<figure id=\"attachment_19799\" aria-describedby=\"caption-attachment-19799\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19799 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-1024x559.png\" alt=\"Simplified view of the @inovex.de\/elements composition\" width=\"1024\" height=\"559\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-1024x559.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-300x164.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-768x420.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-1536x839.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-2048x1119.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-1920x1049.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-400x219.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.09.52-360x197.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-19799\" class=\"wp-caption-text\">@inovex.\/elements are built with Google Material Web, flatpickr, our inovex brand design and Stencil. Together with Storybook we have an auto-generated documentation for each component.<\/figcaption><\/figure>\n<p>With the help of these packages and the product design from our designers, we create the core components we need to build our applications. With the help of Storybook we are able to create the documentation and the playground for our consumers with minimal effort. And because <a href=\"https:\/\/opencollective.com\/inovexgmbh\" target=\"_blank\" rel=\"noopener\">we like Storybook as a tool, we donate every month<\/a>.<\/p>\n<p>That\u2019s all we want: A simple workbench where we are able to create the components, separated from the application, relying on bulletproof components from Google.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"History\"><\/span>History<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>During the journey we learned a lot about how we need to handle state, how we need to document the components as and provide a playground for the visual representation of the components. We understand what it means to create a library for a lot of people and being responsible for how to introduce breaking changes or how to handle bug fixes. It\u2019s not easy, but it\u2019s great to see the value we add to all the different projects. So we want to continue the path to a fully-featured elements library which is not coupled to a specific frontend framework.<\/p>\n<p>In the timeline below you can see that we started at the beginning of 2018 with an evaluation period to determine the current state of component libraries and plain Web Component approaches.<\/p>\n<figure id=\"attachment_19801\" aria-describedby=\"caption-attachment-19801\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19801 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-1024x369.png\" alt=\"View on the timeline of the creation of @inovex.de\/elements\" width=\"1024\" height=\"369\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-1024x369.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-300x108.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-768x277.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-1536x553.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-2048x737.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-1920x691.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-400x144.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.08.17-360x130.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-19801\" class=\"wp-caption-text\">We started development in 2018 and first evaluated the technical base. Then we grew and added support for React and Angular.<\/figcaption><\/figure>\n<p>We collected all the information in a table and compared the different approaches. The most important facts were popularity, the ecosystem and the features.<\/p>\n<figure id=\"attachment_19802\" aria-describedby=\"caption-attachment-19802\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19802 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.02.14-1024x426.png\" alt=\"Component framework derivates used for @inovex.de\/elements\" width=\"1024\" height=\"426\" \/><figcaption id=\"caption-attachment-19802\" class=\"wp-caption-text\">Besides the popular Google Polymer and Skate.js, we decided to go with the rising star Stencil.<\/figcaption><\/figure>\n<p>Here\u2019s what we compared:<\/p>\n<figure id=\"attachment_19804\" aria-describedby=\"caption-attachment-19804\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19804 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-08-21-at-08.01.27-1024x502.png\" alt=\"Framework comparision table based on defined data\" width=\"1024\" height=\"502\" \/><figcaption id=\"caption-attachment-19804\" class=\"wp-caption-text\">Framework comparison table based on some predefined criteria<\/figcaption><\/figure>\n<p>The fact that Stencil produces pure Web Components was one of the decision keepers and stands above all the other approaches. The second criterion is that Ionic is also using Stencil for their own Ionic Framework which is one of the most popular web frameworks. With Ionic as a company sponsor of Stencil, we decided to choose Stencil as our Web Component builder. All the other libraries were either too small or not well maintained.<\/p>\n<p>And now, in late 2020 we see that we made the right choice. Stencil is still alive, library updates are released on a regular basis and all the core components of the Ionic Framework use the core components built with Stencil.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Whats-next\"><\/span>What&#8217;s next?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We&#8217;re working on moving all the tasks and stories from our Jira to GitHub as well as creating a roadmap for the next months.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Getting-Started-with-inovexdeelements\"><\/span>Getting Started with\u00a0@inovex.de\/elements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The best way to get to know inovex elements is the <a href=\"https:\/\/elements.inovex.de\/version\/v7.1.1\/?path=\/docs\/docs-framework-integration-angular--page\">Framework Integration<\/a> guide in our documentation. There\u2019s all you need to know to integrate the components into your framework (simple website, Angular, React or Vue). If you don\u2019t want to start here, you can also browse the <a href=\"https:\/\/elements.inovex.de\/version\/v7.1.1\/?path=\/docs\/buttons-ino-button--playground\">Storybook<\/a> and play around with the components. You can manipulate the attributes for each component to apply changes to the behavior and appearance of the components.<\/p>\n<p>Have fun and get your hands dirty!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Contributing\"><\/span>Contributing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you want to develop a new feature for inovex elements, fix a bug or improve documentation you\u2019re always welcome! ?<\/p>\n<p>The best place to start is by visiting our documentation\u2019s <a href=\"https:\/\/elements.inovex.de\/version\/v7.1.1\/?path=\/docs\/docs-contributing-architectural-overview--page\">Contributing section<\/a>. We tried to provide you with all the information necessary to start local development. If there\u2019s still anything missing or unclear, don\u2019t hesitate to contact us. We\u2019re here to help.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Are-There-Any-Issues-or-do-You-Need-Help\"><\/span>Are There Any Issues or do You Need Help?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you have any questions, problems, issues or suggestions, let us know on the GitHub issues page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Related-Links\"><\/span>Related Links<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Landingpage: <a href=\"https:\/\/elements.inovex.de\">https:\/\/elements.inovex.de<\/a><\/p>\n<p>GitHub: <a href=\"https:\/\/github.com\/inovex\/elements\">https:\/\/github.com\/inovex\/elements<\/a><\/p>\n<p>npmjs: <a href=\"https:\/\/www.npmjs.com\/package\/@inovex.de\/elements\">https:\/\/npmjs.org\/inovex.de\/elements<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re public, we\u2019re live! Today we are proud to announce our very first open source UI library\u00a0for any framework,\u00a0@inovex.de\/elements, on npm and GitHub\u00a0with a total of 46 core components! ? inovex elements are used for most of our internal projects built in React, Angular, Vue and plain JavaScript. They are built by 19 developers in [&hellip;]<\/p>\n","protected":false},"author":77,"featured_media":19874,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[131,70],"service":[444,445],"coauthors":[{"id":77,"display_name":"Patrick Hillert","user_nicename":"phillert"}],"class_list":["post-19796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-ui-ux","tag-web","service-frontend","service-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Announcing @inovex.de\/elements 1.0 - UI Components! ? - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Today we are proud to announce our very first open source UI library @inovex.de\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.\" \/>\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.inovex.de\/de\/blog\/inovex-elements-open-source\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing @inovex.de\/elements 1.0 - UI Components! ? - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Today we are proud to announce our very first open source UI library @inovex.de\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-30T06:31:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-01T06:46:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Patrick Hillert\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@silentHoo\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Patrick Hillert\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Patrick Hillert\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/\"},\"author\":{\"name\":\"Patrick Hillert\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/b2a8264915f219e25944c259e182a67f\"},\"headline\":\"Announcing @inovex.de\\\/elements 1.0: Our Open Source UI Library!\",\"datePublished\":\"2020-09-30T06:31:55+00:00\",\"dateModified\":\"2022-09-01T06:46:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/\"},\"wordCount\":1624,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/inovex-elements.png\",\"keywords\":[\"UI\\\/UX\",\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/\",\"name\":\"Announcing @inovex.de\\\/elements 1.0 - UI Components! ? - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/inovex-elements.png\",\"datePublished\":\"2020-09-30T06:31:55+00:00\",\"dateModified\":\"2022-09-01T06:46:16+00:00\",\"description\":\"Today we are proud to announce our very first open source UI library @inovex.de\\\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/inovex-elements.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/inovex-elements.png\",\"width\":1920,\"height\":1080,\"caption\":\"inovex elements\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/inovex-elements-open-source\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing @inovex.de\\\/elements 1.0: Our Open Source UI Library!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/b2a8264915f219e25944c259e182a67f\",\"name\":\"Patrick Hillert\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/ich_profil_aff-96x96.jpg429eadbcccefd9b4c53b6f34afcd485d\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/ich_profil_aff-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/ich_profil_aff-96x96.jpg\",\"caption\":\"Patrick Hillert\"},\"description\":\"Web Software Developer &amp; Author - Web Components, StencilJS, Angular, Vue.js, Ruby on Rails, Docker, GitLab CI. I drive the change to discover, onboard, build, and scale apps that complement inovex vision of innovation and excellence. Setting the vision and strategy for developer experience and engineering community, including partners and customers. Offering mentorship, support and best-practices to minimize developer pain. I\u2019m responsible for partner engineering, developer relations, technical recommendations and best practices, sample apps, tech docs and the next-level developer training experience.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/patrick-hillert-a5b383206\\\/\",\"https:\\\/\\\/x.com\\\/silentHoo\"],\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/phillert\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Announcing @inovex.de\/elements 1.0 - UI Components! ? - inovex GmbH","description":"Today we are proud to announce our very first open source UI library @inovex.de\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.","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.inovex.de\/de\/blog\/inovex-elements-open-source\/","og_locale":"de_DE","og_type":"article","og_title":"Announcing @inovex.de\/elements 1.0 - UI Components! ? - inovex GmbH","og_description":"Today we are proud to announce our very first open source UI library @inovex.de\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.","og_url":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2020-09-30T06:31:55+00:00","article_modified_time":"2022-09-01T06:46:16+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png","type":"image\/png"}],"author":"Patrick Hillert","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements-1024x576.png","twitter_creator":"@silentHoo","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Patrick Hillert","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten","Written by":"Patrick Hillert"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/"},"author":{"name":"Patrick Hillert","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/b2a8264915f219e25944c259e182a67f"},"headline":"Announcing @inovex.de\/elements 1.0: Our Open Source UI Library!","datePublished":"2020-09-30T06:31:55+00:00","dateModified":"2022-09-01T06:46:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/"},"wordCount":1624,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png","keywords":["UI\/UX","Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/","url":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/","name":"Announcing @inovex.de\/elements 1.0 - UI Components! ? - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png","datePublished":"2020-09-30T06:31:55+00:00","dateModified":"2022-09-01T06:46:16+00:00","description":"Today we are proud to announce our very first open source UI library @inovex.de\/elements on npm and GitHub with a total of 46 core components. inovex elements is the last interoperable UI library you\u2019ll ever need for any web framework.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/09\/inovex-elements.png","width":1920,"height":1080,"caption":"inovex elements"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/inovex-elements-open-source\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Announcing @inovex.de\/elements 1.0: Our Open Source UI Library!"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/b2a8264915f219e25944c259e182a67f","name":"Patrick Hillert","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/wp-content\/uploads\/ich_profil_aff-96x96.jpg429eadbcccefd9b4c53b6f34afcd485d","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/ich_profil_aff-96x96.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/ich_profil_aff-96x96.jpg","caption":"Patrick Hillert"},"description":"Web Software Developer &amp; Author - Web Components, StencilJS, Angular, Vue.js, Ruby on Rails, Docker, GitLab CI. I drive the change to discover, onboard, build, and scale apps that complement inovex vision of innovation and excellence. Setting the vision and strategy for developer experience and engineering community, including partners and customers. Offering mentorship, support and best-practices to minimize developer pain. I\u2019m responsible for partner engineering, developer relations, technical recommendations and best practices, sample apps, tech docs and the next-level developer training experience.","sameAs":["https:\/\/www.linkedin.com\/in\/patrick-hillert-a5b383206\/","https:\/\/x.com\/silentHoo"],"url":"https:\/\/www.inovex.de\/de\/blog\/author\/phillert\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/19796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=19796"}],"version-history":[{"count":3,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/19796\/revisions"}],"predecessor-version":[{"id":38204,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/19796\/revisions\/38204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/19874"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=19796"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=19796"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=19796"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=19796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}