![Cecilia Cong](https://web.dev/images/authors/cecilia-cong.jpg) Cecilia Cong [LinkedIn](https://www.linkedin.com/in/cecilia-cong-697368237) ![Thomas Steiner](https://web.dev/images/authors/thomassteiner.jpg) Thomas Steiner [GitHub](https://github.com/tomayac) [LinkedIn](https://www.linkedin.com/in/thomassteinerlinkedin) [Mastodon](https://toot.cafe/@tomayac) [Bluesky](https://bsky.app/profile/tomayac.com) [Homepage](https://blog.tomayac.com/)

<br />

As one of the top 10 most downloaded apps on Android in 2023,
[CapCut](https://www.capcut.com) is one of the most popular video editing apps available
for mobile. It's also completely free. The all-in-one video editing tool offers
numerous effects and editing features, like speech-to-text and image upscaling,
as well as a fully stocked media library to help users create high-quality
videos and graphics quickly and smoothly. When CapCut users finish creating their
content, they can publish it to their social media platform of choice with just
one click, including TikTok, YouTube, Instagram, and Facebook.

CapCut focuses on providing its users with a great experience by enabling them
to create content on their terms. Recently, the CapCut team has invested in
developing an advanced web application for its desktop users that enhances the
user experience. CapCut online has a user-friendly interface that offers
practical features for both personal and business users, making it easier to
create content and collaborate across teams. This update enables users to access
the powerful video editing software directly from their preferred browser,
providing a more convenient and flexible editing experience.

## Web apps lower the entry barrier

CapCut launched a web application to give its users more ways to access its
video editing platform, adding to their existing Android and iOS mobile apps.
Providing more points of entry lets users choose the platform that works best
for them, whether that be downloading the mobile app from the Google Play Store,
installing it as a web application through their favorite browser, or using it
directly in a browser tab. The team felt that having a desktop app that also
works in the browser could potentially increase retention and improve overall
satisfaction of their users.

Thanks to the suite of technologies available to developers, it was straightforward for
CapCut to translate and transfer its platform-specific mobile application into an equally
powerful web version. Web platform technologies like WebAssembly have gained
significant popularity with developers over the past few years, allowing them to
make powerful web apps faster than before. And since most of CapCut's editing
engine is written in C++, its developers could use Emscripten to port the
application to a desktop web version.

![Quote by James Williams from CapCut saying: We used WebAssembly and WebCodecs to efficiently port many of our critical features from the native codebase to the web without compromising on
performance or functionality.](https://web.dev/static/case-studies/capcut/capcutprrevie--3rs70uetvw6.png)

## WebAssembly

With WebAssembly, CapCut developers successfully transferred more than one
million video and graphic templates to the new web application. Emscripten's
powerful support for compiling C and C++ code to WebAssembly allowed the CapCut
to efficiently share code between the platform-specific and web apps, helping them port
some of CapCut's most important functions to the new platform, including
customized video effects and video editing.

CapCut has many special effects that run algorithms in the browser, which can
bottleneck video rendering during real-time processing. Thanks to
WebAssemly's parallel processing function known as Single Instruction, Multiple
Data ([SIMD](https://emscripten.org/docs/porting/simd.html)), CapCut developers
improved the app's processing performance by nearly 300% compared to non-SIMD
solutions, better preventing bottlenecks from occurring.

Exception Handling (EH) is one of the basic capabilities of C++, but support for
EH in Emscripten was incomplete. Emscripten provides a set of EH mechanisms
[based on JavaScript](https://emscripten.org/docs/porting/exceptions.html#emscripten-javascript-based-exception-support),
but these can negatively impact an app's runtime performance and increase its
package size. WebAssembly's EH standard circumvents this issue. Switching to
[WebAssembly for EH](https://emscripten.org/docs/porting/exceptions.html#webassembly-exception-handling-based-support)
reduced the package size of CapCut's web app by 15% while making the code more
performant.

## WebCodecs

For video editing, CapCut must decode the videos that users input into images
and then display them on the editing canvas below the video preview. Even with a
SIMD-optimized decoder, decoding a 4K image to the editing canvas on a
high-performance computer takes tens of milliseconds, meaning that decoding
multiple tracks of video simultaneously requires a lot of power.

Using
[WebCodecs](https://developer.mozilla.org/docs/Web/API/WebCodecs_API),
CapCut integrated hardware-accelerated encoding and decoding, improving audio
and video processing speed by nearly 300%. With the greatly improved
performance, CapCut now supports multiple simultaneous 4K streams. Additionally,
WebCodecs allowed support for more video formats, such as H264, HEVC, VP8, VP9,
and AV1.

![Stats about the CapCut app: More than one million templates transferred to CapCut's web app. Up to 300% better processing performance. 40% increase in supported video formats.](https://web.dev/static/case-studies/capcut/capcutprrevie--wg4t38qap4.png)

## Harnessing the full power of a web application

The CapCut team began porting the platform-specific application over to the web at the
beginning of 2022. In August of that year, CapCut officially launched its first
web-based version of the app for desktop. Using progressive web app (PWA)
technologies, CapCut enabled
[installation through the browser](https://web.dev/articles/install-criteria.md.txt).
After launching its new web
app using these technologies, the CapCut team saw an **83% improvement in SEO
traffic**.

![Installing the CapCut app.](https://web.dev/static/case-studies/capcut/capcutprrevie--9qbqw2zg9wk.gif)

Bringing CapCut to the web also allowed developers to make the most of their
users' experience by combining powerful Google features with the application.
Within one month of launch, many users were able to sign in using
[Google One Tap sign in](https://developers.google.com/identity/gsi/web/guides/display-google-one-tap)
function, streamlining the sign in process by allowing them to use their
existing Google credentials instead of manually typing in their information.

## Expanding possibilities with the web

Making CapCut available on the web created new possibilities for millions of
users, providing them more ways to access the software. Thanks to WebAssembly,
WebCodecs, and the other modern web technologies available for building advanced
web apps, CapCut developers successfully implemented a one-to-one port that
maintained the app's full power and performance.

## Learn more

Discover how to bring your applications to the web using
[WebAssembly](https://webassembly.org/) and
[WebCodecs](https://developer.mozilla.org/docs/Web/API/WebCodecs_API).

![CapCut video editor.](https://web.dev/static/case-studies/capcut/capcutprrevie--e98kbtwqdk5.png)