Up next in 10
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hey guys, welcome to this video. So I
0:02
will show you this uh drag and drop uh
0:05
code editor for your applications or
0:07
websites. It's very important tool for
0:10
developers and programmers.
0:11
grapesjs.com.
0:13
Just type in the browser or go to this
0:15
website. Uh this is an ultimate drag and
0:18
drop visual editor. If you're developing
0:20
any sort of application, it integrates
0:22
directly in the browser itself. So now
0:25
to get started, you can try this editor
0:27
completely free. Click the this button
0:29
right here. Try the editor. As soon as
0:32
you do this
0:34
basically it shows you the functionality
0:36
of this.
0:38
So right in the body itself it will show
0:41
you this drag and drop editor. You can
0:43
drag everything.
0:46
You can see that. So side by side if
0:48
you're developing any sort of
0:50
application you simply click on that and
0:53
you can have on the right hand side all
0:56
these options you can customize it and
0:58
we have a pre-built of components right
1:00
here click
1:03
and simply drag and drop. So to add a
1:06
divider we also have this heading
1:08
section you can add this customize it
1:12
could see that. So if you want to add a
1:15
video you can even do that as well. So,
1:22
so it has all these components available
1:24
to you for building any sort of drag and
1:26
drop editor and then you also have the
1:30
option to import your own code as well.
1:32
So, this will show you all the source
1:34
code which is necessary for this and it
1:37
generates the source code automatically.
1:39
You can view it on full screen as well.
1:43
You can import your own code as well
1:46
and clear out the page as well.
1:50
So like this.
1:55
So this is uh if you just type here
1:57
grapes js this is the editor.
2:03
So right here for creating to get
2:06
started you can simply sign in with your
2:09
Google account.
2:19
So then it comes with the website
2:21
builder as well,
2:33
website builder, newsletter builder,
2:35
everything it comes right here. So now
2:37
this is a website builder. You simply
2:39
click on that just change the layout
2:42
accordingly. So this is really in simple
2:45
guys you simply select whichever thing
2:48
you are editing simply select.
2:54
So you can also change the background as
2:56
well. So very simple interface you can
2:59
delete elements simply edit them and you
3:03
can see that. So how easy it is.
3:08
So this is the newsletter builder as
3:10
well. So if you are interested, you can
3:12
import this code as well. Simply click
3:14
the import button. This will give you
3:15
the all the HTML, CSS and JavaScript
3:18
code which is used and simply you copy
3:20
this code inside your VS code. Simply
3:23
paste it.
3:28
So it's very easy guys. Definitely try
3:30
this visual editor for HTML, CSS, and
3:32
JavaScript. Grapes.js.
#Software