On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.
App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)CustomizedSelect(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)TimeInput(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TruncatedText(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)

DraggableEmbed

API reference for the DraggableEmbed component.

The DraggableEmbed component has been deprecated. Instead, use the EmbedCard(opens in a new tab or window) component.

Usage

import React from "react";
import { DraggableEmbed } from "components/draggable_embed";
export function App() {
return (
<DraggableEmbed
embedUrl="https://www.youtube.com/embed/L3MtFGWRXAA"
previewUrl="https://www.canva.dev/example-assets/images/puppyhood.jpg"
previewSize={{ width: 320, height: 180 }}
title="Heartwarming Chatter: Adorable Conversation with a Puppy"
subtitle="Puppyhood"
/>
);
}
TSX

Props

embedUrlstring
Required

The URL of the embeddable media.

This URL must be supported by Iframely. To learn more, see What URLs to send to Iframely(opens in a new tab or window).

previewUrlstring
Required

The URL of a thumbnail image.

previewSizestring
Required

The dimensions of the preview image, in pixels.

titlestring
Required

A human-readable title for the embed.

subtitlestring
Optional

A human-readable subtitle for the embed.