Hey, I’m Alp.
Let me tell you how this project actually started.
While building Systemize Space and especially the SIO Vault, I was creating a lot of custom pages and sections inside Systeme.io.
To get complete design freedom without being held back by standard template blocks, I leaned heavily into the Raw HTML element. Working with raw HTML, CSS, and JavaScript meant I could build pretty much any layout or design I could imagine.
And the best part? I didn’t have to write every single line of code myself. I could simply describe what I wanted to AI models like Gemini, Claude, or ChatGPT, and have them generate the code for me.
That was already working really well.
But there was one part of the workflow I didn’t like.
The Systeme.io code editor is perfectly fine for dropping code into a page. But when you are constantly building, testing, tweaking and trying different things, the workflow starts to get a little annoying.
You click back and forth to preview your changes.
Then you find a small thing you want to change:
Nothing major, just repetitive copy-paste friction.
And because the page is built with custom code, I would often have to go back to the AI chat, ask for the updated code, copy it, paste it back into Systeme.io and check it again.
Each change only takes a few seconds. But when you do that again and again while working with AI, it starts eating up a surprising amount of time.
And I also couldn’t just visually preview the responsive desktop and mobile views instantly without saving and reloading page steps.
“There has to be an easier way to do this.”
So I built one.
The Simple Idea
The idea was actually very simple.
I wanted a browser-based HTML editor where I could take the HTML code AI created, see the code directly in a live preview immediately, and test both desktop and mobile versions without any back-and-forth friction.
I wasn’t trying to build some massive product. I just wanted something that made my own workflow easier and faster.
And that became HTML Editor v0.01.
Version 0.01
I built the first version with AI by describing the workflow I wanted: a direct workspace to see the code immediately in a live preview, test responsive desktop and mobile viewports, and validate the code.
Talk with AI → Test live → Publish
That made the whole process feel much faster and cleaner.
In v0.01, pasting code let you preview real layout behavior and switch device viewports instantly:
Build Faster with AI & Raw HTML
Direct rendering inside your browser tab with zero save-and-reload cycles.
But there was another important part.
The code couldn’t just look right in the editor.
It needed to be Systeme.io HTML safe.
Systeme.io already provides the outer structure of the webpage, so certain document-level tags that AI models commonly generate can cause problems when pasted into a Raw HTML element.
That meant the editor needed to understand the Systeme.io environment too.
So I built in validation for that.
When incompatible outer tags are detected, the editor shows an error so I know something needs to be fixed. When everything is clean, it shows SIO: Valid.
That little feature ended up being really useful because I could catch the problem before putting the code into the page builder.
<div class="hero-section"> <h1>Welcome to SIO Vault</h1> <p>Ready to deploy into Raw HTML</p> </div>
And then I thought:
Why keep this for myself?
It was already becoming a useful part of the SIO Vault, which is part of Systemize Space, for creating, testing and presenting custom codes.
So I decided to put it out there and let other people use it too.
That was the beginning.
Then Came Version 0.02
Once I started actually using the editor, I immediately started seeing things that could be better.
That is usually how these projects go for me.
You build something.
You use it.
Then you think: “Okay... but what if I could do this?”
So I built Version 0.02.
This time I wanted to make the live preview itself interactive. Instead of going back into the code or asking AI for every tiny change, I could edit things directly in the result:
Much more naturally.
That made a big difference to the workflow. And the more I used it, the more ideas started coming.
Direct Visual In-Place Editing
v0.02 Architecture Milestone
Instead of re-prompting an AI model for every minor visual tweak, v0.02 allowed real-time property mutation directly on the rendered DOM tree:
HTML Editor v0.02 (Live Legacy)
Hosted on Systeme.io
Then I Started Pushing It Further
Up until Version 0.02, the whole editor was basically one big custom code file built with HTML, CSS and JavaScript.
I was also using that same approach inside Systeme.io, pushing the boundaries a bit and seeing just how far I could take custom code inside the Raw HTML element.
And honestly, it worked pretty well.
But eventually I started wondering:
What happens if I stop thinking about this as just one HTML file?
What if the editor itself became a proper browser-based workspace?
What if I could make it much more powerful?
What if AI could become part of the application itself?
That is where Version 0.03 came from.
Version 0.03
So this is where things stand today.
HTML Editor v0.03 is no longer just a simple HTML file.
It has become a real browser-based application and workspace. The whole idea is to make working with AI-generated code feel much more natural.
And soon, AI integration directly inside the HTML editor.
That part is especially exciting to me. Because I didn’t start this as someone who already knew how to build software.
I honestly didn’t.
I Learned By Doing
No CS degree. No years of memorizing syntax. Just building real projects and learning as I went.
Ask AI
Describe ideaTest Live
Inspect in previewBreak It
Find the edge casesFix Logic
Refine the codeRepeat
Solidify understandingIf you asked me to sit down tomorrow and hand-write an entire complex app from a blank screen without AI, I couldn’t do it. I still don’t know everything.
You don’t have to know everything before you begin. You can learn while you build and turn the abstract code into real intuition step-by-step.
“AI has completely changed the game. I can have an idea in my head, describe it, learn along the way and actually turn that idea into something real.”
Alp, ALPXWEB
Learning the fundamentals still matters: understanding HTML, CSS, and JavaScript helps you see what AI is doing, recognize errors early, and guide it to production-grade results.
And Then I Started Thinking About the SIO Vault
This is where the project gets even more interesting for me.
I don’t just want to build applications and then lock them away behind another monthly SaaS subscription.
I also don’t think every useful application needs to follow the old SaaS model.
We are entering a different era.
AI can now help you create applications around your own needs, your own projects and your own business. So I keep asking myself a different question.
“How can I charge you every month to use this?”
“How can I give you something useful that you can make your own?”
That idea fits perfectly with what I’m building inside the SIO Vault.
I want to make useful applications available there that you can copy into your own account with one click.
And that is a much more exciting idea to me than simply giving you another tool to log into.
You Get the Application,
Not Another Monthly Subscription
Take HTML Editor itself. Once the built-in AI integration is ready, I don’t want the only way to use it to be locked behind another recurring monthly seat.
Copy the fully functioning application directly into your own account with a single click and zero setup required.
That is the new standard of software distribution I want to explore with every application in the SIO Vault.
So That's the Story So Far
What started as me trying to make my own Systeme.io workflow a little less frustrating became HTML Editor v0.01.
Then I kept using it and turned it into v0.02.
And now you’re looking at Version 0.03, a real browser-based application with a much bigger foundation for everything I want to explore next.
More Functionality
Expanding direct editing controls, multi-file workspaces, and tokenized style management.
Zero-Bloat Possibilities
Pure semantic HTML5/CSS3 engines that load at lightspeed with zero JavaScript framework overhead.
Built-in AI Integration
Direct model connections to turn intent into clean, production-ready code inside your own tab.
“The funny thing is, I never sat down on day one and planned all of this. It just kept growing.”
I needed something, so I built it. Then I found another friction point, so I refined it. Then I got another idea, so I built that too. And that is exactly how I will keep doing it.
So thanks for being here and following along.
I’m genuinely excited to see where this goes.