alxpez/vuegg

dnd visual editor - mockups and code in one go!

vuegg

vue.js GUI generator

[ Mockups and code in one go! ]

About vuegg

Scaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work and helps to achieve a rapid-prototyping workflow (... at least in theory).

The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.

Current Features

• Mockup / prototype by drag'n'drop components and move/resize them
• Support for standard Mouse and Keyboard combinations
• Responsive preview (phone, tablet, web)
• Basic set of HTML5 elements
• Material design components (vue-mdc-adapter)
• Vuejs sources generation (download .zip)
• Connect with GitHub (save/load vuegg projects)
• Local persistence to save the work in progress
• ... more to come with time

Keyboard Shortcuts

Select

• Mouse down + Drag + Mouse up: Draw a selection area
• Ctrl [or Meta] + Click: Select outer-most item, or parent container
• Ctrl [or Meta] + Shift + Click: Add [outer-most] item to selection
• Esc: Clear selection

Move

• Mouse drag & drop: The standard way
• ArrowKeys: Moves the selected elements 1px
• Shift + ArrowKeys: Moves the selected elements 10px

Copy / Cut / paste

• Ctrl [or Meta] + C: Copy selection
• Ctrl [or Meta] + X: Cut selection
• Ctrl [or Meta] + V: paste selection

Delete

• Delete [or Backspace]: Deletes selection

Undo / Redo

• Ctrl [or Meta] + Z: Undo last action
• Ctrl [or Meta] + Shift + Z: Redo last action

Roadmap

Off the top of my head, I foresee the following features to be developed for the next releases:

