--- title: Why we built EGP Code, an HTML-based AI editor for... description: Mercari's Merpay team built EGP Code, an in-house HTML-based LP editor that integrates an AI agent into the full production workflow. It replaces EGP Pages, a... canonical: https://daily.dev/posts/why-we-built-egp-code-an-html-based-ai-editor-for-landing-pages-cofgtkjmy twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Why we built EGP Code, an HTML-based AI editor for landing pages | daily.dev og:description: Mercari's Merpay team built EGP Code, an in-house HTML-based LP editor that integrates an AI agent into the full production workflow. It replaces EGP Pages, a... og:url: https://daily.dev/posts/why-we-built-egp-code-an-html-based-ai-editor-for-landing-pages-cofgtkjmy og:image: https://api.daily.dev/og/posts/coFGTkJmY.png og:image:alt: Why we built EGP Code, an HTML-based AI editor for landing pages og:image:width: 1200 og:image:height: 630 og:locale: en --- [Mercari Engineering](https://daily.dev/sources/mercari) [Read post](https://api.daily.dev/r/coFGTkJmY) # [Why we built EGP Code, an HTML-based AI editor for landing pages](https://api.daily.dev/r/coFGTkJmY "Go to post") Mercari's Merpay team built EGP Code, an in-house HTML-based LP editor that integrates an AI agent into the full production workflow. It replaces EGP Pages, a WYSIWYG JSON-based editor that proved costly and awkward for LLM editing due to its proprietary tree structure and high token usage. EGP Code uses plain HTML with a small set of custom Web Components for dynamic behavior, Tailwind CSS for styling, and Markdown-documented internal APIs that the AI loads on demand. The editor includes a built-in browser-side test runner with a Jest-like API and mock server, so AI-generated code can be verified without hitting real APIs. A dedicated Web Component handles environment-aware navigation between web and native app contexts. The result is a single editing experience covering UI generation, internal API integration, analytics logging, automated testing, and native app bridging — enabling PMs, backend engineers, and even marketers to ship production LPs with less engineering involvement. [#testing](/tags/testing "Check all #testing posts")[#tailwind-css](/tags/tailwind-css "Check all #tailwind-css posts")[#ai-coding](/tags/ai-coding "Check all #ai-coding posts")[#web-components](/tags/web-components "Check all #web-components posts") Aug 06•10m read time•From [engineering.mercari.com](https://api.daily.dev/r/coFGTkJmY "engineering.mercari.com") [](https://api.daily.dev/r/coFGTkJmY "Go to post") Table of contents [EGP Pages and the challenges of AI editing](https://api.daily.dev/r/coFGTkJmY "EGP Pages and the challenges of AI editing")[Rebuilding on HTML](https://api.daily.dev/r/coFGTkJmY "Rebuilding on HTML")[How to use](https://api.daily.dev/r/coFGTkJmY "How to use")[Three building blocks for production](https://api.daily.dev/r/coFGTkJmY "Three building blocks for production")[Internal API integration and logging](https://api.daily.dev/r/coFGTkJmY "Internal API integration and logging")[Tests and quality assurance that stay inside the editor](https://api.daily.dev/r/coFGTkJmY "Tests and quality assurance that stay inside the editor")[Native integration that bridges the app and web](https://api.daily.dev/r/coFGTkJmY "Native integration that bridges the app and web")[Conclusion](https://api.daily.dev/r/coFGTkJmY "Conclusion") 401 Impressions Comment Bookmark Copy Share your thoughtsPost [](https://daily.dev/sources/mercari) [Mercari Engineering](https://daily.dev/sources/mercari "https://daily.dev/sources/mercari") Mercari's platform is a resource for developers and technology enthusiasts, offering insights into e... Read more 32 Followers • 371 Upvotes #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Why we built EGP Code, an HTML-based AI editor for landing pages","url":"https://daily.dev/posts/why-we-built-egp-code-an-html-based-ai-editor-for-landing-pages-cofgtkjmy","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/why-we-built-egp-code-an-html-based-ai-editor-for-landing-pages-cofgtkjmy"},"datePublished":"2026-08-06T00:15:51.804Z","dateModified":"2026-08-06T05:41:47.178Z","description":"Mercari's Merpay team built EGP Code, an in-house HTML-based LP editor that integrates an AI agent into the full production workflow. It replaces EGP Pages, a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b7b754431315d82786f47df51f56d509?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b7b754431315d82786f47df51f56d509?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Mercari Engineering","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Mercari Engineering","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/cdde515cd83640748689d74c2d938fcf","url":"https://daily.dev/sources/mercari"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/why-we-built-egp-code-an-html-based-ai-editor-for-landing-pages-cofgtkjmy","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"testing,tailwind-css,ai-coding,web-components","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Mercari Engineering","item":"https://daily.dev/sources/mercari"},{"@type":"ListItem","position":3,"name":"Why we built EGP Code, an HTML-based AI editor for landing pages"}]} ```