Up next in 10
This is the Cursor AI for Designers | Build Coding Apps VISUALLY with AI! Onlook Editor Demo
Jul 18, 2025
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:02
in this video I'll show you a cursor
0:04
alternative IDE I AI IDE where you can
0:08
actually make your applications with a
0:10
realtime editor. So this is actually
0:13
onlook.com. This is the name of the IDE.
0:16
It's available on this address. So if
0:18
you go to the browser simply type
0:20
onlook.com. So this will be the AI IDE.
0:23
It's completely open source. You can try
0:25
this for completely free and it's a next
0:28
generation AI model which can generate
0:30
your full stack applications right in
0:33
the browser itself. So this is their
0:34
GitHub page. So it's a cursor
0:36
alternative open-source alternative of
0:39
the cursor IDE which is very much
0:41
popular but the downside of that
0:44
solution is that it's paid solution. So
0:47
this AI code editor so it's a very
0:50
popular so it's a opensource
0:52
alternative. So first of all just sign
0:55
in with your Google account here.
1:01
So just select your Google account and
1:04
simply login. And then you can try this
1:07
tool for completely free. And right here
1:10
you can actually write a simple prompt
1:13
here. whatever application you want to
1:15
develop right here. You can simply
1:20
so it will create a new project for you.
1:23
So in a design like editor so you will
1:26
have all these
1:28
editor right here. Welcome to your app.
1:30
So this is your blank app. So I
1:32
basically asked a question build a
1:34
Google UI clone in HTML, CSS and
1:36
JavaScript.
1:38
So right here it is actually building
1:41
this application. So,
1:44
so it will create a Google homepage
1:47
clone.
1:49
So, it is generating the code here. You
1:50
will see all the source code files. It
1:53
is generating it. It is writing the code
1:55
here.
2:04
This is the layout structure right here.
2:06
This is a code structure and this is
2:08
your chat.
2:10
And basically it is now editing your
2:12
page tsx file right here. And you also
2:16
get a publish button as well to publish
2:19
this app. And this is your preview
2:21
section. You can check out the preview
2:23
section of your app right here.
2:27
And this is a design part. So here you
2:29
have all these editors out there. You
2:31
can put pages, images, brand layers,
2:33
everything.
2:36
The speed is little bit slow because
2:37
this is a fairly new solution. So you
2:40
just need to wait for some time so that
2:42
it construct and now you can see it
2:44
constructed this google.com and it
2:46
generated all the code for us and if you
2:50
check out the code here.
2:58
So there is this refresh button also
3:00
there you can refresh the source code
3:03
files and
3:11
So now it basically generated
3:13
everything. So you also get this publish
3:15
button to actually publish this
3:17
application.
3:20
You basically get this button publish my
3:22
site. So it is creating your domain and
3:25
now it basically creating the deployment
3:28
process.
3:30
So,
3:32
so in a matter of seconds your
3:33
application will be published and you
3:35
can even share this application with
3:37
your friends to actually share it
3:41
and you can even link a custom domain
3:43
which is available in the pro version
3:45
and here you click the button and link
3:47
your custom domain. If you have a custom
3:50
domain you can link that as well. So
3:53
it's a very simple cursor
3:56
ID alternative. And now you can see your
4:00
application is deployed.
4:04
You can actually go to this.
4:07
You can see this is your deployment URL
4:10
which is live. Here it is successfully
4:12
deployed. And this is you can see the
4:14
Google homepage URL. It is similarly
4:17
looking to Google basically constructed.
4:20
So in a similar way you can actually
4:23
basically type the message right here
4:25
whatever application you want to
4:26
construct.
4:28
So I can basically say a follow-up
4:30
question please modify this
4:36
app to convert images to PDF app in
4:41
reacts.
4:43
So basically I asked this follow-up
4:45
question right here. I'm just saying
4:46
that please modify this app to convert
4:49
images to PDF app in ReactJS. So again
4:52
it will create that application from
4:56
scratch and automatically
4:59
install the necessary modules generate
5:02
the code for us. You will see it
5:03
generated this all this structure. It is
5:07
automatically executing the commands to
5:09
install the packages and then it is in
5:13
automatically writing the code for us.
5:15
So this is the solution. Definitely try
5:17
this. If you just try it here onlook
5:20
GitHub
5:22
on Google the very first link which
5:25
comes this is the onlook the cursor
5:28
alternative for designers
5:32
and you will land on this website if you
5:34
directly write onlook.com and uh it's
5:38
got almost 20,000 stars and you can try
5:42
this for completely free. So here you
5:44
all your projects will show
5:48
like this you will see that. So
5:55
so there is no credit card required. You
5:57
can basically build out a full
5:59
application, full website in seconds
6:01
using this solution.
6:13
So definitely check out this solution
6:15
guys onlook.com a great cursor
6:18
alternative for app development and also
6:22
deployment as well. So also check out my
6:25
website freemediattools.com
6:27
uh which contains thousands of tools.
#Programming
#Web Design & Development
#Open Source