Title: Kayzart Landing Pages — Paste & Edit AI-Generated HTML Author: K's Art Office Published: Avril 7, 2026 Last modified: Jiyè 1, 2026 --- Search plugins ![](https://ps.w.org/kayzart-live-code-editor/assets/banner-772x250.png?rev=3583981) ![](https://ps.w.org/kayzart-live-code-editor/assets/icon-256x256.png?rev=3582793) # Kayzart Landing Pages — Paste & Edit AI-Generated HTML By [K’s Art Office](https://profiles.wordpress.org/ksartoffice/) [Download](https://downloads.wordpress.org/plugin/kayzart-live-code-editor.2.1.1.zip) * [Details](https://hat.wordpress.org/plugins/kayzart-live-code-editor/#description) * [Reviews](https://hat.wordpress.org/plugins/kayzart-live-code-editor/#reviews) * [Installation](https://hat.wordpress.org/plugins/kayzart-live-code-editor/#installation) * [Development](https://hat.wordpress.org/plugins/kayzart-live-code-editor/#developers) [Support](https://wordpress.org/support/plugin/kayzart-live-code-editor/) ## Description Got a landing page from ChatGPT, Claude, or Gemini and don’t know where to put it? Kayzart is the place to paste it. 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— no child theme, no page builder, no fighting your active theme’s header and footer. **Who this is for** You 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. **What you can do** * Paste a full AI-generated page (HTML + CSS + JS) and run it as-is * Edit everything live with a CodeMirror 6 editor and instant iframe preview* Click an element in the preview to jump to its code (real-time DOM selection) * Keep the page theme-independent in Standalone mode, or render inside your theme in Theme mode * Use plain CSS or TailwindCSS (auto-compiled) per page * Run modern JavaScript (Classic script or ES Module) * Restrict external embeds with an allowlist **Works great with** ChatGPT, Claude, Gemini, v0, or any tool that hands you HTML/ CSS/JS. Kayzart doesn’t generate the code — it’s where that code becomes a real, publishable WordPress page you can keep editing. Development repository: https://github.com/ksartoffice/kayzart-live-code-editor The admin editor bundle (assets/dist/) is compiled from the TypeScript/React sources in src/ with Vite. To reproduce the build from the repository: install dependencies with `npm install` and `composer install`, then run `npm run build` to generate the bundled assets. `npm run plugin-zip` produces the distributable package. ### Credits This plugin bundles third-party libraries: * CodeMirror – MIT License – https:// github.com/codemirror * Emmet CodeMirror 6 Plugin – MIT License – https://github. com/emmetio/codemirror6-plugin * js-beautify – MIT License – https://github.com/ beautify-web/js-beautify * Lucide – ISC License – https://github.com/lucide-icons/ lucide * parse5 – MIT License – https://github.com/inikulin/parse5 * TailwindPHP– MIT License – https://github.com/ksartoffice/tailwindphp ## Screenshots [⌊Choose Normal HTML/CSS mode or TailwindCSS before editing the landing page.⌉⌊Choose Normal HTML/CSS mode or TailwindCSS before editing the landing page.⌉[ Choose Normal HTML/CSS mode or TailwindCSS before editing the landing page. [⌊Start from a clean split editor with HTML, CSS, JavaScript, and live preview panes.⌉⌊ Start from a clean split editor with HTML, CSS, JavaScript, and live preview panes .⌉[ Start from a clean split editor with HTML, CSS, JavaScript, and live preview panes. [⌊Open the full HTML import dialog for AI-generated complete HTML documents.⌉⌊Open the full HTML import dialog for AI-generated complete HTML documents.⌉[ Open the full HTML import dialog for AI-generated complete HTML documents. [⌊Paste the complete HTML document generated by ChatGPT, Claude, Gemini, or another AI tool.⌉⌊Paste the complete HTML document generated by ChatGPT, Claude, Gemini, or another AI tool.⌉[ Paste the complete HTML document generated by ChatGPT, Claude, Gemini, or another AI tool. [⌊Review the detected HTML, head, CSS, and JavaScript sections before importing.⌉⌊ Review the detected HTML, head, CSS, and JavaScript sections before importing.⌉[ Review the detected HTML, head, CSS, and JavaScript sections before importing. [⌊Edit the imported code while the live preview renders the landing page immediately.⌉⌊ Edit the imported code while the live preview renders the landing page immediately .⌉[ Edit the imported code while the live preview renders the landing page immediately. [⌊Select preview text and refine the matching element from the Elements panel.⌉⌊ Select preview text and refine the matching element from the Elements panel.⌉[ Select preview text and refine the matching element from the Elements panel. ## Installation 1. Install and activate Kayzart from Plugins. 2. Go to Pages > Add landing page to create a new landing page, or open Pages and choose Convert to landing page for an existing page. 3. Choose Normal or TailwindCSS mode. 4. Paste your AI-generated HTML/CSS/JS (or keep editing the existing page content), watch the live preview, and adjust. 5. Publish or update. Use Standalone mode for a clean, theme-free landing page. 6. Optional: Settings > Landing page settings to enable Kayzart for posts or custom post types. ## FAQ ### I have a page from ChatGPT / Claude. How do I use it in WordPress? Create a landing page, then paste the HTML, CSS, and JavaScript into their tabs. You can also convert an existing WordPress page from the page list or edit screen; Kayzart keeps the existing post content as the initial HTML. 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. ### Can AI edit the page for me, right inside WordPress? Not yet in this free plugin — 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. ### Do I need to know how to code? No — most people paste what an AI produced and tweak from there. Basic familiarity with HTML/CSS helps when fine-tuning, but isn’t required. ### Can I use shortcodes? Yes. You can place WordPress shortcodes directly in the HTML editor. They are not expanded inside the live preview iframe, but they are processed normally on the published page or front-end view. ### Can I use TailwindCSS? Yes. Choose TailwindCSS mode when creating or converting a page and Kayzart compiles utility classes automatically. It uses TailwindCSS v4, so the latest utility syntax works out of the box. ### What is Standalone mode? Standalone mode renders your landing page without the active theme’s layout — 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. ### What is Theme mode? Theme mode renders your Kayzart content inside the active theme’s template, so the page keeps your theme’s header, footer, and styling. ### Where is the code stored? HTML is stored in the post content; CSS, JavaScript, Tailwind/template modes, and other Kayzart settings are stored in post meta. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Kayzart Landing Pages — Paste & Edit AI-Generated HTML” is open source software. The following people have contributed to this plugin. Contributors * [ K’s Art Office ](https://profiles.wordpress.org/ksartoffice/) [Translate “Kayzart Landing Pages — Paste & Edit AI-Generated HTML” into your language.](https://translate.wordpress.org/projects/wp-plugins/kayzart-live-code-editor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/kayzart-live-code-editor/), check out the [SVN repository](https://plugins.svn.wordpress.org/kayzart-live-code-editor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/kayzart-live-code-editor/) by [RSS](https://plugins.trac.wordpress.org/log/kayzart-live-code-editor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.1.1 * Fix: Apply element inner HTML edits to the live preview safely. #### 2.1.0 * Add: Convert existing posts into landing pages. * Add: Format HTML, CSS, and JavaScript from the editor. * Add: Replace preview images from the media library. * Improve: Reduce preview flicker and preserve scroll position. #### 2.0.7 * Fix: Resolve front page preview returning a 404. #### 2.0.6 * Add: Export full HTML from the editor. * Improve: Refine element attribute field layout. #### 2.0.5 * Add: Select parent elements from the preview tools. * Fix: Bug fixes and stability improvements. #### 2.0.4 * Update: Rename visible brand text to Kayzart. #### 2.0.3 * Add: Show unsaved changes in the editor gutter. #### 2.0.2 * Fix: Bug fixes and stability improvements. #### 2.0.1 * Fix: Bug fixes and stability improvements. #### 2.0.0 * Refresh: Rebuilt the landing page editor for a simpler workflow. * Improve: Streamlined page creation, editing, preview, and settings. * Update: Cleaned up legacy features and internal structure. #### 1.3.6 * Update: Minor changes. #### 1.3.5 * Docs: Add screenshots section. #### 1.3.4 * Update: Dependency maintenance. #### 1.3.3 * Improve: Add resizable settings panel with width persistence. * Add: Introduce preview override action events. #### 1.3.2 * Security: Security update and hardening improvements. #### 1.3.1 * Fix: Bug fixes and stability improvements. #### 1.3.0 * Introduce CodeMirror 6 editor runtime and remove legacy bundled loader assets. #### 1.2.1 * Fix: Minor internal code cleanup #### 1.2.0 * Add JavaScript execution mode selector (Classic script / Module) in the JavaScript tab. * Add ES Module runtime contract support with context injection (`root`, `document`,` host`, `onCleanup`). #### 1.1.3 * Fix: Bug fixes and stability improvements. #### 1.1.2 * Security: Security update and hardening improvements. #### 1.1.1 * Security: Implemented security-related improvements and hardening updates. #### 1.1.0 * Add external embed allowlist settings. * Other: Internal improvements and maintenance updates. #### 1.0.1 * Initial release. ## Meta * Version **2.1.1** * Last updated **14 è ago** * Active installations **Fewer than 10** * WordPress version ** 5.9 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/kayzart-live-code-editor/) * Tags * [AI](https://hat.wordpress.org/plugins/tags/ai/)[custom html](https://hat.wordpress.org/plugins/tags/custom-html/) [html-editor](https://hat.wordpress.org/plugins/tags/html-editor/)[landing page](https://hat.wordpress.org/plugins/tags/landing-page/) [tailwind](https://hat.wordpress.org/plugins/tags/tailwind/) * [Advanced View](https://hat.wordpress.org/plugins/kayzart-live-code-editor/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/kayzart-live-code-editor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/kayzart-live-code-editor/reviews/) ## Contributors * [ K’s Art Office ](https://profiles.wordpress.org/ksartoffice/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/kayzart-live-code-editor/)