[{"data":1,"prerenderedAt":3490},["ShallowReactive",2],{"api-blog-free-n8n-templates-for-websites":3,"api-blog-related-free-n8n-templates-for-websites":363},{"id":4,"title":5,"author":6,"body":7,"category":328,"date":329,"dateModified":330,"description":331,"extension":332,"faqs":333,"image":330,"meta":346,"navigation":347,"path":348,"readingTime":349,"relatedSlugs":350,"seo":355,"seoTitle":330,"stem":356,"tags":357,"__hash__":362},"apiBlog/api-blog/free-n8n-templates-for-websites.md","Free n8n Templates for Websites: 14 Workflow Examples","Soraia",{"type":8,"value":9,"toc":315},"minimark",[10,19,37,42,51,55,64,73,82,86,95,108,112,125,134,138,155,164,177,181,190,194,203,207,267,270,274,307],[11,12,13,14,18],"p",{},"The n8n template library is full of social media posters, lead scrapers and support bots. Templates that work on the ",[15,16,17],"strong",{},"design"," of a website (its code, its sections, its brand, its images) are rare. These 14 are free, each one runs on a real website end to end, and each has its own page with the workflow and an import link.",[11,20,21,22,27,28,31,32,36],{},"All of them use the MiroMiro node. Get a ",[23,24,26],"a",{"href":25},"/api/onboarding","free API key"," (300 credits a month, no card) and install the node from ",[15,29,30],{},"Settings > Community nodes"," with the package name ",[33,34,35],"code",{},"n8n-nodes-miromiro",".",[38,39,41],"h2",{"id":40},"images-and-files","Images and files",[11,43,44,50],{},[15,45,46,36],{},[23,47,49],{"href":48},"/api/n8n/download-every-image","Download every image from a website"," MiroMiro lists every image on the page (img tags, srcset, CSS backgrounds, favicons, og:image), n8n downloads each one and zips them. 1 credit per page, however many images. Turn on Render for images that only load when you scroll.",[38,52,54],{"id":53},"website-to-code","Website to code",[11,56,57,63],{},[15,58,59,36],{},[23,60,62],{"href":61},"/api/n8n/rebuild-whole-page-as-code","Rebuild a whole page as code"," Every section of a page as Tailwind, React, HTML or Vue, one file per section in a zip, plus a link to the whole page assembled with a Download HTML button. This is the template I would start with if you build websites.",[11,65,66,72],{},[15,67,68,36],{},[23,69,71],{"href":70},"/api/n8n/rebuild-any-website-form","Rebuild any website from a form"," Same job behind an n8n form: paste a URL, pick the output, and the browser opens the rebuilt page. Good as an internal tool for a team that does not use n8n.",[11,74,75,81],{},[15,76,77,36],{},[23,78,80],{"href":79},"/api/n8n/migrate-site-to-nextjs","Migrate a site to Next.js"," List the pages of a WordPress, Elementor, Shopify or Webflow site with the route each should become; get a Next.js + Tailwind project as a zip. Menus, sliders and forms arrive as static markup, so plan an afternoon to wire them up.",[38,83,85],{"id":84},"wordpress-and-elementor","WordPress and Elementor",[11,87,88,94],{},[15,89,90,36],{},[23,91,93],{"href":92},"/api/n8n/rebuild-whole-page-in-elementor","Rebuild a whole page in Elementor"," Every section of a page joined, in order, into one Elementor page template you import into WordPress. Each section arrives as an Elementor container with its styled HTML inside, so it looks like the original as soon as you import it.",[11,96,97,103,104,107],{},[15,98,99,36],{},[23,100,102],{"href":101},"/api/n8n/section-to-elementor","Turn website sections into Elementor templates"," One section, or a list of pages and sections in one run, each as its own importable ",[33,105,106],{},".json",". The bulk version is the one agencies use to build a library of section templates.",[38,109,111],{"id":110},"shopify","Shopify",[11,113,114,120,121,124],{},[15,115,116,36],{},[23,117,119],{"href":118},"/api/n8n/rebuild-whole-page-as-shopify-sections","Rebuild a whole page as Shopify sections"," Every section as an Online Store 2.0 section (",[33,122,123],{},".liquid","), zipped for Edit code > sections.",[11,126,127,133],{},[15,128,129,36],{},[23,130,132],{"href":131},"/api/n8n/rebuild-section-in-shopify","Upload a section to your Shopify theme"," Extracts one section and pushes it straight into your theme through the Shopify Admin API. Test it on an unpublished theme copy first.",[38,135,137],{"id":136},"brand-and-design-research","Brand and design research",[11,139,140,146,147,150,151,154],{},[15,141,142,36],{},[23,143,145],{"href":144},"/api/n8n/brand-kit-files","Get any website's brand kit as files"," A zip with the logo, ",[33,148,149],{},"brand.css"," (colors and fonts as CSS variables), ",[33,152,153],{},"tokens.json"," (W3C Design Tokens for Figma or Style Dictionary) and a readable summary. 20 credits per site.",[11,156,157,163],{},[15,158,159,36],{},[23,160,162],{"href":161},"/api/n8n/compare-brands-csv","Compare the brands of many websites"," A list of websites in, one CSV out: primary and accent colors, fonts, logo and confidence per site. Useful for competitor research and agency pitches.",[11,165,166,172,173,176],{},[15,167,168,36],{},[23,169,171],{"href":170},"/api/n8n/brand-board","Brand board from any website"," Open your webhook with ",[33,174,175],{},"?url=stripe.com"," and get a designed brand board in the browser. The fastest one to show to a client.",[38,178,180],{"id":179},"ai-agents","AI agents",[11,182,183,189],{},[15,184,185,36],{},[23,186,188],{"href":187},"/api/n8n/ai-agent-rebuild-websites","An AI agent that rebuilds websites"," A chat agent with MiroMiro as its tools: \"turn the hero of linear.app into a React component\", \"what are airbnb.com's brand colors?\". Works with Claude, OpenAI, Gemini or any chat model with tool calling.",[38,191,193],{"id":192},"all-of-them-at-once","All of them at once",[11,195,196,202],{},[15,197,198,36],{},[23,199,201],{"href":200},"/api/n8n/miromiro-showcase","The starter workflow"," Four of the above on one canvas (images, a section in Elementor, a whole page as code, the agent) to see what the node does before picking a focused template.",[38,204,206],{"id":205},"what-they-cost","What they cost",[208,209,210,223],"table",{},[211,212,213],"thead",{},[214,215,216,220],"tr",{},[217,218,219],"th",{},"Template",[217,221,222],{},"Credits",[224,225,226,235,243,251,259],"tbody",{},[214,227,228,232],{},[229,230,231],"td",{},"Download every image",[229,233,234],{},"1 per page",[214,236,237,240],{},[229,238,239],{},"A section as code, Elementor or Shopify",[229,241,242],{},"10 per section",[214,244,245,248],{},[229,246,247],{},"A whole page (6 to 12 sections)",[229,249,250],{},"60 to 120",[214,252,253,256],{},[229,254,255],{},"Brand kit as files",[229,257,258],{},"20 per site",[214,260,261,264],{},[229,262,263],{},"Compare brands, brand board",[229,265,266],{},"10 per site",[11,268,269],{},"The same page with the same settings within 24 hours is free, so re-running a template while you adjust it costs nothing.",[38,271,273],{"id":272},"how-to-import-one","How to import one",[275,276,277,284,294,297],"ol",{},[278,279,280,281,36],"li",{},"Open the template's page and click ",[15,282,283],{},"Copy link",[278,285,286,287,290,291,36],{},"In n8n, open the ",[15,288,289],{},"⋯"," menu at the top right of a workflow and choose ",[15,292,293],{},"Import from URL",[278,295,296],{},"Open any MiroMiro node, create the credential with your API key.",[278,298,299,300,303,304,36],{},"Change the website in ",[15,301,302],{},"Settings"," and click ",[15,305,306],{},"Execute workflow",[11,308,309,310,314],{},"Browse all of them, with the workflow drawn and the result shown, at ",[23,311,313],{"href":312},"/api/n8n","miromiro.app/api/n8n",". You can start for free.",{"title":316,"searchDepth":317,"depth":317,"links":318},"",2,[319,320,321,322,323,324,325,326,327],{"id":40,"depth":317,"text":41},{"id":53,"depth":317,"text":54},{"id":84,"depth":317,"text":85},{"id":110,"depth":317,"text":111},{"id":136,"depth":317,"text":137},{"id":179,"depth":317,"text":180},{"id":192,"depth":317,"text":193},{"id":205,"depth":317,"text":206},{"id":272,"depth":317,"text":273},"Tutorials","2026-10-26",null,"14 free n8n workflow templates for designers, agencies and developers: download every image, rebuild a page in Elementor or Shopify, get a brand kit, and an AI agent that rebuilds websites.","md",[334,337,340,343],{"question":335,"answer":336},"Where can I find free n8n templates for websites?","MiroMiro publishes 14 free n8n workflows at miromiro.app/api/n8n: image downloads, whole pages as code, Elementor and Shopify rebuilds, brand kits, competitor brand comparisons, a migration to Next.js and an AI agent. The source is on GitHub.",{"question":338,"answer":339},"How do I import an n8n template?","Copy the template's link, then in n8n open the ⋯ menu at the top right of a workflow and choose Import from URL. You can also download the .json file and use Import from File.",{"question":341,"answer":342},"Do these templates work on n8n Cloud?","They use the MiroMiro node, which n8n has verified. On self-hosted n8n you install it today from Settings > Community nodes (package n8n-nodes-miromiro); on n8n Cloud it arrives in the nodes panel with n8n's next release.",{"question":344,"answer":345},"What do the templates cost to run?","The templates are free. They call the MiroMiro API, which includes 300 free credits a month with no card: a section as code or Elementor is 10 credits, a brand kit 10, an image list 1. A whole page of 6 to 12 sections is 60 to 120 credits.",{},true,"/api-blog/free-n8n-templates-for-websites",6,[351,352,353,354],"n8n-website-scraping","rebuild-website-in-wordpress-with-n8n-and-elementor","convert-html-to-elementor-json-template","how-to-extract-brand-assets-in-bulk",{"title":5,"description":331},"api-blog/free-n8n-templates-for-websites",[358,359,360,361,110],"n8n","n8n templates","automation","elementor","-jA3PhK3byzARjE-ayIiUy6L94nvBqjzZphwTW8tlBs",[364,832,1100],{"id":365,"title":366,"author":6,"body":367,"category":328,"date":329,"dateModified":330,"description":802,"extension":332,"faqs":803,"image":330,"meta":819,"navigation":347,"path":820,"readingTime":821,"relatedSlugs":822,"seo":825,"seoTitle":330,"stem":826,"tags":827,"__hash__":831},"apiBlog/api-blog/n8n-website-scraping.md","n8n Website Scraping: Text, Code, Brand Kits and Images",{"type":8,"value":368,"toc":793},[369,380,383,387,393,419,424,486,497,500,504,507,510,514,517,520,596,599,635,652,656,717,721,727,744,750,760,766,770,786,790],[11,370,371,372,375,376,379],{},"To scrape a website with n8n, chain an ",[15,373,374],{},"HTTP Request"," node (download the page) and an ",[15,377,378],{},"HTML"," node (pull values out with CSS selectors). That handles static pages in two minutes. It breaks on JavaScript-built sites, and it only ever gives you text. If what you want is the page's design (code, an Elementor template, brand colors, the images), use a node that reads the page in a real browser and returns that directly.",[11,381,382],{},"Here are the three setups, when each one is right, and the problems you will hit.",[38,384,386],{"id":385},"scrape-text-with-http-request-html","Scrape text with HTTP Request + HTML",[11,388,389,390,392],{},"First, an ",[15,391,374],{}," node:",[394,395,396,402,408],"ul",{},[278,397,398,399],{},"Method: ",[33,400,401],{},"GET",[278,403,404,405],{},"URL: ",[33,406,407],{},"https://example.com/pricing",[278,409,410,411,414,415,418],{},"Response format: ",[33,412,413],{},"String"," (put the body in a field called ",[33,416,417],{},"data",")",[11,420,421,422,392],{},"Then an ",[15,423,378],{},[394,425,426,432,441],{},[278,427,428,429],{},"Operation: ",[15,430,431],{},"Extract HTML Content",[278,433,434,435,438,439],{},"Source data: ",[33,436,437],{},"JSON",", property ",[33,440,417],{},[278,442,443,444],{},"Extraction values, one row per value:\n",[394,445,446,460,471],{},[278,447,448,449,452,453,456,457],{},"Key ",[33,450,451],{},"title",", CSS selector ",[33,454,455],{},"h1",", return value ",[33,458,459],{},"Text",[278,461,448,462,452,465,456,468,470],{},[33,463,464],{},"plans",[33,466,467],{},".plan-name",[33,469,459],{},", Return array on",[278,472,448,473,452,476,456,479,482,483],{},[33,474,475],{},"image",[33,477,478],{},"meta[property=\"og:image\"]",[33,480,481],{},"Attribute",", attribute ",[33,484,485],{},"content",[11,487,488,489,491,492,494,495,36],{},"Run it and you get one item with ",[33,490,451],{},", ",[33,493,464],{}," and ",[33,496,475],{},[11,498,499],{},"This is the right tool for prices, headlines, links and anything else that is text in the HTML. It is free and it is fast. I would start here every time the page is server-rendered.",[38,501,503],{"id":502},"scrape-javascript-websites-with-a-browser-node","Scrape JavaScript websites with a browser node",[11,505,506],{},"Open the page with View Source. If the text you want is not in it, the HTTP Request node will not see it either: the site builds its content in the browser. Most React, Next.js, Framer and Webflow sites behave like this.",[11,508,509],{},"You need something that runs a real browser and gives the result back to n8n. Firecrawl and Apify both have n8n nodes; Firecrawl returns the page as Markdown, Apify runs whatever scraper you pick from its store. For text from JavaScript sites, either is a good choice.",[38,511,513],{"id":512},"scrape-the-design-code-elementor-brand-and-images","Scrape the design: code, Elementor, brand and images",[11,515,516],{},"Text scrapers return text. If you are rebuilding a site, moving it to WordPress or Shopify, or collecting a brand, you want the design itself, and HTML-plus-selectors gets you nowhere near it.",[11,518,519],{},"That is what the MiroMiro node does. It loads the page in a real browser and returns:",[208,521,522,534],{},[211,523,524],{},[214,525,526,529,532],{},[217,527,528],{},"Operation",[217,530,531],{},"What you get",[217,533,222],{},[224,535,536,554,564,574,585],{},[214,537,538,541,551],{},[229,539,540],{},"Extract Code",[229,542,543,544,547,548],{},"A section (hero, pricing, footer...) as Tailwind, HTML + CSS, React, Vue, an ",[15,545,546],{},"Elementor template"," or a ",[15,549,550],{},"Shopify section",[229,552,553],{},"10",[214,555,556,559,562],{},[229,557,558],{},"Extract Brand",[229,560,561],{},"Logo, brand colors with roles, fonts, and whether each was declared by the site or inferred",[229,563,553],{},[214,565,566,569,572],{},[229,567,568],{},"Extract Design Tokens",[229,570,571],{},"Every color, font size, spacing and radius with usage counts, or a W3C tokens file",[229,573,553],{},[214,575,576,579,582],{},[229,577,578],{},"Extract Images",[229,580,581],{},"Every image URL: img tags, srcset, CSS backgrounds, favicons, og:image",[229,583,584],{},"1",[214,586,587,590,593],{},[229,588,589],{},"Extract SVGs, Fonts, Videos, Audio, Lottie",[229,591,592],{},"The files of that type",[229,594,595],{},"1 to 5",[11,597,598],{},"To try it:",[275,600,601,611,616],{},[278,602,603,604,607,608,610],{},"Install the node. On self-hosted n8n: ",[15,605,606],{},"Settings > Community nodes > Install",", package ",[33,609,35],{},". It is verified by n8n and arrives in n8n Cloud's nodes panel with their next release.",[278,612,613,614,36],{},"Add a MiroMiro node, create the credential with a ",[23,615,26],{"href":25},[278,617,618,619,621,622,625,626,494,629,625,632,36],{},"Pick ",[15,620,540],{},", paste a URL, set ",[15,623,624],{},"Section"," to ",[33,627,628],{},"Pricing",[15,630,631],{},"Output",[33,633,634],{},"Elementor Template",[11,636,637,638,640,641,644,645,647,648,651],{},"The ",[33,639,33],{}," field is the complete template. Send it through a ",[15,642,643],{},"Convert to File"," node and import the ",[33,646,106],{}," in WordPress. Every result also lists the page's other sections with a ready selector, so a Split + second MiroMiro node can rebuild the whole page. The ",[23,649,650],{"href":312},"ready-made templates"," do exactly that.",[38,653,655],{"id":654},"which-one-to-use","Which one to use",[208,657,658,674],{},[211,659,660],{},[214,661,662,665,668,671],{},[217,663,664],{},"You want",[217,666,667],{},"Use",[217,669,670],{},"Handles JavaScript sites",[217,672,673],{},"Cost",[224,675,676,690,704],{},[214,677,678,681,684,687],{},[229,679,680],{},"Text from static pages (prices, titles, links)",[229,682,683],{},"HTTP Request + HTML",[229,685,686],{},"No",[229,688,689],{},"Free",[214,691,692,695,698,701],{},[229,693,694],{},"Text or Markdown from JavaScript pages",[229,696,697],{},"Firecrawl or Apify node",[229,699,700],{},"Yes",[229,702,703],{},"Per page",[214,705,706,709,712,714],{},[229,707,708],{},"Code, Elementor, Shopify, brand kit, images",[229,710,711],{},"MiroMiro node",[229,713,700],{},[229,715,716],{},"1 to 10 credits per call",[38,718,720],{"id":719},"common-problems","Common problems",[11,722,723,726],{},[15,724,725],{},"The HTML node returns empty values."," The content is built by JavaScript. Check View Source; if it is missing there, switch to a browser node.",[11,728,729,735,736,739,740,743],{},[15,730,731,734],{},[33,732,733],{},"URL is not defined"," in an expression."," n8n's expression sandbox has no ",[33,737,738],{},"URL"," constructor. To get the domain of a link, use ",[33,741,742],{},"{{ $json.url.split('/')[2] }}"," instead.",[11,745,746,749],{},[15,747,748],{},"The site returns 403."," Bot protection. Browser nodes get through most of it. When a site refuses even a real browser, no scraper is going to work on it, and MiroMiro says so instead of returning an empty result (and does not charge the call).",[11,751,752,755,756,759],{},[15,753,754],{},"Images only appear when you scroll."," Lazy loading. On the MiroMiro images operation, add the ",[15,757,758],{},"Render"," option: the page is scrolled in a browser before the images are collected.",[11,761,762,765],{},[15,763,764],{},"One run, hundreds of URLs."," Read the list from a Google Sheet or a Code node; n8n runs each following node once per item. Same page, same settings within 24 hours costs nothing on MiroMiro, so re-running a failed batch only pays for what actually re-extracts.",[38,767,769],{"id":768},"or-start-from-a-template","Or start from a template",[11,771,772,773,491,776,491,779,491,782,785],{},"Every setup above exists as a free n8n template you import in one click: ",[23,774,775],{"href":48},"download every image from a website",[23,777,778],{"href":61},"rebuild a whole page as code",[23,780,781],{"href":92},"a page in Elementor",[23,783,784],{"href":144},"brand kits"," and more. The MiroMiro API includes 300 free credits a month, no card. You can start for free.",[38,787,789],{"id":788},"summary","Summary",[11,791,792],{},"For text on static pages, HTTP Request + HTML is all you need. For text on JavaScript pages, add a browser node. For anything you want to build with, the design itself, skip the selectors and use a node that returns code, templates and brand data directly.",{"title":316,"searchDepth":317,"depth":317,"links":794},[795,796,797,798,799,800,801],{"id":385,"depth":317,"text":386},{"id":502,"depth":317,"text":503},{"id":512,"depth":317,"text":513},{"id":654,"depth":317,"text":655},{"id":719,"depth":317,"text":720},{"id":768,"depth":317,"text":769},{"id":788,"depth":317,"text":789},"How to scrape a website with n8n: the HTTP Request + HTML node for text, a scraping node for JavaScript sites, and the MiroMiro node when you need code, Elementor, brand colors or images.",[804,807,810,813,816],{"question":805,"answer":806},"How do I scrape a website in n8n?","Add an HTTP Request node with the page URL, then an HTML node with the Extract HTML Content operation and a CSS selector for each value you want. That covers static pages. For pages that build themselves with JavaScript, use a node that runs a real browser, such as Firecrawl, Apify or MiroMiro.",{"question":808,"answer":809},"Can n8n scrape JavaScript websites?","Not with the HTTP Request node alone: it downloads the HTML before any JavaScript runs, so React, Next.js, Framer and Webflow pages often come back nearly empty. Use a node that loads the page in a real browser first.",{"question":811,"answer":812},"Can n8n turn a website into code or an Elementor template?","Yes, with the MiroMiro node. Its Extract Code operation returns a section of any page as Tailwind, HTML + CSS, React, Vue, an Elementor template (.json) or a Shopify section (.liquid), styled like the original. One section costs 10 credits.",{"question":814,"answer":815},"Is scraping with n8n free?","Self-hosted n8n and the HTTP Request and HTML nodes are free. Browser-based scraping services charge per page or per credit; MiroMiro includes 300 free credits a month with no card, which is about 30 sections as code or 300 image lists.",{"question":817,"answer":818},"How do I scrape many pages in one n8n run?","Put the URLs in a list (a Code node, a Google Sheet or a Read From File node), and n8n runs every node after it once per item. Add a Wait node if a site rate-limits you.",{},"/api-blog/n8n-website-scraping",7,[823,352,354,824],"free-n8n-templates-for-websites","how-to-extract-website-color-palette-programmatically",{"title":366,"description":802},"api-blog/n8n-website-scraping",[358,828,360,829,830],"web scraping","no-code","workflows","GN7_4Y-0YFN1A1j-mZ20AwQNfYnzvYIx6shjoWjWwXE",{"id":833,"title":834,"author":6,"body":835,"category":328,"date":329,"dateModified":330,"description":1073,"extension":332,"faqs":1074,"image":330,"meta":1090,"navigation":347,"path":1091,"readingTime":349,"relatedSlugs":1092,"seo":1094,"seoTitle":330,"stem":1095,"tags":1096,"__hash__":1099},"apiBlog/api-blog/rebuild-website-in-wordpress-with-n8n-and-elementor.md","n8n + WordPress: Rebuild Any Website in Elementor Automatically",{"type":8,"value":836,"toc":1064},[837,840,843,847,869,873,920,927,934,938,945,987,994,998,1009,1012,1016,1019,1045,1049,1055,1057],[11,838,839],{},"You can rebuild any live website in WordPress with n8n: the MiroMiro node turns each section of a page into an Elementor template, and n8n joins them into one page template you import. One section takes a minute to set up. A whole page is the same workflow plus a loop. A list of pages is the same loop again.",[11,841,842],{},"This is the setup agencies use to move clients off Webflow, Framer, Wix or a custom site, and to start a WordPress page from a design a client points at.",[38,844,846],{"id":845},"what-you-need","What you need",[394,848,849,852,859,866],{},[278,850,851],{},"n8n (self-hosted today; n8n Cloud gets the node with n8n's next release, it is already verified)",[278,853,854,855,607,857],{},"The MiroMiro node: ",[15,856,606],{},[33,858,35],{},[278,860,861,862,865],{},"A ",[23,863,864],{"href":25},"free MiroMiro API key",": 300 credits a month, no card",[278,867,868],{},"WordPress with Elementor (the free plugin is enough)",[38,870,872],{"id":871},"one-section-in-elementor","One section in Elementor",[275,874,875,886,903,917],{},[278,876,877,878,881,882,885],{},"Add a ",[15,879,880],{},"Manual Trigger",", then a ",[15,883,884],{},"MiroMiro"," node.",[278,887,888,889,891,892,895,896,899,900,36],{},"In the MiroMiro node: Operation ",[15,890,540],{},", URL ",[33,893,894],{},"https://www.allbirds.com",", Section ",[15,897,898],{},"Hero",", Output ",[15,901,902],{},"Elementor Template (WordPress)",[278,904,877,905,907,908,911,912,914,915,36],{},[15,906,643],{}," node: Operation ",[15,909,910],{},"Convert to Text File",", source property ",[33,913,33],{},", file name ending in ",[33,916,106],{},[278,918,919],{},"Execute, download the file.",[11,921,922,923,926],{},"In WordPress: ",[15,924,925],{},"Templates > Saved Templates > Import Templates",", pick the file, then insert it into any page with the folder icon in the Elementor editor.",[11,928,929,930,933],{},"That is the whole thing. The ready-made version is the ",[23,931,932],{"href":101},"section to Elementor template",", which also has a variant that takes a list of pages and sections and returns one template each.",[38,935,937],{"id":936},"a-whole-page-in-one-template","A whole page in one template",[11,939,940,941,944],{},"A page is a list of sections. MiroMiro gives you that list: every Extract Code result has a ",[33,942,943],{},"sections"," field with each section's label and a ready CSS selector.",[275,946,947,954,963,977,982],{},[278,948,949,951,952,36],{},[15,950,884],{}," (Extract Code, Elementor output) on the page. Besides the hero, it returns ",[33,953,943],{},[278,955,861,956,959,960,962],{},[15,957,958],{},"Code"," node that splits ",[33,961,943],{}," into one item per section (skipping the hero you already have).",[278,964,965,966,968,969,972,973,976],{},"A second ",[15,967,884],{}," node with ",[15,970,971],{},"Selector"," set to ",[33,974,975],{},"{{ $json.selector }}",", so each item becomes one Elementor section.",[278,978,861,979,981],{},[15,980,958],{}," node that joins the hero and every section, in page order, into one page template.",[278,983,984,986],{},[15,985,643],{},", then import as above.",[11,988,989,990,993],{},"Skip building it: the ",[23,991,992],{"href":92},"whole page in Elementor template"," is exactly these five nodes, tested end to end.",[38,995,997],{"id":996},"what-comes-out-in-elementor","What comes out in Elementor",[11,999,1000,1001,1004,1005,1008],{},"Each section arrives as one Elementor ",[15,1002,1003],{},"container"," holding an ",[15,1006,1007],{},"HTML widget"," with the section's markup and styles: the colors, fonts and spacing the page shows in a real browser, not a screenshot guess. It looks like the original the moment you import it.",[11,1010,1011],{},"You edit the text, links and images inside that HTML widget. If you want every heading, paragraph and button as its own native Elementor widget instead, the MiroMiro Chrome extension exports that (Download > Elementor template with Editable widgets on), one section or a whole page at a time.",[38,1013,1015],{"id":1014},"what-it-does-not-do","What it does not do",[11,1017,1018],{},"Be clear with clients about this part:",[394,1020,1021,1027,1033,1039],{},[278,1022,1023,1026],{},[15,1024,1025],{},"Content is the source site's."," Text and images belong to whoever owns the original. Replace them unless it is your client's own site.",[278,1028,1029,1032],{},[15,1030,1031],{},"Interactive parts arrive static."," Menus, sliders, tabs and forms come back in their first visible state. Rebuild them with Elementor's own widgets or a form plugin.",[278,1034,1035,1038],{},[15,1036,1037],{},"One page at a time."," It does not crawl a whole site by itself; you list the pages.",[278,1040,1041,1044],{},[15,1042,1043],{},"Fonts."," If the site uses a custom font, add it in Elementor > Custom Fonts (or Google Fonts if it is one) so the headings match.",[38,1046,1048],{"id":1047},"deliver-it-automatically","Deliver it automatically",[11,1050,1051,1052,1054],{},"Since it is n8n, the last step does not have to be a download. Swap ",[15,1053,643],{}," for a Google Drive or Dropbox node to drop the templates into a client folder, or an email node to send them. Put the page list in a Google Sheet and the whole migration runs when someone adds a row.",[38,1056,789],{"id":788},[11,1058,1059,1060,1063],{},"For one section, the MiroMiro node plus Convert to File is enough. For whole pages and site moves, start from the ",[23,1061,1062],{"href":92},"whole page in Elementor"," template and change only the website. Either way, every section lands in WordPress looking like the original, ready to edit. You can start for free with 300 credits a month.",{"title":316,"searchDepth":317,"depth":317,"links":1065},[1066,1067,1068,1069,1070,1071,1072],{"id":845,"depth":317,"text":846},{"id":871,"depth":317,"text":872},{"id":936,"depth":317,"text":937},{"id":996,"depth":317,"text":997},{"id":1014,"depth":317,"text":1015},{"id":1047,"depth":317,"text":1048},{"id":788,"depth":317,"text":789},"Use n8n to turn any live website into Elementor templates for WordPress: one section, a whole page, or a list of pages in one run. Step by step, with a free template.",[1075,1078,1081,1084,1087],{"question":1076,"answer":1077},"Can n8n create Elementor templates?","Yes. The MiroMiro node's Extract Code operation with the output set to Elementor Template returns a complete Elementor template (.json) for any section of a live website. A Convert to File node turns it into a file you import under Templates > Saved Templates > Import Templates.",{"question":1079,"answer":1080},"Are the imported sections editable in Elementor?","Yes. Each section is a container with an HTML widget holding its markup and styles; you edit the text, links and images there. The MiroMiro Chrome extension can instead export every heading, text, button and image as its own native Elementor widget.",{"question":1082,"answer":1083},"Do I need Elementor Pro?","No. The templates use a container and the HTML widget, both part of free Elementor.",{"question":1085,"answer":1086},"Can I move a whole site from Webflow, Framer or Wix to WordPress with n8n?","Page by page, yes: list the pages, rebuild each one as an Elementor page template, then import them. Navigation menus, forms, sliders and anything that needs a backend still have to be set up in WordPress.",{"question":1088,"answer":1089},"How much does it cost?","Each section is 10 MiroMiro credits. A page of 6 to 12 sections is 60 to 120 credits, and the free plan includes 300 credits a month with no card. Re-running the same page within 24 hours is free.",{},"/api-blog/rebuild-website-in-wordpress-with-n8n-and-elementor",[353,823,351,1093],"make-ai-agent-match-a-real-website-design",{"title":834,"description":1073},"api-blog/rebuild-website-in-wordpress-with-n8n-and-elementor",[358,1097,361,1098,360],"wordpress","website migration","BcUfraMl3oSHucyFD_ltxX1yiwYd3wRv4KLpVY-kzsk",{"id":1101,"title":1102,"author":6,"body":1103,"category":328,"date":3460,"dateModified":3460,"description":3461,"extension":332,"faqs":3462,"image":330,"meta":3475,"navigation":347,"path":3476,"readingTime":821,"relatedSlugs":3477,"seo":3481,"seoTitle":3482,"stem":3483,"tags":3484,"__hash__":3489},"apiBlog/api-blog/convert-html-to-elementor-json-template.md","How to Convert HTML to an Elementor JSON Template (Format, Script, API)",{"type":8,"value":1104,"toc":3443},[1105,1112,1115,1119,1122,1501,1504,1542,1546,1552,2907,2910,2934,2950,2954,2983,2987,2990,3018,3041,3047,3128,3142,3152,3162,3166,3169,3172,3176,3250,3253,3257,3263,3322,3332,3335,3343,3350,3352,3355,3359,3364,3388,3392,3395,3399,3411,3415,3418,3422,3439],[11,1106,1107,1108,1111],{},"An Elementor template is a JSON file. To convert HTML into one, put your markup and CSS inside a single HTML widget, wrap that widget in a container, and save the result with ",[33,1109,1110],{},"\"version\": \"0.4\"",". Elementor imports it under Templates, then Saved Templates.",[11,1113,1114],{},"That is the whole trick. The rest of this post is the exact format, a script that does it, and the five things that go wrong after import.",[38,1116,1118],{"id":1117},"the-template-format","The template format",[11,1120,1121],{},"This is the smallest file Elementor accepts:",[1123,1124,1128],"pre",{"className":1125,"code":1126,"language":1127,"meta":316,"style":316},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"version\": \"0.4\",\n  \"title\": \"Pricing section\",\n  \"type\": \"section\",\n  \"content\": [\n    {\n      \"id\": \"a1b2c3d\",\n      \"elType\": \"container\",\n      \"settings\": { \"content_width\": \"full\" },\n      \"elements\": [\n        {\n          \"id\": \"e4f5a6b\",\n          \"elType\": \"widget\",\n          \"widgetType\": \"html\",\n          \"settings\": { \"html\": \"\u003Cdiv class=\\\"pricing\\\">…\u003C/div>\u003Cstyle>.pricing{…}\u003C/style>\" },\n          \"elements\": []\n        }\n      ],\n      \"isInner\": false\n    }\n  ],\n  \"page_settings\": []\n}\n","json",[33,1129,1130,1139,1166,1186,1207,1221,1226,1248,1268,1303,1317,1323,1344,1364,1385,1428,1442,1448,1454,1469,1475,1481,1495],{"__ignoreMap":316},[1131,1132,1135],"span",{"class":1133,"line":1134},"line",1,[1131,1136,1138],{"class":1137},"sMK4o","{\n",[1131,1140,1141,1144,1148,1151,1154,1157,1161,1163],{"class":1133,"line":317},[1131,1142,1143],{"class":1137},"  \"",[1131,1145,1147],{"class":1146},"spNyl","version",[1131,1149,1150],{"class":1137},"\"",[1131,1152,1153],{"class":1137},":",[1131,1155,1156],{"class":1137}," \"",[1131,1158,1160],{"class":1159},"sfazB","0.4",[1131,1162,1150],{"class":1137},[1131,1164,1165],{"class":1137},",\n",[1131,1167,1169,1171,1173,1175,1177,1179,1182,1184],{"class":1133,"line":1168},3,[1131,1170,1143],{"class":1137},[1131,1172,451],{"class":1146},[1131,1174,1150],{"class":1137},[1131,1176,1153],{"class":1137},[1131,1178,1156],{"class":1137},[1131,1180,1181],{"class":1159},"Pricing section",[1131,1183,1150],{"class":1137},[1131,1185,1165],{"class":1137},[1131,1187,1189,1191,1194,1196,1198,1200,1203,1205],{"class":1133,"line":1188},4,[1131,1190,1143],{"class":1137},[1131,1192,1193],{"class":1146},"type",[1131,1195,1150],{"class":1137},[1131,1197,1153],{"class":1137},[1131,1199,1156],{"class":1137},[1131,1201,1202],{"class":1159},"section",[1131,1204,1150],{"class":1137},[1131,1206,1165],{"class":1137},[1131,1208,1210,1212,1214,1216,1218],{"class":1133,"line":1209},5,[1131,1211,1143],{"class":1137},[1131,1213,485],{"class":1146},[1131,1215,1150],{"class":1137},[1131,1217,1153],{"class":1137},[1131,1219,1220],{"class":1137}," [\n",[1131,1222,1223],{"class":1133,"line":349},[1131,1224,1225],{"class":1137},"    {\n",[1131,1227,1228,1231,1235,1237,1239,1241,1244,1246],{"class":1133,"line":821},[1131,1229,1230],{"class":1137},"      \"",[1131,1232,1234],{"class":1233},"sBMFI","id",[1131,1236,1150],{"class":1137},[1131,1238,1153],{"class":1137},[1131,1240,1156],{"class":1137},[1131,1242,1243],{"class":1159},"a1b2c3d",[1131,1245,1150],{"class":1137},[1131,1247,1165],{"class":1137},[1131,1249,1251,1253,1256,1258,1260,1262,1264,1266],{"class":1133,"line":1250},8,[1131,1252,1230],{"class":1137},[1131,1254,1255],{"class":1233},"elType",[1131,1257,1150],{"class":1137},[1131,1259,1153],{"class":1137},[1131,1261,1156],{"class":1137},[1131,1263,1003],{"class":1159},[1131,1265,1150],{"class":1137},[1131,1267,1165],{"class":1137},[1131,1269,1271,1273,1276,1278,1280,1283,1285,1289,1291,1293,1295,1298,1300],{"class":1133,"line":1270},9,[1131,1272,1230],{"class":1137},[1131,1274,1275],{"class":1233},"settings",[1131,1277,1150],{"class":1137},[1131,1279,1153],{"class":1137},[1131,1281,1282],{"class":1137}," {",[1131,1284,1156],{"class":1137},[1131,1286,1288],{"class":1287},"sbssI","content_width",[1131,1290,1150],{"class":1137},[1131,1292,1153],{"class":1137},[1131,1294,1156],{"class":1137},[1131,1296,1297],{"class":1159},"full",[1131,1299,1150],{"class":1137},[1131,1301,1302],{"class":1137}," },\n",[1131,1304,1306,1308,1311,1313,1315],{"class":1133,"line":1305},10,[1131,1307,1230],{"class":1137},[1131,1309,1310],{"class":1233},"elements",[1131,1312,1150],{"class":1137},[1131,1314,1153],{"class":1137},[1131,1316,1220],{"class":1137},[1131,1318,1320],{"class":1133,"line":1319},11,[1131,1321,1322],{"class":1137},"        {\n",[1131,1324,1326,1329,1331,1333,1335,1337,1340,1342],{"class":1133,"line":1325},12,[1131,1327,1328],{"class":1137},"          \"",[1131,1330,1234],{"class":1287},[1131,1332,1150],{"class":1137},[1131,1334,1153],{"class":1137},[1131,1336,1156],{"class":1137},[1131,1338,1339],{"class":1159},"e4f5a6b",[1131,1341,1150],{"class":1137},[1131,1343,1165],{"class":1137},[1131,1345,1347,1349,1351,1353,1355,1357,1360,1362],{"class":1133,"line":1346},13,[1131,1348,1328],{"class":1137},[1131,1350,1255],{"class":1287},[1131,1352,1150],{"class":1137},[1131,1354,1153],{"class":1137},[1131,1356,1156],{"class":1137},[1131,1358,1359],{"class":1159},"widget",[1131,1361,1150],{"class":1137},[1131,1363,1165],{"class":1137},[1131,1365,1367,1369,1372,1374,1376,1378,1381,1383],{"class":1133,"line":1366},14,[1131,1368,1328],{"class":1137},[1131,1370,1371],{"class":1287},"widgetType",[1131,1373,1150],{"class":1137},[1131,1375,1153],{"class":1137},[1131,1377,1156],{"class":1137},[1131,1379,1380],{"class":1159},"html",[1131,1382,1150],{"class":1137},[1131,1384,1165],{"class":1137},[1131,1386,1388,1390,1392,1394,1396,1398,1400,1403,1405,1407,1409,1412,1416,1419,1421,1424,1426],{"class":1133,"line":1387},15,[1131,1389,1328],{"class":1137},[1131,1391,1275],{"class":1287},[1131,1393,1150],{"class":1137},[1131,1395,1153],{"class":1137},[1131,1397,1282],{"class":1137},[1131,1399,1156],{"class":1137},[1131,1401,1380],{"class":1402},"swJcz",[1131,1404,1150],{"class":1137},[1131,1406,1153],{"class":1137},[1131,1408,1156],{"class":1137},[1131,1410,1411],{"class":1159},"\u003Cdiv class=",[1131,1413,1415],{"class":1414},"sTEyZ","\\\"",[1131,1417,1418],{"class":1159},"pricing",[1131,1420,1415],{"class":1414},[1131,1422,1423],{"class":1159},">…\u003C/div>\u003Cstyle>.pricing{…}\u003C/style>",[1131,1425,1150],{"class":1137},[1131,1427,1302],{"class":1137},[1131,1429,1431,1433,1435,1437,1439],{"class":1133,"line":1430},16,[1131,1432,1328],{"class":1137},[1131,1434,1310],{"class":1287},[1131,1436,1150],{"class":1137},[1131,1438,1153],{"class":1137},[1131,1440,1441],{"class":1137}," []\n",[1131,1443,1445],{"class":1133,"line":1444},17,[1131,1446,1447],{"class":1137},"        }\n",[1131,1449,1451],{"class":1133,"line":1450},18,[1131,1452,1453],{"class":1137},"      ],\n",[1131,1455,1457,1459,1462,1464,1466],{"class":1133,"line":1456},19,[1131,1458,1230],{"class":1137},[1131,1460,1461],{"class":1233},"isInner",[1131,1463,1150],{"class":1137},[1131,1465,1153],{"class":1137},[1131,1467,1468],{"class":1137}," false\n",[1131,1470,1472],{"class":1133,"line":1471},20,[1131,1473,1474],{"class":1137},"    }\n",[1131,1476,1478],{"class":1133,"line":1477},21,[1131,1479,1480],{"class":1137},"  ],\n",[1131,1482,1484,1486,1489,1491,1493],{"class":1133,"line":1483},22,[1131,1485,1143],{"class":1137},[1131,1487,1488],{"class":1146},"page_settings",[1131,1490,1150],{"class":1137},[1131,1492,1153],{"class":1137},[1131,1494,1441],{"class":1137},[1131,1496,1498],{"class":1133,"line":1497},23,[1131,1499,1500],{"class":1137},"}\n",[11,1502,1503],{},"Four things to know:",[394,1505,1506,1518,1523,1535],{},[278,1507,1508,1510,1511,1513,1514,1517],{},[33,1509,1193],{}," is ",[33,1512,1202],{}," for one block or ",[33,1515,1516],{},"page"," for a full page.",[278,1519,1520,1522],{},[33,1521,1234],{}," values are short lowercase hex strings. They only need to be unique inside the file.",[278,1524,1525,1528,1529,494,1531,1534],{},[33,1526,1527],{},"elType: \"container\""," is the flexbox container. It has been the default layout element since Elementor 3.16. The older ",[33,1530,1202],{},[33,1532,1533],{},"column"," pair still imports, but it gets clamped to the theme's content width.",[278,1536,1537,1538,1541],{},"The HTML widget takes one string. Your CSS goes in a ",[33,1539,1540],{},"\u003Cstyle>"," tag inside that same string.",[38,1543,1545],{"id":1544},"a-script-that-wraps-html-and-css","A script that wraps HTML and CSS",[11,1547,1548,1549,1153],{},"No dependencies. Save it as ",[33,1550,1551],{},"to-elementor.mjs",[1123,1553,1557],{"className":1554,"code":1555,"language":1556,"meta":316,"style":316},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { readFileSync, writeFileSync } from 'node:fs'\nimport { randomBytes } from 'node:crypto'\n\nconst [htmlFile, cssFile, out = 'template.json'] = process.argv.slice(2)\nconst html = readFileSync(htmlFile, 'utf8')\nconst css = cssFile ? readFileSync(cssFile, 'utf8') : ''\nconst id = () => randomBytes(4).toString('hex').slice(0, 7)\nconst scope = `imp-${id()}`\n\n// Prefix every selector so the theme and the block cannot restyle each other.\n// Walks the stylesheet block by block: @media and @supports are scoped inside,\n// other at-rules (@keyframes, @font-face) pass through untouched.\nfunction scopeCss(css) {\n  let out = ''\n  let i = 0\n  while (i \u003C css.length) {\n    const open = css.indexOf('{', i)\n    if (open === -1) break\n    const prelude = css.slice(i, open).trim()\n    let depth = 1\n    let j = open + 1\n    while (j \u003C css.length && depth) {\n      if (css[j] === '{') depth++\n      else if (css[j] === '}') depth--\n      j++\n    }\n    const body = css.slice(open + 1, j - 1)\n    if (/^@(media|supports)/.test(prelude)) out += `${prelude} {\n${scopeCss(body)}}\n`\n    else if (prelude.startsWith('@')) out += `${prelude} {${body}}\n`\n    else out += `${prelude.split(',').map(sel => `.${scope} ${sel.trim()}`).join(', ')} {${body}}\n`\n    i = j\n  }\n  return out\n}\nconst scoped = scopeCss(css)\n\nconst widget = `\u003Cdiv class=\"${scope}\">\\n${html}\\n\u003C/div>\\n\u003Cstyle>\\n${scoped}\\n\u003C/style>`\n\nconst template = {\n  version: '0.4',\n  title: 'Imported section',\n  type: 'section',\n  content: [{\n    id: id(),\n    elType: 'container',\n    settings: { content_width: 'full', padding: { unit: 'px', top: '0', right: '0', bottom: '0', left: '0', isLinked: true } },\n    elements: [{ id: id(), elType: 'widget', widgetType: 'html', settings: { html: widget }, elements: [] }],\n    isInner: false\n  }],\n  page_settings: []\n}\n\nwriteFileSync(out, JSON.stringify(template, null, 2))\nconsole.log(`Wrote ${out}`)\n","js",[33,1558,1559,1591,1611,1616,1677,1702,1738,1794,1820,1824,1830,1835,1840,1859,1871,1883,1909,1941,1964,1997,2010,2026,2053,2087,2122,2130,2135,2170,2228,2243,2249,2297,2302,2396,2401,2412,2418,2427,2432,2447,2452,2510,2515,2527,2543,2560,2576,2588,2603,2619,2728,2807,2817,2827,2837,2842,2847,2880],{"__ignoreMap":316},[1131,1560,1561,1565,1567,1570,1573,1576,1579,1582,1585,1588],{"class":1133,"line":1134},[1131,1562,1564],{"class":1563},"s7zQu","import",[1131,1566,1282],{"class":1137},[1131,1568,1569],{"class":1414}," readFileSync",[1131,1571,1572],{"class":1137},",",[1131,1574,1575],{"class":1414}," writeFileSync",[1131,1577,1578],{"class":1137}," }",[1131,1580,1581],{"class":1563}," from",[1131,1583,1584],{"class":1137}," '",[1131,1586,1587],{"class":1159},"node:fs",[1131,1589,1590],{"class":1137},"'\n",[1131,1592,1593,1595,1597,1600,1602,1604,1606,1609],{"class":1133,"line":317},[1131,1594,1564],{"class":1563},[1131,1596,1282],{"class":1137},[1131,1598,1599],{"class":1414}," randomBytes",[1131,1601,1578],{"class":1137},[1131,1603,1581],{"class":1563},[1131,1605,1584],{"class":1137},[1131,1607,1608],{"class":1159},"node:crypto",[1131,1610,1590],{"class":1137},[1131,1612,1613],{"class":1133,"line":1168},[1131,1614,1615],{"emptyLinePlaceholder":347},"\n",[1131,1617,1618,1621,1624,1627,1629,1632,1634,1637,1640,1642,1645,1648,1651,1654,1657,1659,1662,1664,1668,1671,1674],{"class":1133,"line":1188},[1131,1619,1620],{"class":1146},"const",[1131,1622,1623],{"class":1137}," [",[1131,1625,1626],{"class":1414},"htmlFile",[1131,1628,1572],{"class":1137},[1131,1630,1631],{"class":1414}," cssFile",[1131,1633,1572],{"class":1137},[1131,1635,1636],{"class":1414}," out ",[1131,1638,1639],{"class":1137},"=",[1131,1641,1584],{"class":1137},[1131,1643,1644],{"class":1159},"template.json",[1131,1646,1647],{"class":1137},"'",[1131,1649,1650],{"class":1137},"]",[1131,1652,1653],{"class":1137}," =",[1131,1655,1656],{"class":1414}," process",[1131,1658,36],{"class":1137},[1131,1660,1661],{"class":1414},"argv",[1131,1663,36],{"class":1137},[1131,1665,1667],{"class":1666},"s2Zo4","slice",[1131,1669,1670],{"class":1414},"(",[1131,1672,1673],{"class":1287},"2",[1131,1675,1676],{"class":1414},")\n",[1131,1678,1679,1681,1684,1686,1688,1691,1693,1695,1698,1700],{"class":1133,"line":1209},[1131,1680,1620],{"class":1146},[1131,1682,1683],{"class":1414}," html ",[1131,1685,1639],{"class":1137},[1131,1687,1569],{"class":1666},[1131,1689,1690],{"class":1414},"(htmlFile",[1131,1692,1572],{"class":1137},[1131,1694,1584],{"class":1137},[1131,1696,1697],{"class":1159},"utf8",[1131,1699,1647],{"class":1137},[1131,1701,1676],{"class":1414},[1131,1703,1704,1706,1709,1711,1714,1717,1719,1722,1724,1726,1728,1730,1733,1735],{"class":1133,"line":349},[1131,1705,1620],{"class":1146},[1131,1707,1708],{"class":1414}," css ",[1131,1710,1639],{"class":1137},[1131,1712,1713],{"class":1414}," cssFile ",[1131,1715,1716],{"class":1137},"?",[1131,1718,1569],{"class":1666},[1131,1720,1721],{"class":1414},"(cssFile",[1131,1723,1572],{"class":1137},[1131,1725,1584],{"class":1137},[1131,1727,1697],{"class":1159},[1131,1729,1647],{"class":1137},[1131,1731,1732],{"class":1414},") ",[1131,1734,1153],{"class":1137},[1131,1736,1737],{"class":1137}," ''\n",[1131,1739,1740,1742,1745,1747,1750,1753,1755,1757,1760,1762,1764,1767,1769,1771,1774,1776,1778,1780,1782,1784,1787,1789,1792],{"class":1133,"line":821},[1131,1741,1620],{"class":1146},[1131,1743,1744],{"class":1414}," id ",[1131,1746,1639],{"class":1137},[1131,1748,1749],{"class":1137}," ()",[1131,1751,1752],{"class":1146}," =>",[1131,1754,1599],{"class":1666},[1131,1756,1670],{"class":1414},[1131,1758,1759],{"class":1287},"4",[1131,1761,418],{"class":1414},[1131,1763,36],{"class":1137},[1131,1765,1766],{"class":1666},"toString",[1131,1768,1670],{"class":1414},[1131,1770,1647],{"class":1137},[1131,1772,1773],{"class":1159},"hex",[1131,1775,1647],{"class":1137},[1131,1777,418],{"class":1414},[1131,1779,36],{"class":1137},[1131,1781,1667],{"class":1666},[1131,1783,1670],{"class":1414},[1131,1785,1786],{"class":1287},"0",[1131,1788,1572],{"class":1137},[1131,1790,1791],{"class":1287}," 7",[1131,1793,1676],{"class":1414},[1131,1795,1796,1798,1801,1803,1806,1809,1812,1814,1817],{"class":1133,"line":1250},[1131,1797,1620],{"class":1146},[1131,1799,1800],{"class":1414}," scope ",[1131,1802,1639],{"class":1137},[1131,1804,1805],{"class":1137}," `",[1131,1807,1808],{"class":1159},"imp-",[1131,1810,1811],{"class":1137},"${",[1131,1813,1234],{"class":1666},[1131,1815,1816],{"class":1414},"()",[1131,1818,1819],{"class":1137},"}`\n",[1131,1821,1822],{"class":1133,"line":1270},[1131,1823,1615],{"emptyLinePlaceholder":347},[1131,1825,1826],{"class":1133,"line":1305},[1131,1827,1829],{"class":1828},"sHwdD","// Prefix every selector so the theme and the block cannot restyle each other.\n",[1131,1831,1832],{"class":1133,"line":1319},[1131,1833,1834],{"class":1828},"// Walks the stylesheet block by block: @media and @supports are scoped inside,\n",[1131,1836,1837],{"class":1133,"line":1325},[1131,1838,1839],{"class":1828},"// other at-rules (@keyframes, @font-face) pass through untouched.\n",[1131,1841,1842,1845,1848,1850,1854,1856],{"class":1133,"line":1346},[1131,1843,1844],{"class":1146},"function",[1131,1846,1847],{"class":1666}," scopeCss",[1131,1849,1670],{"class":1137},[1131,1851,1853],{"class":1852},"sHdIc","css",[1131,1855,418],{"class":1137},[1131,1857,1858],{"class":1137}," {\n",[1131,1860,1861,1864,1867,1869],{"class":1133,"line":1366},[1131,1862,1863],{"class":1146},"  let",[1131,1865,1866],{"class":1414}," out",[1131,1868,1653],{"class":1137},[1131,1870,1737],{"class":1137},[1131,1872,1873,1875,1878,1880],{"class":1133,"line":1387},[1131,1874,1863],{"class":1146},[1131,1876,1877],{"class":1414}," i",[1131,1879,1653],{"class":1137},[1131,1881,1882],{"class":1287}," 0\n",[1131,1884,1885,1888,1891,1894,1897,1900,1902,1905,1907],{"class":1133,"line":1430},[1131,1886,1887],{"class":1563},"  while",[1131,1889,1890],{"class":1402}," (",[1131,1892,1893],{"class":1414},"i",[1131,1895,1896],{"class":1137}," \u003C",[1131,1898,1899],{"class":1414}," css",[1131,1901,36],{"class":1137},[1131,1903,1904],{"class":1414},"length",[1131,1906,1732],{"class":1402},[1131,1908,1138],{"class":1137},[1131,1910,1911,1914,1917,1919,1921,1923,1926,1928,1930,1933,1935,1937,1939],{"class":1133,"line":1444},[1131,1912,1913],{"class":1146},"    const",[1131,1915,1916],{"class":1414}," open",[1131,1918,1653],{"class":1137},[1131,1920,1899],{"class":1414},[1131,1922,36],{"class":1137},[1131,1924,1925],{"class":1666},"indexOf",[1131,1927,1670],{"class":1402},[1131,1929,1647],{"class":1137},[1131,1931,1932],{"class":1159},"{",[1131,1934,1647],{"class":1137},[1131,1936,1572],{"class":1137},[1131,1938,1877],{"class":1414},[1131,1940,1676],{"class":1402},[1131,1942,1943,1946,1948,1951,1954,1957,1959,1961],{"class":1133,"line":1450},[1131,1944,1945],{"class":1563},"    if",[1131,1947,1890],{"class":1402},[1131,1949,1950],{"class":1414},"open",[1131,1952,1953],{"class":1137}," ===",[1131,1955,1956],{"class":1137}," -",[1131,1958,584],{"class":1287},[1131,1960,1732],{"class":1402},[1131,1962,1963],{"class":1563},"break\n",[1131,1965,1966,1968,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1994],{"class":1133,"line":1456},[1131,1967,1913],{"class":1146},[1131,1969,1970],{"class":1414}," prelude",[1131,1972,1653],{"class":1137},[1131,1974,1899],{"class":1414},[1131,1976,36],{"class":1137},[1131,1978,1667],{"class":1666},[1131,1980,1670],{"class":1402},[1131,1982,1893],{"class":1414},[1131,1984,1572],{"class":1137},[1131,1986,1916],{"class":1414},[1131,1988,418],{"class":1402},[1131,1990,36],{"class":1137},[1131,1992,1993],{"class":1666},"trim",[1131,1995,1996],{"class":1402},"()\n",[1131,1998,1999,2002,2005,2007],{"class":1133,"line":1471},[1131,2000,2001],{"class":1146},"    let",[1131,2003,2004],{"class":1414}," depth",[1131,2006,1653],{"class":1137},[1131,2008,2009],{"class":1287}," 1\n",[1131,2011,2012,2014,2017,2019,2021,2024],{"class":1133,"line":1477},[1131,2013,2001],{"class":1146},[1131,2015,2016],{"class":1414}," j",[1131,2018,1653],{"class":1137},[1131,2020,1916],{"class":1414},[1131,2022,2023],{"class":1137}," +",[1131,2025,2009],{"class":1287},[1131,2027,2028,2031,2033,2036,2038,2040,2042,2044,2047,2049,2051],{"class":1133,"line":1483},[1131,2029,2030],{"class":1563},"    while",[1131,2032,1890],{"class":1402},[1131,2034,2035],{"class":1414},"j",[1131,2037,1896],{"class":1137},[1131,2039,1899],{"class":1414},[1131,2041,36],{"class":1137},[1131,2043,1904],{"class":1414},[1131,2045,2046],{"class":1137}," &&",[1131,2048,2004],{"class":1414},[1131,2050,1732],{"class":1402},[1131,2052,1138],{"class":1137},[1131,2054,2055,2058,2060,2062,2065,2067,2070,2073,2075,2077,2079,2081,2084],{"class":1133,"line":1497},[1131,2056,2057],{"class":1563},"      if",[1131,2059,1890],{"class":1402},[1131,2061,1853],{"class":1414},[1131,2063,2064],{"class":1402},"[",[1131,2066,2035],{"class":1414},[1131,2068,2069],{"class":1402},"] ",[1131,2071,2072],{"class":1137},"===",[1131,2074,1584],{"class":1137},[1131,2076,1932],{"class":1159},[1131,2078,1647],{"class":1137},[1131,2080,1732],{"class":1402},[1131,2082,2083],{"class":1414},"depth",[1131,2085,2086],{"class":1137},"++\n",[1131,2088,2090,2093,2096,2098,2100,2102,2104,2106,2108,2110,2113,2115,2117,2119],{"class":1133,"line":2089},24,[1131,2091,2092],{"class":1563},"      else",[1131,2094,2095],{"class":1563}," if",[1131,2097,1890],{"class":1402},[1131,2099,1853],{"class":1414},[1131,2101,2064],{"class":1402},[1131,2103,2035],{"class":1414},[1131,2105,2069],{"class":1402},[1131,2107,2072],{"class":1137},[1131,2109,1584],{"class":1137},[1131,2111,2112],{"class":1159},"}",[1131,2114,1647],{"class":1137},[1131,2116,1732],{"class":1402},[1131,2118,2083],{"class":1414},[1131,2120,2121],{"class":1137},"--\n",[1131,2123,2125,2128],{"class":1133,"line":2124},25,[1131,2126,2127],{"class":1414},"      j",[1131,2129,2086],{"class":1137},[1131,2131,2133],{"class":1133,"line":2132},26,[1131,2134,1474],{"class":1137},[1131,2136,2138,2140,2143,2145,2147,2149,2151,2153,2155,2157,2160,2162,2164,2166,2168],{"class":1133,"line":2137},27,[1131,2139,1913],{"class":1146},[1131,2141,2142],{"class":1414}," body",[1131,2144,1653],{"class":1137},[1131,2146,1899],{"class":1414},[1131,2148,36],{"class":1137},[1131,2150,1667],{"class":1666},[1131,2152,1670],{"class":1402},[1131,2154,1950],{"class":1414},[1131,2156,2023],{"class":1137},[1131,2158,2159],{"class":1287}," 1",[1131,2161,1572],{"class":1137},[1131,2163,2016],{"class":1414},[1131,2165,1956],{"class":1137},[1131,2167,2159],{"class":1287},[1131,2169,1676],{"class":1402},[1131,2171,2173,2175,2177,2180,2183,2186,2188,2191,2194,2197,2200,2202,2205,2207,2210,2213,2216,2219,2222,2224,2226],{"class":1133,"line":2172},28,[1131,2174,1945],{"class":1563},[1131,2176,1890],{"class":1402},[1131,2178,2179],{"class":1137},"/",[1131,2181,2182],{"class":1563},"^",[1131,2184,2185],{"class":1159},"@",[1131,2187,1670],{"class":1137},[1131,2189,2190],{"class":1159},"media",[1131,2192,2193],{"class":1137},"|",[1131,2195,2196],{"class":1159},"supports",[1131,2198,2199],{"class":1137},")/",[1131,2201,36],{"class":1137},[1131,2203,2204],{"class":1666},"test",[1131,2206,1670],{"class":1402},[1131,2208,2209],{"class":1414},"prelude",[1131,2211,2212],{"class":1402},")) ",[1131,2214,2215],{"class":1414},"out",[1131,2217,2218],{"class":1137}," +=",[1131,2220,2221],{"class":1137}," `${",[1131,2223,2209],{"class":1414},[1131,2225,2112],{"class":1137},[1131,2227,1858],{"class":1159},[1131,2229,2231,2233,2236,2239,2241],{"class":1133,"line":2230},29,[1131,2232,1811],{"class":1137},[1131,2234,2235],{"class":1666},"scopeCss",[1131,2237,2238],{"class":1414},"(body)",[1131,2240,2112],{"class":1137},[1131,2242,1500],{"class":1159},[1131,2244,2246],{"class":1133,"line":2245},30,[1131,2247,2248],{"class":1137},"`\n",[1131,2250,2252,2255,2257,2259,2261,2263,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2293,2295],{"class":1133,"line":2251},31,[1131,2253,2254],{"class":1563},"    else",[1131,2256,2095],{"class":1563},[1131,2258,1890],{"class":1402},[1131,2260,2209],{"class":1414},[1131,2262,36],{"class":1137},[1131,2264,2265],{"class":1666},"startsWith",[1131,2267,1670],{"class":1402},[1131,2269,1647],{"class":1137},[1131,2271,2185],{"class":1159},[1131,2273,1647],{"class":1137},[1131,2275,2212],{"class":1402},[1131,2277,2215],{"class":1414},[1131,2279,2218],{"class":1137},[1131,2281,2221],{"class":1137},[1131,2283,2209],{"class":1414},[1131,2285,2112],{"class":1137},[1131,2287,1282],{"class":1159},[1131,2289,1811],{"class":1137},[1131,2291,2292],{"class":1414},"body",[1131,2294,2112],{"class":1137},[1131,2296,1500],{"class":1159},[1131,2298,2300],{"class":1133,"line":2299},32,[1131,2301,2248],{"class":1137},[1131,2303,2305,2307,2309,2311,2313,2315,2317,2320,2322,2324,2326,2328,2330,2332,2335,2337,2340,2342,2344,2346,2348,2351,2353,2356,2358,2360,2362,2364,2367,2369,2371,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394],{"class":1133,"line":2304},33,[1131,2306,2254],{"class":1563},[1131,2308,1866],{"class":1414},[1131,2310,2218],{"class":1137},[1131,2312,2221],{"class":1137},[1131,2314,2209],{"class":1414},[1131,2316,36],{"class":1137},[1131,2318,2319],{"class":1666},"split",[1131,2321,1670],{"class":1414},[1131,2323,1647],{"class":1137},[1131,2325,1572],{"class":1159},[1131,2327,1647],{"class":1137},[1131,2329,418],{"class":1414},[1131,2331,36],{"class":1137},[1131,2333,2334],{"class":1666},"map",[1131,2336,1670],{"class":1414},[1131,2338,2339],{"class":1852},"sel",[1131,2341,1752],{"class":1146},[1131,2343,1805],{"class":1137},[1131,2345,36],{"class":1159},[1131,2347,1811],{"class":1137},[1131,2349,2350],{"class":1414},"scope",[1131,2352,2112],{"class":1137},[1131,2354,2355],{"class":1137}," ${",[1131,2357,2339],{"class":1414},[1131,2359,36],{"class":1137},[1131,2361,1993],{"class":1666},[1131,2363,1816],{"class":1414},[1131,2365,2366],{"class":1137},"}`",[1131,2368,418],{"class":1414},[1131,2370,36],{"class":1137},[1131,2372,2373],{"class":1666},"join",[1131,2375,1670],{"class":1414},[1131,2377,1647],{"class":1137},[1131,2379,491],{"class":1159},[1131,2381,1647],{"class":1137},[1131,2383,418],{"class":1414},[1131,2385,2112],{"class":1137},[1131,2387,1282],{"class":1159},[1131,2389,1811],{"class":1137},[1131,2391,2292],{"class":1414},[1131,2393,2112],{"class":1137},[1131,2395,1500],{"class":1159},[1131,2397,2399],{"class":1133,"line":2398},34,[1131,2400,2248],{"class":1137},[1131,2402,2404,2407,2409],{"class":1133,"line":2403},35,[1131,2405,2406],{"class":1414},"    i",[1131,2408,1653],{"class":1137},[1131,2410,2411],{"class":1414}," j\n",[1131,2413,2415],{"class":1133,"line":2414},36,[1131,2416,2417],{"class":1137},"  }\n",[1131,2419,2421,2424],{"class":1133,"line":2420},37,[1131,2422,2423],{"class":1563},"  return",[1131,2425,2426],{"class":1414}," out\n",[1131,2428,2430],{"class":1133,"line":2429},38,[1131,2431,1500],{"class":1137},[1131,2433,2435,2437,2440,2442,2444],{"class":1133,"line":2434},39,[1131,2436,1620],{"class":1146},[1131,2438,2439],{"class":1414}," scoped ",[1131,2441,1639],{"class":1137},[1131,2443,1847],{"class":1666},[1131,2445,2446],{"class":1414},"(css)\n",[1131,2448,2450],{"class":1133,"line":2449},40,[1131,2451,1615],{"emptyLinePlaceholder":347},[1131,2453,2455,2457,2460,2462,2464,2467,2469,2471,2473,2476,2479,2481,2483,2485,2487,2490,2492,2494,2496,2498,2501,2503,2505,2508],{"class":1133,"line":2454},41,[1131,2456,1620],{"class":1146},[1131,2458,2459],{"class":1414}," widget ",[1131,2461,1639],{"class":1137},[1131,2463,1805],{"class":1137},[1131,2465,2466],{"class":1159},"\u003Cdiv class=\"",[1131,2468,1811],{"class":1137},[1131,2470,2350],{"class":1414},[1131,2472,2112],{"class":1137},[1131,2474,2475],{"class":1159},"\">",[1131,2477,2478],{"class":1414},"\\n",[1131,2480,1811],{"class":1137},[1131,2482,1380],{"class":1414},[1131,2484,2112],{"class":1137},[1131,2486,2478],{"class":1414},[1131,2488,2489],{"class":1159},"\u003C/div>",[1131,2491,2478],{"class":1414},[1131,2493,1540],{"class":1159},[1131,2495,2478],{"class":1414},[1131,2497,1811],{"class":1137},[1131,2499,2500],{"class":1414},"scoped",[1131,2502,2112],{"class":1137},[1131,2504,2478],{"class":1414},[1131,2506,2507],{"class":1159},"\u003C/style>",[1131,2509,2248],{"class":1137},[1131,2511,2513],{"class":1133,"line":2512},42,[1131,2514,1615],{"emptyLinePlaceholder":347},[1131,2516,2518,2520,2523,2525],{"class":1133,"line":2517},43,[1131,2519,1620],{"class":1146},[1131,2521,2522],{"class":1414}," template ",[1131,2524,1639],{"class":1137},[1131,2526,1858],{"class":1137},[1131,2528,2530,2533,2535,2537,2539,2541],{"class":1133,"line":2529},44,[1131,2531,2532],{"class":1402},"  version",[1131,2534,1153],{"class":1137},[1131,2536,1584],{"class":1137},[1131,2538,1160],{"class":1159},[1131,2540,1647],{"class":1137},[1131,2542,1165],{"class":1137},[1131,2544,2546,2549,2551,2553,2556,2558],{"class":1133,"line":2545},45,[1131,2547,2548],{"class":1402},"  title",[1131,2550,1153],{"class":1137},[1131,2552,1584],{"class":1137},[1131,2554,2555],{"class":1159},"Imported section",[1131,2557,1647],{"class":1137},[1131,2559,1165],{"class":1137},[1131,2561,2563,2566,2568,2570,2572,2574],{"class":1133,"line":2562},46,[1131,2564,2565],{"class":1402},"  type",[1131,2567,1153],{"class":1137},[1131,2569,1584],{"class":1137},[1131,2571,1202],{"class":1159},[1131,2573,1647],{"class":1137},[1131,2575,1165],{"class":1137},[1131,2577,2579,2582,2584,2586],{"class":1133,"line":2578},47,[1131,2580,2581],{"class":1402},"  content",[1131,2583,1153],{"class":1137},[1131,2585,1623],{"class":1414},[1131,2587,1138],{"class":1137},[1131,2589,2591,2594,2596,2599,2601],{"class":1133,"line":2590},48,[1131,2592,2593],{"class":1402},"    id",[1131,2595,1153],{"class":1137},[1131,2597,2598],{"class":1666}," id",[1131,2600,1816],{"class":1414},[1131,2602,1165],{"class":1137},[1131,2604,2606,2609,2611,2613,2615,2617],{"class":1133,"line":2605},49,[1131,2607,2608],{"class":1402},"    elType",[1131,2610,1153],{"class":1137},[1131,2612,1584],{"class":1137},[1131,2614,1003],{"class":1159},[1131,2616,1647],{"class":1137},[1131,2618,1165],{"class":1137},[1131,2620,2622,2625,2627,2629,2632,2634,2636,2638,2640,2642,2645,2647,2649,2652,2654,2656,2659,2661,2663,2666,2668,2670,2672,2674,2676,2679,2681,2683,2685,2687,2689,2692,2694,2696,2698,2700,2702,2705,2707,2709,2711,2713,2715,2718,2720,2724,2726],{"class":1133,"line":2621},50,[1131,2623,2624],{"class":1402},"    settings",[1131,2626,1153],{"class":1137},[1131,2628,1282],{"class":1137},[1131,2630,2631],{"class":1402}," content_width",[1131,2633,1153],{"class":1137},[1131,2635,1584],{"class":1137},[1131,2637,1297],{"class":1159},[1131,2639,1647],{"class":1137},[1131,2641,1572],{"class":1137},[1131,2643,2644],{"class":1402}," padding",[1131,2646,1153],{"class":1137},[1131,2648,1282],{"class":1137},[1131,2650,2651],{"class":1402}," unit",[1131,2653,1153],{"class":1137},[1131,2655,1584],{"class":1137},[1131,2657,2658],{"class":1159},"px",[1131,2660,1647],{"class":1137},[1131,2662,1572],{"class":1137},[1131,2664,2665],{"class":1402}," top",[1131,2667,1153],{"class":1137},[1131,2669,1584],{"class":1137},[1131,2671,1786],{"class":1159},[1131,2673,1647],{"class":1137},[1131,2675,1572],{"class":1137},[1131,2677,2678],{"class":1402}," right",[1131,2680,1153],{"class":1137},[1131,2682,1584],{"class":1137},[1131,2684,1786],{"class":1159},[1131,2686,1647],{"class":1137},[1131,2688,1572],{"class":1137},[1131,2690,2691],{"class":1402}," bottom",[1131,2693,1153],{"class":1137},[1131,2695,1584],{"class":1137},[1131,2697,1786],{"class":1159},[1131,2699,1647],{"class":1137},[1131,2701,1572],{"class":1137},[1131,2703,2704],{"class":1402}," left",[1131,2706,1153],{"class":1137},[1131,2708,1584],{"class":1137},[1131,2710,1786],{"class":1159},[1131,2712,1647],{"class":1137},[1131,2714,1572],{"class":1137},[1131,2716,2717],{"class":1402}," isLinked",[1131,2719,1153],{"class":1137},[1131,2721,2723],{"class":2722},"sfNiH"," true",[1131,2725,1578],{"class":1137},[1131,2727,1302],{"class":1137},[1131,2729,2731,2734,2736,2738,2740,2742,2744,2746,2748,2750,2753,2755,2757,2759,2761,2763,2766,2768,2770,2772,2774,2776,2779,2781,2783,2786,2788,2790,2793,2796,2798,2801,2803,2805],{"class":1133,"line":2730},51,[1131,2732,2733],{"class":1402},"    elements",[1131,2735,1153],{"class":1137},[1131,2737,1623],{"class":1414},[1131,2739,1932],{"class":1137},[1131,2741,2598],{"class":1402},[1131,2743,1153],{"class":1137},[1131,2745,2598],{"class":1666},[1131,2747,1816],{"class":1414},[1131,2749,1572],{"class":1137},[1131,2751,2752],{"class":1402}," elType",[1131,2754,1153],{"class":1137},[1131,2756,1584],{"class":1137},[1131,2758,1359],{"class":1159},[1131,2760,1647],{"class":1137},[1131,2762,1572],{"class":1137},[1131,2764,2765],{"class":1402}," widgetType",[1131,2767,1153],{"class":1137},[1131,2769,1584],{"class":1137},[1131,2771,1380],{"class":1159},[1131,2773,1647],{"class":1137},[1131,2775,1572],{"class":1137},[1131,2777,2778],{"class":1402}," settings",[1131,2780,1153],{"class":1137},[1131,2782,1282],{"class":1137},[1131,2784,2785],{"class":1402}," html",[1131,2787,1153],{"class":1137},[1131,2789,2459],{"class":1414},[1131,2791,2792],{"class":1137},"},",[1131,2794,2795],{"class":1402}," elements",[1131,2797,1153],{"class":1137},[1131,2799,2800],{"class":1414}," [] ",[1131,2802,2112],{"class":1137},[1131,2804,1650],{"class":1414},[1131,2806,1165],{"class":1137},[1131,2808,2810,2813,2815],{"class":1133,"line":2809},52,[1131,2811,2812],{"class":1402},"    isInner",[1131,2814,1153],{"class":1137},[1131,2816,1468],{"class":2722},[1131,2818,2820,2823,2825],{"class":1133,"line":2819},53,[1131,2821,2822],{"class":1137},"  }",[1131,2824,1650],{"class":1414},[1131,2826,1165],{"class":1137},[1131,2828,2830,2833,2835],{"class":1133,"line":2829},54,[1131,2831,2832],{"class":1402},"  page_settings",[1131,2834,1153],{"class":1137},[1131,2836,1441],{"class":1414},[1131,2838,2840],{"class":1133,"line":2839},55,[1131,2841,1500],{"class":1137},[1131,2843,2845],{"class":1133,"line":2844},56,[1131,2846,1615],{"emptyLinePlaceholder":347},[1131,2848,2850,2853,2856,2858,2861,2863,2866,2869,2871,2874,2877],{"class":1133,"line":2849},57,[1131,2851,2852],{"class":1666},"writeFileSync",[1131,2854,2855],{"class":1414},"(out",[1131,2857,1572],{"class":1137},[1131,2859,2860],{"class":1414}," JSON",[1131,2862,36],{"class":1137},[1131,2864,2865],{"class":1666},"stringify",[1131,2867,2868],{"class":1414},"(template",[1131,2870,1572],{"class":1137},[1131,2872,2873],{"class":1137}," null,",[1131,2875,2876],{"class":1287}," 2",[1131,2878,2879],{"class":1414},"))\n",[1131,2881,2883,2886,2888,2891,2893,2896,2899,2901,2903,2905],{"class":1133,"line":2882},58,[1131,2884,2885],{"class":1414},"console",[1131,2887,36],{"class":1137},[1131,2889,2890],{"class":1666},"log",[1131,2892,1670],{"class":1414},[1131,2894,2895],{"class":1137},"`",[1131,2897,2898],{"class":1159},"Wrote ",[1131,2900,1811],{"class":1137},[1131,2902,2215],{"class":1414},[1131,2904,2366],{"class":1137},[1131,2906,1676],{"class":1414},[11,2908,2909],{},"Run it:",[1123,2911,2915],{"className":2912,"code":2913,"language":2914,"meta":316,"style":316},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","node to-elementor.mjs pricing.html pricing.css pricing.json\n","bash",[33,2916,2917],{"__ignoreMap":316},[1131,2918,2919,2922,2925,2928,2931],{"class":1133,"line":1134},[1131,2920,2921],{"class":1233},"node",[1131,2923,2924],{"class":1159}," to-elementor.mjs",[1131,2926,2927],{"class":1159}," pricing.html",[1131,2929,2930],{"class":1159}," pricing.css",[1131,2932,2933],{"class":1159}," pricing.json\n",[11,2935,2936,2937,491,2940,491,2943,494,2946,2949],{},"The scoping walks the stylesheet by matching braces. It handles plain rules, ",[33,2938,2939],{},"@media",[33,2941,2942],{},"@supports",[33,2944,2945],{},"@keyframes",[33,2947,2948],{},"@font-face",". It will not survive native CSS nesting, or a comment or string that contains a brace. For a stylesheet like that, parse it properly with PostCSS.",[38,2951,2953],{"id":2952},"import-it","Import it",[275,2955,2956,2966,2976],{},[278,2957,2958,2959,2962,2963,36],{},"In WordPress, open ",[15,2960,2961],{},"Templates",", then ",[15,2964,2965],{},"Saved Templates",[278,2967,2968,2969,2972,2973,2975],{},"Click ",[15,2970,2971],{},"Import Templates"," and choose the ",[33,2974,106],{}," file.",[278,2977,2978,2979,2982],{},"Edit a page with Elementor, click the folder icon, open ",[15,2980,2981],{},"My Templates"," and insert it.",[38,2984,2986],{"id":2985},"five-things-that-break-after-import","Five things that break after import",[11,2988,2989],{},"These are the real ones. All five came up while building an exporter that does this for arbitrary websites.",[11,2991,2992,2995,2996,2999,3000,3003,3004,491,3007,491,3010,3013,3014,3017],{},[15,2993,2994],{},"1. Relative URLs."," ",[33,2997,2998],{},"src=\"/img/hero.png\""," now points at your WordPress site. A widget cannot carry a ",[33,3001,3002],{},"\u003Cbase>"," tag, so every ",[33,3005,3006],{},"src",[33,3008,3009],{},"href",[33,3011,3012],{},"srcset"," and CSS ",[33,3015,3016],{},"url()"," has to be absolute before you wrap it.",[11,3019,3020,3023,3024,491,3026,491,3028,494,3030,3033,3034,491,3037,3040],{},[15,3021,3022],{},"2. The theme leaks in."," Your theme styles ",[33,3025,455],{},[33,3027,23],{},[33,3029,394],{},[33,3031,3032],{},"button",". If the original page relied on a CSS reset (Tailwind's Preflight, normalize.css), that reset is gone and headings get the theme's margins and colors. Add a small reset under your scope class: zero margins, ",[33,3035,3036],{},"list-style: none",[33,3038,3039],{},"color: inherit"," on links and headings.",[11,3042,3043,3046],{},[15,3044,3045],{},"3. The block is squeezed."," Even a full-width container sits inside the theme's content column on many themes. Break out with:",[1123,3048,3051],{"className":3049,"code":3050,"language":1853,"meta":316,"style":316},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".imp-abc123 { position: relative; width: 100vw; left: 50%; margin-left: -50vw; }\nhtml, body { overflow-x: clip; }\n",[33,3052,3053,3106],{"__ignoreMap":316},[1131,3054,3055,3057,3060,3062,3066,3068,3071,3074,3077,3079,3082,3084,3086,3088,3091,3093,3096,3098,3101,3103],{"class":1133,"line":1134},[1131,3056,36],{"class":1137},[1131,3058,3059],{"class":1233},"imp-abc123",[1131,3061,1282],{"class":1137},[1131,3063,3065],{"class":3064},"sqsOY"," position",[1131,3067,1153],{"class":1137},[1131,3069,3070],{"class":1414}," relative",[1131,3072,3073],{"class":1137},";",[1131,3075,3076],{"class":3064}," width",[1131,3078,1153],{"class":1137},[1131,3080,3081],{"class":1287}," 100vw",[1131,3083,3073],{"class":1137},[1131,3085,2704],{"class":3064},[1131,3087,1153],{"class":1137},[1131,3089,3090],{"class":1287}," 50%",[1131,3092,3073],{"class":1137},[1131,3094,3095],{"class":3064}," margin-left",[1131,3097,1153],{"class":1137},[1131,3099,3100],{"class":1287}," -50vw",[1131,3102,3073],{"class":1137},[1131,3104,3105],{"class":1137}," }\n",[1131,3107,3108,3110,3112,3114,3116,3119,3121,3124,3126],{"class":1133,"line":317},[1131,3109,1380],{"class":1233},[1131,3111,1572],{"class":1137},[1131,3113,2142],{"class":1233},[1131,3115,1282],{"class":1137},[1131,3117,3118],{"class":3064}," overflow-x",[1131,3120,1153],{"class":1137},[1131,3122,3123],{"class":1414}," clip",[1131,3125,3073],{"class":1137},[1131,3127,3105],{"class":1137},[11,3129,3130,3131,3134,3135,3138,3139,3141],{},"Use ",[33,3132,3133],{},"clip",", not ",[33,3136,3137],{},"hidden",". ",[33,3140,3137],{}," creates a scroll container and breaks sticky headers.",[11,3143,3144,3147,3148,3151],{},[15,3145,3146],{},"4. Everything is invisible."," Sites that fade sections in on scroll ship the starting state in CSS (",[33,3149,3150],{},"opacity: 0; transform: translateY(28px)",") and remove it with JavaScript. The JavaScript did not come along. Delete those declarations or the section never appears.",[11,3153,3154,3157,3158,3161],{},[15,3155,3156],{},"5. A byte order mark."," If your editor saves the file as UTF-8 with BOM, PHP's ",[33,3159,3160],{},"json_decode"," rejects it and Elementor reports an invalid file. Save without one.",[38,3163,3165],{"id":3164},"when-this-is-the-wrong-approach","When this is the wrong approach",[11,3167,3168],{},"If the client needs to change a headline from Elementor's sidebar, do not import an HTML widget. Rebuild the section with native widgets. It takes longer and it is the right answer for content that non-developers will edit every week.",[11,3170,3171],{},"The HTML widget route is for sections that should look exactly like the source and change rarely: a hero from the old site during a migration, a pricing table, a footer.",[38,3173,3175],{"id":3174},"the-four-ways-compared","The four ways, compared",[208,3177,3178,3194],{},[211,3179,3180],{},[214,3181,3182,3185,3188,3191],{},[217,3183,3184],{},"Method",[217,3186,3187],{},"Time per section",[217,3189,3190],{},"Handles the five problems",[217,3192,3193],{},"Good for",[224,3195,3196,3210,3224,3237],{},[214,3197,3198,3201,3204,3207],{},[229,3199,3200],{},"By hand in the HTML widget",[229,3202,3203],{},"20 to 40 minutes",[229,3205,3206],{},"You do",[229,3208,3209],{},"One section, once",[214,3211,3212,3215,3218,3221],{},[229,3213,3214],{},"The script above",[229,3216,3217],{},"2 minutes, after you have clean HTML and CSS",[229,3219,3220],{},"Scoping only",[229,3222,3223],{},"HTML you already own",[214,3225,3226,3229,3232,3234],{},[229,3227,3228],{},"A browser extension",[229,3230,3231],{},"1 minute",[229,3233,700],{},[229,3235,3236],{},"Picking sections visually",[214,3238,3239,3242,3245,3247],{},[229,3240,3241],{},"An API call",[229,3243,3244],{},"Seconds",[229,3246,700],{},[229,3248,3249],{},"Many sections, pipelines, AI agents",[11,3251,3252],{},"The catch with the script is the input. It needs the section's HTML and only the CSS that applies to it. On a real site that CSS is spread over several stylesheets and thousands of rules, and extracting the right ones is most of the work.",[38,3254,3256],{"id":3255},"or-use-one-api-call","Or use one API call",[11,3258,3259,3260,1153],{},"MiroMiro's code endpoint resolves which CSS rules apply to a section of a live page and returns the finished template. Pass ",[33,3261,3262],{},"framework=elementor",[1123,3264,3266],{"className":2912,"code":3265,"language":2914,"meta":316,"style":316},"curl -s \"https://miromiro.app/api/v1/code?url=stripe.com&section=pricing&framework=elementor\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\" \\\n  | jq -r .code > pricing.json\n",[33,3267,3268,3286,3303],{"__ignoreMap":316},[1131,3269,3270,3273,3276,3278,3281,3283],{"class":1133,"line":1134},[1131,3271,3272],{"class":1233},"curl",[1131,3274,3275],{"class":1159}," -s",[1131,3277,1156],{"class":1137},[1131,3279,3280],{"class":1159},"https://miromiro.app/api/v1/code?url=stripe.com&section=pricing&framework=elementor",[1131,3282,1150],{"class":1137},[1131,3284,3285],{"class":1414}," \\\n",[1131,3287,3288,3291,3293,3296,3299,3301],{"class":1133,"line":317},[1131,3289,3290],{"class":1159},"  -H",[1131,3292,1156],{"class":1137},[1131,3294,3295],{"class":1159},"Authorization: Bearer ",[1131,3297,3298],{"class":1414},"$MIROMIRO_API_KEY",[1131,3300,1150],{"class":1137},[1131,3302,3285],{"class":1414},[1131,3304,3305,3308,3311,3314,3317,3320],{"class":1133,"line":1168},[1131,3306,3307],{"class":1137},"  |",[1131,3309,3310],{"class":1233}," jq",[1131,3312,3313],{"class":1159}," -r",[1131,3315,3316],{"class":1159}," .code",[1131,3318,3319],{"class":1137}," >",[1131,3321,2933],{"class":1159},[11,3323,3324,3327,3328,3331],{},[33,3325,3326],{},"pricing.json"," is ready to import. It has absolute URLs, scoped CSS with the reset, the full-width breakout, responsive and hover rules, and scroll-reveal states already switched to visible. ",[33,3329,3330],{},"framework=shopify"," returns a theme section instead.",[11,3333,3334],{},"One limit to know: it is still one HTML widget, and a section the engine reads badly imports just as badly. Check the result in a staging site before you put it in front of a client.",[11,3336,3337,3338,3342],{},"If you work in ChatGPT or Claude, the same thing is available as a tool: connect the ",[23,3339,3341],{"href":3340},"/api/mcp","MCP server"," and ask for \"the pricing section of stripe.com as an Elementor template\".",[11,3344,3345,3346,3349],{},"You can ",[23,3347,3348],{"href":25},"start for free"," - 300 credits a month, no card. A section costs 10.",[38,3351,789],{"id":788},[11,3353,3354],{},"Use the HTML widget inside a full-width container, scope your CSS, and fix URLs before you wrap anything. Write the script yourself if the HTML is yours. Use an extractor when the section lives on a site whose CSS you would otherwise have to untangle by hand.",[38,3356,3358],{"id":3357},"frequently-asked-questions","Frequently asked questions",[3360,3361,3363],"h3",{"id":3362},"what-format-is-an-elementor-template-file","What format is an Elementor template file?",[11,3365,3366,3367,491,3369,491,3371,3373,3374,3376,3377,3379,3380,3382,3383,3385,3386,36],{},"JSON, with ",[33,3368,1147],{},[33,3370,1193],{},[33,3372,451],{}," and a ",[33,3375,485],{}," array of elements. Each element has an ",[33,3378,1234],{},", an ",[33,3381,1255],{}," and its own ",[33,3384,1310],{}," children. Widgets add a ",[33,3387,1371],{},[3360,3389,3391],{"id":3390},"can-i-convert-html-to-native-elementor-widgets-automatically","Can I convert HTML to native Elementor widgets automatically?",[11,3393,3394],{},"Not reliably. The original CSS targets the original markup, so remapping it onto heading and button widgets breaks the layout. One HTML widget keeps it intact.",[3360,3396,3398],{"id":3397},"why-does-my-imported-html-look-squeezed","Why does my imported HTML look squeezed?",[11,3400,3401,3402,625,3404,3406,3407,3410],{},"The theme's content column. Set the container's ",[33,3403,1288],{},[33,3405,1297],{},", and if the theme still constrains it, use the ",[33,3408,3409],{},"100vw"," breakout above.",[3360,3412,3414],{"id":3413},"does-the-html-widget-need-elementor-pro","Does the HTML widget need Elementor Pro?",[11,3416,3417],{},"No. The HTML widget, containers and template import are in the free plugin.",[3360,3419,3421],{"id":3420},"can-i-do-the-same-for-shopify","Can I do the same for Shopify?",[11,3423,3424,3425,3427,3428,3430,3431,3434,3435,3438],{},"Yes. The equivalent is a section file in the theme's ",[33,3426,943],{}," folder: the markup and a ",[33,3429,1540],{}," block inside ",[33,3432,3433],{},"{% raw %}",", followed by a ",[33,3436,3437],{},"{% schema %}"," block with a name and a preset.",[3440,3441,3442],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":316,"searchDepth":317,"depth":317,"links":3444},[3445,3446,3447,3448,3449,3450,3451,3452,3453],{"id":1117,"depth":317,"text":1118},{"id":1544,"depth":317,"text":1545},{"id":2952,"depth":317,"text":2953},{"id":2985,"depth":317,"text":2986},{"id":3164,"depth":317,"text":3165},{"id":3174,"depth":317,"text":3175},{"id":3255,"depth":317,"text":3256},{"id":788,"depth":317,"text":789},{"id":3357,"depth":317,"text":3358,"children":3454},[3455,3456,3457,3458,3459],{"id":3362,"depth":1168,"text":3363},{"id":3390,"depth":1168,"text":3391},{"id":3397,"depth":1168,"text":3398},{"id":3413,"depth":1168,"text":3414},{"id":3420,"depth":1168,"text":3421},"2026-10-12","The Elementor template format explained, a short Node script that wraps any HTML and CSS into an importable .json file, the five things that break on import, and the one-call API version.",[3463,3465,3467,3470,3473],{"question":3363,"answer":3464},"A JSON file with four top-level keys that matter: version (0.4), type (section or page), title, and content. content is an array of elements. Each element has an id, an elType (container or widget), a settings object and an elements array of children. A widget also has a widgetType, such as html or heading.",{"question":3391,"answer":3466},"Not reliably. Arbitrary HTML does not map onto Elementor's heading, image and button widgets without breaking the layout, because the original CSS targets the original markup. The dependable conversion puts the HTML and its CSS inside one HTML widget. It looks identical and you edit it as code.",{"question":3468,"answer":3469},"How do I import a JSON template into Elementor?","In WordPress go to Templates, then Saved Templates, and click Import Templates. Choose the .json file. The template appears in your library, and you insert it into any page from the editor's folder icon under My Templates.",{"question":3471,"answer":3472},"Why does my imported HTML look squeezed in Elementor?","The widget sits inside your theme's content column, which is often around 650 to 1140 pixels wide. Use a container with content_width set to full, or break the block out with width: 100vw and a negative margin, so the section spans the page like the original.",{"question":3414,"answer":3474},"No. The HTML widget, containers and template import are all in the free plugin.",{},"/api-blog/convert-html-to-elementor-json-template",[3478,3479,3480,354],"best-design-to-code-apis-2026","connect-miromiro-mcp-claude-cursor-chatgpt","how-to-extract-design-tokens-from-any-website-in-python",{"title":1102,"description":3461},"Convert HTML to an Elementor JSON Template: Format + Script","api-blog/convert-html-to-elementor-json-template",[361,1097,3485,3486,3487,3488],"html to elementor","json template","page builders","api","m8VA77jM7D-r7Vn3mrmQ2Hks1xqiEXjx4StYH0q26JQ",1793050642062]