Feature support

// For usage information, see the README.md file.
import { Button, Rows, Text, Title } from "@canva/app-ui-kit";

type HomePageProps = {
  enterInteractionPage: () => void;
};

/**
 * Home Page component containing page controls
 **/
export const HomePage = (props: HomePageProps) => {
  return (
    <Rows spacing="1.5u">
      <Title>Home page</Title>
      <Text>
        This example app demonstrates how to toggle interactive UI based on the
        currently available features.
      </Text>
      <Button variant="primary" onClick={props.enterInteractionPage}>
        Enter interactions page
      </Button>
    </Rows>
  );
};

// For usage information, see the README.md file.
import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";
import type { DesignEditorIntent } from "@canva/intents/design";
import { prepareDesignEditor } from "@canva/intents/design";

async function render() {
  const root = createRoot(document.getElementById("root") as Element);

  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

const designEditor: DesignEditorIntent = { render };
prepareDesignEditor(designEditor);

// Hot Module Replacement for development (automatically reloads the app when changes are made)
if (module.hot) {
  module.hot.accept("./app", render);
}

// For usage information, see the README.md file.
import { Alert, Button, Rows } from "@canva/app-ui-kit";
import { addElementAtPoint, addPage } from "@canva/design";

type InteractionPageProps = {
  goBack: () => void;
  isInteractionSupported: boolean;
};

/**
 * A page component containing various buttons to interact with the design.
 * Demonstrates how to handle feature availability by disabling UI elements
 * and showing appropriate feedback when features aren't supported.
 **/
export const InteractionPage = (props: InteractionPageProps) => {
  return (
    <Rows spacing="1.5u">
      {!props.isInteractionSupported && <UnsupportedAlert />}
      <Button variant="primary" onClick={props.goBack}>
        Back
      </Button>
      <Button
        disabled={!props.isInteractionSupported}
        variant="secondary"
        onClick={() => addElementAtPoint({ type: "shape", ...shape })}
      >
        Add a shape at a point
      </Button>
      <Button
        disabled={!props.isInteractionSupported}
        variant="secondary"
        onClick={() =>
          addElementAtPoint({
            type: "group",
            children: [
              {
                type: "shape",
                ...shape,
                left: 0,
                top: 0,
                width: 200,
                height: "auto",
              },
              {
                type: "embed",
                url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
                left: 300,
                top: 100,
                width: 200,
                height: "auto",
              },
            ],
          })
        }
      >
        Add a group at a point
      </Button>
      <Button
        disabled={!props.isInteractionSupported}
        variant="secondary"
        onClick={() => addPage()}
      >
        Add a new page
      </Button>
    </Rows>
  );
};

// Simple shape configuration for demonstration purposes.
// In production apps, this would typically be more dynamic or user-configurable.
const shape = {
  paths: [
    {
      d: "M 0 0 H 100 V 100 H 0 L 0 0",
      fill: {
        dropTarget: false,
        color: "#ff0099",
      },
    },
  ],
  viewBox: {
    width: 100,
    height: 100,
    top: 0,
    left: 0,
  },
};

const UnsupportedAlert = () => (
  <Alert tone="warn" title="Shapes, Groups and Pages can't be added to Docs.">
    Try using this app in a different design type.
  </Alert>
);

# Feature support

Demonstrates how to detect and handle feature availability across different design types and contexts. Shows dynamic feature detection, graceful degradation, and context-aware UI rendering using the Canva Apps SDK's feature support system.

For API reference docs and instructions on running this example, see: <https://www.canva.dev/docs/apps/examples/feature-support/>.

Related examples: This pattern should be used across all apps to ensure proper functionality across different design contexts.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Feature detection patterns are simplified for demonstration purposes only. Production apps must implement feature detection for all functionality that depends on design context or user permissions
- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
- The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx