Got a landing page from ChatGPT, Claude, or Gemini and don't know where to put it? Kayzart is the place to paste it.<\/p>\n\n
Drop AI-generated HTML, CSS, and JavaScript straight into WordPress, see it render live as you tweak it, and publish a clean, theme-independent landing page in minutes \u2014 no child theme, no page builder, no fighting your active theme's header and footer.<\/p>\n\n
Who this is for<\/strong>\nYou let AI write the code, but you still want full control over the result. You're past pure no-code, but you don't want to set up a build pipeline just to ship one landing page. Kayzart sits exactly there.<\/p>\n\n What you can do<\/strong>\n* Paste a full AI-generated page (HTML + CSS + JS) and run it as-is\n* Edit everything live with a CodeMirror 6 editor and instant iframe preview\n* Click an element in the preview to jump to its code (real-time DOM selection)\n* Keep the page theme-independent in Standalone mode, or render inside your theme in Theme mode\n* Use plain CSS or TailwindCSS (auto-compiled) per page\n* Run modern JavaScript (Classic script or ES Module)\n* Restrict external embeds with an allowlist<\/p>\n\n Works great with<\/strong>\nChatGPT, Claude, Gemini, v0, or any tool that hands you HTML\/CSS\/JS. Kayzart doesn't generate the code \u2014 it's where that code becomes a real, publishable WordPress page you can keep editing.<\/p>\n\n Development repository: https:\/\/github.com\/ksartoffice\/kayzart-live-code-editor<\/p>\n\n This plugin bundles third-party libraries:\n* CodeMirror - MIT License - https:\/\/github.com\/codemirror\n* Emmet CodeMirror 6 Plugin - MIT License - https:\/\/github.com\/emmetio\/codemirror6-plugin<\/p>\n\n\n Create a landing page, then paste the HTML, CSS, and JavaScript into their tabs. If your AI tool gave you one complete HTML document, use the full HTML import feature to split it into the right fields. The live preview renders it immediately, and you can keep editing before you publish.<\/p><\/dd>\n Not yet in this free plugin \u2014 today Kayzart is the editor and runtime where you paste and refine AI-generated code. AI-assisted editing inside WordPress is on our roadmap. For now, generate your HTML\/CSS\/JS in ChatGPT, Claude, or Gemini, then paste it here to publish and keep editing.<\/p><\/dd>\n No \u2014 most people paste what an AI produced and tweak from there. Basic familiarity with HTML\/CSS helps when fine-tuning, but isn't required.<\/p><\/dd>\n Yes. Choose TailwindCSS mode when creating a page and Kayzart compiles utility classes automatically. It uses TailwindCSS v4, so the latest utility syntax works out of the box.<\/p><\/dd>\n Standalone mode renders your landing page without the active theme's layout \u2014 the theme's header, footer, content template, styles, and scripts are not loaded, so your page isn't affected by theme CSS or JavaScript. Kayzart's own styles and scripts (and your page's CSS\/JS) are still loaded, so the editor runtime and your page behave as expected. Use it when you want a clean, theme-independent landing page.<\/p><\/dd>\n Theme mode renders your Kayzart content inside the active theme's template, so the page keeps your theme's header, footer, and styling.<\/p><\/dd>\n HTML is stored in the post content; CSS, JavaScript, Tailwind\/template modes, and other Kayzart settings are stored in post meta.<\/p><\/dd>\n\n<\/dl>\n\n\nCredits<\/h3>\n\n
\n
\n
I have a page from ChatGPT \/ Claude. How do I use it in WordPress?<\/h3><\/dt>\n
Can AI edit the page for me, right inside WordPress?<\/h3><\/dt>\n
Do I need to know how to code?<\/h3><\/dt>\n
Can I use TailwindCSS?<\/h3><\/dt>\n
What is Standalone mode?<\/h3><\/dt>\n
What is Theme mode?<\/h3><\/dt>\n
Where is the code stored?<\/h3><\/dt>\n
2.0.5<\/h4>\n\n
\n
2.0.4<\/h4>\n\n
\n
2.0.3<\/h4>\n\n
\n
2.0.2<\/h4>\n\n
\n
2.0.1<\/h4>\n\n
\n
2.0.0<\/h4>\n\n
\n
1.3.6<\/h4>\n\n
\n
1.3.5<\/h4>\n\n
\n
1.3.4<\/h4>\n\n
\n
1.3.3<\/h4>\n\n
\n
1.3.2<\/h4>\n\n
\n
1.3.1<\/h4>\n\n
\n
1.3.0<\/h4>\n\n
\n
1.2.1<\/h4>\n\n
\n
1.2.0<\/h4>\n\n
\n
root<\/code>, document<\/code>, host<\/code>, onCleanup<\/code>).<\/li>\n<\/ul>\n\n1.1.3<\/h4>\n\n
\n
1.1.2<\/h4>\n\n
\n
1.1.1<\/h4>\n\n
\n
1.1.0<\/h4>\n\n
\n
1.0.1<\/h4>\n\n
\n