{"id":8213,"date":"2026-06-28T23:55:00","date_gmt":"2026-06-28T21:55:00","guid":{"rendered":"https:\/\/chiperoni.ch\/wordpress\/?p=8213"},"modified":"2026-06-28T15:11:53","modified_gmt":"2026-06-28T13:11:53","slug":"using-lovable-to-build-html5","status":"publish","type":"post","link":"https:\/\/chiperoni.ch\/wordpress\/2026\/06\/using-lovable-to-build-html5\/","title":{"rendered":"Using Lovable to build HTML5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">By default Lovable builds Javascript apps. Which are useful and easy-to-generate and great as a local prototype. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For most purposes, an HTML5 version is faster and better for SEO and AI crawlers. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It takes some persuading to get an HTML5 version from Lovable (2 to 3 prompts), but it&#8217;s totally worth it. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML5 beats JS from a crawler point of view. Texts are viewable without worrying about the DOM. Keep in mind: AI cannot interpret Javascript. This Linkedin article says that <a href=\"https:\/\/www.linkedin.com\/posts\/harsh-jaiswal24_aeo-aiengineering-activity-7476125847599554560-IM0x?utm_source=share&amp;utm_medium=member_desktop&amp;rcm=ACoAAASSftYBKu8CGVqYy43YWUDaBLbuEf7ySg8\" target=\"_blank\" rel=\"noopener\">ChatGPT cannot see 50% of the internet<\/a>. They fetch raw HTML. They don&#8217;t run JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Within Lovable you can add a setting to generate HTML instead of JS. I haven&#8217;t changed my settings yet. <br \/><br \/>HTML is much more powerful than most people realize.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your HTML page has several advantages over the average modern React\/TanStack marketing site:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Speed<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your browser receives:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index.html<\/code><\/li>\n\n\n\n<li><code>styles.css<\/code><\/li>\n\n\n\n<li>Google Fonts<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s basically it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I avoid typical JS work steps such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React runtime<\/li>\n\n\n\n<li>hydration<\/li>\n\n\n\n<li>component tree<\/li>\n\n\n\n<li>client-side routing<\/li>\n\n\n\n<li>JavaScript bundles<\/li>\n\n\n\n<li>framework overhead<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A browser can render the HTML page immediately.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Easy deployment on my shared web server is a huge plus for me.<\/li>\n\n\n\n<li>Future-proof for search engines and AI crawlers<\/li>\n\n\n\n<li>Static HTML<\/li>\n\n\n\n<li>Human-readable source<\/li>\n\n\n\n<li>AI-readable source<\/li>\n\n\n\n<li>No framework lock-in<\/li>\n\n\n\n<li>Easy-to-maintain on shared hosting<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a copy of my prompt that i used to move from JS to HTML in Lovable:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h1 class=\"wp-block-heading\"><strong>Static HTML5 Website<\/strong><\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Default architecture for brochure websites, landing pages, blogs, personal websites and content-focused projects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Requirements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Semantic HTML5<\/li>\n\n\n\n<li>Single index.html<\/li>\n\n\n\n<li>Separate styles.css<\/li>\n\n\n\n<li>Minimal vanilla JavaScript<\/li>\n\n\n\n<li>No React<\/li>\n\n\n\n<li>No Next.js<\/li>\n\n\n\n<li>No TanStack<\/li>\n\n\n\n<li>No hydration<\/li>\n\n\n\n<li>No client-side rendering<\/li>\n\n\n\n<li>Must work with JavaScript disabled<\/li>\n\n\n\n<li>Mobile-first responsive design<\/li>\n\n\n\n<li>WCAG accessibility<\/li>\n\n\n\n<li>Fast loading<\/li>\n\n\n\n<li>SEO-friendly<\/li>\n\n\n\n<li>AI-crawler friendly<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Required files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>index.html<\/li>\n\n\n\n<li>styles.css<\/li>\n\n\n\n<li>robots.txt<\/li>\n\n\n\n<li>sitemap.xml<\/li>\n\n\n\n<li>llms.txt<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Required SEO:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>title<\/li>\n\n\n\n<li>meta description<\/li>\n\n\n\n<li>canonical URL<\/li>\n\n\n\n<li>Open Graph tags<\/li>\n\n\n\n<li>JSON-LD schema<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Required accessibility:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>skip link<\/li>\n\n\n\n<li>semantic landmarks<\/li>\n\n\n\n<li>proper heading hierarchy<\/li>\n\n\n\n<li>alt text on images<\/li>\n\n\n\n<li>keyboard navigation<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SPA architecture<\/li>\n\n\n\n<li>framework dependencies<\/li>\n\n\n\n<li>npm build chains unless explicitly requested<\/li>\n\n\n\n<li>client-side rendering<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All primary content must be visible in the HTML source.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-photo is-provider-flickr wp-block-embed-flickr\"><div class=\"wp-block-embed__wrapper\">\n<a href=\"https:\/\/flic.kr\/p\/2huKpBr\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/65535\/48895731963_df5dcf742d.jpg\" alt=\"new buildings in #basel\" width=\"500\" height=\"375\" \/><\/a>\n<\/div><figcaption class=\"wp-element-caption\">I compare buildings to websites. Here&#8217;s a &#8220;buildings in Basel&#8221; snapshot to illustrate my post. <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I love my HTML5 generator. Saves me lots of typing time. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Looking forward to more Lovable options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modern frameworks are powerful. But many websites do not need that complexity. For blogs, small websites, and personal projects, static HTML remains a fast, future-proof, and powerful choice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br \/><br \/>P.S. Useful check list to build a <a href=\"https:\/\/specification.website\/checklist\/\" target=\"_blank\" rel=\"noopener\">good website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML for the win. Lovable can generate HTML5 code. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9,660,875],"tags":[596,879,870],"class_list":["post-8213","post","type-post","status-publish","format-standard","hentry","category-tech","category-internet","category-web","tag-html","tag-lovable","tag-lovable-ai"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1LJxC-28t","_links":{"self":[{"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/posts\/8213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/comments?post=8213"}],"version-history":[{"count":7,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/posts\/8213\/revisions"}],"predecessor-version":[{"id":8220,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/posts\/8213\/revisions\/8220"}],"wp:attachment":[{"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/media?parent=8213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/categories?post=8213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chiperoni.ch\/wordpress\/wp-json\/wp\/v2\/tags?post=8213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}