A free HTML web page generator that ships WebPage, Breadcrumb, HowTo, and FAQ schema on every generated page
Most tools in this category give you a styled HTML snippet and call it done. mk0r loads a 321 line seo-page skill into an anonymous sandbox, locks the generated page to 11 numbered sections, and forces four JSON-LD blocks into the head before a single paragraph is written. Claude Haiku does the writing. No signup, no card.
What free usually means in this category
Read the pages that currently rank for this topic and the shapes collapse into three. The first is a form-to-snippet tool: you pick layout, colors, and copy from dropdowns, and it prints a lump of HTML. The second is a WYSIWYG editor with a free tier that walls off the things a real page needs: custom domains, watermark removal, clean export. The third is a static template gallery where free means you can copy the markup if you credit the author.
In all three cases the output is HTML without structured data. There is no WebPage schema, no BreadcrumbList, no FAQPage. You add those yourself, later, by hand, or you pay to unlock an SEO tier that adds a few script tags for you.
mk0r flips the default. The seo-page skill file forces the four JSON-LD blocks into the page shell at line 2048 before any section is written. Structured data is not a feature you opt in to, it is the shape of the output. And the skill file that makes this the default is 321 lines of plain markdown in a TypeScript module you can read.
The anchor fact: 321 lines, 11 sections, 4 schemas
Open src/core/vm-claude-md.ts and jump to line 2032. There is a TypeScript constant named skillSeoPage. The backticks that open the template literal are on line 2032 and the backticks that close it are on line 2354. Between them sit 321 lines of markdown. That markdown is the blueprint the agent reads before it writes a single element of your HTML page.
The first thing the blueprint defines is the page shell: a single file, a single container at max-w-4xl mx-auto px-6 py-24, and a JSON-LD script tag wrapped around an array of four schema blocks. The shape is short enough to quote in full.
Two things here are load-bearing. The jsonLd array sits before any visible section, which means the agent writes schema before it writes content. And the comment says All 11 sections here, which sends the model into the section list starting at line 2113 in exactly the order the skill defined.
The four schema blocks, verbatim
Lines 2069 to 2109 of the skill define four JSON-LD blocks in full. The agent inlines all four into the page shell on every generated page, not as an afterthought but as the first thing that lands in the output.
WebPage anchors the page as a named thing with a description and a url. BreadcrumbList mirrors the visible breadcrumb at line 2115 so the hierarchy is machine readable. HowTo wraps the four step workflow at line 2230 so the sequence is a first class schema object, not just a visual diagram. FAQPage mirrors the four accordion entries at line 2285, and the Quality Checklist at line 2340 requires the two to match word for word.
The 11 required sections, with line numbers
Line 2113 of the skill opens the heading The 11 Required Sections. Under it, each section is a real tsx snippet with exact Tailwind class strings, not a description. Here is the full list in the order the agent stacks them.
Line 2115: Breadcrumbs
A <nav aria-label="Breadcrumb"> with a text-sm text-zinc-500 list. Three items, the last one marked text-zinc-900 to show the current page. The pattern is the breadcrumb the BreadcrumbList JSON-LD describes, rendered visibly at the top.
Line 2129: H1 + Lede
text-4xl sm:text-5xl font-bold for the H1, text-lg text-zinc-500 for a two to four sentence lede. The lede is required to lead with a concrete stat or pain point and position the product by name.
Line 2138: Hero Animated SVG
A 400x120 viewBox flow diagram. Source box, Product box (brighter, with a heavier stroke), three stacked outcome boxes. Dashed connections with SMIL <animate> dots that travel along the path at 2.5s repeatCount indefinite. Pure SVG, no runtime.
Line 2182: Problem + Comparison Table
An H2 naming the pain point, then a table with three data columns: Manual, Competitors, and the product. Five to six rows covering setup time, core capability, integrations, pricing, privacy, and support.
Line 2210: Use Cases
Seven items minimum, each one a concrete scenario naming real tools, apps, or workflows. The classes lock them to a space-y-3 list of rounded-xl cards on a bg-zinc-50 surface with a teal check glyph.
Line 2230: Workflow Diagram + 4 Steps
A 720x120 SVG with an arrowhead <marker>. The skill forces unique marker IDs per page so two pages on the same origin do not collide. Four numbered step cards sit below, each with a teal-100 circle counter.
Line 2262: 3 Benefits Cards
grid-cols-1 sm:grid-cols-3, three cards, no icons. The skill is explicit about no icons to keep the cards text-forward. Title text-zinc-900 font-semibold, body text-zinc-500 text-sm.
Line 2275: Real-World Scenario
One rounded-xl bg-zinc-50 card. Setup line with concrete numbers, a quote with a thick emphasis, and a before-after measurable result. The checklist requires numbers in the scenario so the before-after is provable.
Line 2285: 4 FAQ Accordions + Line 2301: CTA + Line 2313: Related Links
Native <details> accordions, four of them, with a + glyph that rotates to x on open. Then a gradient-bordered CTA block with a single rounded-full button. Then a grid of six related link cards: five content links plus one CTA link.
How the skill actually reaches the sandbox
The shipment path is one line in one build script. scripts/prepare-e2b-context.ts imports skillSeoPage from src/core/vm-claude-md and writes it to docker/e2b/files/root/.claude/skills/seo-page/SKILL.md. The E2B template build copies that directory into the image. Every new sandbox starts with the file on disk.
The agent that writes your page does not fetch the skill over the network. It does not lazy-load it. It is in the sandbox image when the VM boots. When Claude Code starts, it scans /root/.claude/skills at session start, reads the description line of every skill, and activates seo-page the moment your prompt hits its trigger terms.
What reaches Haiku before it writes your first element
What every anonymous visitor gets
Free here is not a restricted tier, it is the default path. No upgrade modal, no trial clock, no feature wall between you and a generated HTML page with structured data. A chip row of what is in the box.
One full session, from cold tab to live URL
A real terminal timeline for a single anonymous visit. Session open, skill load, schema inline, eleven sections written in order, Vite HMR on every file.
Numbers you can grep for in the repo
Each of these resolves to a specific part of src/core/vm-claude-md.ts. Clone the repo, open the file, count the lines.
Typical free HTML page generator vs. mk0r
| Feature | Typical free HTML page generator | mk0r |
|---|---|---|
| Signup required before a page is generated | Yes: email plus a free tier account before anything useful is produced | No: anonymous Firebase session created on first paint (auth-provider.tsx line 68) |
| What the generator actually outputs | A styled HTML snippet or a WYSIWYG editor export | A live Vite dev server at <vmId>.mk0r.com serving real HTML with the four JSON-LD blocks inlined |
| Source of the page structure | A template author's frozen taste baked into the tool | A 321 line skill file at src/core/vm-claude-md.ts line 2032, readable in the repo |
| Number of required content sections | Whatever the chosen template happened to include | 11 numbered sections defined from line 2113, enforced by a quality checklist at line 2340 |
| Schema.org structured data on the generated page | Not included, or sold as a premium add-on behind an upgrade wall | WebPage, BreadcrumbList, HowTo, FAQPage, all four inlined by default (lines 2069 to 2109) |
| Model that writes the page | No model, the output is template substitution | Claude Haiku, set by FREE_MODEL = "haiku" at api/chat/model/route.ts line 5 |
| Writing rules applied to the prose | None, the prose is whatever you paste in | A blocklist of AI vocabulary plus a 1,200 word minimum defined at line 2332 |
| Where to audit the floor the tool enforces | Hidden inside a proprietary template engine or closed WYSIWYG | Plain TypeScript file, line 2032 to line 2354 of src/core/vm-claude-md.ts |
Walk-through of one prompt, in the order it happens
Six stages from cold tab to a live preview with eleven sections and four schema blocks in it. Every stage either happens before you interact with the page, or it is the agent applying the skill.
Anonymous session opens while the page paints
src/components/auth-provider.tsx line 68 calls signInAnonymously(auth) the first time the auth state callback fires with a null user. The UI never blocks on it. By the time you focus the prompt input, Firebase has already issued an anonymous uid, and that id is tied to a prewarmed sandbox slot so generation does not wait on a cold boot.
Claude Code activates the seo-page skill
Inside the sandbox, /root/.claude/skills/seo-page/SKILL.md is on disk before the VM even attaches. Claude Code loads skill descriptions at session start. The description line at skillSeoPage header (line 2034) matches prompts about building a content page, adding structured data, or creating a page designed to rank in search. Haiku activates the skill as soon as your prompt lands in that space.
Four JSON-LD blocks get inlined first
The page shell at line 2048 of the skill emits a single <script type="application/ld+json"> tag with a jsonLd array. The agent fills that array with WebPage, BreadcrumbList, HowTo, and FAQPage schemas using the shapes at lines 2071, 2078, 2089, and 2102. This happens before any visible section is written so the page is never in a state where it has content without schema.
The 11 sections land in blueprint order
Breadcrumbs at line 2115, H1 + Lede at line 2129, Hero Animated SVG at line 2138, Problem + Comparison Table at line 2182, Example Use Cases at line 2210, Workflow Diagram + Steps at line 2230, Benefits at line 2262, Real-World Scenario at line 2275, FAQ Accordions at line 2285, CTA Block at line 2301, Related Links at line 2313. Each one appears in the preview URL the moment its file lands, because Vite HMR reloads on every write.
The FAQ section and FAQPage JSON-LD are cross-checked
Line 2102 requires the FAQPage schema to contain four Q&A entries, and line 2285 requires the rendered FAQ accordion to contain four items. The Quality Checklist at line 2340 closes the loop: the accordion and the JSON-LD must match word for word. The agent writes both from a single source of Q&A and then runs the checklist before declaring the page done.
You iterate by describing changes
Follow-up prompts edit the existing sections, not the skill. Ask for a different hero SVG, the agent rewrites Hero.tsx against the pattern at line 2138 and the animated dots at lines 2167 to 2177. Ask to add a second comparison table row and it slots into the tbody at line 2197. Every edit stays inside the shape the skill defined.
The quality checklist the agent runs before it finishes
Line 2340 of skillSeoPage opens a twelve item Quality Checklist. The agent treats it as the exit condition of the task. No section can be missing, no JSON-LD block can be skipped, and the FAQ accordion has to match the FAQPage schema word for word. Here it is, item by item.
Quality checklist, src/core/vm-claude-md.ts line 2340
- All 11 sections present in the correct order
- Hero animated SVG with SMIL <animate> dots
- Workflow SVG with arrowhead <marker> and unique marker ID
- Comparison table: Manual vs Competitors vs Product (5 to 6 rows)
- 7 example use cases with real tool or workflow names
- 3 benefit cards, no icons
- Real-world scenario with before and after numbers
- 4 FAQ accordions matching FAQPage JSON-LD word for word
- CTA block with a correctly wired href
- 6 related links (5 content plus 1 CTA)
- 4 JSON-LD blocks: WebPage, BreadcrumbList, HowTo, FAQPage
- No em dashes, no AI vocabulary, no broken references
Why a blueprint beats a template
A template is a finished artifact you pick off a shelf. Edits push you off the template, and schema is a premium add-on because the template was not written to include it. A blueprint is a set of rules the agent applies each time, tailored to your topic. When you ask for a content page about a niche topic the blueprint author never imagined, the agent writes against the eleven section patterns and inlines the four JSON-LD blocks anyway. Schema is the default, not a feature.
That is the whole difference between a generator that outputs HTML and a generator that outputs a content page. A content page has shape, and the shape here is a file you can read.
When this is the wrong tool
If you need a single HTML snippet to paste into an existing CMS, a form-to-snippet generator is faster: the 321 line skill is overkill for one hero div. If your goal is a visual canvas where you move boxes around with a mouse, use a hosted builder. If you are writing transactional email HTML with inline styles and table layouts, the blueprint does not translate.
mk0r fits when you want the default output to be a real, structured content page with schema on by default, you want the structural choices traceable to a file in a repo, and you do not want to sign up before you start.
Watch an HTML page get written against the 321 line blueprint
Bring a topic. On the call we open src/core/vm-claude-md.ts line 2032 together and run a live generation so you can watch Haiku inline the four JSON-LD blocks and then fill the eleven sections from the skill.
Frequently asked questions
Frequently asked questions
Is this actually free, or is there a signup wall the moment I start?
Actually free. src/components/auth-provider.tsx line 68 calls signInAnonymously(auth) on first page load, Firebase hands back an anonymous user id, and that id owns the session that writes your HTML page. You never hit an email form on the path between landing on mk0r.com and getting a live preview URL. You only sign in if you want to claim the session to a permanent account, publish it to your own domain, or switch off the free model.
Which model writes the page on the free tier?
Claude Haiku. src/app/api/chat/model/route.ts line 5 sets a constant FREE_MODEL = "haiku", and line 17 enforces it: a request for a non-free model from a non-subscribing user is rejected with 403. Haiku is fast enough that the first sections of your page land in the preview inside two minutes of the prompt.
What is this seo-page skill file, exactly?
Open src/core/vm-claude-md.ts and jump to line 2032. There is an exported TypeScript constant called skillSeoPage. The template literal opens on line 2032 and closes on line 2354, which gives you 321 lines of markdown between the backticks. That markdown is the blueprint the agent reads before it writes a single element of your HTML page.
What are the 11 required sections and where are they defined?
They start at line 2113 under the heading The 11 Required Sections. In order: Breadcrumbs at 2115, H1 + Lede at 2129, Hero Animated SVG at 2138, Problem + Comparison Table at 2182, Example Use Cases at 2210, Workflow Diagram + Steps at 2230, Benefits at 2262, Real-World Scenario at 2275, FAQ Accordions at 2285, CTA Block at 2301, Related Links at 2313. Each is a real tsx snippet with exact Tailwind class strings, not a description.
Which JSON-LD schemas does the blueprint force onto every page?
Four. Lines 2069 to 2109 of src/core/vm-claude-md.ts define them verbatim: WebPage at line 2071, BreadcrumbList at line 2078, HowTo with four steps at line 2089, and FAQPage at line 2102. The Page Shell snippet at line 2048 shows the <script type="application/ld+json"> tag the agent emits with all four schemas inlined. The FAQPage JSON-LD must match the rendered FAQ accordion word for word, enforced by the Quality Checklist at line 2340.
How does the skill end up inside the sandbox writing my page?
scripts/prepare-e2b-context.ts line 99 imports skillSeoPage from src/core/vm-claude-md and calls write("root/.claude/skills/seo-page/SKILL.md", skillSeoPage). That write lands in the E2B build context directory, the Dockerfile copies docker/e2b/files/root/.claude into the template image, and every VM booted from that image has /root/.claude/skills/seo-page/SKILL.md already on disk. Claude Code scans the skills directory at session start and activates seo-page when your prompt matches its description line.
Do I get real HTML or a hosted widget?
Real HTML served by a real Vite dev server inside the sandbox. scripts/prepare-e2b-context.ts line 68 overlays app/vite.config.ts, line 69 writes app/src/_mk0rBridge.ts, and the E2B template ran npm create vite@latest at build time. The preview URL is <vmId>.mk0r.com. Right click, View Page Source, and you can copy every Tailwind class the agent wrote, along with all four JSON-LD script tags.
How do I verify the 321 number and the 11 sections myself?
Clone your copy of the repo, open src/core/vm-claude-md.ts, search for export const skillSeoPage. Jump to that match. Scroll down and the closing backtick is on line 2354. Subtract 2032 and subtract two more for the opening and closing backticks and you have 320 to 321 content lines, depending on how you count the delimiter rows. Grep for '### ' inside that range and you get the eleven numbered section headers.
Does the free model stay in scope? Will it drift off the 11 sections?
No. Claude Code loads skill files as persistent session context, and the description line in the skill header (line 2034) tells the model exactly when to activate: when the user wants to create an SEO page, build a content page targeting a keyword, or add structured data and schema markup to a page. Once activated, the skill sits in context for the rest of the session. The Quality Checklist at line 2340 forces a final pass: all eleven sections present, four JSON-LD blocks emitted, comparison table with five to six rows, seven use cases, three benefit cards, four FAQs that match the FAQPage JSON-LD.
What writing rules does the skill enforce on the prose of the page?
Line 2332 opens the Writing Rules block. No em dashes, no en dashes. A blocklist of AI vocabulary that the model must avoid: delve, crucial, robust, comprehensive, nuanced, multifaceted, furthermore, moreover, additionally, pivotal, landscape, tapestry, underscore, foster, showcase, intricate, vibrant, fundamental. Second person or first person plural voice. Minimum 1,200 words of visible text. Concrete examples with real names, numbers, and workflows. The prose floor is written into the same file as the structural floor, so the output holds together.
When is a different tool the better pick?
If you want a single HTML snippet to paste into a CMS, open a form-to-snippet generator: the 321-line skill is overkill for one hero div. If you want a drag and drop canvas where you move boxes with a mouse, use a hosted visual builder. If you are writing transactional email HTML with inline styles and table layouts, this blueprint does not translate. mk0r is the right pick when you want a standalone, structured content page with schema on by default, and you want to read the blueprint the generator used so you can fork it.