{"id":4074,"date":"2022-03-09T16:56:15","date_gmt":"2022-03-09T16:56:15","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4074"},"modified":"2023-01-21T00:30:34","modified_gmt":"2023-01-21T05:30:34","slug":"how-to-use-storybook-with-stencil","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil","title":{"rendered":"How to use Storybook with Stencil"},"content":{"rendered":"<p><a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a> is an incredible tool that allows you to build, test, and document the components of your design system in isolation. Storybook provides a streamlined workflow and tons of addons to improve the developer experience. It is because of this that Storybook is used by indie developers and enterprise teams alike. In this tutorial, we are going to learn how to integrate Storybook into a Stencil project to make building, testing, and documenting even easier.<\/p>\n<p><!--more--><\/p>\n<p>You can find all of the code for this tutorial on the <a href=\"https:\/\/github.com\/a-giuliano\/stencil-storybook-html\">Stencil Storybook repo here<\/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\/KyephjW1irE\"frameborder=\"0\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n            <\/div>\n<h2>Storybook Stories<\/h2>\n<p>Stories are the foundation of any Storybook project. A story is a function that is meant to represent a particular state of a component. Multiple stories can be written for a single component to represent all of its different states. You can <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/whats-a-story\">learn more about stories and how to write them from the Storybook docs<\/a>. I just want to introduce the idea here, as we\u2019ll be talking about them throughout the tutorial.<\/p>\n<h2>Add Storybook<\/h2>\n<p>The first thing we\u2019ll want to do is add Storybook to our Stencil project. For this tutorial, I\u2019ll be using the <a href=\"https:\/\/stenciljs.com\/docs\/getting-started\">Stencil starter project<\/a> that you get from running <code>npm init stencil<\/code>, but feel free to use any Stencil project. To add Storybook, open the terminal in your Stencil project and run:<\/p>\n<pre><code class=\"language-bash\">npx sb init --type html\n<\/code><\/pre>\n<p>The Storybook <code>init<\/code> command will set up all the files and dependencies necessary for us to use Storybook. We\u2019re also specifying our Storybook project type to be <code>html<\/code> via the <code>--type<\/code> flag. We do this because Stencil generates web components, and in this tutorial, we\u2019re going to be using those web components in our stories as custom HTML elements.<\/p>\n<p>Once installed, we can run Storybook with the command:<\/p>\n<pre><code class=\"language-bash\">npm run storybook\n<\/code><\/pre>\n<p>You\u2019ll notice that Storybook already has some example stories set up for us. These example stories come from the <code>stories<\/code> folder that Storybook created in our project. I\u2019m going to delete this folder, as we won\u2019t be using it in this tutorial. Nevertheless, these files can serve as a great reference point, especially if you\u2019re new to Storybook.<\/p>\n<h2>Define Our Custom Elements<\/h2>\n<p>In our Stencil project, you\u2019ll notice that Storybook created a <code>.storybook<\/code> folder for us. In this folder we have a <a href=\"https:\/\/storybook.js.org\/docs\/react\/configure\/overview#configure-story-rendering\"><code>preview.js<\/code> file<\/a>. This file is where we put any kind of global code that we may have. This is really important because it\u2019s where we\u2019re going to define our Stencil components, so we can use them in our stories.<\/p>\n<p>To do this, add the following at the top of <code>preview.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import {defineCustomElements} from &#039;..\/loader&#039;;\n\ndefineCustomElements();\n<\/code><\/pre>\n<p>Here we are first importing our <code>defineCustomElements<\/code> method from the <code>loader<\/code> that Stencil generatedgenerates at build time. Calling <a href=\"https:\/\/stenciljs.com\/docs\/custom-elements#autodefinecustomelements\"><code>defineCustomElements()<\/code><\/a> essentially registers all of our components so they can be used in our stories. Because this loader is generated at build time, we have to run:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Or<\/p>\n<pre><code class=\"language-bash\">stencil build\n<\/code><\/pre>\n<h2>Writing Our First Story<\/h2>\n<p>With all our configurations in place, we can now write our first story. For our story, we\u2019ll be using the <code>MyComponent<\/code> component that is generated when you create a new Stencil project.<\/p>\n<pre><code class=\"language-tsx\">import { Component, Prop, h } from &#039;@stencil\/core&#039;;\nimport { format } from &#039;..\/..\/utils\/utils&#039;;\n\n@Component({\n  tag: &#039;my-component&#039;,\n  styleUrl: &#039;my-component.css&#039;,\n  shadow: true,\n})\nexport class MyComponent {\n  \/**\n   * The first name\n   *\/\n  @Prop() first: string;\n\n  \/**\n   * The middle name\n   *\/\n  @Prop() middle: string;\n\n  \/**\n   * The last name\n   *\/\n  @Prop() last: string;\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return &lt;div&gt;Hello, World! I&#039;m {this.getText()}&lt;\/div&gt;;\n  }\n}\n<\/code><\/pre>\n<p>First, let\u2019s create a file where we\u2019ll write our stories. Inside our <code>my-component<\/code> folder, let\u2019s create a file called <code>my-component.stories.ts<\/code>.<\/p>\n<blockquote><p>\n  NOTE: This file does not have to be created within the <code>my-component<\/code> folder. You could instead have a <code>stories<\/code> folder that contains all the stories for every component. This is just the way that I like to organize things. All that matters is that your stories files end in <code>.stories.ts\/js<\/code>.<\/p><\/blockquote>\n<p>The first thing we\u2019ll add to our <code>my-component.stories.ts<\/code> file is the default export. This is an object that allows us to define all kinds of metadata about our stories. For our purposes, we\u2019ll just provide a <code>title<\/code> for our stories. This title will manifest in the left navigation pane of our Storybook instance.<\/p>\n<pre><code class=\"language-js\">export default {\n    \/\/ this creates a \u2018Components\u2019 folder and a \u2018MyComponent\u2019 subfolder\n    title: &#039;Components\/MyComponent&#039;,\n};\n<\/code><\/pre>\n<p>Next we\u2019re going to make a template for our stories. This is a common pattern that allows us to make multiple stories based on the same component. To do this, we\u2019ll create a function called <code>Template<\/code> that takes in an <code>args<\/code> object and then returns our component with those args as attribute values.<\/p>\n<pre><code class=\"language-js\">const Template = (args) =&gt; `&lt;my-component first=&quot;${args.first}&quot; middle=&quot;${args.middle}&quot; last=&quot;${args.last}&quot;&gt;&lt;\/my-component&gt;`;\n<\/code><\/pre>\n<p>Once the template is created, we can create stories by using named exports. Our stories will bind to our <code>Template<\/code> and specify the <code>args<\/code> that we want to pass to our component.<\/p>\n<pre><code class=\"language-js\">export const Example = Template.bind({});\nExample.args = {\n  first: &#039;Winnie&#039;,\n  middle: &#039;The&#039;,\n  last: &#039;Pooh&#039;\n};\n<\/code><\/pre>\n<p>With this pattern, we can create all kinds of stories to demonstrate different use cases of our component. We can also use the \u201cControls\u201d in Storybook to directly edit the values that are passed to our component.<\/p>\n<h2>Update on Save<\/h2>\n<p>Turning back to our Storybook instance, everything seems to be working great! Our component is rendering properly and we can use Storybook\u2019s controls to instantly change the values we pass to the component. In addition, if we click on the \u201cDocs\u201d tab and then click \u201cShow code\u201d, we can see how the component is being used.<\/p>\n<p>One thing you may notice, though, is that if you make a change to your component, that change will not be reflected in Storybook. This is because our component is being defined by our loader and that loader only updates when we perform a build. So to propagate the change, we need to rebuild our Stencil project by running:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Or<\/p>\n<pre><code class=\"language-bash\">stencil build\n<\/code><\/pre>\n<p>Once we do that, our changes will propagate through to Storybook. Unfortunately, running a build every time we make a change is not a great developer experience. To automatically build our project when a change is made, we can run:<\/p>\n<pre><code class=\"language-bash\">stencil build --watch\n<\/code><\/pre>\n<p>Now Stencil will watch for any changes in our project and rebuild our project when they occur. This means when we save a change, that change will be visible in Storybook.<\/p>\n<h2>Conclusion<\/h2>\n<p>This tutorial provideds an introduction to setting up Storybook in your Stencil project. There is much, much more that you can do with Storybook and Stencil, so I encourage you to check out the <a href=\"https:\/\/storybook.js.org\/\">Storybook docs<\/a> and play around with it in your Stencil project. I can\u2019t wait to see all the ways you use Storybook in your Stencil design system.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation. Storybook provides a streamlined workflow and tons of addons to improve the developer experience. It is because of this that Storybook is used by indie developers and enterprise teams alike. In this tutorial, we [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":4075,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"544184","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/how-to-use-storybook-with-stencil\/221580","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,223,124],"tags":[140,76,82],"class_list":["post-4074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-stencil","category-tutorials","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>How to use Storybook with Stencil - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.\" \/>\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\/how-to-use-storybook-with-stencil\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Storybook with Stencil\" \/>\n<meta property=\"og:description\" content=\"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-09T16:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:30:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-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\/how-to-use-storybook-with-stencil#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"How to use Storybook with Stencil\",\"datePublished\":\"2022-03-09T16:56:15+00:00\",\"dateModified\":\"2023-01-21T05:30:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\"},\"wordCount\":1033,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png\",\"keywords\":[\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"All\",\"Stencil\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\",\"url\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\",\"name\":\"How to use Storybook with Stencil - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png\",\"datePublished\":\"2022-03-09T16:56:15+00:00\",\"dateModified\":\"2023-01-21T05:30:34+00:00\",\"description\":\"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Storybook with Stencil\"}]},{\"@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":"How to use Storybook with Stencil - Ionic Blog","description":"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.","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\/how-to-use-storybook-with-stencil","og_locale":"en_US","og_type":"article","og_title":"How to use Storybook with Stencil","og_description":"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.","og_url":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil","og_site_name":"Ionic Blog","article_published_time":"2022-03-09T16:56:15+00:00","article_modified_time":"2023-01-21T05:30:34+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-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\/how-to-use-storybook-with-stencil#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"How to use Storybook with Stencil","datePublished":"2022-03-09T16:56:15+00:00","dateModified":"2023-01-21T05:30:34+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil"},"wordCount":1033,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png","keywords":["Design Systems","stencil","web components"],"articleSection":["All","Stencil","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil","url":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil","name":"How to use Storybook with Stencil - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png","datePublished":"2022-03-09T16:56:15+00:00","dateModified":"2023-01-21T05:30:34+00:00","description":"Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilSB-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/how-to-use-storybook-with-stencil#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How to use Storybook with Stencil"}]},{"@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\/03\/stencilSB-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4074","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=4074"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4074\/revisions"}],"predecessor-version":[{"id":4704,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4074\/revisions\/4704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4075"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}