{"id":4386,"date":"2022-09-28T13:25:29","date_gmt":"2022-09-28T17:25:29","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4386"},"modified":"2022-09-28T13:25:29","modified_gmt":"2022-09-28T17:25:29","slug":"announcing-component-playgrounds-for-ionic-docs","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs","title":{"rendered":"Announcing Component Playgrounds for Ionic Docs"},"content":{"rendered":"<p>The <a href=\"https:\/\/ionicframework.com\/docs\">Ionic Docs website<\/a> is one of the first places developers go to learn about Ionic Framework. Many developers have asked us for a way to interact with Ionic\u2019s UI components in their browser without having to write any code. Today, we deliver on that request with the new Component Playground feature!<\/p>\n<p><!--more--><\/p>\n<h2>What is a component playground?<\/h2>\n<p>A component playground is an interactive part of our documentation that shows how an Ionic component should look and behave. Each playground has a toggle to switch between iOS and Material Design modes. Dark mode is supported as well!<\/p>\n<p>But wait, there\u2019s more! Playgrounds come loaded with code snippets for each JavaScript Framework that Ionic supports. These code snippets can be copied to a local Ionic application or opened in a standalone StackBlitz page, making it easy to experiment with different combinations of components, properties, and other features.<\/p>\n<div style=\"margin: 0 auto;\">\n  <div class=\"device-demo\">\n            <figure>\n                <figcaption>Component Playground Demo<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/component-playground-demo.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<\/div>\n<p>Want to see a component playground in action? Check out the <a href=\"https:\/\/ionicframework.com\/docs\/api\/datetime#basic-usage\">playgrounds for our datetime component<\/a>.<\/p>\n<h2>Future Work<\/h2>\n<p>Many of our component docs already have the new playground feature. The team will continue to roll out new playgrounds to the rest of the component docs in the coming weeks and months.<\/p>\n<p>Please give the playgrounds a try and report any issues on our <a href=\"https:\/\/github.com\/ionic-team\/ionic-docs\">documentation GitHub repo<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Ionic Docs website is one of the first places developers go to learn about Ionic Framework. Many developers have asked us for a way to interact with Ionic\u2019s UI components in their browser without having to write any code. Today, we deliver on that request with the new Component Playground feature!<\/p>\n","protected":false},"author":72,"featured_media":4387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"553431","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/announcing-component-playgrounds-for-ionic-docs\/227309","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[3],"class_list":["post-4386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-ionic"],"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>Announcing Component Playgrounds for Ionic Docs - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Today we are announcing a new way of interacting with Ionic components right in the browser.\" \/>\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\/announcing-component-playgrounds-for-ionic-docs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Component Playgrounds for Ionic Docs\" \/>\n<meta property=\"og:description\" content=\"Today we are announcing a new way of interacting with Ionic components right in the browser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-28T17:25:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-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=\"Liam DeBeasi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LiamDeBeasi\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam DeBeasi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Component Playgrounds for Ionic Docs\",\"datePublished\":\"2022-09-28T17:25:29+00:00\",\"dateModified\":\"2022-09-28T17:25:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\"},\"wordCount\":233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\",\"name\":\"Announcing Component Playgrounds for Ionic Docs - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png\",\"datePublished\":\"2022-09-28T17:25:29+00:00\",\"dateModified\":\"2022-09-28T17:25:29+00:00\",\"description\":\"Today we are announcing a new way of interacting with Ionic components right in the browser.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Component Playgrounds for Ionic Docs\"}]},{\"@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\/d314e583cf08e7a28c51e8ffc3d621fa\",\"name\":\"Liam DeBeasi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"caption\":\"Liam DeBeasi\"},\"sameAs\":[\"https:\/\/x.com\/LiamDeBeasi\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/liam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Component Playgrounds for Ionic Docs - Ionic Blog","description":"Today we are announcing a new way of interacting with Ionic components right in the browser.","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\/announcing-component-playgrounds-for-ionic-docs","og_locale":"en_US","og_type":"article","og_title":"Announcing Component Playgrounds for Ionic Docs","og_description":"Today we are announcing a new way of interacting with Ionic components right in the browser.","og_url":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs","og_site_name":"Ionic Blog","article_published_time":"2022-09-28T17:25:29+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","type":"image\/png"}],"author":"Liam DeBeasi","twitter_card":"summary_large_image","twitter_creator":"@LiamDeBeasi","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Liam DeBeasi","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Component Playgrounds for Ionic Docs","datePublished":"2022-09-28T17:25:29+00:00","dateModified":"2022-09-28T17:25:29+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs"},"wordCount":233,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","keywords":["Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs","url":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs","name":"Announcing Component Playgrounds for Ionic Docs - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","datePublished":"2022-09-28T17:25:29+00:00","dateModified":"2022-09-28T17:25:29+00:00","description":"Today we are announcing a new way of interacting with Ionic components right in the browser.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-component-playgrounds-for-ionic-docs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Component Playgrounds for Ionic Docs"}]},{"@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\/d314e583cf08e7a28c51e8ffc3d621fa","name":"Liam DeBeasi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","caption":"Liam DeBeasi"},"sameAs":["https:\/\/x.com\/LiamDeBeasi"],"url":"https:\/\/ionic.io\/blog\/author\/liam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/ionic-docs-playground-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4386","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\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4386"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4387"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}