Image, Presentation and Video editor. Canva clone

Related tags

Video/Audio fabricjs image-editor video-editor design-editor presentation-editor scenify canva-clone graphic-editor
Overview

React editor

[WIP] React editor for graphics, presentations and videos. It should be an alternative to canva.com.
Try demo here react-editor-core.vercel.app

Discord Banner 2

Editor components

React editor created editors for graphics, presentations and video.

Select editor

Editor Preview

Image editor

Editor Preview

Presentation editor

Editor Preview

Video editor

Editor Preview

How to start

Clone the project:

git clone https://github.com/layerhub-io/react-editor

Install dependencies, currently using pnpm, but other package managers should work too.

pnpm i

Start the project on development mode

pnpm dev

App should be running now.

Contribution

Feel free to contribute by opening issues with any questions, bug reports or feature requests.

Get in touch

You can reach us at [email protected]

License

MIT

Comments
  • Build: getting build error -

    Build: getting build error - "file could not load, no such file or directory"

    I was trying to contribute to your projects which I found a really great idea. I forked and cloned the repo, I was started to make that small change, but when I tried to build this error popped up. image I could solve the problem when changing ~ to ../ but then I found out it will be a lot of time to change everything in this huge code base. I don't know that it's a bug or just I am a noob but I wrote this issue just in case. (I've never used this ~ )

    opened by baxy5 12
  • How can we download as PNG without background?

    How can we download as PNG without background?

    Hello

    Trying to Export PNG with transparent background but it downloaded Frame with white backgroundColor. How can we remove the background?

    The purpose of using png is a customized picture-generating clothes mockup.

    opened by tuvshinbatgeru 4
  • Feature zoom in/out.

    Feature zoom in/out.

    Change Details: [#6]

    • Updated code with zoom feature from old code.
    • Added click functionality zoom in/out button.
    • Added zoom by entering a value in the input field.

    Tested Browsers:

    • [x] Brave
    • [x] Edge
    • [x] Firefox
    • [x] Chrome
    opened by rushmedev 1
  • Dynamic Properties Panel Trigger

    Dynamic Properties Panel Trigger

    The dynamic properties panel that appears the sidebar can get hidden, and it's not immediately obvious how to get it back.

    For instance, if manually close the the sidebar panel, and the try and change the background color (or click the 'effects' button on the text element options) nothing happens.

    If the sidebar is closed, clicking on any element options that load in the properties panel, should trigger the panel to open.

    opened by wilsmex 0
  • Overflow issue with lots of pages/frames

    Overflow issue with lots of pages/frames

    When adding lots of pages (14+) the overflow breaks and the browser scrollbars are added to the entire viewport causing horizontal scrolling/layout issues.

    Should add overflow-x on the 'data-baseweb="block"' div so that only the 'frames' div scrolls with scrollbar when having lots of frames

    opened by wilsmex 0
  • Delete Default Frame Issue

    Delete Default Frame Issue

    You can select the 'default frame' (not sure on terminology) and change its background color. The problem is that you can also delete that (with keyboard delete button, as it doesn't show in layers panel). When you delete it, the color still shows, but everything in the app breaks (can't add new elements/pages etc.)

    Need to prevent deletion of main 'background' layer?

    Also feature request of ability to make the main background layer 'transparent' in the color options (add gray square grid pattern to 'preset colors' perhaps?)

    Similar issues if you set an image as the 'background image'. Once it's set I see a 'background images' in the options sidebar (when clicking on the color option), but nothing shows under the 'background images' heading. Wasn't immediately clear that I needed to right-click and choose 'delete', so I used the keyboard to delete instead, which causes the first bug

    opened by wilsmex 0
  • StaticPath selection issue

    StaticPath selection issue

    Reporting several bugs (as I'm not a JS dev guy to figure these out)

    • Add several 'staticPath' elements of the same shape
    • Head to the 'layers' panel, select an element, hide or lock the elements from there, the wrong objects/layers are locked/hidden
    opened by wilsmex 0
Owner
null
GitHub https://react-editor-core.vercel.app/
A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

MP4Inspector A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams. Installation In chrome navigate to chr

Bitmovin 48 Nov 28, 2022
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
Multer-Cloudinary-MERN-image-video-pdf-upload

MERN Image,Video and PDF Upload using multer and Cloudinary Many times while building full stack application,we need to upload images, videos and pdf

Jaydip Dey 10 Dec 19, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Aim Mikel 2 Jun 27, 2021
Spotify clone using Next.js, Spotify API, Tailwind, NextAuth, Recoil

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind

Abdelwahab Hussein 2 Dec 25, 2021
SpotifyUiClone - A Ui Clone of Spotify, only studing purporses

Spotify Ui Clone An Kinda Clone of the Spotify Ui for studing purposes Summary This is a project made in React Js, so the idea is to make an ui for an

Jf_Dess 1 Jan 7, 2022
Enables

HTML5 video made easy All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers. How to enable video and aud

Dave Hall 1.3k Dec 17, 2022
This is a YouTube Video Planner app built with NextJS, GraphQL, Prisma and MongoDB for the MongoDB Atlas Hackathon

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Justin Chau 2 Jan 14, 2022
A tool to download all videos and convert to mp3 inside a video set of bilibili.

bilibili-video2mp3 A tool to download all videos and convert to mp3 inside a video set of bilibili (also works for single video, of course). You will

wxsm 23 Dec 15, 2022
Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications

RTC SCORE Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications. The first version of the algorithm

Gustavo Garcia 25 Nov 27, 2022
Secretly record audio and video with chromium based browsers

snoop TCC restricts access to the device camera and microphone to protect user data from unauthorized access. But... If you trusted your browser with

BreakPoint Technologies 10 Aug 30, 2022
Flexible and easy Dash/HLS/DRM integration for HTML5 video.

This project is made possible with Plyr, Hls.js, Dash.js. Features ?? HLS and DASH playback ?? Multi quality supported ?? Drm with custom header suppo

Tuhin Kanti Pal 25 Nov 11, 2022
A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

`JSThread` to `JSThread`, `UIThread` to `UIThread`. React Native Reanimated Expo Player 100% written in Typescript video player component, interaction

Alan Toa 58 Jan 4, 2023
Expertly and easily export GreenSock (GSAP) animation to video.

gsap-video-export Expertly and easily export GreenSock (GSAP) animation to video. gsap-video-export is a simple tool for exporting your GreenSock (GSA

Chris Johnson 146 Dec 15, 2022
Self hosted media tracker for movies, tv shows, video games, books and audiobooks

MediaTracker · Self hosted platform for tracking movies, tv shows, video games, books and audiobooks, highly inspired by flox Demo https://mediatracke

null 225 Jan 3, 2023
Rebuilding TikTok with api.video, PWA, Next.js and Typescript 🎵

Rebuilding TikTok with api.video, PWA, Next.js and Typescript ?? An open-source example application that allows users to list and upload videos in the

api.video 3 Jul 1, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 7 Dec 15, 2022