Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu

At (the ongoing) Adobe MAX 2021, Adobe announced that Photoshop and Illustrator are coming to the web, with Photoshop already in beta. Your collaborators can open and view your work in the browser and provide feedback. You’ll also be able to make basic edits without having to download or launch the apps. It’s not the …


This content originally appeared on Bram.us and was authored by Bramus!

At (the ongoing) Adobe MAX 2021, Adobe announced that Photoshop and Illustrator are coming to the web, with Photoshop already in beta.

Your collaborators can open and view your work in the browser and provide feedback. You’ll also be able to make basic edits without having to download or launch the apps.

It’s not the entire Photoshop functionality that you get there, but from what I can tell the “basic edits” as they call it will let you do more than enough. Does require a Photoshop subscription though.

Adobe Blog: Bringing teams together in Creative Cloud at Adobe MAX 2021 →
Photoshop on the Web Beta FAQ →

~

Over at web.dev there’s a writeup on how Photoshop on the web came to be. The heavy lifting was done by Emscripten:

WebAssembly and its C++ toolchain Emscripten have been the key to unlocking Photoshop’s ability to come to the web, as it meant that Adobe would not have to start from scratch, but could leverage their existing Photoshop codebase.

For the UI, Adobe went all-in on Web Components, powered by Lit:

The entire Photoshop app is built using Lit-based Web Components. Leaning on the browser’s built-in component model and Shadow DOM encapsulation, the team found it easy to cleanly integrate a few “islands” of React code provided by other Adobe teams.

The UI Elements themselves are based on Spectrum, Adobe’s design system. Here’s an example implementation of Spectrum’s Color Wheel:

See the Pen Spectrum Web Components: sp-color-wheel by Bramus (@bramus) on CodePen.

Photoshop’s journey to the web →
Spectrum Web Components →

~

Photoshop on the web is only available in Chromium-based browsers right now (Chrome, Edge, …) and Firefox support is coming. No mention of Safari. The fact that it only works in Chromium right now is due to the use of very recent Fugu APIs.

🤔 Project Fugu?

Project Fugu 🐡 is an effort to close gaps in the web's capabilities enabling new classes of applications to run on the web. It's also known as The Web Capabilities Project.

Example Fugu APIs are the Shape Detection API (Face and Text), Native File System API, Contact Picker API, Web NFC API, Web Serial API, …

(more)

My guess is they make heavy use of the The Asynchronous Clipboard API, The File System Access API, and possibly many others.

I hope this release — which is a huge milestone for Fugu — gives the Safari Team(’s Tech Managers) a little push to also put these Fugu APIs on the roadmap, because one must admit: “Safari can’t run Photoshop on the web” doesn’t sound very good.

Note: The Safari/WebKit team has been crushing it lately, and they are actively hiring … so I’m getting my hopes up here to be honest 😊


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2022-06-29T13:14:26+00:00) » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu. Retrieved from https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/.
MLA
" » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu." Bramus! | Sciencx - Tuesday October 26, 2021, https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/
HARVARD
Bramus! | Sciencx Tuesday October 26, 2021 » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu., viewed 2022-06-29T13:14:26+00:00,<https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/>
VANCOUVER
Bramus! | Sciencx - » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu. [Internet]. [Accessed 2022-06-29T13:14:26+00:00]. Available from: https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/
CHICAGO
" » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu." Bramus! | Sciencx - Accessed 2022-06-29T13:14:26+00:00. https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/
IEEE
" » Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/. [Accessed: 2022-06-29T13:14:26+00:00]
rf:citation
» Adobe Photoshop in the browser thanks to Emscripten, Web Components, and Project Fugu | Bramus! | Sciencx | https://www.scien.cx/2021/10/26/adobe-photoshop-in-the-browser-thanks-to-emscripten-web-components-and-project-fugu/ | 2022-06-29T13:14:26+00:00
https://github.com/addpipe/simple-recorderjs-demo