---
title: 'Integration'
category: 'getting-started'
component-features:
  - Automatic optimization of Cumulative Layout Shift (CLS)
  - Advanced picture tag helper
  - Automatic low-quality image placeholders (LQIP)
  - Transitions
  - Automatic zoomed version of your image on mouse over
  - And much more!
position: 3
---

# Integration

Now that you’ve [set up your account](/docs/getting-started/setup) and discovered what are [workspaces](/docs/getting-started/setup#create-a-workspace), [domains](/docs/getting-started/setup#create-a-domain), and [paths](/docs/getting-started/setup#create-a-path), let’s see how to integrate TwicPics into your website or apps.

## Components vs. Native vs. API

Depending on your needs and technical environment, you can choose one of our client libraries to integrate TwicPics into your project or directly use TwicPics' URL based-API:

1. **[TwicPics Components](#twicpics-components)** — If your website or app is powered by a JS framework such as React, Vue.js, Svelte, Angular or a meta-framework such as Next.js, Nuxt, Gatsby, Sveltekit, TwicPics Components are the option you should consider.
2. **[TwicPics Native](#twicpics-native)** — You're working on a native HTML/CSS/JS frontend integration and want to delegate image sizing complexity to TwicPics. This is the best option for you.
3. **[TwicPics URL-based API](#url-based-api)** — You want to keep control of your frontend integration or have a specific use case where Javascript is not an option, then you can take advantage of the TwicPics URL-based API.

<doc-details title="What's the difference between TwicPics Components and TwicPics Native?">The TwicPics Components embed our vanilla JS library as part of their operation. So, whether you use the TwicPics Components with your frontend JS framework or directly use TwicPics Native in your HTML pages, you will benefit from context-aware optimizations for your media, e.g. automatic resizing, lazy-loading, or DPR management.
<br/><br/>However, **the TwicPics Components are much more powerful!** They provide optimizations to make your integration work even more straightforward:<features-list :items="component-features"></features-list>
</doc-details>

## TwicPics Components

**TwicPics Components** is a **collection of web components** that make it dead easy to unleash the power of TwicPics in your projects.

Whether you need to display a content image, showcase a short video, or ensure optimal performance with _Large Contentful Paint_ (LCP) and _Cumulative Layout Shift_ (CLS) care, TwicPics Components has you covered.

TwicPics Components provides smart drop-in replacements for the `<img>`, `<video>`, and `<picture>` tags.

<illustration src="docs/all-components.png" width="1050" height="351" alt="TwicPics Components" placeholder="none"></illustration>

The components are available for React, Next.js, Gatsby, Vue.js, NuxtJS, Agular, Svelte, SvelteKit, React Native, Flutter, and Web components.

→ [Continue with TwicPics Components](/docs/essentials/components)

## TwicPics Native

To take advantage of **TwicPics Native**, you must integrate the TwicPics vanilla JS script to optimize your media in your HTML pages.

TwicPics Native is reactive. It manipulates the DOM in real-time based on the user's context: it allows lazy loading together with the automatic and dynamic optimization of your assets according to your CSS rules, the browser, and the bandwidth.

Lightweight and non-intrusive, this small piece of JavaScript only handles elements you specifically marked beforehand thanks to its `data-twic-*` HTML attributes.

→  [Continue with TwicPics Native](/docs/essentials/native)

## TwicPics URL-based API

**TwicPics URL-based API** is the first layer on top of the TwicPics processing engine. It offers dozens of transformations and unique features to manipulate your visual assets manually. Whether you want to crop, resize, flip, turn, trim, colorize, format, or zoom, you'll find all the tools you need to tailor your images and videos.

→  [Continue with TwicPics API](/docs/essentials/api)