• Visual feedback when dragging element over droppable container
• Grid/layout overlays positioning guides (#14)
• Hold shift to maintain aspect ratio on manual resize
• Ability to zoom-in / zoom-out in the editor (#24)
• Allow the insertion of raw CSS rules (expert mode)
  • Identify possible risks
• Add extra styles controls
  • BoxShadow
  • Overflow
  • TextOverflow
• Manage creation/edition of custom components
  • Transition to custom component (group/ungroup)
  • Implement custom component editor view
• Implement tree navigator to visualize page structure

Run vuegg locally

Auto-run

# install, build and serve
npm run vuegg

Navigate to localhost:5000 to serve (a production-ready) vuegg.

Step-by-step setup

1. installation

# install client & server dependencies
npm run install:all

# OR install only client / server
npm run install:client
npm run install:server

2. development

# serve vuegg-client with hot reload
npm run client

# start vuegg-server (auto-restarts on changes)
npm run server

Navigate to localhost:8080 to serve vuegg-client with hot-reload (development server).

For detailed explanation on how things work on the client side, checkout the vuejs-templates/webpack guide and docs for vue-loader.

For development vuegg-server will only generate vuejs projects (it won't be serving vuegg-client resources). Auto-restart capabilities possible thanks to nodemon.

The above commands should be run in separate terminal instances.

3. production

# build vuegg-client for production with minification
npm run build

# start vuegg-server at localhost:5000
npm run start

Navigate to localhost:5000 to serve (a production-ready) vuegg.

Connect with github

Vuegg makes use of .env files to set up some environment variables. The current setup allows you to have 3 files with different configurations: .env, .env.dev and/or .env.test, containing the following variables:

# Create an OAuth App on github and use your client ID and Secret

CLIENT_ID=y0urcl13nt1d
CLIENT_SECRET=y0urcl13nts3cr3t
CALLBACK_URL=http://localhost:8000/auth

This files should exist only on your local machine, do not add them to the git repository.

Now if you wish to test out the connect with github functionality on your local environment, it's necessary to run vuegg-client and vuegg-server through the following command:

npm run oauth

You should be prompted with 3 options to pick. Run server and client in separate terminal instances.

History & current state

The project was born as a sandbox for me to get started on the vue world, in fact its unoriginal name was vuexample (very unique, I thought at the time).

Not long after it became a personal challenge, I went on adding new features (mainly things I feel like learning) and gave it a proper name (and even a face). Eventually I considered it to be ready for the open-source community... and here is vuegg, my pet project.

Contribute

Vuegg is a concept project (and work-in-progress too), feel free to fork it or contribute however possible. You've got a feature idea? Open an issue! Are you up to the task of implementing it? Open a PR!

Help me make vuegg grow!

Donate

Do you like vuegg? 🐣

As for today, this project is developed and maintained with ❤️ by @alxpez, on spare time, after work hours and during homie weekends. There's still much work to do and ideas waiting to come afloat.

Code contribution is the most desirable help to keep the project going, but for those with no much time in hands that still want contribute...

OR

Your donation will help me to stay awake during those hours I should be sleeping.

vuegg's Issues

[Feat] Allow adding vue attributes and js code into elements

I would love to be able to use the vuegg editor to create simple, working apps, complete with specifying data for the app / components, and adding methods and code to be executed on events.

For example, I imagine adding a variable x as data for the app, then setting an input element's v-model value to x, and adding a text element with {{ x }} as its value. And then add a button called Clear with a click handler that just runs the code x = "".

So my feature requests are:

1. allow editing data and methods for each app / component (setting up variables)
2. allow inspecting each element and setting values like id, v-model, v-for, v-on:click etc.

One possible implementation for this would be a 4th side panel tab after Elements, Settings, and Pages, maybe named Inspect or Code or Vue. Or as an additional section in the Settings tab, alongside General, Text, Border.

rendering internal elements based on parent logic

Hello there and thanks for this awesome project.
One thing that bothers me is that for components that considered as containegg in the code, putting aside "div", all the others have some logic defined for rendering their children.
for instance consider list, or card in most of component libraries. or list item it self provides us with some rendering logic and predefined style and design for their children tags.
but here in vuegg there is no possibility for parent components to properly render their child components because what they see is StageEl wrapper around the element and preventing the element to be the direct child of it's parent. this is not an issue considering div's, but when it comes to using 100% container components in every component libraries, this is the case.

My suggestion :)

In StageEl module you are gathering all the children of an element and creating these children wrapped in StageEl. the case here is that we check if the component has containegg property of true, then we do the same iteration on children and creating each child, but this time instead of creating the element as an StageEl, we go for child.type itself. this will solve the rendering problem but will prevent us from position handling of the Child elements; but still is a better practice because we still have the chance to do each container one at a time and then integrate them with upper hand parent. for instance i will first start designing my list item itself. when it is ready i will drag it inside my list, i can not modify the list item further, but i had the chance before integration. :)

the other thing is that most of the components libraries are handling their components internal content positioning using flex box. we can still use absolute positioning for the direct children of Stage, but for internal children of components we can go for a flex based solution. i do not know how that can be possible ever, but if you have any suggestion about it i would be glad to contribute.

for the moment i managed to integrate quasar into your awesome system, but it is sad when we can not benefit the features these libraries are providing us and we are stopped at the first step.

THANKS in advance. 👍

[Feat] Add predefined layouts

In web applications, there are so-called layout components which the app shell consists of: top app bar, drawer, in future MDC Web versions - bottom app bar.

Currently Vuegg allows users to drag layout components to any point of the screen. But since such components have an established position in the application design (top app bar - on top of the page, bottom app bar - on the bottom, drawer - on the left), there's no much point to enable their draggability (only resizability).

So, maybe there's a point to move these layout components into the app shell (this is an App.vue in your current template). And the rest of the pages can be filled just with a user-generated content.

And, to simplify the process for a Vuegg user, provide an option to select a predefined layout. They can be based, for example, on the navigation patterns, or app use cases. The simplest I can imagine now are:

• Persistent drawer above top app bar;
• Persistent drawer below top app bar;
• Permanent drawer;
• Temporary drawer;

The more complex layouts can be:

• Top app bar with tabs;
• Bottom app bar with FAB;
• Combination of the above layouts, etc.

What do you think about it? Will it be complex to create?

smells like...

I can smell your flex background from here young padawan 👍

Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)

ERROR Failed to compile with 2 errors 10:02:21 PM

