Website • Quick Start • Docs • Blog • Discord • Twitter
# 📦 Uploadcare Blocks: stack-agnostic library for uploading, processing, and editing images on-the-fly [![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/blocks) [![GitHub Actions](https://github.com/uploadcare/blocks/workflows/checks/badge.svg)](https://github.com/uploadcare/blocks/actions?query=workflow%3ABuild+branch%3Amaster) [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) _Uploadcare Blocks_ is a powerful JavaScript library for creating custom file-handling services. It includes various interactive and customizable UI components to enhance users' file uploading and processing experience. As a bonus, you receive all the [Uploadcare's](https://uploadcare.com/?ref=github-readme) versatile file-handling capabilities, including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery-network/?ref=github-readme), [MIME-type filtering](https://uploadcare.com/docs/moderation/#file-types/?ref=github-readme), [signed uploads](https://uploadcare.com/docs/security/secure-uploads/?ref=github-readme), and [even more](<(https://uploadcare.com/features/?ref=github-readme)>). See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)! ## Core features - [File Uploader](https://uploadcare.com/docs/file-uploader/?ref=github-readme) — implement file-managing functionality with minimal or comprehensive interfaces in just a few minutes. - [Adaptive Images](https://uploadcare.com/docs/adaptive-image/?ref=github-readme) — build responsive user interfaces that adapt to various screen sizes and devices, ensuring a performant experience across platforms. - [Cloud Image Editor](https://uploadcare.com/docs/file-uploader/image-editor/?ref=github-readme) — edit, transform, and process images right from a browser on-the-fly. - [Uploadcare power and features](https://uploadcare.com/features/?ref=github-readme) — upload, process, deliver, and manage images without building custom infrastructure. * **Coming soon!** Web Components for any media content management like audio, video, image galleries, and more. ## Why Uploadcare Blocks? ### Rapid integration We provide a ready-to-use set of UI components for file handling. It saves you valuable development time and effort, allowing you to focus on other core aspects of your application. You even don't need to build a stage while developing — just run the code directly from the browser. ### Cross-platform compatibility Uploadcare Blocks are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments. ### Developer-friendly The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. _Uploadcare Blocks_ is designed lightweight with minimum external dependencies for a cheap security audit. ### Typescript support We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) and type definitions ([\*.d.ts files](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html)) for TypeScript static analysis support during development. ## 🚀 Getting started ### From CDN 1. Connect Uploadcare Blocks directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package: ```html ``` 2. Start using Uploadcare Blocks in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/blocks/releases)): ```html