@uploadcare/blocks/README.md

Building blocks for Uploadcare products integration

[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/blocks)

# Blocks: web components for the Uploadcare platform integrations

## 💎 Core concepts

- All in one place: here, you can find everything you need to build a modern and reliable web application with Uploadcare on board.
- Modern technologies: web components, service workers, wasm, and other cutting edge web standards are ready to show their power.
- Type safety with a JSDoc declaration and TypeScript static analysis.
- Modern ESM-level code sharing.
- The build stage is unnecessary for development: use the code directly in any modern browser or Node.js.
- Minimum of external dependencies: security audit is not expensive.
- Fast and secure.
- We try to be as close to the native web platform as possible and not force you to use any specific development environment tools.

## 📦 What’s in the box?

- [File uploading solutions](/solutions/file-uploader/) — file uploader implementations for the most frequent use cases.
- [Blocks to build custom solutions](/blocks/) — build your integrations with a simple HTML and CSS.
- [Adaptive image](/solutions/adaptive-image/) — all you need to distribute your web images efficiently.
- [Cloud image editor](/solutions/cloud-image-editor/) — tune your pictures with our CDN image processing right after they're uploaded.
- Soon: web components for media content representation: audio, video, image galleries, etc.

## ⚙️ Installation and start

Installation process is easy and takes minutes. See the [installation guide](/get-started/installation/).

## Typescript support

We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) for TypeScript static analysis support during development.

Additionally, we provide type definitions ([\*.d.ts files](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html)) for the TypeScript projects in our packages.

Check the [JSDoc Reference](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) page in TypeScript official documentation.

## Supported browsers

Blocks are supported and tested in all major modern desktop and mobile browsers:

- Chrome
- Firefox
- Safari
- Edge
- Opera

Internet Explorer is outdated and not supported [anymore](https://uploadcare.com/blog/uploadcare-stops-internet-explorer-support/).

## Frameworks support

Blocks are a framework-agnostic solution, so you can use it with any runtime you like. We have prepared *examples* for the most popular frameworks.
<br/>

- [React](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/react-uploader)
- [Vue](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/vue-uploader)
- [Angular](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/angular-uploader)
- [Svelte](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/svelte-uploader)

## 🚀 Contribution

Issues and PRs are welcome. You can provide your feedback or drop us a support request at hello@uploadcare.com.

1. Clone repository: `git clone git@github.com:uploadcare/blocks.git ./`.
2. Run dependencies setup: `npm install`.
3. Start local dev-server: `npm run dev`.

## [Browse documentation and live examples](/get-started/installation/) ➡️

> All the source code in demos is accessible and works in raw mode (as is), you can use your browser developer tools to discover it in detail.