This Open Source Tool Might End Webflow and Framer
Two hosts stress-test Instatic — a free, self-hosted, AI-native website builder — live, then install it from zero on camera.
Posted
yesterday
Duration
Format
Demo
hype
Views
5.6K
202 likes
Big Idea
The argument in one line.
Instatic is a free, open-source, self-hosted alternative to Webflow and Framer that connects directly to AI coding agents through MCP, trading a SaaS vendor's guaranteed uptime for full ownership of the code, the hosting, and the tool itself.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You're a designer, developer, or agency owner tired of Webflow or Framer's monthly fees and want a self-hosted alternative you fully control.
You already use Claude Code, Codex, or another AI coding agent and want it to build and edit websites directly through MCP.
You manage client sites and want granular, revocable permission tiers — content-only, no-publish, etc. — without paying for an enterprise plan.
You're comfortable running a local dev server (a terminal, Bun, git clone) for a one-time ten-to-twenty-minute setup to save on SaaS hosting costs.
SKIP IF…
You need guaranteed uptime and don't want to be personally responsible if your own hosting goes down.
You want a polished, mature product — this is v0.0.11 and visibly rough in places.
You have zero interest in ever touching a terminal, even briefly.
TL;DR
The full version, fast.
Instatic is a new open-source, self-hosted alternative to Webflow and Framer that runs locally and connects to AI coding agents like Claude Code and Codex through MCP. It ships a visual canvas editor, a CMS with tables and rich text, granular user permissions down to individual features (dashboard, content, data, plugins, AI), and lets you discard its starter framework entirely for raw control. The hosts rebuilt an entire Figma-designed site in one ChatGPT pass using the Figma MCP, then walk through installing it from scratch — clone the repo, bun install, bun run dev — in roughly ten to twenty minutes. The tradeoff versus Webflow or Framer is uptime responsibility: if your own hosting goes down, that's on you, not a SaaS vendor.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
A starter framework layer ships with the tool but can be entirely discarded if unwanted.
03:42 – 04:32
09 · How I created this site
The site shown was designed in Figma by a human designer, then rebuilt in Instatic by ChatGPT with Figma MCP access — one pass, no corrections.
04:32 – 07:08
10 · Installing and using MCP
Live demo: creating an MCP connector (local vs. remote/client-scoped), connecting it to Codex, and asking the agent to create a one-section contact page by chat.
07:08 – 08:29
11 · Even at 0.0.11 it looks fairly complete
Reflection on the tool's early-but-complete feel, potential hosting-fee savings, and multi-user CMS access for clients.
08:29 – 09:50
12 · Client access and control via MCP or user permissions
Clients can get canvas edit-role access, or a scoped MCP for editing through ChatGPT without publish rights.
09:50 – 11:17
13 · Why should you use Webflow/Framer over Instatic
Co-host Samuel Gregory joins the debate: the honest case for Webflow/Framer is vendor-guaranteed uptime, versus a roughly ten-minute learning curve and full ownership with Instatic.
11:17 – 12:29
14 · Maybe a little ugly, but there's a solution to that
Clarifies MCP only touches content/pages, not the tool's source code — but since it runs locally, the source is also fully editable.
12:29 – 20:59
15 · Full installation guide
Samuel installs Instatic from zero on screen: Bun, git clone into a uniquely named project folder, bun install, bun run dev, first-run admin account, manual page creation (paste HTML / insert module), then a second MCP connector for Claude Code that pulls a Figma frame and auto-generates a new page, before covering deploy options (Railway, Render, Docker) and closing out the show.
Atomic Insights
Lines worth screenshotting.
Instatic is an open-source, MIT-licensed alternative to Webflow and Framer that runs on your own machine instead of a SaaS platform.
Because it's open source, you can tell an AI agent to rewrite the tool's own interface, not just the websites you build with it.
Instatic lets you strip a base CSS class off an individual element — a level of control Webflow doesn't offer as of 2026.
Instatic's user-permissions system grants access down to individual features — dashboard, pages, content, data, media, plugins, AI, audit logs — separately.
That granular permission system is compared directly to a feature enterprise website builders charge significant money for.
MCP connectors in Instatic can be scoped per client: give a client edit access to content but block publishing, all from one tool.
The hosts rebuilt a Figma-designed marketing site in Instatic in one ChatGPT pass, using Figma's MCP with no manual corrections needed.
You can point an AI coding agent at Instatic's MCP server and ask it to create pages purely through chat.
Custom responsive breakpoints are user-editable in Instatic, not fixed presets like most no-code builders offer.
Installing Instatic from scratch is roughly a ten-to-twenty-minute job: install Bun, git clone the repo into a uniquely named folder, bun install, bun run dev.
You need a separate Instatic installation per website — it isn't one central app that manages multiple sites.
Self-hosting trades Webflow/Framer's guaranteed uptime for full ownership: if your own server goes down, you're responsible for the fix, not a vendor.
The team behind Instatic also built Motion.page and Core Framework, both WordPress-adjacent website tools.
Instatic can be deployed to Railway, Render, or Docker once a locally built site is ready to go live.
Takeaway
Tools that hand agents real access beat polished ones that don't.
AGENT-READY TOOLING
A rough, early open-source tool that exposes real controls to an AI agent through MCP delivered more leverage on camera than the polish of an established SaaS product would have.
03You can remove base classes
An early-stage, visibly unpolished tool can still win on functionality if it exposes granular controls (like removing a single element's base class) that mature competitors withhold.
07The $100k feature
Feature-level permissioning — not just admin/editor/viewer tiers — is the difference between a hobby tool and something an agency can hand to a client.
A permissions system this granular is worth calling out explicitly as a differentiator; most competitors bundle access into a few coarse tiers.
08Frameworks
Letting users fully discard a built-in starter framework signals real ownership — the tool doesn't lock you into its own opinions.
09How I created this site
Feeding an AI agent a Figma frame plus MCP access can rebuild a fully designed site in one pass with zero manual correction, when the target tool exposes a clean enough API.
10Installing and using MCP
Giving an AI coding agent live, scoped access to a tool via MCP turns page-building into a chat request instead of a manual build.
11Even at 0.0.11 it looks fairly complete
Self-hosting is a real, complete product only when it also ships day-one primitives for multi-user access and revocable client permissions — not just a single-owner canvas.
13Why should you use Webflow/Framer over Instatic
The most honest sales pitch for the established, expensive incumbent (uptime guarantees) is worth stating out loud even while pitching the free alternative — it builds trust.
14Maybe a little ugly, but there's a solution to that
Running a tool locally means an AI agent can rewrite the tool's own interface, not just the content built with it — a second, higher layer of control past what most users ever touch.
15Full installation guide
A ten-to-twenty-minute terminal setup (install a runtime, clone a repo, install dependencies, run a dev command) is a fair bar to hold self-hosted tools to when comparing them against zero-setup SaaS.
Each self-hosted installation should map to one website, not one shared instance managing many — plan folder/naming conventions before cloning a second site.
A working install should be verifiable within minutes: first-run admin account creation, a login screen, and one manually created page are enough to confirm the stack is functioning before adding AI agent access.
Glossary
Terms worth knowing.
MCP (Model Context Protocol)
A standard that lets an AI coding agent like Claude Code or Codex connect directly to a tool's API and take actions inside it through chat, instead of a human clicking through the UI.
Instatic
An open-source, self-hosted, AI-native website builder positioned as a free alternative to Webflow and Framer, built by the team behind Motion.page and Core Framework.
Base class
A default CSS style applied to an element by a design system; most no-code builders don't let you remove it from a single element without breaking the system.
Bun
A fast JavaScript runtime and package manager used to install dependencies and run Instatic's local dev server.
“I want to let the agent do the bigger part of the job, and then I want to have controls to do refinement if I need to.”
crisply states the AI-agent-first workflow philosophy behind the whole demo→ newsletter pull-quote↗ Tweet quote
The Script
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
17px
metaphorstory
00:00There's a new tool that might put an end to Webflow and Framer, and I don't say this just to say it. I'm genuinely excited and a bit terrified.
00:12Command AI. So what you see here is a tool for no code that is AI native, and it's all open source running locally on my machine connected to your codex, your clot, whatever you want.
00:30And, yeah, it can it it can create designs. It has a CMS.
00:35You can host things. You have users. There's just so much that I want to show you.
00:40So this is the v not even v one. This is version zero point zero point one.
00:49So it's very early. You add a site and then you can just get in and do stuff yourself or do it agentically which I will show you in a second.
00:59But you have, you know, your pages, you have your layers as you see. And for my Webflow friends, I don't know if I can find an element here that has multiple classes here, you see.
01:12Like, I can remove the base class. Something like that you can't do in Webflow. Crazy.
01:18Right? 2026. So it has everything that you need here, literally.
01:23You have this view. You have the canvas view.
01:27You can, like, execute the code. You can like, if you look at here to show you, like, you you have, like, animations.
01:37So a lot of things like this, you have, obviously, your different breakpoints.
01:43And you know what's crazy? You can edit those breakpoints. You can add your, like, new breakpoints.
01:49So you have all of this. You have content and data which I haven't wrapped my head around completely yet.
01:58Content seems to be like a rich text. And in this rich text, I can do slash and do table.
02:07Crazy. Right? Twenty twenty six, we don't have this in web flow.
02:11You have all of this here. Yeah. I mentioned data.
02:15You have a database. You have the the media. You have plugins.
02:19I haven't installed any plugins. And now you have also users. So imagine you build a website for your client and you want to add your client as a new user.
02:31You know what? Like, we can just add a new role.
02:35And as you see, we can allow them to have access to the dashboard or not, to the site, to pages, to content, data, media, runtime storage, plug ins, AI, user roles, audit, like, all of everything separately.
02:58Like, this is, like, all not just Webflow. Every enterprise website website builder that sells, like, this access levels, They charge, I don't know, that'll like, a lot of money.
03:11And now you have all of this here, open source MIT license. Here we have also code, which I haven't looked into yet, but, yeah, you have that. You have a framework, something that I guess is from the tool that gives you, but you can discard this.
03:32You don't have to use it. That's the beauty of it. You can manage framework and use none whatsoever to do whatever you want.
03:41It's yours. So you have these, but let's talk about how I made this. How did I make this?
03:51Human. This This is is designed designed by by my designer on my team.
03:56In Figma. Beautiful work in Figma. It was designed in Figma.
04:01I did try to bring this to Webflow via the MCP. Let's just say it was not really good. And I just gave, in this case, ChatGPT access to Figma and set, like, do this, and it it did it.
04:20Nothing. I did a test for the first two sections to see if it does it.
04:25It did it. And then I said, okay. Do it for the rest.
04:28And it did it. So one go basically did everything.
04:32So you have this AI assist assistance panel, create an MCP. You create an MCP and you are basically connecting this tool to your AI, whatever that you are using, and then from there you take it.
04:46So I'll show you how that is. So here we have my codecs and this is like my my chat creating this.
05:00So the way I did it, I went to the AI assistant. Here, AI settings. By the way, depending on when you are watching this video, I can imagine a lot of the UI changing, but what you want to search for is it's also slash AI.
05:17And here you go to MCP and you create a new connector. Now what's really nice here is you can create a connector for local or remote.
05:26For example, the local one is for yourself. The remote one is when you want to give access to your client. So imagine you can create an MCP server for your client, but give it only access to site editing, like to the content editing, but not publishing.
05:44Just for example, so your client can edit, but they cannot publish so they don't break. Whatever. Like, whatever access level that you want, you can have different MCPs and give it give them to your clients.
05:58And once you create the MCP, let's just create one. We give it a name. Actually, let's say test two.
06:07I give it a name. I need to put in my password, and then you get a token or like this basically prompt, you can actually just ask your codex or Claude code, paste that in and say add that MCP and realistically, you need to reload your session or like create a new session to load that MCP.
06:33Once that's added, you can just talk to it. So you talk to your AI and you say, create a new page.
06:42So I can say, create a contact page one section.
06:50So just just to be fast and now in this case, Codex is talking to this tool and everything is still on my machine and it goes on and it it understands by the MCP what it what tools it has access to and creates it.
07:08Why am I so excited about this is it's a tool that is doing the AI part really well.
07:18It is open source. It's on my machine. I can literally create not just pages here, not like these web websites.
07:28I can also change the tool itself. It is open source.
07:32It's MIT. I can tell ChatGPT to change the content of the, you know, the site or like the tool itself.
07:40And it even though it's such an early version, it looks very, like, complete to me or, like, not just complete. It it sounds like to me it looks like they have a good sense of where they want to bring this to.
07:56And, yeah, this can potentially bring your hosting fees down. You can have your clients' websites here, and they have access to the CMS.
08:08They have you have multi users. It's a really good starting point.
08:13So here, you see the contact page just got added. Yeah. It's it's not perfect.
08:21I didn't give it an a design or whatever, but it started it's it tried to use the same design that we have and yeah. Just to clarify why I'm so excited about, like, this being finally being something that feels like client ready is that I can have a client with edit role where they can see the the thing and just edit it on Canvas.
08:47Like, I can edit this. I can edit this. Like, these things are fully editable.
08:53That's why it's really nice and I can limit their access. In addition to, obviously, having an MCP for them to edit through ChatGPT or through the Canvas.
09:06So all of that together, it does feel pretty complete. So I cannot wait to play more with it.
09:14And potentially, I'm not joking, my my site this is my new design, by the way, showing this for the first time.
09:25Shout out to Ryan for creating, like, this banger design. I might legit just continue building it here. Like, what is the point of this in doing it in Webflow?
09:39I I really don't want to sound like that. And and Framer, like I mean, what okay.
09:46Okay. Just last question before I go. I know Framer community is much bigger nowadays, much more active, but we still have the Webflow community.
09:57And, like, genuinely asking, like, no fear mongering. Nothing.
10:02From designer to designer, agency owner to agency owner, freelancer to freelancer. Like, why would you use Webflow and Framer over this?
10:14Like, why? I know there is a learning curve. Just editing Sam here because we've got a little bit sidetracked on that question.
10:22Genuinely uptime of Webflow and Framer is something where you might choose them. If something goes wrong with your own static installation, it goes down, you're entirely responsible for that.
10:32However, that might not be a big deal, and the chance of that happening might be slim to none. So definitely worth checking out. You could pay someone just to get it up and running, and then that's it.
10:42You know, you pay someone quickly to get this up and running on a URL, and then you don't there's no learning curve. We'll go through it after you go.
10:50We'll go through how to get this all installed and stuff like that. But point is if you don't wanna do that, it's a twenty minute job and then you've got your own bespoke version of Webflow for you and whoever to contribute to.
11:08But, like, even the even the learning curve if you know Webflow and Framer, I promise you the learning curve here is ten minutes. Maybe it is ugly in some places. Like, this is ugly.
11:21Right? This is no Webflow and Framer. This is no Webflow and but does it matter?
11:26Like, the the whole point is that I want to do the to let the agent to do the bigger part of the job, and then I want to have controls to do refinement if I need to, if I really need to.
11:41And this gives me all of that. And if I don't really like this panel, it's on my machine.
11:47Like, I can tell Claude, hey, redesign this panel to do whatever that I want.
11:54Does the m c So I then the tool manipulate the source code or does it just allow you to create the components, the pages, and stuff like that?
12:03From what I understand, the MCP is only for the content essentially. K. But Okay.
12:09On the same layer, I have access to, you know, the whole tool.
12:13Yeah. So as long as as long as you're running it on your machine, you can edit the code. Yeah.
12:19What what is it called again? In static. That's the one.
12:47All of this stuff is the code that makes up all of that beautiful UI that you saw. So we get access to all of that. So we need to download this code.
12:56If we go here, we go to quick start. It tells you how we're gonna do it. So this is what we're gonna run through.
13:01You need BUN installed. So I've just I've literally just Google search install BUN Mac, and you're gonna install that. And Macs and PCs, I think they will get installed, so you don't have to worry about anything regarding that.
13:14And this is a this is the line of code that allows you to just download it or what they call clone onto your local machine hub. Let's have a little quick look up here.
13:23You could probably also just go to releases here and just install or download the source code like like that. So that would be another way to do it.
13:34I'm inside a terminal. This is warp, but you can download if you just command space on a Mac or or download PowerShell or terminal.
13:43These are both applications that basically give you this awful black and white UI. And you'll wanna c d into a folder, change directory into the folder that you wanna work in.
13:55And the easiest thing I would suggest you do is grab your finder. I like all of my websites to be in the sites folder. So I would potentially just drag sites into that.
14:08Oops. Got rid of the CD, and that will navigate to the sites folder. This could also be documents.
14:29I actually wanted to be in the site, so I'm gonna navigate to sites. Now I'm in my sites folder. Then we run the git clone this.
14:41I wouldn't press enter just yet because this is gonna download. It's gonna create a folder called n static and download it into there. Whereas you need a unique installation for every single website.
14:52You don't just have the one installation of this app and then create loads and loads of websites. No. No.
14:57No. It's one installation of in static for every website that you wanna create.
15:02So let's as an example, let's do the command a I podcast website. So a space after the git and then the name of the project you wanna do.
15:13So we enter that and it's gonna clone and download all of those files into the sites folder on my computer. If I go into my finder here, am I going to sites?
15:23There's that folder that I've just programmatically created. Can you see that? With my terminal.
15:30And if I go in here, there's all the files that is downloaded, and this is exactly what is on the the the GitHub.
15:40These are all the same files just here. And we wanna c d into that folder that we created.
15:51And remember you installed bun earlier. You do bun install, which what this does is it installs all the libraries and everything that this this needs to function.
16:03And then we just do bun run dev. These are all the instructions here. The only thing we don't do is we created a folder ourselves and then seeded into the folder that we created instead of just in static.
16:14If you just run this, if you just blindly copy and paste this, then this will work totally fine. It's just if you wanna have multiple websites using in static, then you don't want them all to be called in static. You have to rename them or whatever.
16:27It looks like everything's good to go. So I can visit that URL, and here we go.
16:39I'm gonna use test@email.com, but you'll obviously wanna use a proper email.
16:45I'm gonna put in a password, and this is now creating our site.
16:50And if you look at the URL, I'm not sure whether you can see this, but it's the it's a URL slash admin slash dashboard. So if we just do this and just do that, it's gonna error because we haven't created a website yet.
17:04So let's create a new page, and I'm not an expert in this by the way. I got I got shown this literally just before the the show today.
17:13If I added something here, didn't know how to add stuff. I really don't know how to add stuff. Paste HTML.
17:19Oh, that's cool. You can paste HTML. But realistically, I wanna add insert module, some text as well.
17:28There we go. We just added some bunch of text. We're really sorry that this looks like out of balls, but if we refresh that there, there's our text.
17:36So we're creating a website. We're done. And obviously, you'd use this and you create your website.
17:42You can either do it through the panel here or like Kabaza showed, if we click on this AI button down here, open AI settings, you can create an MCP.
17:54Let's call this chord code. Name it whatever you want. Really doesn't matter.
17:59And I would say no expire there. Select all so it can do everything. These are all as permissions that it can do.
18:06And now what you can do, it creates you a token and a URL.
18:12If you're using Claude code, just copy that into your terminal now. So if I split this with command d and then do that and then run Claude.
18:37Hopefully, this will just create it because it knows there we go. Check connecting your static MTP server.
18:44Here we go. We're good to go. Now what I might do is get something from Figma.
18:52These are some of my thumbnails. So let's just let's just copy the link to that frame. There we go.
19:00Right. Take this Figma frame and make a new page in static.
19:10So this should use the Figma MCP to go and get the Figma design, translate that into in static, and create a new page and do everything. So let's just see how this goes.
19:22There it is. Oh, just created a page right in front of our eyes there. So it's not done anything yet.
19:28There we go. Boom. And I know it's a thumbnail design that I've created a figure, but it could this just could just as well be a website.
19:38And it's done it. And now I can edit that. I can change.
19:42Well, let's have a look here. What is I don't again, I don't know this interface. It's spacing, typography, font family, inherit.
19:58So you can change all that kind of crap. So there we go. Then you literally just upload these to a server.
20:05You literally just upload them to a server, and then now you've got this online. This all this is all locally running on my machine, but you'll want this online. So if we go to here, I think they've got some instructions to deploy.
20:21It. Here we go. So you can deploy a railway, render, on docker, you know.
20:27So you you'll get this online and then you'll add users so they can log in and do all that sort of stuff. So that's that's in static and installing.
20:35I hope that was useful and I hope it help is helping people, you know, understand the whole terminal stuff.
20:44This is part of a larger conversation on my show command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.
A two-host design podcast opens with a claim built to get clicked: a brand-new open-source tool might make Webflow and Framer optional. What follows is a live, unscripted stress-test of that claim — including a wart-and-all installation walkthrough anyone can follow.
Frameworks
Named ideas worth stealing.
02:29list
The $100k permission matrix
Dashboard
Site
Pages
Content
Data
Media
Runtime storage
Plugins
AI
User roles
Audit
Instatic lets an admin grant or deny access to each of these areas separately per user role, rather than an all-or-nothing account tier.
Steal forany SaaS or agency product deciding how to tier client/team access
CTA Breakdown
How they asked for the click.
VERBAL ASK
20:45subscribe
“Catch us next week and join in the banter. Command AI.”
soft show plug at the very end, no hard sales pitch — positions the video as one episode of a recurring weekly live-streamed conversation.
An 84-minute, screen-share walkthrough that takes a v0 template from an empty folder to a live, custom-domain site indexed on Google, Bing, and Yandex — entirely through plain-English prompts.
One prompt, a pre-written architecture repo, and a Claude-orchestrates-Codex workflow turn a static redesigned site into a fully autonomous CMS that writes, illustrates, and publishes its own articles.
A screen-recorded walkthrough of Open Generative AI, an open-source clone of Higgsfield that runs image and video generation on your own hardware for free instead of a paid subscription.
A creator builds daemon, a single Mac app that runs every AI coding agent he owns, by giving Claude Fable 5 four rounds of blunt feedback instead of writing a line of the UI himself.
A five-module, beginner-to-builder course that takes a non-coder from installing Claude Code to deploying agentic workflows that run 24/7 and building client products for real money.
00:23
00:51
01:10
01:42
02:13
02:45
02:54
03:15
03:48
04:05
04:35
04:48
05:22
05:38
05:54
06:09
06:25
06:41
06:57
07:08
07:44
07:59
08:11
08:47
09:02
09:18
09:36
09:50
10:18
10:38
10:53
11:08
11:17
11:45
11:54
12:19
12:43
13:21
13:33
13:46
14:01
14:17
14:37
14:41
15:02
15:20
15:36
15:52
16:05
16:27
16:39
16:59
17:03
17:33
17:36
17:58
18:13
18:29
18:52
18:58
19:21
19:48
20:02
20:15
20:35
1:24:13
12:42
14:21
Video of the Day19:21
3:48:20
23:56