Integration
Now that you’ve set up your account and discovered what are workspaces, domains, and paths, 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:
- 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.
- 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.
- TwicPics 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.
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.
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
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
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.
