Up next in 10
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:01
in this video I'll show you a editor for
0:05
programmers and developers. Uh it's a
0:07
playground offline editor. It's called
0:09
as webmaker. It's a Google Chrome
0:11
extension. If you simply go to the
0:13
extensions tab, simply type this and
0:15
it's completely opensource offline. And
0:18
once you install this, you can access
0:19
your editor where you can code like HTML
0:23
CSS and show the live preview. similar
0:25
to code pen visual studio and it's
0:28
completely offline works offline it's
0:31
completely open source completely free
0:32
to use so simply install this extension
0:35
after installing it
0:39
you will see
0:42
it will be installed here and you just
0:43
need to pin this extension it's used by
0:46
almost 40,000 uh developers so you can
0:50
just see the screenshot here so once it
0:52
is installed you will see this welcome
0:54
to Webmaker you click let's start and
0:59
basically this is your offline editor
1:01
similar to code pen here you will write
1:03
your HTML code and you will actually see
1:07
the live preview on the right hand side
1:09
section of the screen. So you will see
1:11
that you can even style this as well
1:14
using CSS.
1:18
You can see that instantly
1:21
you will see the preview.
1:25
You can just say
1:28
you see also this uh suggestions as
1:31
well. As soon as you are writing the
1:33
properties here you are getting
1:37
so you can basically use your own assets
1:40
as well. For this you just need to
1:43
upgrade to the pro plan but you can add
1:45
any library right here. You can search
1:46
for any libraries right here. If you
1:49
want to add JSPDF, so it will actually
1:52
suggest you in the drop-down here. So
1:55
that library will automatically get
1:57
added right here. And if you simply this
2:00
library is automatically added you will
2:02
see in the CDN.
2:04
And similarly you can add CSS as well.
2:07
So right here you can also write
2:09
JavaScript code as well. So it's a fully
2:12
functional playground editor that you
2:15
see similar to code pen and uh you
2:18
basically can share this. So for this
2:21
you just need to login. So you can
2:23
basically login with your uh Google
2:25
account or GitHub account and you can
2:27
share this URL with your friends as well
2:29
so that they can also develop by your
2:32
side. So it's a complete offline editor
2:37
of such as code pen or VS code. So now
2:40
you can share this URL.
2:42
So please save this first of all and
2:44
then share it
2:48
you basically
2:51
suggest turn this to public and then it
2:53
will give you this URL so that you can
2:55
share this URL and anyone can see your
2:59
work right here.
3:01
So this is the extension guys.
3:03
Definitely try this Google Chrome
3:05
extension. It's completely free,
3:07
opensource and offline. It works web
3:10
maker Google Chrome extension and uh
3:14
once it is activated you simply click on
3:16
that and then it opens right here. So
3:20
here you can add libraries you can add
3:22
your own HTML, CSS, JavaScript and side
3:25
by side you will see the output and you
3:27
can even download the code as well as
3:29
HTML.
3:31
So all your code has been successfully
3:33
downloaded as well. With this easy way
3:36
you can basically do coding and uh
3:39
inside this offline editor.
3:46
So you can get their pro version. In the
3:48
startup plan you get unlimited private
3:50
creation
3:51
and in the pro plan you if you click
3:54
that you will be redirected to this
3:56
section.
3:59
So this is your account here. You can
4:02
access this on webmaker.app. app.
4:09
So this is the login page right here. So
4:14
it's completely open-source editor. It's
4:17
suggested by many developers. It works
4:19
like code pen offline editor and if you
4:23
have Google Chrome definitely install
4:25
this extension. It has various layouts
4:27
as well.
4:30
So in the console it's as well. So you
4:33
can have various layout sections.
4:39
So like this, like this.
4:43
So you can select your own layout
4:45
section as well. So
4:48
these are all settings that you can do
4:50
right here. So definitely you can open
4:52
your own files as well if you have own.
4:54
You can export import any file if you
4:57
have. So it's very easy. Definitely
5:01
check out this Google Chrome extension.
#Programming
#Open Source