{"componentChunkName":"component---src-templates-tag-page-tsx","path":"/tag/web-components/","result":{"data":{"allContentfulCategory":{"edges":[{"node":{"contentful_id":"2gOurgpDj1BasZvVToN13z","slug":"tiny-sparks","title":"The Tiny Way","description":{"description":"Understand the Tiny Way - our heritage, values-driven approach and thinking through stories from and about Tiny people and culture, technology and the world at large."}}},{"node":{"contentful_id":"2a3w396SgR2Fl1ep4eYu0w","slug":"product-management","title":"Product-Led Growth","description":{"description":"Everything from product roadmaps and market fit, through customer acquisition and onboarding to retention and product-led growth, can be found here to help you grow your brand, company and product."}}},{"node":{"contentful_id":"T7VZcLaLRpt6XlNLJPLmL","slug":"wysiwyg-world","title":"World of WYSIWYG","description":{"description":"Learn about the WYSIWYG world of rich text editors - the power behind the democratization of content creation, web applications and SaaS projects."}}},{"node":{"contentful_id":"6HNYGjOUjHzUS2gXBnMVXn","slug":"design-and-ux","title":"Content Marketing & Design","description":{"description":"Be at the forefront of content design trends, get inspiration for your projects and learn new ways to use content marketing strategies and content-led approaches that deliver brilliant user experiences."}}},{"node":{"contentful_id":"6XFMYLCe4AEYIDazkjGFvb","slug":"engineering","title":"Developer Insights","description":{"description":"The perfect source for all web application and software developers, as well as engineering teams who want to stay up to date with the latest development tools, developer insights, leading edge thinking and experiments."}}},{"node":{"contentful_id":"24ufWIsR0ImSvxvvIrutB5","slug":"open-source","title":"Open Source","description":{"description":"Having a vibrant open source community is a vital part of TinyMCE, so you'll find important open source contribution news here – both from our own community, and from other open source projects in global communities."}}},{"node":{"contentful_id":"2fLgNI8yOMeZHNl1nSQ11","slug":"how-tos-and-tutorials","title":"How-to Use TinyMCE","description":{"description":"Learn how-to use TinyMCE rich text editor, all in one place – here's our set-up tips, tricks, FAQs, updates and new releases, customisations, ideas on things to build and easy migration from other text editing platforms."}}}]},"allContentfulBlogPost":{"edges":[{"node":{"title":"How to Resize an Image Using HTML","slug":"how-to-resize-image-html","featured":true,"lastUpdated":"May 20th, 2025","description":{"description":"<p>Images are essential for a website's visual appeal. Learn how to resize images using HTML, explore various techniques, and understand their impact on performance and responsiveness.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Images are essential for a website's visual appeal. Learn how to resize images using HTML, explore various techniques, and understand their impact on performance and responsiveness."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"How to resize an image using HTML","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAALABQDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAgH/8QAJhAAAQQBAwMEAwAAAAAAAAAAAQIDBBEFAAYhBxIxCBMUQVFigf/EABgBAAMBAQAAAAAAAAAAAAAAAAECAwUH/8QAIREAAgIBAwUBAAAAAAAAAAAAAQIAEQMhIjESE1Jh0YH/2gAMAwEAAhEDEQA/AIn6ObD2/wBUMmqBPdaxKo0QOOynnjTq+6qqxXGuq5Gy4iTdgnTTj7MkstClqvfPyaRkPTdsrG/GM3PxcdFeUpLmQkOqS0yAkkKsKPmhVj70uPOS2+69AXFJJG2TlutrGwMy7FwMyVkIDNtiRJbQkrUFEEp7SbQeCCeefGtI9s0Uv95hA84VUt7HTPcjOrYWCk22qvxqYUOtMLgUkGxEvZSZKeccdkurUskqtRo/zUwioAqjQRetn3MdTDrAKUKoWoEk1+x08E//2Q==","aspectRatio":1.7824074074074074,"src":"//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=739&h=415&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1109&h=622&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1478&h=829&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1925&h=1080&q=50&fit=scale 1925w","srcWebp":"//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=739&h=415&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1109&h=622&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1478&h=829&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/3nsCkUnsGSC4cIFeBStj4E/50972457bf6eeb50a7db85d8099b983c/How_to_resize_an_image_using_HTML.jpg?w=1925&h=1080&q=50&fm=webp&fit=scale 1925w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Coco Poley","slug":"coco-poley"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to resize an image in HTML - 3 methods for image resizing | TinyMCE"},"metaDescription":{"metaDescription":"Images are essential for a website's visual appeal. Learn how to resize images using HTML, explore various techniques, and understand their impact on performance and responsiveness."}}},{"node":{"title":"How to Resize an Image Using CSS: Best Three Methods","slug":"how-to-resize-image-css","featured":false,"lastUpdated":"Apr 22nd, 2025","description":{"description":"<p>Images play a crucial role in the aesthetics of a website. Learn how to resize images using CSS, explore different methods, and test their responsiveness.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Images play a crucial role in the aesthetics of a website. Learn how to resize images using CSS, explore different methods, and test their responsiveness."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"Resizing Images in CSS | TinyMCE","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAALABQDAREAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAggDBAf/xAAnEAABAwIEBgMBAAAAAAAAAAABAgMEBREABhIhBxMUFTFhCCRxof/EABcBAQEBAQAAAAAAAAAAAAAAAAIBBQf/xAAhEQEAAgICAgIDAAAAAAAAAAABAhEAAyExIoESUWHB0f/aAAwDAQACEQMRAD8ASPhDkWicTamuDMSITkeMHHHy4TzFareLi22Oq7JbNSt2PXHWZNxoor33/M0mpfHDJlKZjuTK9Dhx3lKSuSuQfrgJJBUAo73AAvtvg696y87r8BeFWuMXbN0WJSat0tLVUFRkNi/cmUNO6rm9gkkafBB940b0zCWpU9frERSzYU+8pPuuRn18lxbN7X5aim+3rBCznAOD3OYkEdW+QfILhI/pxfjH6yvPeSyZTtQLb8lxT7yk2Ljh1E2JA3/MCMYw8YlGSSra5//Z","aspectRatio":1.7824074074074074,"src":"//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=739&h=415&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1109&h=622&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1478&h=829&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1925&h=1080&q=50&fit=scale 1925w","srcWebp":"//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=739&h=415&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1109&h=622&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1478&h=829&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/KgcEIHzrXaNiaDPczTzs9/28ee4361dffa530fe0081b852906ed30/Resizing_Images_in_CSS.jpg?w=1925&h=1080&q=50&fm=webp&fit=scale 1925w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Coco Poley","slug":"coco-poley"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to Resize an Image Using CSS - Best 3 Methods | TinyMCE"},"metaDescription":{"metaDescription":"Images play a crucial role in the aesthetics of a website. Learn how to resize images using CSS, explore different methods, and test their responsiveness."}}},{"node":{"title":"Web components: Under pressure","slug":"best-rich-text-editors-for-web-components","featured":false,"lastUpdated":"Aug 8th, 2022","description":{"description":"<p>Web components for html help save time by providing custom html components you can reuse &ndash; find out which rich text editors support web components.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Web components for html help save time by providing custom html components you can reuse – find out which rich text editors support web components."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"web components logo on a background that builds up, representing reused components","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,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","aspectRatio":1.7767441860465116,"src":"//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=739&h=416&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1109&h=624&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1478&h=832&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1528&h=860&q=50&fit=scale 1528w","srcWebp":"//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=739&h=416&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1109&h=624&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1478&h=832&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6wyxRSU40vH3iw4i700ABS/844549d884f28238834ef1f45da9be7d/img-underpress-webc-logo.jpg?w=1528&h=860&q=50&fm=webp&fit=scale 1528w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Joe Robinson","slug":"joseph-robinson"},"category":{"title":"World of WYSIWYG","slug":"wysiwyg-world"},"metaTitle":{"metaTitle":"Best rich text editors for Web components compared | TinyMCE"},"metaDescription":{"metaDescription":"Web components for html help save time by providing custom html components you can reuse. Web components are supported by only a few rich text editors"}}},{"node":{"title":"How to integrate a rich text editor with web components","slug":"tinymce-for-web-components","featured":false,"lastUpdated":"Jul 26th, 2022","description":{"description":"<p>Get started with our TinyMCE Web Component integration for rich text editing in just two lines of code. It is compatible with open source TinyMCE, Tiny Cloud, and TinyMCE commercial self-hosted offerings.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Get started with our TinyMCE Web Component integration for rich text editing in just two lines of code. It is compatible with open source TinyMCE, Tiny Cloud, and TinyMCE commercial self-hosted offerings."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"Web Components logo","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAMAAAAhxq8pAAAAvVBMVEX////i4uLe3t3f3+Hf4+3f5O/i6fLV1dUAAAAAAGsATKYAZrMOer/U3+75+flvb29UVmCSmr2SocdSf7l7pM/8/f68vLzd3d29yN4AaLYAhcjG2u/s7Ow7OzukpKT5+f6Dpc4AfcBRnc7u8/j///nQ5I6kxkylxXzx9fLe3t7k88G94gC63Szj78h2elbo9JHp9pLO6l623wDF5IP9/vyquQDd8QDT6gDI4yfr9NPc297l5t/3/OD1+uD0+eOOV1mOAAAAa0lEQVQY02NgoApgZGJmYWVDFWPn4ODk4ubhRRbj4+cQEBQS5hYRRRIU4+AQZ2CQkJSSRojJyHLIASl5BUUlZXRBFVU1dQ0U7ZoMDFraOrqoFunpGxgaGZugOcnUzNzCEs3xVtY2tnbUCQgAvE0IlzIxZj8AAAAASUVORK5CYII=","aspectRatio":1.2173913043478262,"src":"//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=185&h=152&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=370&h=304&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=739&h=607&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=896&h=736&q=50&fit=scale 896w","srcWebp":"//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=185&h=152&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=370&h=304&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=739&h=607&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/KLZ1ECR0U13dF5nzZhAe9/2404c147080c136949e42ffabef0efa7/Image_default_WebComponents.png?w=896&h=736&q=50&fm=webp&fit=scale 896w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"James Walker","slug":"james-walker"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to integrate rich text editor with web components | TinyMCE"},"metaDescription":{"metaDescription":"Get started with our Web Component for rich text editing in just two lines of code. Available for free under an Apache 2.0 license"}}}]}},"pageContext":{"limit":12,"skip":0,"numPages":1,"currentPage":1,"slug":"web-components","title":"Web Components","page":"tag","banner":{"description":"Deploy TinyMCE in just 6 lines of code","buttonLabel":"Get your Cloud API Key","externalLink":"https://www.tiny.cloud/get-tiny/","section":["category","author","posts","home","tag"]},"bannerForTag":{"bannerDescription":"See how TinyMCE works with WebComponents for faster development","bannerButtonLabel":"Explore Web Component integrations","bannerExternalLink":"https://www.tiny.cloud/solutions/wysiwyg-web-components-rich-text-editor/","bannerIsEnabled":true}}},"staticQueryHashes":["2492987505","740350947"]}