{"id":4282,"date":"2022-06-28T16:48:16","date_gmt":"2022-06-28T16:48:16","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4282"},"modified":"2023-01-21T00:28:42","modified_gmt":"2023-01-21T05:28:42","slug":"build-cross-platform-components-with-stencil-and-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor","title":{"rendered":"Build Cross Platform Components with Stencil and Capacitor"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>The overwhelming majority of design systems that exist today are built for the web. While this is great for web developers, the web is not the only platform that people use. It doesn\u2019t take a 10x developer to see that mobile apps are just as common as web applications. Yet, so many design systems seem to be built without the mobile experience in mind. In this tutorial, we\u2019ll break out of this web centric mindset and see how we can build components that are suitable for the web and mobile. If you\u2019re worried that we\u2019ll have to use Swift or Java or Kotlin, fear not. We\u2019re going to build cross platform components solely with web technologies using Stencil and Capacitor.<\/p>\n<p><!--more--><\/p>\n<p><a href=\"https:\/\/stenciljs.com\/\">Stencil<\/a> is a web components compiler that enables the components we write to be used with multiple different frontend frameworks. <a href=\"https:\/\/capacitorjs.com\/\">Capacitor<\/a> is a cross-platform native runtime that enables the components we write to be used with multiple different platforms. Together, they can help us build cross-framework, cross-platform design systems that can be used in all kinds of projects across an entire organization.<\/p>\n<p>In this tutorial, we\u2019re going to be building an avatar component. This component, when clicked, will allow the user to change their avatar. On the web, the user will be able to select a new photo from the file system. On mobile, the user will be able to choose a photo from their photo gallery or take a new picture with the device camera. Here\u2019s what it will look like.<\/p>\n<div style=\"max-width: 360px; margin: 0 auto;\"><div class=\"device-demo\">\n            <figure>\n                <figcaption>Avatar Component on iOS Device<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ezgif.com-gif-maker.mp4\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div><\/div>\n<p>You can find all of the code for this tutorial in the <a href=\"https:\/\/github.com\/a-giuliano\/stencil-capacitor-avatar-component\">stencil-capacitor-avatar-component github repo<\/a>. If you prefer to watch a video tutorial, I recently created a video where I walk through this entire process. Check it out!<\/p>\n<div class=\"video-container\">\n              <iframe data-src=\"https:\/\/www.youtube.com\/embed\/O5xfY9LPl0s\"frameborder=\"0\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n            <\/div>\n<blockquote><p>NOTE: This tutorial assumes that you already have a Stencil project created. To learn how to create a new Stencil project, check out the <a href=\"https:\/\/stenciljs.com\/docs\/getting-started\">getting started docs<\/a>.<\/p><\/blockquote>\n<h2>Adding Capacitor to our Project<\/h2>\n<p>Before we get started creating our avatar component, we\u2019ll first need to <a href=\"https:\/\/capacitorjs.com\/docs\/getting-started\">add Capacitor to our Stencil project<\/a>. Start by installing Capacitor core and the Capacitor CLI.<\/p>\n<pre><code class=\"language-bash\">npm install @capacitor\/core\nnpm install @capacitor\/cli --save-dev\n<\/code><\/pre>\n<p>After that, initialize Capacitor with<\/p>\n<pre><code class=\"language-bash\">npx cap init\n<\/code><\/pre>\n<p>You\u2019ll be prompted to provide an app name and ID here. Feel free to name your app whatever you would like.<\/p>\n<p>The next steps are specific to the mobile platforms that you intend to support.<\/p>\n<h3>iOS<\/h3>\n<p>For our component to work with iOS, we will first need to install the <code>@capacitor\/ios<\/code> package<\/p>\n<pre><code class=\"language-bash\">npm install @capacitor\/ios\n<\/code><\/pre>\n<p>And then add the iOS platform<\/p>\n<pre><code class=\"language-bash\">npx cap add ios\n<\/code><\/pre>\n<h3>Android<\/h3>\n<p>Similarly, for our component to work with Android, we will need to install the <code>@capacitor\/android<\/code> package<\/p>\n<pre><code class=\"language-bash\">npm install @capacitor\/android\n<\/code><\/pre>\n<p>And then add the Android platform<\/p>\n<pre><code class=\"language-bash\">npx cap add android\n<\/code><\/pre>\n<h2>Scaffolding the Component<\/h2>\n<p>Alright, with Capacitor installed and configured, we can now get started building our avatar component. Let\u2019s start by creating a new component called <code>my-avatar<\/code>.<\/p>\n<p>Our avatar component will have one prop called <code>image<\/code>, which will be the url to the avatar image. We should give it a default value in case an image is not provided (in the case of a new user). Because the value for this image will change when the user selects a new avatar, we\u2019ll pass the option <code>{ mutable: true }<\/code> to the <code>@Prop<\/code> decorator. For the component template, the only element we need is an <code>&lt;img \/&gt;<\/code> tag to display the avatar image. Our component should look like this<\/p>\n<pre><code class=\"language-ts\">import { Component, Host, h, Prop } from &#039;@stencil\/core&#039;;\n\n@Component({\n  tag: &#039;my-avatar&#039;,\n  styleUrl: &#039;my-avatar.css&#039;,\n  shadow: true,\n})\nexport class MyAvatar {\n  @Prop({ mutable: true }) image: string = &#039;https:\/\/avatars.dicebear.com\/api\/micah\/capacitor.svg&#039;;\n\n  render() {\n    return (\n      &lt;Host&gt;\n        &lt;img src={this.image} alt=&quot;avatar&quot; \/&gt;\n      &lt;\/Host&gt;\n    );\n  }\n}\n<\/code><\/pre>\n<p>In the <code>my-avatar.css<\/code> file, we can add some styles to the <code>img<\/code> to size and shape it a bit.<\/p>\n<pre><code class=\"language-css\">img {\n  height: 150px;\n  width: 150px;\n  border-radius: 99rem;\n  background-color: #f1f1f1;\n  object-fit: cover;\n}\n<\/code><\/pre>\n<h2>Using the Capacitor Camera Plugin<\/h2>\n<p>With the general structure of our component in place, it\u2019s now time to start adding some functionality. To implement the ability to change the avatar image, we are going to leverage the <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Capacitor Camera Plugin<\/a>. On mobile, this plugin provides the ability to take a photo with the device camera or to choose an existing one from the photo library. On the web, the plugin works just like an <code>input<\/code> element with type <code>file<\/code>. We can install the plugin with the following commands:<\/p>\n<pre><code class=\"language-bash\">npm install @capacitor\/camera\nnpx cap sync\n<\/code><\/pre>\n<p>Access to the device camera requires specific permissions to be configured. To learn how to configure those permissions for both iOS and Andriod, checkout the <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Capacitor Camera Plugin docs<\/a>.<\/p>\n<h3>Getting a Photo<\/h3>\n<p>With the plugin installed and configured, we can now import the <code>Camera<\/code> and <code>CameraResultType<\/code> at the top of our avatar component.<\/p>\n<pre><code class=\"language-js\">import { Camera, CameraResultType } from &#039;@capacitor\/camera&#039;;\n<\/code><\/pre>\n<p>Now let\u2019s write a function that will use the camera plugin to get a photo and set the component\u2019s image.<\/p>\n<pre><code class=\"language-ts\">handleClick = async () =&gt; {\n  const photo = await Camera.getPhoto({\n    quality: 90,\n    allowEditing: true,\n    resultType: CameraResultType.Uri,\n  });\n  this.image = photo.webPath;\n};\n<\/code><\/pre>\n<p>The <code>Camera.getPhoto()<\/code> function prompts the user to provide a photo from the photo library or to take a new photo with the camera. It accepts a series of options to further customize its behavior. You can learn more about those options in the <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera#getphoto\">API documentation<\/a>.<\/p>\n<p>At this point, we want to execute this function when our avatar image is clicked.<\/p>\n<pre><code class=\"language-html\">&lt;img src={this.image} alt=&quot;avatar&quot; onClick={this.handleClick} \/&gt;\n<\/code><\/pre>\n<p>With this function defined and connected to the image, our avatar component should now work as expected! Let\u2019s add the component to our <code>index.html<\/code> file to see it in action.<\/p>\n<pre><code class=\"language-html\">&lt;my-avatar&gt;&lt;\/my-avatar&gt;\n<\/code><\/pre>\n<p>We can then run our project three different ways:<\/p>\n<p>Web: <code>npm run start<\/code><br \/>\niOS: <code>npx cap open ios<\/code> and <a href=\"https:\/\/capacitorjs.com\/docs\/ios#running-your-app\">run with Xcode<\/a><br \/>\nAndroid: <code>npx cap open android<\/code> and <a href=\"https:\/\/capacitorjs.com\/docs\/android#running-your-app\">run with Android Studio<\/a><\/p>\n<div style=\"max-width: 360px; margin: 0 auto;\"><div class=\"device-demo\">\n            <figure>\n                <figcaption>Avatar Component on iOS Device<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ezgif.com-gif-maker.mp4\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div><\/div>\n<p>For an added bonus, I want to improve the component\u2019s API by adding a custom event.<\/p>\n<h2>Improving the Component\u2019s API<\/h2>\n<p>User\u2019s of our avatar component will likely want to handle any change to the avatar photo. They may want to save it to a database for example. To improve the way consumers interact with our component, we can create a custom event that fires every time the avatar image changes. To do that, we first need to declare the event with the <code>@Event()<\/code> decorator.<\/p>\n<pre><code class=\"language-ts\">@Event() myChange: EventEmitter&lt;String&gt;;\n<\/code><\/pre>\n<p>I\u2019m calling the event <code>myChange<\/code>, but feel free to give the event a name specific to your design system. Next, we need to emit the event when the image is changed. We can do this in our <code>handleClick<\/code> function.<\/p>\n<pre><code class=\"language-ts\">handleClick = async () =&gt; {\n  const photo = await Camera.getPhoto({\n    quality: 90,\n    allowEditing: true,\n    resultType: CameraResultType.Uri,\n  });\n  this.image = photo.webPath;\n  this.myChange.emit(this.image);\n};\n<\/code><\/pre>\n<p>Now users of our component can listen to when the image changes and perform the relevant actions when that event occurs.<\/p>\n<pre><code class=\"language-html\">&lt;my-avatar&gt;&lt;\/my-avatar&gt;\n\n&lt;script&gt;\n  document.querySelector(&#039;my-avatar&#039;).addEventListener(&#039;myChange&#039;, () =&gt; {\n    console.log(&#039;avatar image changed&#039;);\n  });\n&lt;\/script&gt;\n<\/code><\/pre>\n<p><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/console-log-demo.mov\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/p>\n<h2>Cross Platform Design Systems<\/h2>\n<p>All in all, this avatar component is meant to showcase the flexibility of building components that are suitable for both the web and mobile. Building components with Capacitor and Stencil allows your design system to support multiple platforms and frameworks. With this strategy, you can even use your Stencil components in an existing native or React Native app with <a href=\"https:\/\/ionic.io\/portals\">Portals<\/a>. Design systems built in this way are so versatile that they can serve as the only design system that your company may need. With everyone pulling from the same design system, it is much easier to achieve consistency and feature parity across all of your applications.<\/p>\n<p>As you play around with Capacitor in your Stencil projects, I encourage you to check out <a href=\"https:\/\/capacitorjs.com\/\">the documentation<\/a>. There are tons of other great plugins to explore. I\u2019m excited to see what kind of cross platform components you end up building!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The overwhelming majority of design systems that exist today are built for the web. While this is great for web developers, the web is not the only platform that people use. It doesn\u2019t take a 10x developer to see that mobile apps are just as common as web applications. Yet, so many design systems [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":4283,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"549089","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/build-cross-platform-components-with-stencil-and-capacitor\/224602","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[223,124],"tags":[151,140,76,82],"class_list":["post-4282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stencil","category-tutorials","tag-capacitor","tag-design-systems","tag-stencil","tag-web-components"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Cross Platform Components with Stencil and Capacitor - Ionic Blog<\/title>\n<meta name=\"description\" content=\"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Cross Platform Components with Stencil and Capacitor\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T16:48:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:28:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anthony Giuliano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@a__giuliano\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Giuliano\" \/>\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:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"Build Cross Platform Components with Stencil and Capacitor\",\"datePublished\":\"2022-06-28T16:48:16+00:00\",\"dateModified\":\"2023-01-21T05:28:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\"},\"wordCount\":1191,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png\",\"keywords\":[\"Capacitor\",\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"Stencil\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\",\"url\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\",\"name\":\"Build Cross Platform Components with Stencil and Capacitor - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png\",\"datePublished\":\"2022-06-28T16:48:16+00:00\",\"dateModified\":\"2023-01-21T05:28:42+00:00\",\"description\":\"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Cross Platform Components with Stencil and Capacitor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\",\"name\":\"Anthony Giuliano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"caption\":\"Anthony Giuliano\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/\",\"https:\/\/x.com\/a__giuliano\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/anthonyionic-io\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Cross Platform Components with Stencil and Capacitor - Ionic Blog","description":"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.","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:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor","og_locale":"en_US","og_type":"article","og_title":"Build Cross Platform Components with Stencil and Capacitor","og_description":"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.","og_url":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor","og_site_name":"Ionic Blog","article_published_time":"2022-06-28T16:48:16+00:00","article_modified_time":"2023-01-21T05:28:42+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","type":"image\/png"}],"author":"Anthony Giuliano","twitter_card":"summary_large_image","twitter_creator":"@a__giuliano","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Anthony Giuliano","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"Build Cross Platform Components with Stencil and Capacitor","datePublished":"2022-06-28T16:48:16+00:00","dateModified":"2023-01-21T05:28:42+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor"},"wordCount":1191,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","keywords":["Capacitor","Design Systems","stencil","web components"],"articleSection":["Stencil","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor","url":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor","name":"Build Cross Platform Components with Stencil and Capacitor - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","datePublished":"2022-06-28T16:48:16+00:00","dateModified":"2023-01-21T05:28:42+00:00","description":"In this tutorial, we\u2019ll break out of the web centric mindset and see how we can build components that are suitable for the web and mobile.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/build-cross-platform-components-with-stencil-and-capacitor#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Build Cross Platform Components with Stencil and Capacitor"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58","name":"Anthony Giuliano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","caption":"Anthony Giuliano"},"sameAs":["https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/","https:\/\/x.com\/a__giuliano"],"url":"https:\/\/ionic.io\/blog\/author\/anthonyionic-io"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/stencilcap-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4282"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4282\/revisions"}],"predecessor-version":[{"id":4698,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4282\/revisions\/4698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4283"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}