Build block drag n' drop editor (wysiwyg) - React NextJS
Budget: $500 – $1,000 USD
Looking to build a drag and drop editor using React/NextJS & TailWind CSS/UI.
We want this editor to be easy to use and not overly complicated from a users point of view, will explain more shortly. Editor must be made, this product may be used in a commercial product there for we do not want to be held to major licenses (you can however use npm packages for misc tools that the editor may end up using.) There are two products that need to be combined functionality wise to produce the desired end result.
The first example product is ReactPage https://github.com/react-page/react-page which can be seen here https://react-page.github.io This product is almost perfect, it most closely resembles what we are after. This product was design to make it easy and not complicated for the user. If all the component blocks on the left were tailwind based blocks and it didn't use MUI design, it would be the perfect solution.
The second example is destack, which is based on grapesJS https://github.com/LiveDuo/destack which can be seen here https://destack-page.vercel.app/ This product is great for a couple reasons it uses tailblocks.cc and allows the user to drag in components into the editor and then begin to modify from there, it also allows the user to change the "theme" we want all of those benefits, however Grapes comes with too many choices / options as a whole making it hard for the user to accomplish their task. The other drawback on this product is there is not a clean way to save the data or manage the storage of the data.
Here is the list of Must haves:
- Must be built using react - to live in NextJS
- Must be built using tailwindcss (both design wise and for the component blocks)
- Have block design & control like "React Page"
- Must have tailwind component blocks (use tailblocks like destack, this will allow us to test different layouts, positions)
- Tailwind component blocks / the new editor blocks must be very easy to add new ones.
- Must be able to use function blocks (a form that submits would be the best example, or 3 products from the DB)
- Must have ability to save editor contents out to html & json
We want this editor to be easy to use and not overly complicated from a users point of view, will explain more shortly. Editor must be made, this product may be used in a commercial product there for we do not want to be held to major licenses (you can however use npm packages for misc tools that the editor may end up using.) There are two products that need to be combined functionality wise to produce the desired end result.
The first example product is ReactPage https://github.com/react-page/react-page which can be seen here https://react-page.github.io This product is almost perfect, it most closely resembles what we are after. This product was design to make it easy and not complicated for the user. If all the component blocks on the left were tailwind based blocks and it didn't use MUI design, it would be the perfect solution.
The second example is destack, which is based on grapesJS https://github.com/LiveDuo/destack which can be seen here https://destack-page.vercel.app/ This product is great for a couple reasons it uses tailblocks.cc and allows the user to drag in components into the editor and then begin to modify from there, it also allows the user to change the "theme" we want all of those benefits, however Grapes comes with too many choices / options as a whole making it hard for the user to accomplish their task. The other drawback on this product is there is not a clean way to save the data or manage the storage of the data.
Here is the list of Must haves:
- Must be built using react - to live in NextJS
- Must be built using tailwindcss (both design wise and for the component blocks)
- Have block design & control like "React Page"
- Must have tailwind component blocks (use tailblocks like destack, this will allow us to test different layouts, positions)
- Tailwind component blocks / the new editor blocks must be very easy to add new ones.
- Must be able to use function blocks (a form that submits would be the best example, or 3 products from the DB)
- Must have ability to save editor contents out to html & json