All Projects → jongold → photoshop-react-redux-ramda

jongold / photoshop-react-redux-ramda

Licence: other
🎨😱💀⚛️

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to photoshop-react-redux-ramda

Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (+87.5%)
Mutual labels:  jsx, ramda
Photoshop-Scripts
A collection of Photoshop scripts.
Stars: ✭ 53 (+120.83%)
Mutual labels:  photoshop, extendscript
multiverse
Adobe Photoshop scripts for making generative art
Stars: ✭ 21 (-12.5%)
Mutual labels:  photoshop, extendscript
ExtendScript-for-Visual-Studio-Code
Extension that adds Adobe ExtendScript support to Visual Studio Code
Stars: ✭ 29 (+20.83%)
Mutual labels:  jsx, extendscript
adobe-discord-rpc
Discord Rich Presence extension for your adobe apps!
Stars: ✭ 383 (+1495.83%)
Mutual labels:  jsx, photoshop
ExtendScript
🍆 Getting started with ExtendScript ✨ by Jeff Davis
Stars: ✭ 23 (-4.17%)
Mutual labels:  photoshop, extendscript
ai-merge
Import your SVG, AI, EPS, and PDF files into a single Illustrator document.
Stars: ✭ 65 (+170.83%)
Mutual labels:  jsx, extendscript
ovid-editor
Adobe panel providing the most advanced scripting environment possible -- Typescript, app DOM autocomplete, full I/O features and more
Stars: ✭ 43 (+79.17%)
Mutual labels:  photoshop, extendscript
awesome-solid-js
Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performa…
Stars: ✭ 317 (+1220.83%)
Mutual labels:  jsx
fledermaus
Batman’s toolbelt for static site generation
Stars: ✭ 77 (+220.83%)
Mutual labels:  jsx
lisan
🌈i18n, Reimagined! 🚀A blazing fast and super small i18n library for Javascript
Stars: ✭ 85 (+254.17%)
Mutual labels:  jsx
faceapp.js
JavaScript API wrapper for the FaceApp tool for Android and iOS
Stars: ✭ 59 (+145.83%)
Mutual labels:  photoshop
YuzuMarker
🍋 [WIP] Manga Translation Tool
Stars: ✭ 76 (+216.67%)
Mutual labels:  photoshop
React-Native-Tutorials
Repo for React Native tutorials from the Cheetah Coding YouTube Channel
Stars: ✭ 158 (+558.33%)
Mutual labels:  jsx
to-htm
Conversion tool from JSX or Handlebars to htm (tagged template literal)
Stars: ✭ 35 (+45.83%)
Mutual labels:  jsx
quickSRT
generating .srt(subtitles) in After Effects
Stars: ✭ 24 (+0%)
Mutual labels:  extendscript
whatsup
Reactive framework, simple, fast, easy to use!
Stars: ✭ 115 (+379.17%)
Mutual labels:  jsx
ramda
🦋Practical functional Go
Stars: ✭ 14 (-41.67%)
Mutual labels:  ramda
utils.js
Fast, small and purely functional utility library
Stars: ✭ 132 (+450%)
Mutual labels:  ramda
vanilla-jsx
Vanilla jsx without runtime. HTML Tag return DOM in js, No virtual DOM.
Stars: ✭ 70 (+191.67%)
Mutual labels:  jsx

Photoshop Extensions with React

I’ve been working on a web-based design tool for a few months. After demoing it today someone asked if they could use it with Photoshop. The quick answer was “no, it's a web app that renders React components”, but I realized I'd been avoiding even exploring Photoshop extension creation, so I took the afternoon and looked into it.

The ecosystem is…interesting…

There are a TON of outdated buzzwords out there, but eventually I found great resources on Davide Barrance’s blog.

Turns out the panels are basically HTML + CSS + JS that communicate with CreativeCloud apps through JSX files (not that kind of JSX. Adobe ExtendScript).

ExtendScript sucks a lot but I figured I could take some of the pain out of the process and at least build the UI how I know best - React, Redux and Ramda.

Figured I'd share in case you’re feeling masochistic…

Downloadin’ 💾

cd ~/Library/Application Support/Adobe/CEP/extensions
git clone [email protected]:jongold/photoshop-react-redux-ramda.git com.yourcompany.yourextension

Buildin’ 🛠

I couldn't deal with certificate signing just yet. Should you want to distribute an extension there are resources in the Adobe CEP docs down there 👇👇👇👇👇

So to enable debug mode in terminal:

defaults write com.adobe.CSXS.6 PlayerDebugMode 1
npm run build
# or
npm start # to watch

Then open the extension from Photoshop -> Extensions

Messin’ 😭

To debug - open http://localhost:8087

UI stuff is in js/

ExtendScript is in jsx/ - this is not JSX like React-JSX.

You could probably add the dependencies to the package.json but I was being lazy, sorry. They're being pulled from npmcdn in index.html.

After making changes to the UI ⌘-r in the browser.

After making changes to the ExtendScript the quickest way to reload the page is double clicking on the panel twice to collapse & reopen with it - should reinitialize it. You'll then have to visit http://localhost:8087 again to reconnect the debugger.

You can use this boilerplate in other CreativeCloud apps too - just change the targets in CSXS/manifest.xml and it should show up in whatever app you want. ExtendScript APIs are different per app but they're all in the docs.

Readin’ 📚

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].