Built a CSS and JS Photo Editor

  • Only fully tested in Chrome Browser - some features may not work in other browsers.

Hi All, after learning about CSS variables I couldn’t resist trying to make an image/photo editor. It’s no Photoshop but I think it’s awesome, very pleased with myself!

Anyway I’d love to know your thoughts on it or even, I was thinking of adding presets but it’s too much work alone, if you check it out add me and send me your preset. Thanks.


Also on codepen but a bit cut off because of the header- https://codepen.io/Nazarja/pen/VboEwm


So…this is pretty professional. I’m assuming you’re a post-graduate of FCC?
Very nice work!

Thanks for the complement; no im only at the wiki viewer stage.

Thank you very much for sharing, it looks great. :slight_smile:

Don’t forget to fix these if you are going to use it for a job:

  • The adjustment panel on the right overlaps with the image on smaller screens
  • When Toggle Original is on, the original’s alignment is slightly off with respect to the modified image. If this is intended, perhaps you could consider adding box shadow or a border around the original so that the boundary will make it look less like an unintended bug
  • I think it’s worthwhile changing the colour of the Toggle Original text when toggle is on, not least because of the previous point and that the original, while shown, also blocks all functions underneath (such as the Clip Path Shapes menu)
  • In fact, with the previous points, perhaps what you have implemented for the Full-Size button is the solution for Toggle Original, too
  • The image that shows up with the Full-Size button seems to be aligned to the top-left corner, is that intended?
  • I tried it on Safari before I read your original post properly and found that most things are broken—maybe it’s worthwhile noting on the page that it’s only tested for Chrome

That’s all from me, and once again, I think it’s fantastic and that’s probably the nicest thing I have seen all week. :slight_smile:

1 Like

Just when I thought I was out, you pulled me right back in :joy:, you’re 100% right with those issues, it’s good to get fresh eyes look at it and comment, ill see to thoose issues today id say.

Life would be a lot easier if all browser reacted the same, and while I’m at it, everyone should have the same size monitor!! Only kidding, but that would be good for developing!

Thanks once again, I appreciate your comments.