Video summary
Instatic has officially launched as a promising open-source alternative to popular website builders like WordPress, Framer, and Webflow, developed by the same team behind the Core Framework. This early alpha release aims to provide a robust platform for creating dynamic websites without the bloat often associated with traditional CMS solutions. The video demonstrates how users can quickly set up Instatic locally using Docker, which containerizes the application for safety and ease of management, or deploy it directly via Railway. By utilizing Cloud Code with Model Context Protocol (MCP) integration, developers can leverage AI agents to automatically build landing pages and manage site structures, significantly accelerating the initial setup process compared to manual coding.
The core functionality of Instatic is highlighted through a seamless workflow where users can connect their local environment to an AI assistant to generate content and design elements instantly. The presenter showcases the ability to import designs from Figma directly into the builder, with the AI accurately reconstructing layouts, images, and text based on provided links. The interface includes familiar panels for managing layers, site structure, components, and styles, allowing users to exert full control over classes, typography, and spacing similar to established tools like Bricks Builder. Although some initial hiccups were encountered during the MCP connection process, the overall experience of building a responsive site with AI assistance proved surprisingly effective, offering a unique blend of automated speed and manual customization.
Beyond the visual builder, Instatic offers a comprehensive backend dashboard that mirrors the capabilities expected from mature CMS platforms. Users can manage content types for blog posts or events, handle media files, assign user roles for client handovers, and configure dependencies within seconds. The platform supports importing the full Core Framework to provide a familiar CSS structure and variable system, ensuring that developers who are already proficient with existing tools can transition smoothly. While the current version is still in its infancy and lacks some advanced features like mobile responsiveness out of the box, the rapid iteration speed and the potential for AI-driven workflows suggest a powerful future for web development.
In conclusion, Instatic represents a significant step forward in the evolution of open-source website building by combining the flexibility of static site generation with the dynamic management features of traditional CMS systems. The integration of AI agents like Claude Code allows creators to jumpstart projects from scratch or import existing designs, effectively bridging the gap between conceptual design and functional web application. As the project matures and addresses early stability issues, it promises to offer a cost-effective, secure, and highly efficient solution for developers seeking an alternative to paid SaaS platforms. The community's strong initial interest, evidenced by rapid repository growth and engagement, indicates that this tool could quickly become a staple in the web development ecosystem for those looking to streamline their workflow.
Read the full video transcript
The new open source alternative to
WordPress, Framer, and Webflow just had
its first launch. This isn't static.
It's by the same team who created Core
Framework, which is my go-to framework
for Bricks and motion.page. We're going
to take a first look, and I'm going to
show you how to set this up and get
started. First, we'll install In-Static
locally using Docker. Then, we're going
to connect Cloud Code via MCP and have
Cloud build out a landing page just like
this so we can get a better idea and see
how In-Static works. And just a quick
heads-up, this is a very early alpha
release, but it is something worth
checking out. And personally, I'm all
for an open source alternative to
something like Framer and Webflow, so
let's check this out. To start, we'll
find access here in GitHub. There may be
a website later on. I can see the URL
here, but since this is the first
launch, this is how we get it. And real
quick, take a look at the stars. It
already got 2.7 thousand stars, and it
got number two repository of the day.
Plus, this video that they put out with
Elijah, it got tons of views and
reactions. So, there is a lot of people
interested in this for good reason right
now. There's a couple ways for us to
install this. If we go down here, they
show a recommended way is using Railway.
And Railway is this hosting right here.
You can upload it. It gives you
directions on how to do that. But
there's another way, and that is using
Docker, which we are going to do right
here. Now, Docker, if you are new to it
and you use WordPress, think of Docker
as like running local by Flywheel and
having local WordPress websites on your
computer, but Docker is for web apps. It
is free. So, what you want to do if you
want to use Docker is go ahead and
download it. I already have mine
downloaded here. You can see I already
got some apps running on it, and it is
going to be super simple to set up using
Cloud Code. Let's go back over to the
GitHub. We are going to grab this Docker
image. Just go ahead and copy it. And
now, let's go over to Cloud Code. First,
let me connect this to a folder I
created for the project. That one's
going to be my Instatic 4. I've been
running several tests on it already. And
now, let's paste this in. And then, I'll
give it a prompt just telling it to
install a new clean install and giving
it a name to a Docker container. For
this, I'll use Opus. You could probably
get away using Sonnet actually because
it doesn't take a lot of effort and I'm
going to put my effort on low. So, this
way it just goes fast. And there we go.
This took just 2 and 1/2 minutes.
As it is wrapping it up, let me pull
this over. And we can see we have the
install here. Now, the reason why I use
Docker for building my web apps is
because it containerizes everything.
It's not just installing everything on
the computer. I like everything to be in
one section. So, in case if I need to
remove it, I can remove the container
and everything related to that app gets
removed. It's just for safety, security,
and best practice. Let's go up here and
we are going to launch it.
Let's open this up inside of our
browser. And now, we set up the CMS by
giving it an email and a password. I'll
go ahead and create an admin. And that's
it. We are ready to go. Here is our back
end. And if we were to go up here to
site, we can get started building our
site right here. We can also got our
content, which is going to be for our
blog post. And we'll go through all this
in a moment. But, the first thing I want
to do is connect this to Cloud Code
because recently they added the MCP. So,
I'm going to go down here to the AI
assistant panel, open up AI settings,
and from here, I'm going to go to MCP.
We have this other option, which is to
add credentials and add an API key, but
I already have a plan and I don't want
to pay extra money. API keys means we
pay as we use. I want to just use my
regular Claude plan, so I'm going to go
to MCP. I'm going to go to the
connector, and let's give it a name. My
MCP, I'm going to leave it on local, and
then I am going to select all of the
options given it all of the abilities.
Now, if this was a production project,
you want to go through carefully, but
we're just testing this out and having
some fun. So, I'm going to create the
connector. I am going to grab this code
snippet right here. Let's go back over
to Claude, paste that in, and then I'm
going to tell it to install this MCP.
Again, I'm going to keep this on low
effort because I want it to go faster
with less tokens. And while that is
adding the MCP, let's jump back over
here. I am going to go to the site.
Let's take a look at this panel real
quick cuz I want to add another page.
This way I could test that MCP
connection. Now, first we got our layers
panel, and this is where everything that
we build is going to show. We could go
ahead and add our images, and we'll
start to see everything stack in here.
Let me go ahead and delete these. Next
up, we got our site panel, and this is
where we could add our pages, templates,
components, and more. I'm going to go
and add a page. I'm going to put a
contact page. And the reason why I'm
doing this is because I want to ask
Claude to verify the MCP connection by
listing off all the pages on this
website. And that quick, it was already
connected. That was less than a minute
just my time talking right now. But in
order to see the connection, we got to
close the app, then relaunch it. And
now, as we relaunch it, Claude should be
able to read it. So, let me ask, "Can
you test the MCP connection and verify
everything is connected, then list off
the pages on this website?" Okay, we're
all connected, but Claude did hit a snag
on this one. In the last two tests that
I did, it was a breeze. It took like a
minute. For some reason, this one hit a
snag. And I've noticed that in my last
two tests, maybe some improvements are
needed with the MCP, but this is the
very first launch. So, we will see
hiccups like this. What I was able to do
with this MCP, I was able to go into a
design in Figma, right click it, go to
copy a link section, paste it, and ask
Claude to build that. I did it in
previous sessions that I worked on. And
the results that I got were actually
very, very surprising. This is what I
got on the very first try. It built out
the design exactly as it is inside of
Figma. It got very, very close. I mean,
it's not absolutely perfect, but it is a
good start. And I did the same thing in
another test. So, I've done this twice
already, and this design came out really
good inside of Instatic. So, again, I
just sent this inside one prompt, and
this was the result that I got. It built
out this page just like this. And if I
were to publish it and look at it in the
front end, you can see we got our
website here. Now, the reason why I
started off this way is because I wanted
to work my way backwards. I wanted to
see how does this actually look like
inside of the layer panel. How are the
elements being added? How does this all
work? Sort of reverse engineer. I was
actually pleasantly surprised with
probably the best Figma to website
experience on the first shot that I've
ever got. And I did this on Opus, and I
ran it on Ultra code. It took a long
time. So, I decided not to do it a third
time, but to show the results of what we
got because it was about a good hour and
a half. Okay. Now, let's go up over here
and see what we are working with so we
could better understand how does this
all work. First, we have our panels
here. So, we got our layer panels, and
this is going to show all of the
elements. At first, I was looking for
widgets and elements, and I'm like,
"Where are they?" I could see some here
at the top. When we hover over here, you
can see we got our container, we have
our text, image, and then we have this
add to canvas. This is where everything
is hiding. These are called modules, and
you can see here we got loop. We have
our image, we got our list, we have
buttons, links, even a form. So, there's
already quite a bit in here. We also
have some other options here, which are
layouts and components. I still need to
test this. This is just the very first
look, and I look forward to testing
this, especially as it starts to mature.
Especially with these components. Now,
let's go back over to this panel.
There's a lot more. We got our site
panel. Again, this is where we are
adding our templates, our pages, our
components, and then we got our
selectors panel. This was very
interesting, I found as well in my test.
Remember, this is built with core
framework. If we go up here to the
dashboard, since this is a new install,
well, you're going to have this option
to choose core framework import. We got
the full framework and our variables
only. Now, over here inside the core
framework, let's see, I got my web app
here. When you launch it, you're going
to have your default framework from core
framework. So, if I were to launch it, I
would get core framework's framework.
But, I like my own framework. I've put
years into making it my own, you know?
And this is my go-to framework that I
use for starting all of my projects. I
know it like the back of my hand. So,
what I did was I went to preview CSS, I
copied the CSS, instead of choosing my
framework to import, I just didn't, and
I went into Cloud Code, and I pasted it
in, and I asked it to create the
framework, and I told it, "Make sure
that this framework, the classes, the
variables, they are inside of the
builder." And this is what I got back
over here. Here are my classes. These
are mine. Now, in the color panels,
these are my colors. My naming.
Everything is the way that I build my
websites. And same thing, we got all of
the variables that I use. And then also
the spacing panel. Now, this did take
some prompting back and forth and being
able to remove some stuff and fix some
things. It was a bit of work. It didn't
take just a couple of minutes. It took
some time. But again, this is a first
look. And what I really am hoping, it
would be really cool if we did have like
the experience of Core Framework built
in the back. Now, that would be awesome
cuz the one thing I love about Core
Framework is just how easy it is to
manage everything inside of the CSS
framework. We also have our other panels
here for our media. When we upload our
images, videos, we're going to see them
here as well as our files. And then our
dependencies. Now, we have the layout
built out since Claude code did it for
us. And we can go ahead and click on our
elements and you can see the right side
panel and how this works. I mean, now
it's as simple as just going in and
changing the text. We have full control
over it. But now, let's take a look at
how it works. We do have our classes up
here. So, I can go in and select my
class, find my headers. Or actually,
this one would be a text class. I'm
starting to get a little bit of a feel
of being back in Bricks. I can I can see
this being something really cool to get
a good start taking over a design
directly from Figma that we create
having a really good beginning to the
build and then we go in and we fix it.
Now, we could also see over here, if we
go back into the layers panel, we do
have the option now to go out and then
we can see the other views. Now, Claude
did not make this mobile responsive. But
I'm sure with a bit of work we can get
this going. All right, we could zoom in
and I like this cuz okay, it's a little
bit, you know, jittery right now, but I
do like this cuz I get a bit of that
Figma feel while I'm building. It's a
different experience. That's all I can
say. So, we could click on this and we
have our choices for our links and you
know the deal. These are pretty familiar
as far as page builders goes. Now, let's
go ahead and click on the image. We
could see our image and we could change
it. All good. So, yeah, this is a really
good start. Now, let's take a look at
the rest. I feel like we got a good idea
of the builder. It does take a little
bit of exploring, experimenting with,
but again, once you get everything built
in, it makes it a lot easier to
understand it. Now, let's go back over
to our new site and we're going to take
a look around the back end. So, first
off, okay, we start off with the blank
site. You can see here we don't have
anything inside of our classes, our
typography spacing, no variables added
unless if you were to import them. If I
were to go and import, this is what we
get. I'll put in the full framework. It
takes just about a second. I think
that's it. It was done that fast. Let's
go back over to site. Let's give it a
refresh. We might have to Okay, there we
go. It just needed that hard refresh.
Yeah, now we can see we have all of our
selectors, our classes, our colors. And
if you got core framework, you're
probably going to be very familiar with
a lot of this. Now, we got our content
tab. First off, I got to note this. Do
you realize how fast this is to go to
the dashboard from the site editor? This
is just crazy fast, but okay, let's go.
We got content and this is where we
could create our post. And from what I
look like, again, I need to test more,
but this looks like new post types here,
maybe like events or something. And this
is one of those things that makes
WordPress so powerful, able to have
posts. And then we could go ahead and
create a new post. Okay, let's move on.
Now we got our data, so we just
basically see what's going on in the
site, our media manager, and then also
plugins. Nothing yet, and I wouldn't
expect anything yet. I mean, this thing
has been live for less than 2 weeks. We
got our users though, and we can create
users giving different roles. We could
give something for a client. So, in the
future you can see that this is already
being planned in a way where, let me go
back to my other site, we can hand this
off to a client, they could click on it,
they could go in and add their
content. And the cool thing about all of
this is, I mean, we could go here to our
layers panel or actually site panel,
choose our about page. We could go back
over to our designs, get a quick jump
start. Let me find an about page. I
could go ahead and just Okay, let's say
this is an about page. Go here to copy
link to selection. Go in and then have
Claude build it. Get a quick jump start.
And this is a new workflow that we could
be looking at and keep an eye out for.
So, if you would like to learn more
about this, definitely let me know. I'm
going to give it a little bit of time to
mature. I'm going to keep an eye on it
because this is very interesting,
especially just how quick we could get a
site built up and have all of the things
that we are used to when it comes to
managing a website because when we look
at these AI built websites, one of the
pain points to it is having that
experience like what we would have in
bricks or inside of elements or inside
of another builder where we have a full
control over everything. An AI agent
like Claude Coder Codex, it just gives
us a really quick jump start to all of
it. And I hope you found this
interesting, and if you would like to
learn more about this, let me know in
the comments. And that's our first look
at Instatic. If you want to learn more
and you to see more videos on it as it
progresses, let me know in the comments.
I would love to hear your thoughts and
ideas as well. And if you got any
questions as well, use those comments.
Well, I really appreciate you watching.
And if you do find value in this and
don't forget that good YouTube stuff.
You know the deal, like and subscribe. I
really do appreciate the support. Well,
that's it for this video. Thank you for
watching. I'll see you in the next one.