error in ./src/theme.scss

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.9.0
at module.exports (/Users/li/workspace/vuegg/client/node_modules/node-sass/lib/binding.js:13:13)
at Object. (/Users/li/workspace/vuegg/client/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/Users/li/workspace/vuegg/client/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at loadLoader (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/loadLoader.js:13:17)

@ ./src/theme.scss 4:14-139 13:3-17:5 14:22-147
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/editor/common/loader/BlockLoader.vue

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.9.0
at module.exports (/Users/li/workspace/vuegg/client/node_modules/node-sass/lib/binding.js:13:13)
at Object. (/Users/li/workspace/vuegg/client/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/Users/li/workspace/vuegg/client/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at loadLoader (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/loadLoader.js:13:17)
at iteratePitchingLoaders (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/Users/li/workspace/vuegg/client/node_modules/loader-runner/lib/LoaderRunner.js:165:10)

Sorry about That , i want to know atob where is come from

store.replaceState(newState(JSON.parse(atob(project))))
https://sourcegraph.com/github.com/vuegg/vuegg/-/blob/client/src/store/actions/projectAct.js#L141

[Bug] Delete button in confirm dialog has the wrong colour coding

Describe the bug

The "DELETE" button, shown in the "clear project" confirmation dialog, should have a red background (as it used to), but instead is showing as a standard button. As repercussion, the "deletion" feedback has been lost.

To Reproduce

1. Go to vuegg.now.sh
2. Click on the 'Clear project' button (trash-can)
3. See error

Screenshots

Expected behavior

The button should be red (delete feedback)

Actual Behavior

Instead, the button shows the "standard" blue-ish color

Your environment

• OS & version: All of them
• Browser name & version: All of them
• Vuegg version: 0.18.0

Additional context

It looks like the accent colour has been lost, due mdc breaking changes (accent prop is not longer supported)

[Feat] Atomic design

In Roadmap, you say : "Implement tree navigator to visualize page structure"
Is not it better to think Atomic Design ?

[Bug] Page's layout is messy after downloaded to local and run

First，awesome project, it's just what i want to do！

Then I have some questions about it：

1. Can I use the dowload zip project file after i design it on your website？
2. The page's components is messy after I run and open it in local, is it normal？
   [screenshot]：http://note.youdao.com/noteshare?id=d6e091dc29b2950a45db1b5966204c12
3. Is it easy to include some good ui components as your widgets for drag?

[Feat] Update README/docs with local setup gotchas

Hi,

In order to build vuegg I had to install libcurl-dev (I choose libcurl4-openssl-dev because libcurl-dev is a virtual package) and also libssl-dev

I'm on Linux Mint 18.3 Sylvia and I got these issues :

• nodegit/nodegit#1134
• https://stackoverflow.com/questions/11471690/curl-h-no-such-file-or-directory

So IMHO these 2 packages should be mentioned as requirements in the readme 😃

VueGG is working great now 👍

No files when i download the project

Describe the bug

so i made a web page and when i download it then it does not contain any thing

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Actual Behavior

A clear and concise description of what it's actually happening.

Your environment

• OS & version [e.g. iOS]
• Browser name & version [e.g. chrome, safari]
• Vuegg version [e.g. 22]

Additional context

How has this bug affected you? What were you trying to accomplish?

[Feat] Allow end user to enable Smart guides, grid and layout overlay

First of all thank you so much for this awesome project. I've been playing with it and got a suggestion/feature request which I think will make this tool much more user-friendly.

The suggestion is to integrate smart guides functionality so that the user moves an element it gets smart guides to easily place the elements where needed, similar to sketch app.

And also if there would be option(s) to allow the users to enable Grid/Layout grid overlays that would be super useful too. Again similar to how it works in Sketch app.

I've recorded a little screencast to explain what I mean, you may watch it here.
https://cl.ly/r48V

Looking forward.

Regards,
Munir

[Bug] Download Vuegg project (.gg) does not work

Describe the bug
Nothing seems to happen. No browser errors or any hint of backend activity. (In contrast - Download Vue sources resulted in some api activity and a zip which extracts to a reasonable seeming set of files.)

To Reproduce
I had to run locally since your site is still 404ing.

1. Create a simple layout with a div and table within.
2. From the download button at top, "Download" ... "Vuegg project (.gg)"

Expected behavior
I expected to find a .gg file somewhere in the project tree (similar to how the zip was findable)

Actual Behavior
Seemingly nothing

Your environment
Linux
Firefox

Additional context
Just trying it out - it looks cool - thanks for your contribution to open source! Great job!

[Feat] Compatibility of folders with the laravel server

it is not related a problam

some option to download for Laravel folder like:
/laravel/resources/js/app.js
/laravel/resources/js/components/App.vue

or some links to put in Laravel

Typo in client editor component

Describe the bug/issue
Not a bug exactly, but found typos in your client editor component MenuToggle.vue. Instead of "default", there is written "dafault". This might affect the functionality.

Screenshots

[Bug] Project does not start on MacOS Ventura with M1

I downloaded the source from the Release page, unwrapped it and changed directory in to the folder where I started it with npm run vuegg it fails with several (many) package deprecated claims and ends with Only Mac 64 bits supported I have an MacOS 13.5.2 on a M1. Maybe the hint is not ment for 64bit rather than for AMD and ARM differences.

[Feat] Add support for vuetify

Vuetify is one of the biggest component framework for vue.
It would be nice to have this components available in vuegg.

[Bug] Generated vue sources do not match with what is shown in the editor

Currently, top app bar can be moved to the any Y point of the page. Ideally, it should stay on top of the page, whether it "fixed-to-top" or not.

[Feat] vuegg as standalone component

Is it possible to use it as component, not whole project?
Best regards

Website is down

vuegg.now.sh gives a 404 error.
https://i.imgur.com/g9AWJD3.png

[Bug] Why downloaded zip folder is empty?

I open your and create a basic design by dropping some elements. But when I download the file the zip i get is empty..why so?

Question?

Please answer this question. I have been working on the task which is for the page/skin builder. I love Vue that's reason I started work on vuegg, there is 80% features has been developed by you for my product requirement. Also I have added many features according to product requirement, It's fun and easy to work on it. But since last week I have been got stuck to add hover feature on Main Container so that question is how can I implement the effect of hover and workable display on preview page?

Add support for responsive

Currently height and width are written in pixels，This can lead to fatal experience problems if you use different browser resolutions。

This requirement is very important. I wonder if you have any good solutions to discuss or improve with us

[Feat] Ability to zoom-in / zoom-out in the editor

Is your feature request related to a problem? Please describe.

Is not. Simply a new feature to increase vuegg's functionality

Describe the solution you'd like

Implement a zoom system to allow the editor user to zoom in/out (instead of having to move my head closer to the screen). Probably some sort of button bar (+ / -), or even ctrl[or/and cmd]+mouseWheel.

Describe alternatives you've considered

Same as above, likely adding some eventListeners to the editor component.

Help me please

¿Can someone help me to start this project...? I'm a newbie

Bug

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Actual Behavior

A clear and concise description of what it's actually happening.

Your environment

• OS & version [e.g. iOS]
• Browser name & version [e.g. chrome, safari]
• Vuegg version [e.g. 22]

Additional context

How has this bug affected you? What were you trying to accomplish?

Is it possible to add SVG elements like rect circle as drop element

When i try to add SVG element in basic element config then it is not working.
i tried below

{
'name': 'svg',
'type': 'svg',
'egglement': true,
'containegg': true,
'iconName': 'icon',
'width': 50,
'height': 44.44,
'styles': {},
'classes': {},
'children': [
{
'type': 'circle',
'attrs': {
'cx': 50,
'cy': 50,
'stroke': 'green'
}
}
]
}
could you please help? thanks

how to add :before and :after css in mockcomponents.js？

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Bug: Github Connect Button results in Not Found 404

This is an absolutely amazing tool. I want to help contribute.

Bug:

404: NOT_FOUND
Code: DEPLOYMENT_NOT_FOUND
ID: iad1::849rq-1601923566864-a39434d08507

NOTE: vuegg.now.sh might be available. Click here to learn how to assign it to a project.

To Reproduce
Click the Github Icon

Expected behavior
Connect to Github

How to get page content from download button?

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Actual Behavior

A clear and concise description of what it's actually happening.

Your environment

• OS & version [e.g. iOS]
• Browser name & version [e.g. chrome, safari]
• Vuegg version [e.g. 22]

Additional context

How has this bug affected you? What were you trying to accomplish?

Github User authentication question.

Login successful, but invalid.
Click login again , and the authentication window closes automatically

ajax http://localhost:8080/api/get-access-token is right?

I'm try return my token , it's OK.

Missing styles on generated vue project

❤️amazing project😊

i want to report what I see

1. In https://vuegg.now.sh/ , i selected a Table Component with default setting

2. I Download Vuegg sources(.zip)

3. cd my-vuegg-project && yarn && npm run start then I see the Table

---

in download project

th {
    font-weight: bold;
    text-align: -internal-center;
}
user agent stylesheet
td, th {
    display: table-cell;
    vertical-align: inherit;
}

---

in https://vuegg.now.sh/

element.style {
    padding: 0px 8px;
}
/* here is diff*/
th {
    font-weight: bold;
    text-align: -internal-center;
}
user agent stylesheet
td, th {
    display: table-cell;
    vertical-align: inherit;
}

[Feat] Third party component libraries

It would be useful to load third party component libraries into the vuegg client.

I have cloned this repo and have managed to add my own components manually by following how existing components are loaded and I think we could start a convention of adding a .vuegg file to the root of a component library that would globally add all of the necessary components and dependencies into Vue and then return an array of objects similar to https://github.com/vuegg/vuegg/blob/master/client/src/assets/BasicElements.js?

I'm happy to help if this is something you would be interested in.

[Bug] Generated Input are not considered as self closing elements

I've generated an input text field and a radio button, downloaded the project, and I can see in the .Vue file these lines:

<input class="BkeQ9B96z" value="" placeholder="placeholder" overflow="hidden" text-overflow="ellipsis"></input>

<input class="H1Em9Bqaf" type="radio" name="default-group"></input>

Shouldn't input tags be void elements and close themselves?

[Feat] Load Project without using Vuex replaceState

Is your feature request related to a problem? Please describe.

The projectActions.loadVueggProject action uses the Vuex replaceState function, which complicates implementing this project into an existing application using Vuex.

Describe the solution you'd like

Modify the projectMutations.updateProject method to allow updating more properties than just the title.

Describe alternatives you've considered

Could potentially create a new method, though renaming the existing updateProject method to updateProjectTitle might be a bit clearer.

Elements can't be deleted

I'm using some features of Vuegg without problem but after putting a toggle button, the application started to bug and the delete functionality is not working properly.

After copying and paste the layout from another screen and creating a new page, the deleting behavior stopped work and now I can't even deleting the toggle component and nor the new page.

I can delete others components together, but the toggle persists.

I'm using Manjaro Linux and Vuegg web version on Mozilla and Opera and both is not working.

Local cannot download vue sources files

server error: common.js:82 cp: no such file or directory: D:/hbworkspace/vuegg-master/server/tmp/rk9SCznYV/templates/vue/default.vue

ed: no such file or directory: D:/hbworkspace/vuegg-master/server/tmp/rk9SCznYV/src/pages/Home.vue

is this still active ?

App is amazing idea, personally i would be more than happy just to see 2 features
1- ability to add other UI libraries, vutefy, ant-design, etc ...
2- support layout grid, flexbox and export to html,css

but first feature would be a great implementation
thanks :)

[Feat] Implement grid system for positioning/sizing components

Hi Alex,

First of all: i like what you did with vuegg.
I was thinking about the responsiveness buttons in the bottomright corner.
Google sites has some kind of grid-system going on.
Have you thought about css3 grids?

[Feat] Vuegg is perfect for teaching

Mainstream web development is file system based. But teaching needs to be web based. The students are all working from home, the teachers need to be able to monitor and inspect their work. Sure the Vue CLI does everything imaginable. I just need a simple tool for teaching Vue on the web. At first glance this looks perfect for what I need. Runs in the browser, and generates the required javascript file. With Vue, I presume that the the GUI works as you build it.

Does this tool fo it for me? I do not know. Sadly there is no demo. Maybe there was a demo, but it is down. Your web siet "Go To Vegg" button does not work. I just spent a week wrestling with (and loosing to) JSON Schema Form generators, so today I am feeling much more cautious.

Describe the solution you'd like

A clear and concise description of what you want to happen.

I just want a demo I can play with, without spending the time to fire up my own server.

Describe alternatives you've considered
Well maybe in a week or two, when I have recovered from my Json Schema Form Gui trauma, I will fire up my own version of the demo.

the site is down

Please provide developer documentation so developer can easily understand the complete work-flow.

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

404 node-sass download and fix path of vue-directive-template

Describe the bug

*Description

I changed the versions of node, npm and node-sass to the lastest and fixed a path of css in the module vue-directive-tooltip to fix this and run it right away

Fixed the path as: vue-directive-tooltip/src/css/index.scss
Put * to install the latest version in the respective package jsons in client and main directive

Both errors are:

Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.0/darwin-x64-79_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234**Types of changes**

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'vue-directive-tooltip/css/index.css' in '/Users/rinapatriciapincheiramardones/Desktop/vuegg/client/src'
@ ./src/main.js 16:0-45

To Reproduce

Steps to reproduce the behavior:

1. git clone this project
2. npm run vuegg

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.
To work

Actual Behavior

A clear and concise description of what it's actually happening.
Doesn't even work
Your environment

• OS & version [e.g. iOS] MacBook Air
• Browser name & version [e.g. chrome, safari]: Chrome
• Vuegg version [e.g. 22] idk

Additional context

How has this bug affected you? What were you trying to accomplish?
This project doesn't even run, To just run this project

What is NPM package name for this and how we can integrate this editor with my current cms application?

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Actual Behavior

A clear and concise description of what it's actually happening.

Your environment

• OS & version [e.g. iOS]
• Browser name & version [e.g. chrome, safari]
• Vuegg version [e.g. 22]

Additional context

How has this bug affected you? What were you trying to accomplish?