{"id":28310,"date":"2022-06-28T09:07:25","date_gmt":"2022-06-28T09:07:25","guid":{"rendered":"http:\/\/build-an-image-library-using-web-components"},"modified":"2025-03-08T14:20:17","modified_gmt":"2025-03-08T22:20:17","slug":"build-an-image-library-using-web-components","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/","title":{"rendered":"Build an Image Library Using Web Components"},"content":{"rendered":"

Every front-end developer knows about at least one of the popular frameworks like React, Vue, Angular, and Next. They probably know about a few more as well. These frameworks are great for most applications, but there are a few cases you might not want to use them.<\/p>\n

You might need to build an app around performance and don\u2019t want the overhead of a framework or you want to build a framework-agnostic component library. The second case is usually the most common. That\u2019s why we\u2019re going to build a simple image library with web components to upload and display images we host in Cloudinary to show off how this can work.<\/p>\n

What are Web Components<\/h2>\n

Web components are a set of APIs that let you create custom HTML tags to use in your web apps. It\u2019s basically a way for you to build the same functionality you can in a framework, without one. It works with the shadow DOM so you can build hidden DOM trees and only show them when you want. This lets you build things in the background before they get rendered.<\/p>\n

It uses HTML template elements to define the components and you can still use ES modules in your implementation. You don\u2019t need<\/em> a library to work with it because you can build web components with pure HTML and JavaScript, but it does help to have at least a simple library to get things running.<\/p>\n

Initialize the Lit app<\/h2>\n

We do need to set up the folder for the project. So create a new folder called image-library<\/code> and run the following command.<\/p>\n

$ npm i\n<\/code><\/span><\/pre>\n
This will take you through a few questions in the terminal that you can feel free to hit \u201cEnter\u201d all the way through. Now we need to install the Lit<\/a> library to work with web components and build this little app.<\/p>\n
$ npm i lit\n<\/code><\/span><\/pre>\n
Just to see how much smaller this library is compared to the frameworks we\u2019re working to replace, take a look in the node_modules<\/code> and see how small it is. This is a huge reason that web components are still used and considered. That and they can be used in any of the frameworks if you need to!<\/p>\n
You\u2019ll also need a free Cloudinary account to host all of your pictures for this app. So if you don\u2019t have one, go sign up here<\/a>. You\u2019ll need the cloud name<\/code> and upload preset<\/code> values from your console so we can upload images. Go ahead and make a .env<\/code> file at the root of your project. It\u2019ll look something like this:<\/p>\n
CLOUDINARY_UPLOAD_PRESET=cwp7qiwn\nCLOUDINARY_CLOUD_NAME=fjiweegg\n<\/code><\/span><\/pre>\n
Set up the tsconfig<\/h3>\n
We\u2019re going to be using TypeScript throughout this app, so we want to have the configs properly set. Create a new file called tsconfig.json<\/code> at the root of the project and add the following code.<\/p>\n
{\n  \"compilerOptions\"<\/span>: {\n    \"experimentalDecorators\"<\/span>: true<\/span>\n  }\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
This should be all you need for the app to run, but feel free to update this with your favorite rules. Now that everything is set up, let\u2019s continue with the upload component.<\/p>\n
Make the upload component<\/h2>\n
While there is an SDK<\/a> that makes this component for us, we can also write a custom upload widget using a web component to have more control over styles and handling requests. In the image-library<\/code> folder, add a new folder called components<\/code>. In that folder, add a new file called upload-widget.ts<\/code>.<\/p>\n
This is where we\u2019ll define the web component. In this file, add the following code.<\/p>\n
import<\/span> { LitElement, html, css } from<\/span> \"lit\"<\/span>;\nimport<\/span> { customElement } from<\/span> \"lit\/decorators.js\"<\/span>;\n\nasync<\/span> function<\/span> uploadReq<\/span>(e: any<\/span>) <\/span>{\n  const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/image\/upload`<\/span>;\n\n  const<\/span> dataUrl = e.target.value;\n\n  const<\/span> formData = new<\/span> FormData();\n\n  formData.append(\"file\"<\/span>, dataUrl);\n  formData.append(\"upload_preset\"<\/span>, process.env.CLOUDINARY_UPLOAD_PRESET);\n\n  await<\/span> fetch(uploadApi, {\n    method<\/span>: \"POST\"<\/span>,\n    body<\/span>: formData,\n  });\n}\n\n@customElement(\"upload-widget\"<\/span>)\nexport<\/span> class<\/span> UploadWidget<\/span> extends<\/span> LitElement<\/span> <\/span>{\n  static<\/span> styles = css`\n    button<\/span> {\n      font-size<\/span>: 18px<\/span>;\n      padding<\/span>: 2px<\/span> 5px<\/span>;\n    }\n  `<\/span>;\n\n  render() {\n    return<\/span> html`\n      <form<\/span> onSubmit<\/span>=<\/span><\/span>${(e: any) => uploadReq(e)}<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>=\"imageUploader\"<\/span>><\/span>Upload an image here<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>=\"imageUploader\"<\/span> type<\/span>=\"file\"<\/span> \/><\/span>\n        <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Add image<\/button<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    `<\/span>;\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s go through what\u2019s happening in the code here. First, we import a few packages. Next, we define a function called uploadReq<\/code>. This will take an uploaded file and send it to our Cloudinary account. You\u2019ll need the credentials for your account to make the POST request work and you can get those from the Cloudinary dashboard.<\/p>\n
After the uploadReq<\/code> function, we start defining the component. We use the @customElement<\/code> decorator so that our app will know that this is a custom HTML element called upload-widget<\/code>. Then we define some styles for the widget. Lastly, we build the form that will be rendered when this web component is added to the screen. This form lets users upload any image file they want and it will trigger a POST request to Cloudinary.<\/p>\n
Create the image library<\/h2>\n
Now we need to get all of the images from Cloudinary that we want to show in our library. You\u2019ll need a couple more credentials, so go back to your dashboard and get an API key and the corresponding API secret and add those to your .env<\/code> file. So your file should look like this:<\/p>\n
# .env<\/span>\nCLOUDINARY_UPLOAD_PRESET=cwp7qiwn\nCLOUDINARY_CLOUD_NAME=fnoiqrio\nCLOUDINARY_API_KEY=49846468468868<\/span>\nCLOUDINARY_API_SECRET=_8qe84fed8gv4tggwr659\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Now add a new file to the components<\/code> folder called library-display.ts<\/code>. Add the following code to the file:<\/p>\n
\/\/ library-display.ts<\/span>\nimport<\/span> { LitElement, html, css } from<\/span> \"lit\"<\/span>;\nimport<\/span> { customElement } from<\/span> \"lit\/decorators.js\"<\/span>;\n\ninterface Image {\n  title<\/span>: string;\n  url: string;\n}\n\n@customElement(\"library-display\"<\/span>)\nexport<\/span> class<\/span> LibraryDisplay<\/span> extends<\/span> LitElement<\/span> <\/span>{\n  static<\/span> styles = css`\n    .container<\/span> {\n      display<\/span>: flex;\n      justify-content<\/span>: space-between;\n      width<\/span>: 100%<\/span>;\n    }\n    .image-card<\/span> {\n      padding<\/span>: 8px<\/span>;\n      width<\/span>: 250px<\/span>;\n    }\n  `<\/span>;\n\n  images: Image[] = [\n    {\n      title<\/span>: \"dogs\"<\/span>,\n      url<\/span>: `https:\/\/res.cloudinary.com\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/image\/upload\/v1606580778\/3dogs.jpg`<\/span>,\n    },\n    {\n      title<\/span>: \"dogs\"<\/span>,\n      url<\/span>: `https:\/\/res.cloudinary.com\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/image\/upload\/v1606580778\/3dogs.jpg`<\/span>,\n    },\n  ];\n\n  async<\/span> fetchImages() {\n    const<\/span> results = await<\/span> fetch(\n      `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/resources\/image`<\/span>,\n      {\n        headers<\/span>: {\n          Authorization<\/span>: `Basic ${Buffer.from<\/span>(\n            process.env.CLOUDINARY_API_KEY +\n              \":\"<\/span> +\n              process.env.CLOUDINARY_API_SECRET\n          ).toString(\"base64\"<\/span>)}<\/span>`<\/span>,\n        },\n      }\n    ).then((r<\/span>) =><\/span> r.json());\n\n    const<\/span> { resources } = results;\n\n    const<\/span> allImgs: Image[] = resources.map((resource<\/span>) =><\/span> ({\n      url<\/span>: resource.secure_url,\n      title<\/span>: resource.public_id,\n    }));\n\n    this<\/span>.images = allImgs;\n  }\n\n  render() {\n    this<\/span>.fetchImages();\n    return<\/span> html`\n      <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n        <\/span>${this<\/span>.images.length > 0<\/span>\n          ? this<\/span>.images.map(\n              (image) =>\n                html`\n                  <img<\/span>\n                    class<\/span>=\"image-card\"<\/span>\n                    src<\/span>=\"<\/span><\/span><\/span>${image.url}<\/span>\"<\/span>\n                    alt<\/span>=\"<\/span><\/span><\/span>${image.title}<\/span>\"<\/span>\n                  \/><\/span>\n                `<\/span>\n            )\n          : html` <div<\/span>><\/span>No images<\/div<\/span>><\/span> `<\/span>}<\/span>\n      <\/div<\/span>><\/span>\n    `<\/span>;\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start this component off with some imports and a type definition. Then we create a new custom library-display<\/code> component. Next we add some styles and then we seed a few images. Make sure you update the image files to something in your own Cloudinary account!<\/p>\n
Then we define the fetchImages<\/code> method which will retrieve all of the images we upload to Cloudinary and update the images<\/code> array we have in the component. Finally, we call the render<\/code> function which is where we call fetchImages<\/code>, and then create all of the HTML elements to display the images. That\u2019s all for this component. Now we need to update the index.html<\/code> file to use these custom web components.<\/p>\n
Use the web components<\/h2>\n
Open the index.html<\/code> file, delete any existing code and add the following:<\/p>\n
<!-- index.html --><\/span>\n<html<\/span>><\/span>\n  <head<\/span>><\/span>\n    <title<\/span>><\/span>This library though<\/title<\/span>><\/span>\n    <script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\".\/upload-widget.ts\"<\/span>><\/span><\/script<\/span>><\/span>\n    <script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\".\/library-display.ts\"<\/span>><\/span><\/script<\/span>><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <upload-widget<\/span>><\/span><\/upload-widget<\/span>><\/span>\n    <library-display<\/span>><\/span><\/library-display<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We import the components in the <head><\/code> and then use them in the <body><\/code>. That\u2019s all we need to display these to users! So you\u2019ve written a couple of custom web components to handle this whole library for you.<\/p>\n
\"finished<\/p>\n
Finished code<\/h2>\n
You can check out the complete code for this project in the image-library<\/code> folder of this repo<\/a>. You can also check it out in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cheadless-lake-xgmtfy\u201d\nid=\u201cheadless-lake-xgmtfy\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Now that you\u2019ve seen what it\u2019s like to work with web components using Lit, maybe you can convince your team to stray away from those big frameworks. Depending on the type of application, it can be easier to make up your own internal framework as you build.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28311,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,371],"class_list":["post-28310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-under-review"],"acf":[],"yoast_head":"\nBuild an Image Library Using Web Components<\/title>\n<meta name=\"description\" content=\"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build an Image Library Using Web Components\" \/>\n<meta property=\"og:description\" content=\"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T09:07:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-08T22:20:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2896\" \/>\n\t<meta property=\"og:image:height\" content=\"1944\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build an Image Library Using Web Components\",\"datePublished\":\"2022-06-28T09:07:25+00:00\",\"dateModified\":\"2025-03-08T22:20:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\",\"name\":\"Build an Image Library Using Web Components\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA\",\"datePublished\":\"2022-06-28T09:07:25+00:00\",\"dateModified\":\"2025-03-08T22:20:17+00:00\",\"description\":\"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA\",\"width\":2896,\"height\":1944},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build an Image Library Using Web Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build an Image Library Using Web Components","description":"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.","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:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/","og_locale":"en_US","og_type":"article","og_title":"Build an Image Library Using Web Components","og_description":"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-28T09:07:25+00:00","article_modified_time":"2025-03-08T22:20:17+00:00","og_image":[{"width":2896,"height":1944,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/"},"author":{"name":"","@id":""},"headline":"Build an Image Library Using Web Components","datePublished":"2022-06-28T09:07:25+00:00","dateModified":"2025-03-08T22:20:17+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/","name":"Build an Image Library Using Web Components","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA","datePublished":"2022-06-28T09:07:25+00:00","dateModified":"2025-03-08T22:20:17+00:00","description":"Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA","width":2896,"height":1944},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-library-using-web-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build an Image Library Using Web Components"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924842\/Web_Assets\/blog\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5\/3b839500e8d37f75b80e4b7e3fab0c076d8d6d49-2896x1944-1_28311ae4c5.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28310"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28310\/revisions"}],"predecessor-version":[{"id":37153,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28310\/revisions\/37153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28311"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}