n8n template · Code

Rebuild a whole page as code with n8n

MiroMiro rebuilds every section of the page in a real browser, header to footer. You get one file per section in a zip and a link to the whole page assembled.

Free template · 300 free credits a month · no credit card

The workflow

Every section as Tailwind, React, HTML or Vue, zipped.

  1. Run

    Click Execute

  2. Settings

    Your website

  3. MiroMiro

    Hero + find sections

  4. Split

    One per section

  5. MiroMiro

    Each section as code

  6. Zip

    One file per section

What comes out
linear.app-code.zip
  • header.tsx
  • hero.tsx
  • features.tsx
  • pricing.tsx
  • footer.tsx
export default function Hero() {
  return (
    <section className="mx-auto max-w-6xl px-6 pt-32">
      <h1 className="text-6xl font-semibold">
        Linear is a purpose-built tool
      </h1>
      <a className="rounded-lg bg-[#5e6ad2] px-4">
        Start building
      </a>
    </section>
  )
}
Cost
10 credits per section
Setup
About a minute
Starts with
Run
You get
One file per section
What you get

What the template gives you

  • Every section of the page (header, hero, features, pricing, footer...) as Tailwind, React (JSX), HTML + CSS or Vue.

  • One file per section, named after the page, in a .zip.

  • A link to the whole page assembled in order, with a Download HTML button.

How to use it

Running in about a minute

  1. Your API key

    mm_live_••••••••

    300 free credits a month

    1

    Get a free key and add it in any MiroMiro node: Credential › Create new.

  2. My workflow
    • Download
    • Import from URL…
    • Import from File…
    2

    Import the template: ⋯ menu › Import from URL, and paste the link below.

  3. Execute workflowWorkflow executed successfully
    3

    Run it: set your website, click Execute workflow, and grab the result from the last node.

Template link

Paste it in n8n: ⋯ menu (top right of a workflow) › Import from URL.

Or download the .json and use Import from File. No key yet? Get a free API key.

For this template

  • In Settings, set the website and output: tailwind, jsx (React), html or vue.
  • Click Execute workflow. The zip is on "Zip the code"; the whole-page link is on "Get the whole-page link".
Perfect for

Who uses it

  • Agencies rebuilding a client's site in a new stack
  • Developers starting from a design they like
  • AI app builders importing a reference page
  • Prototyping a redesign on real content
The MiroMiro node

Verified by n8n

The template uses the MiroMiro node, approved by n8n and coming to n8n Cloud's nodes panel with their next release. On self-hosted n8n it works today: Settings > Community nodes > Install, with the package name below.

FAQ

Frequently asked questions

Is it the real page or a screenshot guess?

The real page. Each section is read from a real browser, with its actual colors, fonts, spacing, breakpoints and hover styles, then written as code.

What about menus, sliders and forms?

They come back in their first visible state as static markup. Wire up the interactions in your project.

Can I get only one section?

Yes, use the MiroMiro node on its own with a section (hero, pricing, footer...) or a selector from the `sections` list.

Is the template free?

Yes. The template and the MiroMiro node are free. The node calls the MiroMiro API, which includes 300 free credits a month with no card; paid plans start when you need more.

Does it work on n8n Cloud?

MiroMiro has been verified by n8n and arrives in n8n Cloud’s nodes panel with n8n’s next release. On self-hosted n8n it works today: Settings > Community nodes > Install, package name n8n-nodes-miromiro.

Can I change the workflow?

Yes, it is a normal n8n workflow. Swap the trigger for a schedule, a webhook or a Google Sheet, and send the result to Drive, Dropbox, email or Slack.

More n8n templates

All templates

Get your free API key

300 free credits a month, no credit card. The same key works in n8n, over REST and in ChatGPT, Claude or Cursor.

Get a free API key