import Grid from '@mui/material/Unstable_Grid2'; import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider"; import ExampleCard from "@site/src/components/common/ExampleCard";

Examples

You can find how to use ffmpeg.wasm with frameworks here. :smile:

:::caution Do remember to run npm run build in the root of the repository before trying any of the examples. :::

<MuiThemeProvider> <Grid container rowSpacing={1} columnSpacing={1}> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/vanilla.png" title="Vanilla JavaScript" desc="Plain JavaScript" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vanilla-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/react-vite.png" title="React + Vite" desc="React with Vite (multithread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/react-vite-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/vue-vite.png" title="Vue + Vite" desc="Vue with Vite (multithread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vue-vite-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/angular.png" title="Angular" desc="Angular (multithread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/angular-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/nextjs.png" title="Next.js" desc="Next.js (single thread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/nextjs-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/sveltekit-vite.png" title="SvelteKit + Vite" desc="SvelteKit with Vite (multithread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-app" /> </Grid> <Grid xs={12} sm={6} md={6} lg={6} xl={4}> <ExampleCard img="/img/solidstart-vite.png" title="SolidStart + Vite" desc="SolidStart with Vite (multithread version)" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/solidstart-app" /> </Grid> </Grid> </MuiThemeProvider>